Chapter 6. Using the Bootstrap 3 Frontend Framework

Bootstrap 3, formerly known as Twitter's Bootstrap, is a CSS and JavaScript framework used for building application frontends. The three in Bootstrap 3 refers to the third version of this framework; wherever Bootstrap is mentioned in this book, it refers to its third version. Important changes and improvements have been made to the third version. Bootstrap 3 is not compatible with its earlier versions. Version 4 of Bootstrap will be released in 2015.

Bootstrap 3 can be used for building great frontends. You can download the complete framework, including the Less and JavaScript code, and start using it right away.

This chapter will cover the following topics:

• Bootstrap grids

• Bootstrap's build chain

• Customizing Bootstrap

• Extending Bootstrap

• Theming Bootstrap

Introduction to Bootstrap

Bootstrap provides you with a grid and many other CSS components for building your websites and web applications. You can use the compiled version of Bootstrap directly after downloading it. In this book, you will learn Bootstrap's source code and compile your own version of Bootstrap.

The Less code for compiling Bootstrap's CSS components is well organized. The outcome depends on a set of variables; these variables are grouped in a single variables.less file. The lazy loading nature of Less along with the last declaration wins rule enables you to override (or re-declare) these variables later to fit your needs.

Bootstrap also comes with a set of jQuery plugins. Some CSS components depend on these plugins and some Less codes are only needed for these plugins. Modifying or extending the jQuery plugin is beyond of the scope of this book.

The grid, all the other CSS components, and the jQuery plugins are well documented at http://getbootstrap.com/.

Bootstrap's default...

Summary

In this chapter, you learned how to use Less with Bootstrap. You can now build a customized version of Bootstrap with ease. You also learned how to extend Bootstrap and reuse its code. The Less code of Bootstrap is well organized, and it can be a great example for starting your own project or for creating your own mixins library.

In the next chapter, you will read about the other frameworks and grid systems, which can be build with Less. You will also learn to integrate and use Less with the other applications and frameworks.