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

Chapter 6. Customizing Your Plugins

So far, we have built the MyPhoto demo page leveraging all that Bootstrap has to offer, customizing Bootstrap's themes and components, and using jQuery plugins along the way. In this chapter, we will be delving deep into Bootstrap's jQuery plugins with extensive customization via JavaScript and CSS.

We will take some of the plugins we have introduced into MyPhoto, take a look under the hood, and, step by step, we will customize them to meet the needs of our page. Plugins will be examined and extended throughout this chapter in an effort to not only make our page better, but to also build our knowledge of how jQuery plugins are built and behave within Bootstrap's ecosystem.

When we are comfortable with customizing Bootstrap's jQuery plugins, we will create a fully customized jQuery plugin of our own for MyPhoto.

Summarizing all of this, in this chapter we will globally do the following:

Learn about the anatomy of a Bootstrap jQuery plugin
Learn how to extensively...

Mastering Bootstrap 4

Mastering Bootstrap 4

Overview of this book

Related Content you might be interested in

Current Title:

Mastering Bootstrap 4

Chapter 6. Customizing Your Plugins