Cargando…
Learning Bootstrap 4 /
Unearth the potential of Bootstrap 4 to create highly responsive and beautiful websites using modern web techniquesAbout This Book This book shows how to take advantage of the all new features introduced in Bootstrap Learn responsive web design and discover how to build mobile-ready websites with ea...
| Clasificación: | Libro Electrónico |
|---|---|
| Autor principal: | |
| Formato: | Electrónico eBook |
| Idioma: | Inglés |
| Publicado: |
Birmingham :
Packt Publishing,
2016.
|
| Edición: | Second edition. |
| Temas: | |
| Acceso en línea: | Texto completo |
Tabla de Contenidos:
- Cover; Copyright; Credits; About the Author; About the Reviewer; www.PacktPub.com; Table of Contents; Preface; Chapter 1: Introducing Bootstrap 4; Introducing Bootstrap; Bootstrap 4 advantages; Improved grid system and flexbox; Card component; Rebooting normalize.css; Internet Explorer 8 support dropped; Other updates; Implementing framework files; Inserting the JavaScript files; The starter template; HTML5 DOCTYPE; Structuring the responsive meta tag; Normalizing and Rebooting; Taking the starter template further; Using a static site generator; Converting the base template to a generator.
- Installing Harp.jsAdding Sass in Harp; Setting up the project; Inserting the CSS; Inserting the JavaScript; Other directories; Setting up the layout; Compiling your project; Previewing your project; Deploying your project; Installing Surge; Using Surge to deploy your project; Summary; Chapter 2: Using Bootstrap Build Tools; Different types of tools; Installing Node.js; Updating npm; Installing Grunt; Download the Bootstrap source files; Installing Ruby; Installing the Bundler gem; Running the documentation; Setting up the static site generator; Why use Harp.js; Installing Harp.js.
- Setting up the blog projectcss; fonts; img; js; partial; EJS files; Setting up the JSON files; Creating the data JSON file; Setting up the layout; Setting up the header; Setting up the footer; Creating our first page template; Compiling your project; Running your project; Viewing your project; A note about Sass; Summary; Chapter 3: Jumping into Flexbox; Flexbox basics and terminology; Ordering your Flexbox; Stretching your child sections to fit the parent container; Changing the direction of the boxes; Wrapping your Flexbox; Creating equal-height columns.
- Setting up the Bootstrap Flexbox layout gridUpdating the Sass variable; Setting up a Flexbox project; Adding a custom theme; Creating a basic three-column grid; Creating full-width layouts; Designing a single blog post; Summary; Chapter 4: Working with Layouts; Working with containers; Creating a layout without a container; Using multiple containers on a single page; Inserting rows into your layout; Adding columns to your layout; [Extra small]; Extra small; Small; Medium; Large; Extra large; Choosing a column class; Creating a simple three-column layout.
- Mixing column classes for different devicesWhat if I want to offset a column?; Coding the blog home page; Writing the index.ejs template; Using spacing CSS classes; Testing out the blog home page layout; Adding some content; What about mobile devices?; Using responsive utility classes; Coding the additional blog project page grids; Updating _data.json for our new pages; Creating the new page templates; Coding the contact page template; Adding the contact page body; Coding the blog post template; Adding the blog post feature; Adding the blog post body.