bootstrap
简单、直观、强悍的前端开发框架,让web开发更迅速、简单。 来自Twitter,是目前很受欢迎的前端框架之一。 Bootrstrap是基于HTML、CSS、JavaScript的,让书写代码更容易。 移动优先,响应式布局开发。
bootstrap中文网址:
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、大于等于7682、大于等于9923、大于等于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 表单控件组物件为按钮的样式11、form-group-lg 大尺寸表单12、form-group-sm 小尺寸表单
bootstrap 按钮
1、btn 声明按钮2、btn-default 默认按钮样式3、btn-primay4、btn-success5、btn-info6、btn-warning7、btn-danger8、btn-link9、btn-lg10、btn-md11、btn-xs12、btn-block 宽度是父级宽100%的按钮13、active14、disabled15、btn-group 定义按钮组
bootstrap 图片
img-responsive 声明响应式图片
bootstrap 隐藏类
1、hidden-xs2、hidden-sm3、hidden-md4、hidden-lg
bootstrap 字体图标
通过字体代替图标,font文件夹需要和css文件夹在同一目录
bootstrap 下拉菜单
1、dropdown-toggle2、dropdown-menu
bootstrap 选项卡
1、nav2、nav-tabs3、nav-pills4、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等固定内容的样式11、nav navbar-nav 定义导航条中的菜单12、navbar-form 定义导航条中的表单13、navbar-btn 定义导航条中的按钮14、navbar-text 定义导航条中的文本9、navbar-left 菜单靠左10、navbar-right 菜单靠右
bootstrap 模态框
1、modal 声明一个模态框2、modal-dialog 定义模态框尺寸3、modal-lg 定义大尺寸模态框4、modal-sm 定义小尺寸模态框5、modal-header6、modal-body7、modal-footer