Bootstrap零基础入门教程(三)

我来详细解释Bootstrap零基础入门教程(三)的完整攻略。

什么是Bootstrap的栅格系统
栅格系统是Bootstrap最重要的组件之一。Bootstrap的栅格系统可以简单地将屏幕分成12个等宽的列，使用者可以通过HTML class属性轻松地布置宽度。
如何使用Bootstrap的栅格系统
（1）首先，要在HTML文件中导入Bootstrap的CSS和JavaScript。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap 栅格系统</title>
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
</body>
</html>

（2）然后，在body标签中添加一个class属性为“container”的div元素，它定义了Bootstrap容器的范围。

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

（3）接着，在这个div元素内添加一个行（Row）元素，表示一行12列的容器。

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

（4）最后，在这个行（Row）中添加列（Column）元素，比如下面的例子，创建了一个包含两列的行，第一列占4列宽度，第二列占8列宽度。

<body>
  <div class="container">
    <div class="row">
      <div class="col-md-4">这是第一列</div>
      <div class="col-md-8">这是第二列</div>
    </div>
  </div>
</body>

我们可以借用Bootstrap提供的CSS选择器class，来设置列的宽度、响应式布局等样式，像上面的“col-md-4”和“col-md-8”分别表示左列占4格、右列占8格。

如何布置多行和多列
（1）一个行（Row）元素只能容纳12格宽度，如果超过了12格就会发生换行。
（2）例如，我们可以使用两个行（Row）来布置多列，其中第一个行包含两个4格的列，第二个行包含一个8格的列。

<body>
  <div class="container">
    <div class="row">
      <div class="col-md-4">这是第一列</div>
      <div class="col-md-4">这是第二列</div>
    </div>
    <div class="row">
      <div class="col-md-8">这是一行里的第三列</div>
    </div>
  </div>
</body>

响应式布局和偏移
（1）Bootstrap使用class属性为“col--”的CSS选择器来在不同的设备层面上实现响应式布局。
（2）例如，“col-xs-”（超小屏幕），“col-sm-”（小屏幕），“col-md-”（中等屏幕）和“col-lg-”（大屏幕）。这些标记只是“xs”标记的扩展，所以事实上你可以直接使用“col--”进行样式设置。
（3）另外，Bootstrap还提供了一个“offset--”类选择器，可以用于将列向右移动。

<body>
  <div class="container">
    <div class="row">
      <div class="col-md-4 col-md-offset-4">这个列向右移动了4格</div>
    </div>
  </div>
</body>

在上述的例子中，列向右偏移了4个12分之一的宽度。

以上是Bootstrap零基础入门教程(三)完整攻略，其中包含两条示例，分别是：
1. 创建一个包含两列的行，第一列占4列宽度，第二列占8列宽度。
2. 使用一个响应式偏移类选择器，将列向右移动了4个12分之一的宽度。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Bootstrap零基础入门教程(三) - Python技术站

Bootstrap零基础入门教程(三)

相关文章