Learning Bootstrap 4 - Second Edition电子书

Learning Bootstrap 4 - Second Edition

Learning Bootstrap 4 - Second Edition

Credits

About the Author

About the Reviewer

www.PacktPub.com

eBooks, discount offers, and more

Why subscribe?

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Downloading the example code

Downloading the color images of this book

Errata

Piracy

Questions

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.js

Adding 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

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 project

css

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

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 grid

Updating 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

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

Small

Medium

Large

Extra large

Choosing a column class

Creating a simple three-column layout

Mixing column classes for different devices

What 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

Converting the mailing list section to a partial

Summary

5. Working with Content

Reboot defaults and basics

Headings and paragraphs

Lists

Preformatted text

Tables

Forms

Learning to use typography

Using display headings

Customizing headings

Using the lead class

Working with lists

Coding an unstyled list

Creating inline lists

Using description lists

How to style images

Making images responsive

Using image shapes

Aligning images with CSS

Coding tables

Setting up the basic table

Inversing a table

Inversing the table header

Adding striped rows

Adding borders to a table

Adding a hover state to rows

Color-coating table rows

Making tables responsive

Summary

6. Playing with Components

Using the button component

Basic button examples

Creating outlined buttons

Checkbox and radio buttons

Creating a radio button group

Using button groups

Creating vertical button groups

Coding a button dropdown

Creating a pop-up menu

Creating different size drop-down buttons

Coding forms in Bootstrap 4

Setting up a form

Adding a select dropdown

Inserting a textarea tag into your form

Adding a file input form field

Inserting radio buttons and checkboxes to a form

Adding a form to the blog contact page

Updating your project

Additional form fields

Creating an inline form

Hiding the labels in an inline form

Adding inline checkboxes and radio buttons

Changing the size of inputs

Controlling the width of form fields

Adding validation to inputs

Using the Jumbotron component

Adding the Label component

Using the Alerts component

Adding a dismiss button to alerts

Using Cards for layout

Moving the Card title

Changing text alignment in cards

Adding a header to a Card

Inverting the color scheme of a Card

Adding a location card to the Contact page

Updating the Blog index page

Adding the sidebar

Setting up the Blog post page

How to use the Navs component

Creating tabs with the Nav component

Creating a pill navigation

Using the Bootstrap Navbar component

Changing the color of the Navbar

Making the Navbar responsive

Adding Breadcrumbs to a page

Adding Breadcrumbs to the Blog post page

Using the Pagination component

Adding the Pager to the Blog post template

How to use the List Group component

Summary

7. Extending Bootstrap with JavaScript Plugins

Coding a Modal dialog

Coding the Modal dialog

Coding Tooltips

Updating the project layout

How to use Tooltips

How to position Tooltips

Adding Tooltips to buttons

Updating the layout for buttons

Avoiding collisions with our components

Using Popover components

Updating the JavaScript

Positioning Popover components

Adding a Popover to a button

Adding our Popover button in JavaScript

Using the Collapse component

Coding the collapsable content container

Coding an Accordion with the Collapse component

Coding a Bootstrap Carousel

Adding the Carousel bullet navigation

Including Carousel slides

Adding Carousel arrow navigation

Summary

8. Throwing in Some Sass

Learning the basics of Sass

Using Sass in the blog project

Updating the blog project

Using variables

Using the variables in CSS

Using other variables as variable values

Importing partials in Sass

Using mixins

How to use operators

Creating a collection of variables

Importing the variables to your custom style sheet

Adding a color palette

Adding some background colors

Setting up variables for typography

Coding the text color variables

Coding variables for links

Setting up border variables

Adding variables for margin and padding

Adding mixins to the variables file

Coding a border-radius mixin

Customizing components

Customizing the button component

Extending the button component to use our color palette

Writing a theme

Common components that need to be customized

Theming the drop-down component

Customizing the alerts component

Customizing the typography component

Summary

9. Migrating from Version 3

Browser support

Big changes in version 4

Switching to Sass

Updating your variables

Updating @import statements

Updating mixins

Additional global changes

Using REM units

Other font updates

New grid size

Migrating components

Migrating to the Cards component

Using icon fonts

Migrating JavaScript

Miscellaneous migration changes

Migrating typography

Migrating images

Migrating tables

Migrating forms

Migrating buttons

Summary