Mastering Bootstrap 4

Mastering Bootstrap 4

Overview of this book

Bootstrap 4 is a free CSS and JavaScript framework that allows developers to rapidly build responsive web-interfaces. Right from the first chapter, dive into building a customized Bootstrap website from scratch. Get to grips with Bootstrap’s key features and quickly discover the various ways in which Bootstrap can help you develop web-interfaces. Then take walk through the fundamental features, such as its grid system, helper classes, and responsive utilities. When you have mastered these, you will discover how to structure page layouts, use forms, style different types of content and utilize Bootstrap’s various navigation components. Among other things, you will also tour the anatomy of a Bootstrap plugin, creating your own custom components and extending Bootstrap using jQuery. Finally, you will discover how to optimize your website and integrate it with third-party frameworks. By the end of this book, you will have a thorough knowledge of the framework’s ins and outs, and be able to build highly customizable and optimized web interfaces.

Mastering Bootstrap 4

Credits

About the Authors

About the Reviewers

www.PacktPub.com

Preface

Free Chapter

Revving Up Bootstrap

Introducing our demo project

What Bootstrap 4 Alpha 4 has to offer

Setting up our project

Summary

Making a Style Statement

Text alignment and transformation

Summary

Building the Layout

Splitting it up

Adding Bootstrap components

Summary

On Navigation, Footers, Alerts, and Content

Fixating the navbar

Improving navigation using Scrollspy

Customizing scroll speed

Icons

Using and customizing alerts

Creating a footer

Creating and customizing forms

Form validation

Progress indicators

Adding content using media objects

Figures

Quotes

Abbreviations

Summary

Speeding Up Development Using jQuery Plugins

Browser detection

Enhanced pagination using bootpag

Displaying images using Bootstrap Lightbox

Improving our price list with DataTables

Summary

Customizing Your Plugins

Anatomy of a plugin

Customizing plugins

Writing a custom Bootstrap jQuery plugin

Summary

Integrating Bootstrap with Third-Party Plugins

Building a testimonial component with Salvattore

Hover

Summary

Optimizing Your Website

CSS optimization

Minifying CSS and JavaScript

Introducing Grunt

Running tasks automatically

Stripping our website of unused CSS

JavaScript file concatenation

Summary

Integrating with AngularJS and React

Introducing AngularJS

Introducing React

Summary

Customer Reviews

5 star

4 star

3 star

2 star

1 star

Writing a custom Bootstrap jQuery plugin

Following the patterns that we have seen in alert.js and carousel.js, we are going to build our own plugin. Of course, before we start coding, we need to understand what we want to build.

The idea – the A11yHCM plugin

The A11yHCM plugin, depending on your background and experience, may give you a clue about what we want to build. A11y is the accepted shorthand for Accessibility, or Web Accessibility. W3C defines web accessibility as follows:

	"Web accessibility means that people with disabilities can use the web. More specifically, web accessibility means that people with disabilities can perceive, understand, navigate, and interact with the web, and that they can contribute to the web. Web accessibility also benefits others, including older people with changing abilities due to aging."
	--https://www.w3.org/WAI/intro/accessibility.php

HCM is an acronym for an accessibility-related term: High Contrast Mode. HCM, in its simplest form, modifies the...

Mastering Bootstrap 4

Mastering Bootstrap 4

Overview of this book

Related Content you might be interested in

Current Title:

Mastering Bootstrap 4

Writing a custom Bootstrap jQuery plugin

The idea – the A11yHCM plugin