布局容器
.container 固定宽度
.container-fluid 全屏
.row 行
.col-lg- 大屏幕
.col-md- 中屏幕
变量
@grid-columns: 12 列数
@grid-gutter-width: 30px 槽宽
@grid-float-breakpoint: 768px 媒体查询阙值(确定合适让列浮动)
中心内容
.lead 段落突出显示
内联文本元素
改变包含内容背景色
删除线
下划线
小号文本
加粗
斜体
文本对齐
.text-left 靠左
.text-center 居中
.text-right 靠右
.text-justify 文本对齐
.text-nowrap 不自动换行
.text-lowercase 文本小写
.text-uppercase 文本大写
.text-capitalize 首字母大写
引用
引用
blockquote.blockquote-reverse 引用右对齐
列表
.list-unstyled 移除默认样式
.list-inline 所有列表放同一行
.dl-horizontal 设置了浮动和偏移,水平排列
代码
包裹内联样式的代码片段
标记用户通过键盘输入的内容
.pre-scrollable 使
元素可滚动,代码块区域最大高度为340px变量
变量
表格
.table 表格
.table-striped 条纹状表格
.table-bordered 带边框的表格
.table-hover 鼠标悬停
.table-condensed 紧缩表格
.table-responsive 响应式表格
.success 绿色
.active 灰色
.info 青色
.warning 黄色
.danger 红色
表单
.form-control 向所有的文本元素 、<textarea> 和 .form-group 表单 .form-inline 内联表单(向左对齐的,标签是并排的) 每个输入控件设置 label 标签,屏幕阅读器将正确识别 .form-horizontal 水平排列的表单 text 文本 password 密码 datetime 日期时间 datatime-local 当地日期时间 date 日期 month 月 time 事件 input week 周 number 数字 email 邮件 url 链接 search 搜索 tel 电话 color 颜色 rows="3" 根据需要改变 rows 属性 .checkbox 多选框 .radio 单选框 .checkbox-inline 内联多选框 .radio-inline 内联单选框 选择框(select) .form-control 下拉菜单 multiple="multiple" 允许用户选择多个选项 .form-control-static 需要在一个水平表单内的表单标签后放置纯文本时,请在 上使用 class .form-control-static 可以禁用 中包含的所有控件 .has-feedback 为输入框添加额外的图标 .form-control-feedback 为输入框添加额外的图标子元素 .sr-only 隐藏表单控件的 (而不是使用其它标签选项,如 aria-label 属性), 一旦它被添加,Bootstrap 会自动调整图标的位置。 按钮 .btn 按钮 .btn-default 默认样式 .btn-primary 原始按钮样式 .btn-success 绿色 .btn-info 青色 .btn-warning 黄色 .btn-danger 红色 .btn-link 链接式按钮 .btn-block 块级按钮(拉伸至父元素100%的宽度) .active 激活状态 .disabled 禁用按钮 图片 .img-responsive 响应式图片 .img-rounded 图片圆角 .img-circle 圆形图片 .img-thumbnail 缩略图/有边框 辅助类 .pull-left 左浮动 .pull-right 右浮动 .center-block 水平居中 .clearfix 清除浮动 .show 强制元素显示 .hidden 强制元素隐藏 .sr-only 除了屏幕阅读器外,其他设备上隐藏元素 .sr-only-focusable 与 .sr-only 类结合使用,在元素获取焦点时显示(如:键盘操作的用户) .text-hide 将页面元素所包含的文本内容替换为背景图 .close 显示关闭按钮 .caret 显示下拉式功能 下拉菜单 .dropdown 下拉菜单 .dropdown-menu 下拉选项 .dropup 上拉菜单 .dropdown-toggle 下拉菜单切换 .dropdown-menu-right 右对齐 .dropdown-menu-left 左对齐 .dropdown-header 标题 .drivider 分割线 .disabled 禁用项 按钮组 .btn-group 按钮组 .btn-toolbar 多重按钮组 .btn-group-vertical 水平按钮组 .btn-group-justified 两端对齐排列的按钮组 输入框组 .input-group 输入框组 .input-group-addon 单独一侧加控件 .input-group-btn 单独一侧加按钮 导航元素 .nav nav-tab 标签页 .nav nav-pills 胶囊式标签页 .nav nav-pills nav-stacked 胶囊式标签页以垂直方向堆叠排列的 .nav-justified 两端对齐的标签页 .disabled 禁用的标签页 .tab-content 与 .tab-pane 和 data-toggle="tab" (data-toggle="pill" ) 一同使用, 设置标签页对应的内容随标签的切换而更改 .tab-pane 与 .tab-content 和 data-toggle="tab" (data-toggle="pill")一同使用, 设置标签页对应的内容随标签的切换而更改 导航条 .navbar .navbar-defalut 默认样式 .navbar-toggle 响应式导航栏 .narbar-header 导航栏头部 .narbar-brand 导航栏图标 .navbar-form 导航栏表单 .navbar-btn 导航栏按钮 .navbar-text 导航栏文本 .navbar-link 非导航的链接 .navbar-left 左对齐 .navbar-right 右对齐 .navbar-fixed-top 固定在顶部 .navbar-fixed-botton 固定在底部 .navbar-static-top 静态的顶部 .navbar-inverse 反色导航栏 分页 .pagination .disabled 定义不可点击的链接 .active 指示当前的页面 翻页 .pager .previous 上一页左对齐 .next 下一页右对齐 .disabled 禁用 面包屑导航 .breadrumb 标签 .lable lable-default 默认灰色标签 .lable lable-primary 蓝色标签 .lable lable-success 绿色标签 .lable lable-info 浅蓝色标签 .lable lable-warning 黄色标签 .lable lable-danger 红色标签 徽章 .badge 巨幕 .jumbotron 页头 .page-header 缩略图 .thumbnail 警告框 .alert alert-sccess 绿色警告框 .alert alert-info 浅蓝色警告框 .alert alert-warning 黄色警告框 .alert alert-danger 红色警告框 .alert-dismissible 可关闭的警告框 进度条 .progress .progress-bar 显示进度百分比 .progress-bar-striped 条纹进度条 多媒体对象 .media .media-left 媒体左边内容 .media-object 媒体对象 .media-body 媒体主体 .media-heading 媒体标题 .media-list 媒体对象列表 列表组 .list-group .list-group-item 列表组子元素 面版 .panel .panel-default 默认面版 .panel-body 面版主体 .panel-heading 面版标题 .panel-footer 面版脚注 嵌入内容 .embed-responsive .embed-responsive-item 嵌入内容子元素 ————————————————