Bootstrap-网格演示

Bootstrap是一种流行的前端框架，其网格系统是其最重要的部分之一。网格系统可以帮助开发人员快速实现响应式布局，并以可适应不同屏幕尺寸的方式呈现内容。

基础网格系统

Bootstrap的网格系统是一个基于12个列的栅格系统。使用以下类来创建基础网格布局：

• .container：将内容包装在固定宽度（根据屏幕尺寸变化）的容器中。
• .row：在容器内创建以相等宽度分成12列的行。
• .col-：指定列的大小，从.col-1到.col-12。例如，.col-6将元素分为半宽度。
• .col-sm-，.col-md-，.col-lg-：指定在不同屏幕尺寸下的列宽。例如，.col-md-6将该列设置为中等宽度，而在小屏幕上则为全宽度。.col-sm-12将该列设置为在小屏幕上占满整个宽度。

以下是一个示例基础布局：

<div class="container">
  <div class="row">
    <div class="col-sm-6 col-md-4 col-lg-3">1</div>
    <div class="col-sm-6 col-md-4 col-lg-3">2</div>
    <div class="col-sm-6 col-md-4 col-lg-3">3</div>
    <div class="col-sm-6 col-md-4 col-lg-3">4</div>
  </div>
</div>

在这个例子中，有一个容器（.container），一个带有四列的行（.row），以及包含每列内容的列（.col-）。每个列都指定其大小，然后在不同屏幕尺寸下进行响应式调整。

偏移和嵌套网格

在Bootstrap的网格系统中，您还可以使用偏移和嵌套来创建更复杂的布局。以下是一些情况的示例：

偏移（Offset）

您可以使用.offset-类来将列偏移指定数量的列。

<div class="container">
  <div class="row">
    <div class="col-md-4">1</div>
    <div class="col-md-4 col-md-offset-4">2</div>
  </div>
</div>

在这个例子中，有一个容器（.container），一个带有两个列的行（.row），一列占据了四个栅格，而另一列则占据剩余的四个栅格并向右偏移了四个栅格。

嵌套（Nesting）

您可以将行嵌套在其他行中，以创建更具结构性的布局。在这种情况下，您需要注意使用的列数，以便确保它们在父行中适当地长度。

<div class="container">
  <div class="row">
    <div class="col-md-8">
      <div class="row">
        <div class="col-md-6">1</div>
        <div class="col-md-6">2</div>
      </div>
    </div>
    <div class="col-md-4">3</div>
  </div>
</div>

在这个例子中，有一个容器（.container），第一行有两个列（.col-md-8和.col-md-4），而该行的左侧列包含了一个行（.row），该行有两个列（.col-md-6）。

响应式断点

Bootstrap的网格系统使用四个断点来定义响应式类，这些类可以应用于网格类以使其在不同的屏幕尺寸下产生不同的效果。

以下是四个断点及其应用的类：

• XS：.col-xs-
• SM：.col-sm-
• MD：.col-md-
• LG：.col-lg-

需要注意的是，列类是响应式的，因此在不同的屏幕尺寸下，您可能需要使用不同的类以产生不同的效果。以下是一个例子：

<div class="container">
  <div class="row">
    <div class="col-sm-6 col-md-4 col-lg-3">1</div>
    <div class="col-sm-6 col-md-4 col-lg-3">2</div>
    <div class="col-sm-6 col-md-4 col-lg-3 hidden-xs">3</div>
    <div class="col-sm-6 col-md-4 col-lg-3 hidden-xs">4</div>
  </div>
</div>

在这个例子中，四个列被创建，在小，中和大屏幕上都是响应式的（.col-xs-会在超小型设备上自动应用）。但是，前两个列在所有屏幕尺寸下都是可见的，而后两个则只在屏幕分辨率大于等于中等分辨率时可见。这是通过使用.hidden-xs类来实现的。

总之，Bootstrap网格系统是一种非常实用的工具，可以帮助开发人员快速地创建具有响应式布局的站点，并以可适应不同屏幕尺寸的方式呈现内容。