admin管理员组

文章数量:1642431

Bootstrap第二章：Bootstrap布局

文章目录

  • Bootstrap第二章：Bootstrap布局
    • 1.Bootstrap容器
      • 1.1Bootstrap介绍
      • 1.2容器类型
    • 2.Bootstrap网格系统
      • 2.1Bootstrap网格类
      • 2.2Bootstrap网格的基本结构
        • 2.2.1运用：设计一个多列网格结构。
      • 2.3网格列偏移（ Offsetting Grid Column ）
        • 2.3.1设计偏移网格列案例
      • 2.4网格列嵌套（Nesting Grid Column）
        • 2.4.1设计嵌套网格列案例
      • 2.5网格列对齐
        • 2.5.1垂直对齐
        • 2.5.2水平对齐
    • 3.布局
      • 3.1固定布局
      • 3.2流体布局
      • 3.3响应布局

布局是指对某物的规划、设计或安排，比如网页。Bootstrap为web页面提供了一些基本的布局。下面会介绍boostrap布局。

1.Bootstrap容器

1.1Bootstrap介绍

容器是Bootstrap中最基本的布局元素，在使用网格系统时是必需的。

容器用于用一些填充填充内容。在固定宽度布局的情况下，它们还用于将内容水平地以页面中心对齐。

1.2容器类型

Bootstrap提供了三种不同类型的容器类:

  • .container，它在每个像素区间内都有一个最大宽度，即固定容器，在相同的像素区间内，它的显示像素相同（下方有具体表格）
  • .container-fluid,它在所有页面大小都具有100%的宽度。元素的显示会随着页面大小的变化而变化。
  • .container-{breakpoint}，它在指定的像素区间断点（区间分界点）之前具有100%的宽度

在容器的实际使用中不用容器和使用“container”的显示宽度不同。下面是图片对比（使用的为笔记本电脑）

不用容器，发现数字1在最左边

container，发现数字1不是在最左边

container-fluid

附上代码（boby部分）

<body>
<div class = "container">
    <div class="row">
        <div class="col">1</div>
        <div class="col">2</div>
        <div class="col">3</div>
        <div class="col">4</div>
        <div class="col">5</div>
        <div class="col">6</div>
        <div class="col">7</div>
        <div class="col">8</div>
        <div class="col">9</div>
        <div class="col">10</div>
        <div class="col">11</div>
        <div class="col">12</div>

    </div>
</div>
</body>

原因为当使用.container类时，容器的实际宽度如下所示:

  • 如果屏幕宽度宽度大于等于992px，则为960px。
  • 如果屏幕宽度宽度大于等于576px，则显示为540px

下面是具体表格

类似的.container-lg 类也存在这种情况。

2.Bootstrap网格系统

Bootstrap网格系统提供了一种快速和方便的方式来创建响应式网站布局。最新的Bootstrap 4版本引入了新的移动优先的flexbox网格系统，随着设备或屏幕宽度大小的增加，可适当扩展到12列。

Bootstrap 4包含预定义的网格类，用于快速为不同类型的设备(如手机、平板电脑、笔记本电脑和台式电脑等)创建网格布局。

使用网格系统注意：

  • 为了正确对齐和填充，必须将行放在.container类中。
  • 内容应该放在列中，而且只有列可以是行的直接子元素。
  • 如果在一行中放置超过12列，则列将被放置在新行中。
  • 列包含用于控制列之间空间的填充。
  • 列通过填充在列内容之间创建空白。因此，可以在行上使用.no- guters类删除行空白和列填充。使用该类删除行空白后对应内容会填充空白，同时同一行中的其他列不再生效。
  • 预定义的网格类(如.col-4)可用于快速创建网格布局

2.1Bootstrap网格类

下面是用于Bootstrap网格的类,*的取值是1到12.

  • .col-*类为处于纵向模式的超小型设备(移动电话)创建网格列，
  • .col-sm*类为处于横向模式的移动电话等小屏幕设备创建网格列，
  • .col-md-*类为中等屏幕设备(如平板电脑)，
  • .col-lg-*类为大型设备(如台式电脑)，
  • .col-xl-*类为超大桌面屏幕创建网格列。
  • .no-gutters类可以在行上使用.no- guters类删除行空白和列填充。（对应offset）
  • .row用于响应列的容器
  • .row-cols-设置每行能出现的列数，列能设置宽度。

下面是具体表格对照

2.2Bootstrap网格的基本结构

<div class="container">  
      <!--控制列的宽度和它们在不同设备上的显示方式-> 
      <div class="row"> 
        <div class="col-*-*"></div> 
        <div class="col-*-*"></div> 
      </div> 
      <!--或者让Bootstrap自动处理布局 --> 
      <div class="row"> 
        <div class="col"></div> 
        <div class="col"></div> 
        <div class="col"></div> 
      </div> 
      </div>

