Question

附录里有一些相关的资料，这里就负责简述下这个前端框架，如何使用，以及制作一个简单的自适应页面。

介绍

Bootstrap是Twitter在2011年推出的一套前端框架组件，几大特点:

1. 快速开发, 组件和模块丰富
2. mobile first
3. 自适应
4. 兼容性好

使用

Bootstrap的代码可以到官方下载，我们也可以使用官方提供的CDN, 这里的例子我们就使用CDN吧。其他安装方式还可以选择:bower和npm。如果我们要自行构建代码的话，需要注意使用Autoprefixer插件，因为源码是less或sass编写的。使用官方的gurntfile构建的话，就不用管了。

基本结构

Bootstrap3是默认使用自适应的，如果要禁止自适应过程，请查阅:Disabling responsiveness

自适应的情况下，又提供了两种结构，adapt和responsive，通过给容器设置class决定:

• container: 分区间固定宽度
• container-fluid: 宽度100%

Grid System

bootstrap可以将一行分为12列布局，这就形成了一个grid system。超过十二列的话，就会自动换到下一行了。表格系统使用的时候必须包含在container或container-fluid类中。并且是由.row直接包裹.col-。

class分类

按照自适应的区间，划分了四类：

• Extra small devices Phones (<768px): xs
• Small devices Tablets (≥768px): sm
• Medium devices Desktops (≥992px): md
• Large devices Desktops (≥1200px): lg

设置偏移量

使用.col-md-offset-*来设置偏移。相当于在容器左侧添加了一个指定大小的col。

col的嵌套

在col中还可以添加.row包裹.col-, 从而形成列的嵌套，宽度是按照父级的col计算的。

改变col的顺序

有时候我们在html中写的dom顺序，添加.col-md-push-* 和 .col-md-pull-*来改变float的left和right值。

排版文字相关

见: Typography

代码相关

Code

表格，表单，按钮

• Tablets
• Forms
• Buttons

示例

Bootstrap grid examples

参考资料

• w3schools: Bootstrap
• Bootstrap: Getting started
• Bootstrap Expo