Bootstrap常用单词组

标签：屏幕   ogre   bootstrap   内容替换   颜色   reverse   oat   list   table   

布局容器
.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 首字母大写
引用

 元素可滚动，代码块区域最大高度为340px

变量

 变量

表格

.table 表格

.table-striped 条纹状表格

.table-bordered 带边框的表格

.table-hover 鼠标悬停

.table-condensed 紧缩表格

.table-responsive 响应式表格

.success 绿色

.active 灰色

.info 青色

.warning 黄色

.danger 红色

表单

.form-control 向所有的文本元素 、 和 <select><br />
.form-group 表单<br />
.form-inline 内联表单(向左对齐的，标签是并排的)<br />
<label for=""></label> 每个输入控件设置 label 标签，屏幕阅读器将正确识别<br />
.form-horizontal 水平排列的表单<br />
text 文本<br />
password 密码<br />
datetime 日期时间<br />
datatime-local 当地日期时间<br />
date 日期<br />
month 月<br />
time 事件<br />
input week 周<br />
number 数字<br />
email 邮件<br />
url 链接<br />
search 搜索<br />
tel 电话<br />
color 颜色<br />
rows="3" 根据需要改变 rows 属性<br />
.checkbox 多选框<br />
.radio 单选框<br />
.checkbox-inline 内联多选框<br />
.radio-inline 内联单选框<br />
选择框(select)<br />
.form-control 下拉菜单<br />
multiple="multiple" 允许用户选择多个选项<br />
.form-control-static 需要在一个水平表单内的表单标签后放置纯文本时，请在 <p> 上使用 class .form-control-static<br />
<fieldset></fieldset> 可以禁用 <fieldset> 中包含的所有控件<br />
.has-feedback 为输入框添加额外的图标<br />
.form-control-feedback 为输入框添加额外的图标子元素<br />
.sr-only 隐藏表单控件的 <label> （而不是使用其它标签选项，如 aria-label 属性）， 一旦它被添加，Bootstrap 会自动调整图标的位置。<br />
按钮<br />
.btn 按钮<br />
.btn-default 默认样式<br />
.btn-primary 原始按钮样式<br />
.btn-success 绿色<br />
.btn-info 青色<br />
.btn-warning 黄色<br />
.btn-danger 红色<br />
.btn-link 链接式按钮<br />
.btn-block 块级按钮(拉伸至父元素100%的宽度)<br />
.active 激活状态<br />
.disabled 禁用按钮<br />
图片<br />
.img-responsive 响应式图片<br />
.img-rounded 图片圆角<br />
.img-circle 圆形图片<br />
.img-thumbnail 缩略图/有边框<br />
辅助类<br />
.pull-left 左浮动<br />
.pull-right 右浮动<br />
.center-block 水平居中<br />
.clearfix 清除浮动<br />
.show 强制元素显示<br />
.hidden 强制元素隐藏<br />
.sr-only 除了屏幕阅读器外，其他设备上隐藏元素<br />
.sr-only-focusable 与 .sr-only 类结合使用，在元素获取焦点时显示(如：键盘操作的用户)<br />
.text-hide 将页面元素所包含的文本内容替换为背景图<br />
.close 显示关闭按钮<br />
.caret 显示下拉式功能</p>
<pre><code>下拉菜单
.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                  嵌入内容子元素</code></pre>

Bootstrap常用单词组

标签：屏幕   ogre   bootstrap   内容替换   颜色   reverse   oat   list   table   

原文地址：https://www.cnblogs.com/moyuchen99/p/9330724.html