Bootstrap网格系统


简而言之，Bootstrap网格系统可帮助您创建响应式布局，它包含一个行和列系统，可帮助您构建内容。

行是水平的列组，每行最多12列。在每行中，内容放置在列内，并且可以跨越1到12列之间的任何位置。

Bootstrap有五种不同类型的网格层，即Extra small，Small，Medium，Large和Extra large，为每个网格层定义了一个断点。

Bootstrap使用像素来定义网格层断点，作为网格层断点的不同视口宽度为：

怎么运行的

容器

容器是_包含_网格的最外层元素，在屏幕中间使用container作为固定宽度的容器（大屏幕上的额外边距）或container-fluid的全宽度。

<div class="container"></div>
行

使用row对row进行分组，这将使所有内容保持正确排列并帮助您构建网格。

<div class="row"></div>
列

列类指示您希望在每行可能使用的12列中使用的列数。例如col-sm-6将意味着你的专栏将使用了宽度的一半row在小屏幕上，和col-lg-4将使用了大屏幕上的三分之一。

以下是如何定义类前缀以在各种屏幕尺寸上使用一个列宽：

  • 超小 col-1
  • 小 col-sm-1
  • 中等 col-md-1
  • 大 col-lg-1
  • 超大 col-xl-1
    <div class="col-sm-1"></div>

例

一个全宽网格，有四列，每个列在xs屏幕上占据整行，在sm和md屏幕上占据半行，在大屏幕和上面的屏幕上占据行宽度的四分之一。

<div class="container-fluid">
  <div class="row">
    <div class="col-12 col-sm-6 col-lg-4">First Column</div>
    <div class="col-12 col-sm-6 col-lg-4">Second Column</div>
    <div class="col-12 col-sm-6 col-lg-4">Third Column</div>
    <div class="col-12 col-sm-6 col-lg-4">Forth Column</div>
  </div>
 </div>

请注意，未定义col-md和col-xl ，其中未定义大小，它将默认为下一个已指定的较小大小。

Bootstrap提供了一个现成的12列网格系统，用于布局。请考虑以下代码。

<div class="container">
    <div class="row">
        <div class="col-md-6">Content</div>
        <div class="col-md-6">Content</div>
    <div>
   </div>

哪里：

- col = column
 - md = screen size
 - 6 = column width

作为12列网格系统，所有用户定义的网格列宽度必须最多为12。

屏幕尺寸值可以分配如下：

  • xs - <768px手机

  • sm - <992px平板电脑

  • md - <1200px笔记本电脑

  • lg - > 1200px台式机

    Bootstrap首先是移动的并且响应迅速。

    移动优先意味着网格布局将自动响应较小的屏幕。然后，HTML定义更大屏幕的网格布局。

以下代码和图像显示了使用不同列宽的可能性。

<div class="container">
        <div class="row">
            <div class="example col-md-6">Content</div>
            <div class="example col-md-6">Content</div>
        <div>
    </div>

    <div class="container">
        <div class="row">
            <div class="example col-md-4">Content</div>
            <div class="example col-md-4">Content</div>
            <div class="example col-md-4">Content</div>
        <div>
    </div>

    <div class="container">
        <div class="row">
            <div class="example col-md-3">Content</div>
            <div class="example col-md-3">Content</div>
            <div class="example col-md-3">Content</div>
            <div class="example col-md-3">Content</div>
        <div>
    </div>

    <div class="container">
        <div class="row">
            <div class="example col-md-2">Content</div>
            <div class="example col-md-2">Content</div>
            <div class="example col-md-2">Content</div>
            <div class="example col-md-2">Content</div>
            <div class="example col-md-2">Content</div>
            <div class="example col-md-2">Content</div>
        <div>
    </div>

    <div class="container">
        <div class="row">
            <div class="example col-md-1">Content</div>
            <div class="example col-md-1">Content</div>
            <div class="example col-md-1">Content</div>
            <div class="example col-md-1">Content</div>
            <div class="example col-md-1">Content</div>
            <div class="example col-md-1">Content</div>
            <div class="example col-md-1">Content</div>
            <div class="example col-md-1">Content</div>
            <div class="example col-md-1">Content</div>
            <div class="example col-md-1">Content</div>
            <div class="example col-md-1">Content</div>
            <div class="example col-md-1">Content</div>
        </div>
    </div>

更多BootStrap教程

学习更多BootStrap教程