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

Running tasks automatically

Now that we know how to configure and use Grunt to minify our style sheets, let us turn our attention to task automation. That is, how we can execute our Grunt minification task automatically as soon as we make changes to our source files. To this end, we will learn about a second Grunt package, called grunt-contrib-watch (https://github.com/gruntjs/grunt-contrib-watch). As with contrib-css-min, this package can be installed using npm:

npm install grunt-contrib-watch --save-dev

Open package.json and verify that grunt-contrib-watch has been added as a dependency:

    { 
        "name": "MyPhoto", 
        "version": "0.1.0", 
        "devDependencies": { 
            "grunt": "^0.4.5", 
            "grunt-contrib-cssmin": "^0.14.0", 
            "grunt-contrib-watch": "^0.6.1" 
        } 
    }

Next, tell Grunt about our new package by adding grunt.loadNpmTasks('grunt-contrib-watch'); to Gruntfile.js. Furthermore...

Mastering Bootstrap 4

Mastering Bootstrap 4

Overview of this book

Related Content you might be interested in

Current Title:

Mastering Bootstrap 4

Running tasks automatically