写在前面
最近在学习了写前端页面，其中使用了 Bootstrap 的前端框架，感觉非常好用。
Bootstrap 来自 Twitter ，是目前很受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。Bootstrap 是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用其提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery 的强大的插件系统，能够快速法开发出原型或者构建整个 app。Bootstrap 写出来的界面简介，使用方便，兼容大部分的 JQuery 插件。并且 Boostrap 是 gitHub 上的开源项目，可以获取它的源码。
这里附上中文官网地址：http://www.bootcss.com/
英文官网地址则是：https://getbootstrap.com/
Boostrap 目前最新版本是 Boostrap3 v3.3.7( Bootstrap 4 是预览版)
下载
boostrap 在官网下载即可，这里使用版本v3.3.7 >>> 传送门
下载好的文件是一个压缩包，直接解压即可。将文件复制到工程之中即可。
解压后的文件目录.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 和变量 （暂时没有用到，以后在更新）。
网友评论