bootstrap的响应式布局

文章摘自我的个人博客: 网页地址

栅格系统

• container:两边留白

• container-fluid:每个设备都是100%

• 下列设备代号

1. xs 手机(<768px)
2. sm pad(>768px)
3. md 笔记本屏幕(>992px)
4. lg 大屏幕(>1200px)

• 注意

1. 同一row行，格子数超过12自动换行
2. 栅格属性向上兼容，即定义的xs属性在sm中也为相同布局
3. 同二反之，当仅仅定义了sm，当设备大小 小于设置的设备代码最小值，会一个元素占满一整行。

CSS样式

• 按钮：
  class=“btn btn-default”
• 图片：100% 圆形
  class=“img-responsive img-circle”
• 表格:边框 鼠标移入效果
  class=“table table-bordered table-hover”
• 表单：
  class=“form-control”
  表单水平排列：form-horizontal+栅格系统

CSS组件

• 导航条
• 分页条