标题
- 可以使用
<h1>...<h6>,也可以使用类名h1~h6 - 使用
<small>制作副标题
段落
默认字号:14p，line-height:1,42857143，颜色为深灰色，字体为sans-serif(可根据需要进行修改)
强调内容
- 添加类名
lead <small><strong><em><cite>
粗体
<b><strong>
斜体
<em><i>
强调相关的类
- .text-muted:提示，使用浅灰色（＃999）
- .text-primary:主要，使用蓝色（＃428bca）
- .text－success：成功，使用浅绿色（＃3c763d）
- .text－info：通知信息，使用浅蓝色（＃31708f）
- .text－warning：警告，使用黄色（＃8a6d3b）
- .text－danger：危险，使用褐色（＃a94442）
文本对齐风格
- .text-left:左对齐
- .text-center:居中对齐
- .text-right:右对齐
- .text-justify:两端对齐（各浏览器解析不一致，慎用）
列表
.list-unstyled去点列表.list-inline内联列表,把垂直列表变为水平列表，去掉项目编号<dl><dt><dd>定义列表.dl-horizontal水平定义列表
代码
注意：不管是用哪种代码风格，代码中遇到小于号用’<’代替，大于号用’>’代替
表格
表格类型
.table基础表格.table-striped斑马线表格.table-bordered带边框的表格.table-hover鼠标悬停高亮的表格.table-condensed紧凑型表格.table-responsive响应型表格
表格行的类
<tr>
.active表示当前活动的信息.success表示成功或正确的行为.info表示中立的信息或行为.warning表示警告，需要特别注意.danger表示危险或可能是错误的行为
表单
<input><select><textarea>
<form>
.form-horizontal水平表单（标签居左，表单控件居右）.form-inline内联表单
表单控件
input
.form-control定制效果
下拉选项框select
multiple统一样式风格
文本域textarea
.form-control无需设置cols属性
复选框checkBox和单选radio
复选框和单选按钮水平排列
label分别添加
按钮类型
<button>
- input[type=’submit’]
- input[type=’button’]
- input[type=’reset’]
表单控件大小
<input><textarea><select>
.input-sm让控件比正常大小更小.input-lg让控件比正常大小更大
表单控件状态（焦点状态）
.form-control//焦点状态是通过伪类:focus 实现的。
表单控件状态（禁用状态）
表单控件状态（验证状态）
.has-warning警告（黄色）.has-error错误（红色）.has-success成功（绿色）
.has-Feedback
1 | <span class='glyphicon glyphicon-warning-sign/glyphicon-ok/glyphicon-remove form-control-Feedback'> |
元素
表单提示信息
.help-block块状提示信息
按钮
//强烈建议使用button或a标签来制作按钮
定制风格
.btn-primary主要按钮.btn-success成功按钮.btn-info信息按钮.btn-waring警告按钮.btn-danger危险按钮.btn-link链接按钮
按钮大小
.btn-lg大型按钮.btn-sm小型按钮.btn-xs超小型按钮
块状按钮
.btn-block可以让按钮充满整个容器
按钮状态－活动状态
对于<button>元素添加伪类实现
:hover悬浮状态:active点击状态:focus焦点状态
对于<a>元素通过添加相应的类实现
按钮状态－禁用状态
图像
图标
.glyphicon
所有icon都是以glyphicon-前缀的类名开始，然后后缀表示图标的名称。
网格系统
工作原理
基本用法
列偏移
- col-md-offset-* 向右偏移，星号代表要便宜的列组合数
列排序
.col-md-push-*.col-md-pull-*
菜单、按钮及导航
下拉菜单
下拉分割线
菜单标题
.dropdown-header
对齐方式
下拉菜单（菜单项状态）
- :hover 悬浮状态
- :focus 焦点状态
- .active 当前状态
- .disabled 禁用状态
按钮
按钮组
.btn-group
不管是用什么标签，.btn-group容器里的标签元素需要带有类名.btn
按钮工具栏
将按钮组.btn-group按组放在一个大的容器.btn-toobar中
.btn-group-lg大按钮组.btn-group-sm小按钮组.btn-group-xs超小按钮组
嵌套分组
下拉菜单和普通按钮排列在一起，实现类似于导航菜单的效果，只需将.dropdown的容器换成btn-group。
垂直分组
只要把水平分组的.btn-group换成.btn-group-vertical即可
等分按钮
只需在按钮组.btn-group追加.btn-group-justified
按钮下拉菜单
把div.dropdown换成div.btn-group
按钮的向上向下三角形
向上弹起的下拉菜单
导航
导航类型
.nav-tabs在原导航.nav上追加此类名.nav-pills胶囊形导航.nav-stacked垂直堆叠导航注意：在胶囊形导航基础上添加nav-justified自适应导航。需要配合.nav-pills或.nav-stacked一起使用
导航加下拉菜单（二级导航）
导航条，分页导航
导航条
基础导航条
为导航条添加标题、二级菜单及状态
123 | <div class="navbar-header"> <a href="##" class="navbar-brand">标题</a></div> |
带表单的导航条
.navbar-form
导航条中的按钮、文本和链接
除了navbar-brand中的a元素和navbar-nav的ul和navbar-form 之外，还可以使用其他元素
.navbar-btn导航条中的按钮.navbar-text导航条中的文本.navbar-link导航条中的普通链接
需要配合navbar-brand,navbar-nav使用，且数量不能超过2个
固定导航条
由于导航条默认高度是50px，页面主内容顶部和底部都被固定导航条给遮住了，解决办法:
响应式导航条
- 保证主窄屏时需要折叠的内容必须包裹在带一个div内，并且为这个div加入
.collapse``.navbar-collapse两个类名。最后再为这个div 添加一个类名或id名。 保证在窄屏时要显示的图标样式（固定写法）
1234大专栏
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
