Bootstrap 4 – Responsive Web Design电子书

Bootstrap 4 – Responsive Web Design

Bootstrap 4 – Responsive Web Design

Credits

Authors Silvio Moreto Matt Lambert Benjamin Jakobus Jason Marah Reviewers Paula Barcante Sherwin Robles Marija Zaric Content Development Editor Roshan Kumar Graphics Jason Monterio Production Coordinator Melwyn D'sa

Preface

What this learning path covers

What you need for this learning path

Who this learning path is for

Reader feedback

Customer support

Downloading the example code

Errata

Piracy

Questions

1. Module 1

1. Getting Started

Getting Bootstrap

Setting up the framework

Folder structure

Warming up the sample example

Bootstrap required tags

Building our first Bootstrap example

The container tag

Optionally using the CDN setup

Community activity

Tools

Bootstrap and web applications

Browser compatibility

Summary

2. Creating a Solid Scaffolding

Understanding the grid system

Building our scaffolding

Setting things up

Offset columns

Completing the grid rows

Nesting rows

Finishing the grid

Fluid container

We need some style!

There are headings everywhere

Playing with buttons

More typography and code tags

Manipulating tables

Styling the buttons

Like a boss!

Final thoughts

Box-sizing

Quick floats

Clearfix

Font definitions for typography

Summary

3. Yes, You Should Go Mobile First

Making it greater

Bootstrap and the mobile-first design

How to debug different viewports at the browser

Cleaning up the mess

Creating the landing page for different devices

Mobile and extra small devices

Tablets and small devices

Desktop and large devices

Summary

4. Applying the Bootstrap Style

Changing our grid layout

Starting over the grid system

The header

The introduction header

The about section

The features section

The price table section

The footer

Forming the forms

Newsletter form

Contact form

Let's start with some JavaScript

The sign-in form

Images

Helpers

Floating and centering blocks

Context colors

Spacing

Responsive embeds

Summary

5. Making It Fancy

Using Bootstrap icons

Paying attention to your navigation

Until the navigation collapse

Using different attachments

Coloring the bar

Dropping it down

Customizing buttons dropdown

Making an input grouping

Getting ready for flexbox!

Understanding flexbox

Playing with Bootstrap and flexbox

Summary

6. Can You Build a Web App?

Understanding web applications

Creating the code structure

Adding the navigation

Adding the search input

Time for the menu options!

The option at the thumbnail

Adding the Tweet button

Customizing the navigation bar

Setting up the custom theme

Fixing the list navigation bar pseudo-classes

You deserve a badge!

Fixing some issues with the navigation bar

Do a grid again

Playing the cards

Learning cards in Bootstrap 4

Creating your own cards

Adding Cards to our web application

Another card using thumbnails

Implementing the main content

Making your feed

Doing some pagination

Creating breadcrumbs

Finishing with the right-hand-side content

Summary

7. Of Course, You Can Build a Web App!

Alerts in our web app

Dismissing alerts

Customizing alerts

Waiting for the progress bar

Progress bar options

Animating the progress bar

Creating a settings page

Pills of stack

Tabs in the middle

Adding the tab content

Using the Bootstrap tabs plugin

Creating content in the user info tab

The stats column

Labels and badges

Summary

8. Working with JavaScript

Understanding JavaScript plugins

The library dependencies

Data attributes

Bootstrap JavaScript events

Awesome Bootstrap modals

Modal general and content

The modal header

The modal body

The modal footer

Creating our custom modal

A tool for your tip

Pop it all over

Popover events

Making the menu affix

Finishing the web app

Summary

9. Entering in the Advanced Mode

The master plan

The last navigation bar with flexbox

The navigation search

The menu needs navigation

Checking the profile

Filling the main fluid content

From the side stacked menu

I heard that the left menu is great!

Learning the collapse plugin

Using some advanced CSS

Filling the main content

Rounding the charts

Creating a quick statistical card

Getting a spider chart

Overhead loading

Fixing the toggle button for mobile

Summary

10. Bringing Components to Life

Creating the main cards

The other card using Bootstrap components

Creating our last plot

