2018-09-29

bootstrap 容器

container-fluid 流体

container

1170

970

750

100%

bootstrap 栅格系统

bootstrap将页面横向分为12等分,按照12等分定义了适应不同宽度等分的样式类,这些样式类组成了一套响应式、移动设备优先的流式栅格系统:

1、col-lg-2、col-md-

3、col-sm-4、col-xs-

bootstrap响应式查询区间:

1、大于等于768

2、大于等于992

3、大于等于1200

bootstrap 表单

1、form 声明一个表单域

2、form-inline 内联表单域

3、form-horizontal 水平排列表单域

4、form-group 表单组、包括表单文字和表单控件

5、form-control 文本输入框、下拉列表控件样式

6、checkbox checkbox-inline 多选框样式

7、radio radio-inline 单选框样式

8、input-group 表单控件组

9、input-group-addon 表单控件组物件样式 10、input-group-btn 表单控件组物件为按钮的样式

10、form-group-lg 大尺寸表单

11、form-group-sm 小尺寸表单

bootstrap 按钮

1、btn 声明按钮

2、btn-default 默认按钮样式

3、btn-primay

4、btn-success

5、btn-info

6、btn-warning

7、btn-danger

8、btn-link

9、btn-lg

10、btn-md

11、btn-xs

12、btn-block 宽度是父级宽100%的按钮

13、active

14、disabled

15、btn-group 定义按钮组

bootstrap 图片

img-responsive 声明响应式图片

bootstrap 隐藏类

1、hidden-xs

2、hidden-sm

3、hidden-md

4、hidden-lg

bootstrap 字体图标

通过字体代替图标,font文件夹需要和css文件夹在同一目录

bootstrap 下拉菜单

1、dropdown-toggle

2、dropdown-menu

bootstrap 选项卡

1、nav

2、nav-tabs

3、nav-pills

4、tab-content

bootstrap 导航条

1、navbar 声明导航条

2、navbar-default 声明默认的导航条样式

3、navbar-inverse 声明反白的导航条样式

4、navbar-static-top 去掉导航条的圆角

5、navbar-fixed-top 固定到顶部的导航条

6、navbar-fixed-bottom 固定到底部的导航条

7、navbar-header 申明logo的容器

8、navbar-brand 针对logo等固定内容的样式

9、navbar-left 菜单靠左

10、navbar-right 菜单靠右

11、nav navbar-nav 定义导航条中的菜单

12、navbar-form 定义导航条中的表单

13、navbar-btn 定义导航条中的按钮

14、navbar-text 定义导航条中的文本

bootstrap 模态框

1、modal 声明一个模态框

2、modal-dialog 定义模态框尺寸

3、modal-lg 定义大尺寸模态框

4、modal-sm 定义小尺寸模态框

5、modal-header

6、modal-body

7、modal-footer

你可能感兴趣的:(2018-09-29)