Bootstrap栅格系统学习笔记

什么是Bootstrap栅格系统

Bootstrap栅格系统是一套用于响应式Web设计的前端框架。它将页面划分为12个等宽的列，然后使用CSS中的媒体查询来调整这些列的宽度，从而适应不同屏幕大小的设备，例如大桌面电脑、笔记本电脑、平板电脑和手机等。在Bootstrap中，使用<div>元素来创建行（.row）和列（.col-*）。

Bootstrap栅格系统的用法

1. 创建一行

要创建一行，请使用.row类。在行内添加列。

<div class="row">
  <div class="col-sm-4">1/3</div>
  <div class="col-sm-4">1/3</div>
  <div class="col-sm-4">1/3</div>
</div>

2. 创建列

要创建列，请使用.col-*类。在这里，*是一个数字，表示该列在不同大小的屏幕上所占的宽度百分比。

<div class="col-xs-*">
  <!-- 超小屏幕，小于768px -->
</div>
<div class="col-sm-*">
  <!-- 小屏幕，大于等于768px -->
</div>
<div class="col-md-*">
  <!-- 中等屏幕，大于等于992px -->
</div>
<div class="col-lg-*">
  <!-- 大屏幕，大于等于1200px -->
</div>

使用Bootstrap栅格系统时，请牢记以下几点：

• 列的总宽度应为12个单位。
• 列可以包含行，而行可以包含列。这样可以创建更复杂的布局。
• 列中的内容应该尽可能少或为空。如果您想在一个列中包含更多内容，请使用更多的行或更多的列。
• 在使用Bootstrap栅格系统时，请确保使用媒体查询以便为不同的屏幕大小设置列宽。

下面是一个示例，展示如何在不同大小的屏幕上使用Bootstrap栅格系统：

<div class="container">
  <h2>掌握Bootstrap栅格系统</h2>
  <p>在此示例中，我们将展示如何使用Bootstrap栅格系统来创建响应式布局。</p>
  <div class="row">
    <div class="col-sm-4" style="background-color:lavender;">1/3</div>
    <div class="col-sm-8" style="background-color:lavenderblush;">2/3</div>
  </div>
</div>

上述示例中，我们创建了一个具有两个列的行。在小屏幕上，第一个列（.col-sm-4）占据网格的四分之一，第二个列（.col-sm-8）占据网格的四分之三。在大屏幕上，第一个列仍占据网格的四分之一，而第二个列则占据网格的四分之三。

示例说明

示例1：三列布局

下面是一个三列布局的示例。它展示了如何将页面分成三列，并在每个列中放置一个文本框。

<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <input type="text" class="form-control" placeholder="Left Column">
    </div>
    <div class="col-sm-4">
      <input type="text" class="form-control" placeholder="Middle Column">
    </div>
    <div class="col-sm-4">
      <input type="text" class="form-control" placeholder="Right Column">
    </div>
  </div>
</div>

在小屏幕上，这三列将以等宽显示。在大屏幕上，每个列将占据总宽度的三分之一。

示例2：图片和文本混排

下面是一个图片和文本混排的示例。它展示了如何将一个图片和一些文本混合在同一个列中，并使用媒体查询在不同的屏幕大小下对它们进行布局。

<div class="container">
  <div class="row">
    <div class="col-sm-6 col-md-4">
      <img src="img/example.jpg" class="img-responsive">
    </div>
    <div class="col-sm-6 col-md-8">
      <h3>我们是谁</h3>
      <p>我们是一家专业化的Web设计工作室。</p>
      <h3>我们的团队</h3>
      <p>我们有一支伟大的团队。</p>
    </div>
  </div>
</div>

在小屏幕上，图片将占据总宽度的一半，文本占另一半。在中等屏幕和大屏幕上，图片将占据总宽度的三分之一，文本占据总宽度的三分之二。