偏移值:
offset-*: 原理是添加margin-left;
推、拉定位:
push-*: 设置 left定位的值;
pull-*: 设置 right定位的值;
文本对齐:
.text-right,.text-left,.text-center, .text-justify,.text-nowarp
大小写转换:
.text-lowercase:
.text-uppercase:
.text-capitalize:
列表:
.list-unstyled , 在UL,ol,上加它,取消列表项目符号
.list-inline: 让所有LI在一行显示。
.dl-horizontal: 让自定义列表dl,dt,dd实现水平布局;
表格:
基本: .table
样式:
.table-striped: 条纹状表格
.table-bordered: 边框
.table-hover: hover效果
.table-condensed: 紧缩型表格
.table-responsive: 响应式表格,用它包裹.table元素
以上5种样式,可以进行组合应用;
可以给tr 或者 td,添加以下状态类,设置 背景色。
.active 鼠标悬停在行或单元格上时所设置的颜色
.success 标识成功或积极的动作
.info 标识普通的提示信息或动作
.warning 标识警告或需要用户注意
.danger 标识危险或潜在的带来负面影响的动作
按钮:
.btn 基本类
样式类:
.btn-primary 表示主要作用 蓝色
.btn-success 表示成功作用 绿色
.btn-info 表示信息作用 浅蓝色
.btn-warning: 警告 橙色
.btn-danger: 危险 红色
.btn-default: 默认 白色
.btn-link: 超链接 蓝色文本
尺寸类:
.btn-lg:增加高度
默认
.btn-sm:变小
.btn-xs :最小
.btn-block: 主按钮的宽度设置 为父元素的100%;移动端常用
禁用: .disabled 鼠标显示为禁用。
激活:.active 带有点击,按下时的效果,立体效果
图片:
.img-circle 圆
.img-rounded 圆角
.img-thumbnail 缩略图
.img-responsive 响应式图片,父元素宽度的100%
.center-block 让图片在块元素内容水平居中;
让块元素水平居中布局; margin: 0 auto;
情境文本颜色:
以下设置 文本不同的颜色:
text-muted:
text-primary:
text-success:
text-info:
text-danger:
text-warning:
情境背景颜色:
bg-primary:
bg-success:
bg-info:
bg-danger:
bg-warning:
快速浮动:
.pull-left {
float: left !important;
}
.pull-right {
float: right !important;
}
清除浮动:
.clearfix
显示
.show
隐藏
.hidden
表单:
默认是表单元件垂直布局:
控制label与input:
内联表单: 水平显示所有表单元件:
水平表单: