一．文本
1）对齐方式
text-left 文本左对齐 =======> text-align：left
text-center 文本居中对齐
text-right 文本右对齐
text-justify 文本两端对齐
text-nowrap 不换行
text-lowercase 小写
text-uppercase 大写
text-capitalize 首字母大写
2）文本颜色
text-muted 灰色
text-primary 主要蓝
text-success 成功绿
text-info 信息蓝
text-warning 警告黄
text-danger 危险红
3）背景颜色
bg-muted 灰色
bg-primary 主要蓝
bg-success 成功绿
bg-info 信息蓝
bg-warning 警告黄
bg-danger 危险红
二．页面排版
1）列表排版
ul的类
list-unstyled 移除默认样式
list-inline 设置成内联
dl类
dl-horizontal 水平排列描述列表 定义列表
2）table表格
table 基本的表格样式
table-striped 条纹状表格（前提必须现有table类）
table-bordered 给表格增加边框（前提必须现有table类）
table-hover 让下的表格悬停鼠标实现背景效果（前提必须现有table类）
可以给tr加上以下任意一种类实现每一行的颜色不一样
<tr class=”success”></tr>
状态类
样式 说明
active 鼠标悬停在行或单元格上
success 标识成功或积极的动作
info 标识普通的提示信息或动作
warning 标识警告或需要用户注意
danger 表示危险或潜在的带来负面影响的动作
<tr class="sr-only"> 隐藏行
3）form表单
内联表单
form类
form-inline 让表单左对齐浮动
水平排列
form类
form-horizontal 让表单内的元素保持水平排列
form-group 表单成组显示 成组里的表单也可以用栅格系统
form-control 可以给表单里的任何标签加
<div class="form-group">
<label>电子邮件</label>
<input type="email" class="form-control" placeholder="请输入您的电子邮件">
</div>
表单合组
input-group input-group-addon
前后增加片段
<div class="input-group">
<div class="input-group-addon">￥</div>
<input type="text" class="form-control">
<div class="input-group-addon">.00</div>
</div>
disabled 禁用
表单校验状态
<div class=“form-group has-error”>
样式 说明
has-error 错误状态
has-success 成功状态
has-warning 警告状态
可以在表单后加上校验状态小图标 例如：校验成功 后面显示一个对勾
form-control-feedback
<div class="form-group has-feedback">
<label>电子邮件</label>
<input type="email" class="form-control">
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
span的类
样式 说明
glyphicon-ok 成功状态
glyphicon-warning-sign 警告状态
glyphicon-remove 错误状态
Input的大小可以通过类来控制
input-lg 大的input
Input-sm 小的input
也可以设置父元素 form-group-lg、form-group-sm来调整
4）图片
img-rounded 方形
img-circle 圆形（图片长宽不等时是椭圆形）
img-thumbnail 有边框
img-responsive 响应式图片
5）按钮/超链接
button/a
样式 说明
btn-default 默认样式
btn-success 成功样式
btn-info 一般信息样式
btn-warning 警告样式
btn-danger 危险样式
btn-primary 首选项样式
btn-link 链接样式
btn-block 块级按钮
active 激活按钮
按钮大小
btn-lg 大按钮
btn-md 适中按钮
btn-sm 小按钮
btn-xs 超小按钮
多个按钮可以成组
把按钮用一个div包着 div类为btn-group
<div class="btn-group">
<button type="button" class="btn btn-default">左</button>
<button type="button" class="btn btn-default">中</button>
<button type="button" class="btn btn-default">右</button>
</div>
按钮组大小
btn-group-lg
btn-group-md
btn-group-sm
btn-group-xs
按钮组垂直排列
btn-group-vertical
按钮组两端对齐
btn-group-justified
关闭按钮
<button type="button" class="close">×</button>
块居中
center-block ========>margin:0 auto
clearfix 清理浮动
三．栅格系统
container
超小屏幕 手机 (<768px) xs 100% col-xs-数字(份数)
小屏幕 平板 (≥768px) sm 750px col-sm-数字
中等屏幕 桌面显示器 (≥992px) md 970px col-md-数字
大屏幕 大桌面显示器 (≥1200px） lg 1170px col-lg-数字
一行最多可以12份
Container-fluid 100%
如果不指定 手机上每一列占一行
列偏移
col-md-offset-2
向右推
col-md-push-2
向左拉
col-md-pull-2
如果指定了 md 没有指定 lg
那么在lg的屏幕下 就会用 md指定的列宽百分比
如果指定了 lg 没有指定 md
那么在 md下面 每个列宽度是100%
左浮动
pull-left ===> float:left!important
右浮动
pull-right
响应式工具
hidden-xs 在超小屏幕隐藏 其他屏幕可见
hidden-sm 在小屏幕隐藏 其他屏幕可见
hidden-md 在中屏幕隐藏 其他屏幕可见
hidden-lg 在大屏幕隐藏 其他屏幕可见
visible-xs 在超小屏幕显示 其他屏幕隐藏
visible-sm 在小屏幕可见 其他屏幕隐藏
visible-md 在小屏幕可见 其他屏幕隐藏
visible-lg 在小屏幕可见 其他屏幕隐藏
四．组件
1）导航组件：
1基本导航
<ul class="nav nav-tabs">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">资讯</a></li>
<li><a href="#">产品</a></a></li>
<li><a href="#">关于</a></li>
</ul>
2胶囊式导航
<ul class="nav nav-pills">
3垂直胶囊式导航
<ul class="nav nav-pills nav-stacked">
4面包屑导航
<ol class="breadcrumb">
<li><a href="#">首页</a></li>
<li><a href="#">产品列表</a></li>
<li class="active">韩版 2015 年羊绒毛衣</li>
</ol>
5带下拉菜单的导航
<ul class="nav nav-tabs">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">资讯</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">下拉菜单
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">菜单一</a></li>
<li><a href="#">菜单二</a></li>
</ul>
</li>
</ul>
2）分页组件：
1默认分页
<ul class="pagination">
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">»</a></li>
</ul>
2翻页效果
<ul class="pager">
<li><a href="#">上一页</a></li>
<li><a href="#">下一页</a></li>
</ul>
3对齐翻页链接
<ul class="pager">
<li class="previous"><a href="#">上一页</a></li>
<li class="next"><a href="#">下一页</a></li>
</ul>
3）徽章
未读信息数量徽章
<a href="#">信息 <span class="badge">10</span></a>
设置尺寸，四种 lg、默认、sm 和 xs
<ul class="pagination pagination-lg">
4）下拉菜单
1基本格式
<div class="dropdown">
<button class="btn btn-default" data-toggle="dropdown">
下拉菜单
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">首页</a></li>
<li><a href="#">资讯</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">关于</a></li>
</ul>
</div>
按钮和菜单需要包裹在.dropdown 的容器里，而作为被点击的元素按钮需要设置
data-toggle="dropdown"才能有效。对于菜单部分，设置 class="dropdown-menu"才能自动隐藏并添加固定样式。设置 class="caret"表示箭头，可上可下。
//设置向上触发
<div class="dropup">
//菜单项居右对齐，默认值是 dropdown-menu-left
<ul class="dropdown-menu dropdown-menu-right">
2按钮式下拉菜单
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
下拉菜单<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">首页</a></li>
<li><a href="#">资讯</a></li>
</ul>
</div>
3分裂式按钮下拉菜单
<div class="btn-group">
<button type="button" class="btn btn-default">下拉菜单</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">首页</a></li>
<li><a href="#">资讯</a></li>
</ul>
</div>
向上弹出式
<div class="btn-group dropup">
5）警告框组件
1基本警告框
<div class="alert alert-success">Bootstrap</div>
<div class="alert alert-info">Bootstrap</div>
<div class="alert alert-warning">Bootstrap</div>
<div class="alert alert-danger">Bootstrap</div>
2带关闭的警告框
<div class="alert alert-success">
Bootstrap
<button type="button" class="close" data-dismiss="alert">
<span>×</span>
</button>
</div>
自动适配的超链接
<div class="alert alert-success">
Bootstrap，请到官网 <a href="#" class="alert-link">下载</a>
</div>
6）巨幕组件
巨幕组件主要是展示网站的关键性区域。
jumbotron
在固定的范围内，有圆角
<div class="container">
<div class="jumbotron">
<h2>网站标题</h2>
<p>这是一个学习性的网站！</p>
<p><a href="#" class="btn btn-default">更多内容</a></p>
</div>
</div>
100%全屏，没有圆角
<div class="jumbotron">
<div class="container">
<h2>网站标题</h2>
<p>这是一个学习性的网站！</p>
<p><a href="#" class="btn btn-default">更多内容</a></p>
</div>
</div>
7）进度条组件
进度条组件为当前工作流程或动作提供时时反馈
基本进度条
<div class="progress">
<div class="progress-bar" style="width: 60%;">60%</div>
</div>
最低值进度条
<div class="progress">
<div class="progress-bar" style="min-width:20px">0%</div>
</div>
条纹状，IE10+支持
<div class="progress">
<div class="progress-bar progress-bar-success
progress-bar-striped" style="min-width:20px;width:60%">60%</div>
</div>
动画效果
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped
active" style="min-width:20px;width:60%">60%</div>
</div>
8）媒体对象组件
媒体对象可以包含图片、视频或音频等媒体，以达到对象和文本组合显示的样式效果。
基本实例
<div class="media">
<div class="media-left">
</div>
<div class="media-body">
<h4 class="media-heading">标题</h4>
<p>企鹅（学名：Spheniscidae）：有“海洋之舟”美称的企鹅是一种最古老
的游禽，它们很可能在地球穿上冰甲之前，就已经在南极安家落户。全世界的企鹅共有 17
种，大多数都分布在南半球。主要生活在南半球，属于企鹅目，企鹅科。特征为不能飞翔；
脚生于身体最下部，故呈直立姿势；趾间有蹼；跖行性（其他鸟类以趾着地）；前肢成鳍状；
羽毛短，以减少摩擦和湍流；羽毛间存留一层空气，用以保温。背部黑色，腹部白色。各个
种的主要区别在于头部色型和个体大小。</p>
</div>
</div>
媒体对象在右边
<div class="media">
<div class="media-body">
<h4 class="media-heading">标题</h4>
<p>企鹅（学名：Spheniscidae）：有“海洋之舟”美称的企鹅是一种最古老
的游禽，它们很可能在地球穿上冰甲之前，就已经在南极安家落户。全世界的企鹅共有 17
种，大多数都分布在南半球。主要生活在南半球，属于企鹅目，企鹅科。特征为不能飞翔；
脚生于身体最下部，故呈直立姿势；趾间有蹼；跖行性（其他鸟类以趾着地）；前肢成鳍状；
羽毛短，以减少摩擦和湍流；羽毛间存留一层空气，用以保温。背部黑色，腹部白色。各个
种的主要区别在于头部色型和个体大小。</p>
</div>
<div class="media-right"></div>
</div>
五．插件
1）滚动监听
<body data-spy="scroll" data-target="#mynav">
// mynav 就要监听的元素
<div id="mynav">
<ul class="nav"> class必须要有nav
<li><a href="#对应滚动区域的id">
<li><a href="#section2">
bootstrap 会自动个当前 li加上一个active 的class
可以根据active 设置不同的样式
2）弹出框
<a href="" data-target="#myM" data-toggle="modal">打开</a>
<div class="modal" id="myM">
<div class="modal-dialog">
<div class="modal-header">弹出标题 <a href="" class="pull-right" data-target="#myM" data-toggle="modal">×</a></div>
<div class="modal-body">弹出内容</div>
</div>
</div>
3）轮播图
<div class="carousel slide" id="banner">
<div class="carousel-inner">
<div class="item active"></div>
<div class="item "></div>
</div>
<ol class="carousel-indicators">
<li href="#banner" data-slide-to="0" class="active" ></li>
<li href="#banner" data-slide-to="1"></li>
</ol>
<a href="#banner" data-slide="prev" class="left carousel-control">上一张</a>
<a href="#banner" data-slide="next" class="right carousel-control">下一张</a>
</div>
注意事项：
1,不要记下class样式名
2，不用bootstrap解决所有的问题 （还是自己要写部分css）
3，如果是不规则的网站不要使用bootstrap
4，不要尝试 同时解决手机端 和电脑端两个网页（熟了后可以）
作者：lovelydong
链接：https://www.jianshu.com/p/ffc1589d35ac
来源：简书