Bootstrap components can be broadly divided into layout framework, page layout, basic components, jQuery plug-in and variable compiled LESS.

The following is a brief introduction to the functions of each module in Bootstrap. (Recommended learning: Bootstrap video tutorial)

(1) Page layout

Layout is essential for every project. Bootstrap has extended an excellent grid layout based on the 960 grid system, and has more powerful functions in the responsive layout, allowing the grid layout to adapt to various devices. This grid layout is also quite simple to use. You only need to apply it according to the HTML template to easily build the desired layout effect.

In addition, changing the class name in the template can achieve different layout styles. For example, to implement a common fixed layout, you only need to add the container class name to HTML; to implement a fluid layout, you only need to add the container-fluid class name to HTML.

Bootstrap also designed Responsive for developers to make the layout framework even better. Developers can override any style on this basis to achieve the ideal responsive design.

(2) Page layout

The quality of page layout directly affects the product style, that is to say, whether the page design is good-looking. In Bootstrap, page layout is based on a global concept, and formats such as body text, paragraph text, emphasis text, titles, code styles, buttons, forms, tables, etc. are customized.

Bootstrap uses Sprites technology in the Icon part and prepares hundreds of commonly used Icon applications for users.

It is necessary to recommend the Font Awesome project to readers. It is an Icon theme extended by Dave Gandy based on Bootstrap. The biggest feature is that no pictures are used in the entire set of icons. The Font Awesome project mainly uses CSS3's @font-face and pseudo-elements to implement it.

(3) Basic components

Basic components are one of the essences of Bootstrap, and they are all interactive components that developers usually need to use. For example, website navigation, tabs, toolbars, breadcrumbs, paging bar, prompt labels, product display, prompt information blocks and progress bars, etc. These components are equipped with jQuery plug-ins. Using them can greatly improve the user's interactive experience and make the product no longer dull and unattractive.

(4) jQuery plug-in

The jQuery plug-in in Bootstrap is mainly used to help developers realize the function of interacting with users. Bootstrap 1 provides 6 common plug-ins.

How to use the jQuery plug-in in Bootstrap 2 requires detailed analysis of specific issues based on the documentation provided by Bootstrap and the parameters of each plug-in. Only by fully understanding it can we use it flexibly.

(5) Dynamic style language LESS

LESS is a dynamic CSS language. It dynamically expands traditional CSS based on JavaScript engine or server side, and has more powerful features. functionality and better flexibility. Based on LESS, editing CSS can be like using a programming language, defining variables, embedded declarations, mixed modes, operations, etc.

There is a set of edited LESS frameworks in Bootstrap. Developers can apply it to their own projects, or edit LESS files through methods such as less.js, Less.app or Node.js. Once the LESS file is compiled, the Bootstrap framework only contains CSS styles, which means there are no redundant images, Flash and other elements.

For more technical articles related to Bootstrap, please visit the Bootstrap Tutorial column to learn!

The above is the detailed content of What are the building blocks of bootstrap?. For more information, please follow other related articles on the PHP Chinese website!