标签：button cas 标题 init for 容器 sel input框 信息
‘‘‘
布局容器
.container 2-8-2 布局，取其中8
.container-fluid 全局占满空间
栅格系统
.row 将块级标签划分12等份
.col-xs/sm/md/lg-n 设置本标签占据份数
.col-xs/sm/md/lg-offset-n 设置从左向右移动的份数，后面无用份数被填充
.col-xs/sm/md/lg-push-n 重新排版，设置距离左侧的份数
.col-xs/sm/md/lg-pull-n 重新排版，设置距离右侧的份数
xs/sm/md/lg 分别对应手机/平板/中等显示器/大显示器
排版
标题
.h1~h6 <h1~h6> 为行内元素添加.h1~h6可以作为标题使用
.small <small> 当存在标题标签内部，作为副标题使用
页面主题
<body>
<p>
均在原基础上进行些微样式调整
<p class="lead"> 文本突出
字体
<mark> .mark 高亮
<strong> 加粗
<em>/<cite>/<var> 斜体
<ins> 下划线
<del> 删除线
<small> 小文本字体
文本对齐
.text-left/justify/nowrap/right/center
文本左/左/左/右/居中对齐
文本大小写
.text-lowercase/uppercase/capitalize
文本全小写/大写/每个单词首字母大写
文本颜色
.text-muted/primary/success/info/warning/danger
文本灰色/蓝色/绿色/蓝色/黄色/红色
文本替换图片
.text-hide 使用 .text-hide 类或对应的 mixin 可以用来将元素的文本内容替换为一张背景图。
缩略语
<abbr title="鼠标悬浮文本" class="initialism">
缩略语即文本字体下面出现下划虚线，悬浮文本则出现title提示信息
.initialism 用于设置缩略语字体略小
地址
<address>
引用
<blockquote> 任何HTML代码被包裹在blockquote中都会变现引用样式
<footer> 文本前面出现一条中划线（——xxx）
代码
<code> 用于包裹代码，呈现：文字红色、背景淡红
<kdb> 用于包裹用户输入，呈现：文字色白，背景纯黑
<pre> 用于包括代码块
.pre-scrollable 设置 max-height 为 350px ，并在垂直方向展示滚动条。
<var> 用于包裹变量，斜体
<samp> 用于包裹程序输出内容
表格
基本样式
.table 表格基本样式，增加少量padding和水平方向的表格分隔线
.table-striped 为`<tbody>`内每一行增加斑马条纹样式，一浅一深
.table-bordered 为表格中每个单元格增加边框
.table-hover 增加`<tbody>`中的每一行的鼠标悬停状态
.table-condensed 表格每个单元格的padding减半
状态样式
.active 暗灰色
.success 淡绿色
.info 淡蓝色
.warning 淡黄色
.danger 淡红色
响应式表格
.table-responsive <768PX 出现水平滚动条 >768PX 水平滚动条消失
表单
基本样式
.form-inline form表单内所有元素均设为行内元素，存在于一行中，宽度最好>768PX，否则折叠
.form-horizontal form表单内可以使用栅格系统进行布局，form-group代表row
.form-group form-group内form子标签得到相应的布局
.form-group-lg 为 .form-horizontal 包裹的 label 元素和表单控件设置尺寸为大
.form-group-sm 为 .form-horizontal 包裹的 label 元素和表单控件设置尺寸为小
.form-control 设置该类的form子标签，则宽度被设为100%
.sr-only 设置label标签隐藏
.control-label 设置在form-horizontal内的label标签排版靠右
文本域textarea
rows="行数" 设置textarea文本域可以显示的行数
单选、多选框radio、checkbox
.disabled 禁止选项框选择，不修改选项框样式
disabled 禁止选项框选择，修改选项框颜色暗淡
.radio 设置选项框单选为块级标签
.radio-inline 设置选项框单选为行内标签
.checkbox 设置选项框多选为块级标签
.checkbox-inline 设置选项框多选为行内标签
下拉菜单select
对于标记了 multiple 属性的 `<select> `控件来说，默认显示多选项。
label
静态控件
form-control-static 为 `<p> `元素添加 .form-control-static可以实现纯文本与label放置同一行。
input
input默认存在焦点样式
disabled input禁止（ps: .disabled对text、password等无用）
readonly input只读
input尺寸控制
input-lg 大
input-sm 小
col-lg/sm-n 设置宽度
help-text
为input框下方增加一行帮助文本
<span class="help-block"></span>
校验状态
存在以下标签内部的 .control-label、.form-control、.help-block 子标签，都会被改变样式
.has-success 淡绿色
.has-warning 淡黄色
.has-error 淡红色
反馈图标
反馈图标（feedback icon）只能使用在文本输入框`<input class="form-control">` 元素上。
.has-feedback 设置允许子类存在反馈图标
<span class="glyphicon
glyphicon-ok/glyphicon-warning-sign/glyphicon-remove
form-control-feedback
"></span>
按钮
a role="button"
btn
.close
btn-default
btn-success
btn-info
btn-warning
btn-danger
btn-primary
btn-link
btn-lg/sm/xs
btn-block
disabled
辅助类
情景文本颜色
text-muted/success/info/primary/warning/danger
灰色、绿、蓝、深蓝、黄、红
情景背景颜色
bg-success/info/primary/warning/danger
关闭按钮
×
三角符号
.caret
快速浮动
pull-left
pull-right
内容块居中
center-block
取消浮动
clearfix
显示、隐藏内容
show
hidden
sr-only sr-only-focusable
text-hide
响应式工具
针对性显示
.visible-xs/sm/md/lg-*
*: block/inline/inline-block
针对性屏蔽
.hidden-xs/sm/md/lg
visible-print-*
*: block/inline/inline-block
hidden-print
‘‘‘
标签：button cas 标题 init for 容器 sel input框 信息
原文地址：https://www.cnblogs.com/zhangzhuowei/p/14875909.html
