文章摘自我的个人博客: 网页地址
栅格系统
-
container:两边留白
-
container-fluid:每个设备都是100%
-
下列设备代号
- xs 手机(<768px)
- sm pad(>768px)
- md 笔记本屏幕(>992px)
- lg 大屏幕(>1200px)
- 注意
- 同一row行,格子数超过12自动换行
- 栅格属性向上兼容,即定义的xs属性在sm中也为相同布局
- 同二反之,当仅仅定义了sm,当设备大小 小于设置的设备代码最小值,会一个元素占满一整行。
CSS样式
- 按钮:
class=“btn btn-default” - 图片:100% 圆形
class=“img-responsive img-circle” - 表格:边框 鼠标移入效果
class=“table table-bordered table-hover” - 表单:
class=“form-control”
表单水平排列:form-horizontal+栅格系统
CSS组件
- 导航条
- 分页条