前端工程师手册

Bootstrap学习指南

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

介绍

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

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

使用

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

基本结构

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

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

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

Grid System

bootstrap可以将一行分为12列布局,这就形成了一个grid system。超过十二列的话,就会自动换到下一行了。表格系统使用的时候必须包含在containercontainer-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的leftright值。

排版文字相关

见: Typography

代码相关

Code

表格,表单,按钮

示例

Bootstrap grid examples

参考资料