Bootstrap 的简单使用-栅格系统

写在前面

下载

解压后的文件目录.PNG

之后，只需要我们在html 文件中引用他们就可以了，除此之外，Bootstrap 的所有 JavaScript 插件都依赖 jQuery，因此 jQuery 也必须在 Bootstrap 之前引入：

<!-- Bootstrap -->
<link href="./public/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<script src="./public/jquery/jquery-3.2.1.min.js"></script>
<script src="./public/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

注：
之后，我们就可以使用 Boostrap 了。注意，Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型,所以需要在每个页面如下设置：

<!DOCTYPE html>
<html lang="zh-CN">
  ...
</html>

这里进入主题，主要介绍下 Bootstrap 中的栅格系统。

栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的 mixin 用于生成更具语义的布局。
先看下示例：


效果图-平板.png	小屏幕显示.png

代码如下：

<style type="text/css" media="screen">
    .container,.container-fluid{
        border-top: 2px solid #E1E1E8;
    }
    div{
        border-left: 1px solid #E1E1E8;
        border-right: 1px solid #E1E1E8;
        border-bottom: 1px solid #E1E1E8;
    }
</style>
<body>
<p>this is for test !</p>
<div class="container-fluid">
    <div class="row">
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
  </div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>
</div>
</body>

代码解析：

.如<div class="container-fluid">，<div class="row">，
<div class="">其中的 container-fluid，row，col-md-* 为 bootstrap 的预定义类，class声明这些值后，会引用 bootstrap 中设置好的属性。当然，我们也可以将他们改变成我们自己想要的样式。
行（.row）必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
通过“行（row）”在水平方向创建一组“列（column）”。
内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为“行（row）”的直接子元素。
类似 .row 和 .col-md-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。
栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。
如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
以下附录官网有关栅格系统的信息表格：

	超小屏幕手机 (<768px)	小屏幕平板 (≥768px)	中等屏幕桌面显示器 (≥992px)	大屏幕大桌面显示器 (≥1200px)
栅格系统行为	总是水平排列		开始是堆叠在一起的，当大于这些阈值时将变为水平排列C
.container 最大宽度	None （自动）	750px	970px	1170px
类前缀	.col-xs-	.col-sm-	.col-md-	.col-lg-
列（column）数	12	12	12	12
最大列（column）宽	自动	~62px	~81px	~97px
槽（gutter）宽	30px （每列左右均有 15px）	30px （每列左右均有 15px）	30px （每列左右均有 15px）	30px （每列左右均有 15px）
可嵌套	是	是	是	是
偏移（Offsets）	是	是	是	是
列排序	是	是	是	是

实例

在不同设备上显示—移动，平板电脑，桌面

代码如下：

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <!-- Optional: clear the XS cols if their content doesn't match in height -->
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

效果图：


效果图-平板.png	效果图-移动.png	效果图-桌面.png

列偏移

使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。
代码：

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>

效果图：


效果图-列偏移-小屏幕.png	效果图-列偏移-中等屏幕.png

嵌套列

为了使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内。被嵌套的行（row）所包含的列（column）的个数不能超过12（其实，没有要求你必须占满12列）。


效果图-嵌套.png

列排序

通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序。
代码：

<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

效果图：


效果图-列排序-小屏幕.png	效果图-列排序-大屏幕.png

总结

以上为简单使用 boostrap 的栅格系统。灵活使用栅格系统可以帮助我们很好的制作出适合不同屏幕的界面来。
除了以外，栅格系统还支持 Less mixin 和变量（暂时没有用到，以后在更新）。