Bootstrap Basics

Author: yifei / Created: June 7, 2017, 3:04 p.m. / Modified: June 7, 2017, 3:52 p.m. / Edit




  1. 已经有了良好的界面设计,包含了各种细节
  2. 在已有的非Bootstrap的界面上进行改动的时候


add this to headers <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

grid system


container class should be added to the root element where you would like to use bootstrap.

container-fluid is for full-width container.


from the official documentation:

  • Content should be placed within columns, and only columns may be immediate children of rows.
  • Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows.
  • Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. grid classes are col-xs-*, col-sm-*, col-md-*, col-lg-*.
phone tablet desktop large desktop
Container width None (auto) 750px 970px 1170px
Class prefix .col-xs- .col-sm- .col-md- .col-lg-

The gutter width for bootstrap is 15px for each column, 30px between.

generally, you should use the col-sm-N family of classes. such that it applies for all devices except phones.

use col-xs-offset-* classes to offset the columns.

use col-xs-pull-* classes to pull column to left, and push to push to right.


from here: