bootstrap has several containers-Front-end Q&A-php.cn

bootstrap has several containers

青灯夜游

Release： 2022-01-10 11:39:31

Original

4079 people have browsed it

Bootstrap has two types of containers: 1. Fixed layout container. Put the default grid into the container of "class="container"" to create a fixed layout; 2. Fluid layout container, put the fluid layout container Put the grid into the fluid container with "class="container-fluid"" to create a fluid layout.

bootstrap has several containers

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

Bootstrap container

In Bootstrap, containers are the basis of responsive layout. Bootstrap recommends that all content be defined in containers, and containers are an essential prerequisite for enabling the Bootstrap grid system.

Bootstrap provides two types of layout containers, one is a fixed-width layout container and the other is a fluid layout container. Placing the grid in some kind of container allows you to layout it accordingly.

Fixed layout

Put Bootstrap's default grid into a container with class="container" to create a fixed-width layout. Fixed layouts are centered on the entire page. For example:

<body>
  <div class="container">
    ...
  </div>
</body>

Copy after login

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

bootstrap has several containers

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

<body>
  <div class="container">
    <div class="row">
      <div class="span4">span4</div>
      <div class="span8">span8</div>
    </div>
    <div class="row">
      <div class="span3">span3</div>
      <div class="span6">span6</div>
      <div class="span3">span3</div>
    </div>
  </div>
</body>

Copy after login

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

bootstrap has several containers

Flowing layout

Similarly, you can create a fluid layout by placing Bootstrap's fluid grid into a fluid container with class="container-fluid". Fluid layout will fill the entire viewport width. For example:

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span2">
      <!--Sidebar content-->
    </div>
    <div class="span10">
      <!--Body content-->
    </div>
  </div>
</div>

Copy after login

The layout effect is as shown below (Bootstrap flow layout):

bootstrap has several containers

[Related recommendations: "bootstrap tutorial 》】

The above is the detailed content of bootstrap has several containers. For more information, please follow other related articles on the PHP Chinese website!