Mastering Bootstrap 4电子书

Mastering Bootstrap 4

Mastering Bootstrap 4

Credits

About the Authors

About the Reviewers

www.PacktPub.com

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