Shulou(Shulou.com)06/03 Report--

This article is to share with you what the Bootstrap module is like. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

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

(1) Page layout

Layout is essential for every project. Bootstrap extends an excellent grid layout based on the 960 grid system, and has a more powerful function in the responsive layout, which can adapt the grid layout to a variety of devices. This grid layout is also quite easy to use, and you can easily build the desired layout effect by applying it according to the HTML template.

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

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

(2) Page typesetting

The quality of page layout directly affects the product style, that is to say, whether the page design is good-looking or not. In Bootstrap, page typesetting is based on the global concept, customizing the main text, paragraph text, emphasis text, title, Code style, buttons, forms, tables and other formats.

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

It is necessary to recommend the Font Awesome project to the reader. It is an Icon theme extended by Dave Gandy on the basis of Bootstrap. The biggest feature is that no pictures are used in the whole set of icons. The Font Awesome project is mainly implemented with CSS3's @ font-face and pseudo elements.

(3) basic components

Basic components are one of the quintessence of Bootstrap, which are interaction components that developers usually need to use. For example, site navigation, tabs, toolbars, breadcrumbs, paging bars, prompt tags, product displays, prompt blocks, progress bars, and so on. These components are equipped with jQuery plug-ins, which can greatly improve the user's interactive experience and make the product less dull and unattractive.

(4) jQuery plug-in

The jQuery plug-in in Bootstrap is mainly used to help developers interact with users. Bootstrap 1 provides six common plug-ins.

How to use the jQuery plug-in in Bootstrap 2 also needs to be analyzed according to the documentation provided by Bootstrap and the parameters of each plug-in. Only when we fully understand it can we use it flexibly.

(5) dynamic style language LESS

LESS is a dynamic CSS language, which dynamically extends the traditional CSS based on the JavaScript engine or server. It has more powerful functions and better flexibility. Based on LESS, editing CSS can define variables, embedded declarations, mixed modes, operations, and so on, just like using a programming language.

There is an edited LESS framework in Bootstrap that developers can apply to their own projects and edit LESS files through less.js, Less.app or Node.js. Once the LESS file is compiled, the Bootstrap framework contains only CSS styles, which means there are no extra images, Flash, and so on.

Thank you for reading! This is the end of this article on "what is the composition of the Bootstrap module?". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.