Complete Bootstrap: Responsive Web Development with Bootstrap 4电子书

Complete Bootstrap: Responsive Web Development with Bootstrap 4

Introduction

What's in it for me – Course Roadmap?

How is this course different from other courses?

What will I get from this course?

Prerequisites

Credits

Meet your experts

1. Setting up Our First Blog Project

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

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

Browser support

Vendor prefixes

Troubleshooting

Summary

Assessments

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

Assessments

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

Assessments

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

Assessments

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

Assessments

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

Assessments

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

Assessments

8. Bootstrapping Your Portfolio

What we'll build

Surveying the exercise files

Marking up the carousel

How does the carousel work?

Changing the carousel by adding new animations

JavaScript events of the Carousel plugin

Creating responsive columns

Turning links into buttons

Understanding the power of Sass

Customizing Bootstrap's Sass according to our needs

Customizing variables

Customizing the navbar

Adding the logo image

Adding icons

Styling the carousel

Adding top and bottom padding

Repositioning the carousel indicators

Styling the indicators

Tweaking the columns and their content

Styling the footer

Recommended next steps

Summary

Assessments

9. Bootstrapping Business

Sizing up our beginning files

Setting up the basics of your design

Adding drop-down menus to our navbar

Setting the bottom border for the page header

Adding images with holder.js

Creating a complex banner area

Placing a logo above the navbar

Reviewing and checking navbar drop-down items

Adding utility navigation

Making responsive adjustments

Implementing the color scheme

Styling the collapsed navbar

Customizing the drop-down menus

Styling the horizontal navbar

Enabling Flexbox support

Designing a complex responsive layout

Adjusting the large and extra-large layout

Adjusting the medium layout for tablet-width viewports

Adjusting headings, font sizes, and buttons

Enhancing the primary column

Adjusting the tertiary column

Fine touches for multiple viewports

Laying out a complex footer

Setting up the markup

Adjusting for tablet-width viewports

Adding a targeted responsive clearfix

Refining the details

Summary

Assessments

10. Bootstrapping E-Commerce

Surveying the markup for our products page

Styling the breadcrumbs, page title, and pagination

Adjusting the products grid

Don't forget the Card module

Cards with the CSS3 Flexbox layout module

Styling the options sidebar

Setting up basic styles

Styling the Clearance Sale link

Styling the options list

Adding Font Awesome checkboxes to our option links

Using Sass mixins to arrange option links in columns

Adjusting the options list layout for tablets and phones

Collapsing the options panel for phone users

Adding a search form to your designing

Using the Typeahead plugin

Summary

Assessments

11. Bootstrapping a One-Page Marketing Website

Overview

Surveying the starter files

Viewing the page content

Adding Font Awesome to our project

Adjusting the navbar

Customizing the jumbotron

Refining the jumbotron message design

Beautifying the features list

Tackling customer reviews

Positioning and styling captions

Refining the caption position

Adjusting for tiny screens

Creating attention-grabbing pricing tables

Setting up the variables, files, and markup

Beautifying the table head

Styling the table body and foot

Differentiating the packages

Adjusting for small viewports

Providing a visual hierarchy to our tables

Adding the final touches

Adding ScrollSpy to the navbar

Animating the scroll

Summary

Assessments

12. Assessment Answers