第一个例子:创建一个行。然后，添加所需的列数(带有适当的.col-*-*类的标记)。

注意以下情况，这意味着不同视口显示的列的宽度不同，大于等于992px的将显示列的宽度为6，大于等于576但小于等于992px的将显示列宽为3.

<div class="col-lg-6 col-sm-3">div3</div>

第二个例子，不用写明添加的列数，而是让bootstrap处理布局，它会创建宽度相等的列。例如：:两个“col”元素=每个col的50%宽度。

2.2.1运用：设计一个多列网格结构。
<div class="container" >
<div class="row"  style="background-color: #0dcaf0"  >
<!-- class="col-lg-6"意为合并该行的6列为一列   -->
    <!--    shadow-box用于设置阴影，也就是边框-->
    <div class="col-lg-6"style="box-shadow:  inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
        <h1> Orange </h1>
        <p>
            The orange is a hybrid between pomelo (Citrus maxima) and
            mandarin (Citrus reticulata). The chloroplast genome, and therefore the
            maternal line, is that of pomelo. The sweet orange has had its full genome
            sequenced.
        </p>
    </div>
    <div class="col-lg-6"style="box-shadow:  inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
        <h1> Apple </h1>
        <p>
            Apples grown from seed tend to be very different from thos
            e of the parents, and the resultant fruit
            frequently lack desired characteristics.Generally then, apple cultivars ar
            e propagated by clonal grafting onto rootstocks.
        </p>
    </div>
    </div>
</div>

输出结果

2.3网格列偏移（ Offsetting Grid Column ）

我们可以使用列偏移类，如offset-lg-*，将网格列向右移动以实现对齐目的。

这些类会在左边增加指定的列数，例如，offset-md-4将它从原来的位置向右移动四列。

<div class="container">
  <div class="row">
    <div class="col-md-4">col-md-4 </div>
    <div class="col-md-8 "> col-md-8</div>
  </div>
  <div class="row">
      <!--    向右偏移4列-->
    <div class="col-md-8 offset-md-4 ">
      col-md-8 .offset-md-4
    </div>
  </div>
</div>

得到输出如

发现col-md-8 .offset-md-4向右偏移了4列。

2.3.1设计偏移网格列案例

案例：产品介绍

设计偏移网格列

<!--规定文档的主要内容-->
<!--margin-bottom设置元素的下外边距-->
<main id="main" style="margin-bottom: 100px">
  <div class="container">
    <h1> Offset Grid System</h1>
    <div class="row">
      <div class="col-md-6 offset-md-4 bg-light" style="background-color: #dedef8; box-shadow: inset 1px
1px 1px #444, inset   1px 1px 1px #444;">
        <h1> Apple </h1>
        <p>
          An apple is an edible fruit produced by an apple tree (Mal
          us domestica).
          Apple trees are cultivated worldwide and are the most widely grown species
          in the genus Malus. The tree originated in Central Asia,
          where its wild ancestor, Malus sieversii, is still found today.

        </p>
        <p>
          Apples grown from seed tend to be very different from thos
          e of the parents, and the resultant fruit frequently lack desired
          characteristics. Generally then, apple cultivars are propagated by clonal
          grafting onto rootstocks.
        </p>
      </div>
    </div>
    <div class="row">
      <div class="col-md-6 offset-md-6 bg-light"
           style="background-color: #dedef8; box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
        <h1> orange </h1>
        <p>
          The orange is the fruit of various citrus species in the f
          amily Rutaceae (see list of plants known as orange);
          it primarilyrefers to Citrus  sinensis,which is also called sweet orangeto
          distinguish it from the related Citrus × aurantium, referred to as bitter
          orange.
        </p>
        <p>
          The orange is a hybrid between pomelo (Citrus maxima) and
          mandarin (Citrus reticulata).The chloroplast genome, and therefore the mat
          ernal line, is that of pomelo.The sweet orange has had its full genome
          sequenced.
        </p>
      </div>
    </div>
  </div>
</main>

输出结果

2.4网格列嵌套（Nesting Grid Column）

Bootstrap网格列也是可嵌套的，这意味着可以将行和列放在现有列中。但是，放置列数的总和为12不变，即在单行中列数的总和应该等于12或更少。

代码使用演示：

<div class="container">
  <div class="row">
    <div class="col-sm-8 ">Column left</div>

<!--合并4列，并在其中嵌套加入两行内容-->
    <div class="col-sm-4 bg-primary">
      <div class="row">
        <div class="col-12 bg-primary"> Row span 12 </div>
      </div>
      <div class="row">
        <div class="col-6 bg-primary"> Row span 6</div>
        <div class="col-6 bg-primary"> Row span 6 </div>
      </div>
    </div>
  </div>
</div>

输出结果

可以发现右边嵌套了两行内容。

2.4.1设计嵌套网格列案例

与之前设计网格列偏移的相同，仍是案例：产品介绍

代码演示：

<main id="main" >
  <div class="container">
  <h1>Nesting Grid Column</h1>
  <div class="row">
    <div class="col-sm-8 bg-light"
         style="background-color: #dedef8; box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
      <h1> Apple </h1>
      <p>
        An apple is an edible fruit produced by an apple tree (Mal
        us domestica).
        Apple trees are cultivated worldwide and are the most widely grown species
        in the genus Malus. The tree originated in Central Asia,
        where its wild ancestor, Malus sieversii, is still found today.
      </p>
    </div>
    <div class="col-sm-4 bg-light" style="background-color: #dedef8;
     box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<!--      网格嵌套-->
      <div class="row">
        <h3> Apple in Detail </h3>
        <p>
          Apples grown from seed tend to be very different from
          those of the parents, and the resultant fruit frequently lacks desired cha
          racteristics. Generally then, apple cultivars are propagated by clonal
          grafting onto rootstocks.
        </p>
      </div>
        <div class="row">
          <div class="col-6 bg-light"
               style="background-color: #dedef8; box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <h1> orange </h1>
            <p>
              The orange is the fruit of various citrus species
              in the family Rutaceae (see list of plants known as orange);
            </p>
          </div>
          <div class="col-6 bg-light"
               style="background-color: #dedef8;    box-shadow:inset -1px 1px 1px #444, inset 1px -1px 1px #444;">
            <h5> orange in detail </h5>
            <p>
              The orange is a hybrid between pomelo (Citrus
              maxima) and mandarin (Citrus reticulata).The chloroplast genome,
              and therefore the maternal line, is that of pomelo.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</main>

输出结果

过程出现错误，行无法填满问题：


原因是右下角的两个块嵌套到了右上角的Apple in Detail块，而不是整个页面容器中（通俗点说就是div关闭地方不对）

2.5网格列对齐

2.5.1垂直对齐

您可以使用类.align-items-start、.align-items-center和.align-items-end分别在容器的顶部、中间和底部垂直对齐网格列

代码演示

html中的body部分

<div class="container">
<!--  顶部对齐-->
  <div class="row align-items-start">
    <div class="col">Column one</div>
    <div class="col">Column two</div>
    <div class="col">Column three</div>
  </div>
  <!--  中间对齐-->
  <div class="row align-items-center">
    <div class="col">Column one</div>
    <div class="col">Column two</div>
    <div class="col">Column three</div>
  </div>
  <!--  底部对齐-->
  <div class="row align-items-end">
    <div class="col">Column one</div>
    <div class="col">Column two</div>
    <div class="col">Column three</div>
  </div>
  <div class="row">
    <div class="col align-self-start">Column one</div>
    <div class="col align-self-center">Column two</div>
    <div class="col align-self-end">Column three</div>
  </div>
</div>

css部分

  <style>
    .row{
      /*设置一块区域的最小大小，方便观察对齐方式*/
      min-height: 10rem;
      /*设置元素的上外边距*/
      margin-top: 1rem;
      background: #dbdfe5;
    }
    .col{
      padding: 10px 15px;
      background: #abb1b8;
      border: 1px solid rgba(0,0,0,0.5)
    }
  </style>

输出结果

2.5.2水平对齐

可以使用类.justify-content-start、.justify-content-center和.justify- end分别在容器的左边、中间和右边水平对齐网格列。

3.布局

3.1固定布局

使用Bootstrap 4，仍然可以基于固定数量的像素创建网页布局，但是，容器宽度取决于屏幕宽度宽度（在一定屏幕宽度宽度范围内，容器宽度不变），布局也会响应。

代码演示

<div class = "container"> 
        <h2>Fixed Width Container</h2> 
        This is a simple web page with fixed width container by using  
        <code>.container</code> class. 
     </div>

3.2流体布局

类.container-fluid来创建流体布局，以在所有设备尺寸中容器宽度都是视口宽度100%。

container-fluid类只是应用宽度:100%，而不是针对不同的视口大小应用不同的宽度。布局仍然是响应的，并且可以像往常一样使用网格类。

代码演示

 <div class = "container-fluid"> 
        <h2>Full Width Container</h2> 
        This is a simple web page with full-width container by using  
        <code>.container-fluid</code> class. 
     </div>

3.3响应布局

Bootstrap 4从一开始就具有响应性和移动友好性。它的五层网格类提供了对布局的更好控制，以及如何在不同类型的设备(如手机、平板电脑、笔记本电脑和台式机、大屏幕设备等)上呈现布局。

举个例子

使用的class代码是，下面图片是要输出的内容。

 <div class="col-md-6 col-lg-4 col-xl-3">



这时，在超大型设备上，屏幕会显示4行信息，而在大型设备上一行只会显示3行信息。不同类型设备上显示显示的列数不同。

本文标签： 第二章布局bootstrap

版权声明：本文标题：bootstrap第二章：bootstrap布局 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/dongtai/1729341023a1197536.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。