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

This article mainly introduces the relevant knowledge of the layout in bootstrap, the content is detailed and easy to understand, the operation is simple and fast, and it has a certain reference value. I believe you will gain something after reading the layout of this bootstrap. Let's take a look at it.

Bootstrap has two kinds of layout: 1, fixed width layout, put the default grid into the container of "class=" container ", you can create the layout; 2, flow layout, put the flow grid into the flow container of" class= "container-fluid", you can create the layout.

Operating environment of this tutorial: Windows7 system, bootsrap3.3.7 version, DELL G3 computer

Bootstrap layout

Bootstrap provides two types of layout containers, one is a fixed width layout container, and the other is a streaming layout container. By placing the grid in a container, the corresponding layout can be achieved.

Fixed layout

Place the default grid of Bootstrap in the container of class= "container" to create a fixed-width layout. The fixed layout is centered on the entire page. Such as:

...

The effect is shown below (Bootstrap fixed layout container):

To put it simply, you can create a centered, fixed-width layout by putting all the content into a class= "container" container. Specific examples are as follows:

Span4 span8 span3 span6 span3

The layout effect is shown in the following figure (Bootstrap fixed layout example):

Streaming layout

Similarly, you can create a streaming layout by placing the streaming grid of Bootstrap into the streaming container of class= "container- streaming uid". The streaming layout fills the entire viewport width. Such as:

The layout effect is shown in the following figure (Bootstrap streaming layout):

This is the end of the article on "what are the layout modes in bootstrap?" Thank you for reading! I believe you all have a certain understanding of the knowledge of "what is the layout in bootstrap". If you want to learn more, you are welcome to follow the industry information channel.

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.