Fixing the mobile viewport

Fixing the navigation menu

The notification list needs some style

Adding the missing left menu

Aligning the round charts

Learning more advanced plugins

Using the Bootstrap carousel

Customizing carousel items

Creating slide indicators

Adding navigation controls

Other methods and options for the carousel

The Bootstrap spy

Summary

11. Making It Your Taste

Customizing a Bootstrap component

The taste of your button

Using button toggle

The checkbox toggle buttons

The button as a radio button

Doing the JavaScript customization

Working with plugin customization

The additional Bootstrap plugins

Creating our Bootstrap plugin

Creating the plugin scaffold

Defining the plugin methods

The initialize method and plugin verifications

Adding the Bootstrap template

Creating the original template

The slide deck

The carousel indicators

The carousel controls

Initializing the original plugin

Making the plugin alive

Creating additional plugin methods

Summary

2. Module 2

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

3. Module 3

1. Revving Up Bootstrap

Introducing our demo project

What Bootstrap 4 Alpha 4 has to offer

Layout

Content styling

Components

Mobile support

Utility classes

Cross-browser compatibility

Sass instead of Less

From pixel to root em

No more support for Internet Explorer 8

A new grid tier

Bye-bye GLYPHICONS

Bigger text: no more panels, wells, and thumbnails

New and improved form input controls

Customization

Setting up our project

Summary

2. Making a Style Statement

The grid system

Containers

container

container-fluid

Rows

Columns

Nesting

Pulling and pushing

Offsetting

Image elements

Responsive images

Image modifiers

Responsive utilities

Helper classes

Context

Centering and floating

Toggling visibility

Text alignment and transformation

Summary

3. Building the Layout

Splitting it up

Adding Bootstrap components

Jumbotron

Tabs

Carousel

Cards

Navbar

Styling

Summary

4. On Navigation, Footers, Alerts, and Content

Fixating the navbar

Improving navigation using Scrollspy

Customizing scroll speed

Icons

A note on icons in Bootstrap 3

Using and customizing alerts

Creating a footer

Creating and customizing forms

Form validation

Progress indicators

Adding content using media objects

Figures

Quotes

Abbreviations

Summary

5. Speeding Up Development Using jQuery Plugins

Browser detection

Enhanced pagination using bootpag

Displaying images using Bootstrap Lightbox

Improving our price list with DataTables

Summary

6. Customizing Your Plugins

Anatomy of a plugin

JavaScript

Setup

Class definition

Data API implementation

jQuery

Sass

Customizing plugins

Customizing Bootstrap's jQuery alert plugin

The markup

Extending alert's style sheets

Extending alert's functionality with JavaScript

Customizing Bootstrap's jQuery carousel plugin

The markup

Extending carousel's functionality with JavaScript

Extending carousel's style sheets

Writing a custom Bootstrap jQuery plugin

The idea – the A11yHCM plugin

The a11yHCM.js file

The markup

Adding some style

Summary

7. Integrating Bootstrap with Third-Party Plugins

Building a testimonial component with Salvattore

Introducing Salvattore

Integrating Salvattore with Bootstrap

Adding Animate.css to MyPhoto

Bouncing alerts

Animating a Salvattore grid

Hover

Adding Hover to MyPhoto

Making the navbar grow

Awesome Hover icons

Salvattore Hover

Summary

8. Optimizing Your Website

CSS optimization

Inline styles

Long identifier and class names

Shorthand rules

Grouping selectors

Rendering times

Minifying CSS and JavaScript

Introducing Grunt

Minification and concatenation using Grunt

Running tasks automatically

Stripping our website of unused CSS

Processing HTML

Deploying assets

Stripping CSS comments

JavaScript file concatenation

Summary

9. Integrating with AngularJS and React

Introducing AngularJS

Setting up AngularJS

Improving the testimonials component

Making testimonials dynamic

Making a Promise with $q

Creating an AngularJS directive

Writing the testimonials template

Testing the testimonial directive

Importing the Salvatorre library

Introducing React

Setting up React

Making a Gallery component in React

Using carousel in React

Summary

Bibliography

Index