关键是熟悉或了解一些html标签的样式类，以便需要时，快速找到解决方案。
文中大部分图片来自于runoob网站,放在一起比较方便找到适合的样式
学习bootstrap的想法：
1.非前端程序员而言，比较常用有bootstrap网格系统(用于排版)，bootstra表格（用于列表展示内容）,bootstrap表单。
bootstrap的东西太多，不可能每个都需要知道或了解，需要有所取舍，明白自己需要什么不需要什么。不要为了学习而学习，也不要凭兴趣去学习，要看你项目或工作中需要什么
2.bootstrap往简单的说，就是样式表，只不过twitter写好了很多样式，直接拿来用就行
而bootstrap插件就是已经写好的js脚本，绑定了一些特定样式的组件或标签。只要组件样式符合要求，加载了插件，就能触发相应事件。 其中大部分绑定的标签或属性为data-api
3.样式类class的命名一般符合一定规则，
如 .col-* 应用于网格系统的列(column)
.row 字面意思就是定义一个行元素
.text-success 就是应用于文本的样式
.list-inline 就是应用于html标签<ul>的样式类
.table .table-hover 适用于html标签<table>
.form-inline .form-group .form-control 主要控制表单的,但不一定一定作用于form元素
.input-lg .input-sm 控制input大小
bootstrap有些样式影响了排版,有些影响了显示
4.比较大的收获
了解了一些比较专业的前端名词,如：
面包屑导航/标签式导航/胶囊式导航
徽章
Responsive Design (响应式设计)
well墙
分裂式按钮
谈到模态框时，把 按钮或链接当做模态框的 触发器
5.学习bootstrap的主要原因
一是在于它的知名度，让我想不禁想去了解它，再一个是或许有一天当我需要做一些页面的东西(ps:赶鸭子上架)，在没有前端的情况下，bootstrap可以作为一个选择，而我不想等到用时，再去学习它，那样也许有点晚了
Bootstrap CSS
1.Bootstrap 网格系统-div.container div.row div.col
grid system
主要用于排版，类似于html的table,tr,td等元素，这里用css实现内容结构排版
网格系统主要类有:.container,.row,.col-xs,.col-sm,.col-md,.col-lg,.col-md-offset-*,.col-md-push-*
基本结构：
<div class="container">
<div class="row">
<div class="col-*-*">
</div>
</div>
</div>
1.1 .col-md-offset-3 列左外边距偏移3单元格
注：没有.col-xs-offset-*元素 但可通过空单元格实现偏移
1.2 .col-md-push-8 列位置向右移动8列
.col-md-pull-4 列位置向左移动4列
2.Bootstrap 排版-h1-h6 p.text-left p.text-success ul.list-inline
Bootstrap 中定义了所有的 HTML 标题（h1 到 h6）的样式。只要引入bootstrap样式,默认应用bootstrap的样式
2.1 强调
html的强调标签有
<small>（设置文本为父文本大小的 85%）、<strong>（设置文本为更粗的文本）、<em>（设置文本为斜体）
bootstrap提供的强调样式有(应用于元素<p>)：
.text-left,.text-center,.text-right,.text-muted,.text-primary,.text-success,.text-info,.text-warning,.text-danger
2.2 缩写
Bootstrap 定义 <abbr> 元素的样式为显示在文本底部的一条虚线边框，当鼠标悬停在上面时会显示完整的文本（只要您为 <abbr> title 属性添加了文本）
如：
<abbr title="World Wide Web">WWW</abbr><br> <abbr title="Real Simple Syndication" class="initialism">RSS</abbr>
2.3 列表
列表主要样式类有：
.list-unstyled 应用于<ul> --清除样式
.list-inline 应用于<ul> --行内
.dl-horizontal 应用于<dl> --将属于与描述放在同一行
3.Bootstrap 代码-code pre
bootstrap定义了html元素<code> <pre>的默认样式
<code>以内联形式显示代码 --bootstrap定义了颜色
<pre>以多行形式显示代码 --bootstrap定义了背景颜色
<pre class="pre-scrollable"> --多行代码带有滚动条
开始和结束标签使用了 unicode 变体： < 和 >
4.Bootstrap 表格-table.table-striped div.table-responsive tr.success td.warning
bootstrap为html元素定义了默认的元素样式,也定义了一些样式类class适用于table等表格元素
4.1
适用于html元素table的样式有：
.table,.table-striped,.table-bordered,.table-hover,.table-condensed
由这些元素名，就可看出其适用的html元素table
适用于html元素<tr>, <th> 和 <td> 类
.active,.success,.info,.warning,.danger
4.2 响应式表格
对于小屏幕，可以水平滚动以显示内容
<div class="table-responsive">
<table class="table">
<thead></thead>
<tbody></tbody>
</table>
</div>
5.Bootstrap 表单-form.form-horizontal div.form-group input.form-control div.has-warning
bootstrap影响form表单的方式主要是html标签如<form> <input> <label>添加样式。还有一个是将form内的html标签和控件放在div里面，便于控制
基本的样式类有.form-inline .form-horizontal .form-group .form-control .control-label
基本结构：--每个标签或控件占据一行
<form role="form">
<div class="form-group">
<label for="name">名称</label>
<input type="text" class="form-control" id="name" placeholder="请输入名称">
</div>
<div class="form-group">
<label for="inputfile">文件输入</label>
<input type="file" id="inputfile">
<p class="help-block">这里是块级帮助文本的实例。</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox">请打勾
</label>
</div>
<button type="submit" class="btn btn-default">提交</button>
</form>
form role="role"
.form-inline .form-group .form-control
水平表单样式：
标签<label>水平,控件放在<div class="col-sm-*"> 里
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="firstname" class="col-sm-2 control-label">名字</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="firstname" placeholder="请输入名字">
</div>
</div>
</form>
复选框：
<div class="checkbox"><label><input/></label></div> 或者
<div><label class="checkbox-inline"></lable></div>
对于某些需要特定的输入文本，样式可以特殊处理(.has-warning)：
如：
<div class="form-group has-warning">
<label class="col-sm-2 control-label" for="inputWarning">输入警告</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputWarning">
</div>
</div>
控件大小样式类：
.input-lg .input-sm
6.Bootstrap 按钮-input.btn input.btn-info input.btn-warning input.btn-sm input.active
按钮也是前端比较常用的一个组件
按钮的特性主要要颜色、大小、状态等，bootstrap还设置了一个标签
<button class="btn btn-default" type="submit">按钮</button>
<a href="#" class="btn btn-default btn-lg" role="button">链接</a>
7.Bootstrap 图片-img.img-rounded img.img-circle img.img-thumbnail img.img-responsive
bootstrap对图片的支持为以上一个类
8.Bootstrap 辅助类-div.center-block a.text-danger a.text-success a.bg-danger a.show a.hidden button.close
辅助样式类 如文本样式，背景样式，或文本居中组件显示隐藏等
9.Bootstrap 响应式实用工具-span.visible-xs-* span.hidden-sm
可根据不同设备显示或隐藏某些元素
Bootstrap 布局组件
1.Bootstrap 字体图标(Glyphicons)-span.glyphicon span.glyphicon-user
字体图标主要应用到按钮的背景
可根据需要制作特定的图标，地址：
http://www.runoob.com/try/demo_source/bootstrap-glyph-customization.htm
如：
<button type="button" class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-user"></span>
User
</button>
2.Bootstrap 下拉菜单（Dropdowns）-div.dropdown ul.dropdown-menu
下拉菜单用的也比较多，如果想要有个看起来不错的下拉菜单,bootstrap是个不错的选择
ul.dropdown-menu可单独使用不必必须放在div.dropdown下面，使用者可灵活使用
3.Bootstrap 按钮组-div.btn-group
4.Bootstrap 按钮下拉菜单-div.btn-group span.cacert
5.Bootstrap 输入框组-div.input-group
6.Bootstrap 导航元素-ul.nav ul.nav-tabs ul.nav-pills ul.nav-stacked
7.Bootstrap 导航栏-nav.navbar nav.navbar-default nav.navbar-fixed-top
8.Bootstrap 面包屑导航（Breadcrumbs）-ol.breadcrumb
面包屑导航-表示当前页面所在位置，每个部分可继续导航
以前见过这个导航方式，不过不清楚具体叫什么
9.Bootstrap 分页-ul.pagination ul.pager
翻页也不一定必须放在ul.pager下面，也可以放在ul.pagination一起使用。这些class都是可以灵活使用的
10.Bootstrap 标签-label.label label-default
11.Bootstrap 徽章（Badges）-span.badge
徽章
12.Bootstrap 超大屏幕（Jumbotron）-div.jumbotron
13.Bootstrap 页面标题（Page Header）-div.page-header
14.Bootstrap 缩略图-a.thumbnail
不是很理解其作用
15.Bootstrap 警告（Alerts）-div.alert alert-success
网站上，如果需要对一些信息进行标注。一般对文字或背景设置特殊样式，bootstrap已经帮我们写好了这些特殊样式，直接拿来用就可以了
<div class="alert alert-success alert-dismissable">
<button type="button" class="close" data-dismiss="alert"
aria-hidden="true">
×
</button>
成功！很好地完成了提交。
</div>
16.Bootstrap 进度条-div.progress div.progress-bar
如果想让自己的网站看起来很炫，设计一个界面美观的进度条，是个不错的特性。bootstrap已经写好了样式，拿来用就行。
17.Bootstrap 多媒体对象（Media Object）-div.media
如果开发一些博客类或论文类的网站，在文字中插入一些图片，可能更具有观赏性
18.Bootstrap 列表组-ul.list-group li.list-group-item a.list-group-item
list-group-item不一定非要放在ul.list-group下面使用，可独立使用如,
a.list-group-item可以有相同的样式效果。只不过放在div.list-group或ul.list-group下面更容易控制位置
19.Bootstrap 面板（Panels）
如果网页的开发中，有需要用到面板,bootstrap已经帮你写好了样式。但是对于我来说，好像用到的也比较少，所以对一些没见过的特性也感到陌生。可能所处的行业有关系，或者一直做后台，没办法接触这些很炫的特性
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
带有 title 的面板标题
</h3>
</div>
<div class="panel-body">
面板内容
</div>
</div>
20.Bootstrap Well-div.well
Well 是一种会引起内容凹陷显示或插图效果的容器 <div>
Bootstrap 插件-上面的组件或样式是静态的，插件更多的是交互
1.Bootstrap 插件概览-集成了12中jquery插件
2.Bootstrap 过渡效果（Transition）插件-Transition.js
3.Bootstrap 模态框（Modal）插件-modal.js
data-api:data-toggle="model" data-target="#id" id是模态框div的id
4.Bootstrap 下拉菜单（Dropdown）插件-dropdown.js
5.Bootstrap 滚动监听（Scrollspy）插件-scrollspy.js
根据查看内容的位置，动态标注所在菜单或标签
6.Bootstrap 标签页（Tab）插件-tab.js
动态显示标签下的内容div
7.Bootstrap 提示工具（Tooltip）插件-tooltip.js
鼠标移动，动态显示提示信息
8.Bootstrap 弹出框（Popover）插件-popover.js
鼠标点击，弹出窗口信息
9.Bootstrap 警告框（Alert）插件-
这种提示或警告方式似乎更别致一点
10.Bootstrap 按钮（Button）插件-button.js
通过按钮（Button）插件，您可以添加进一些交互，比如控制按钮状态，或者为其他组件（如工具栏）创建按钮组
11.Bootstrap 折叠（Collapse）插件-collapse.js
可以动态的让某个页面区域div显示或影藏
12.Bootstrap 轮播（Carousel）插件-carousel.js
滑动显示内容，一个漂亮的网站必不可少的特性
13.Bootstrap 附加导航（Affix）插件-affix.js
将某个导航栏固定在页面的某个位置，不随页面移动
Bootstrap 其他
1.Bootstrap UI 编辑器-像dreamweaver一样设计页面
见：http://www.runoob.com/bootstrap/bootstrap-ui-editor.html
2.Bootstrap HTML编码规范
页面添加如下元素或特性：
<!DOCTYPE html>
<html lang="zh-CN">
<meta http-equiv="X-UA-Compatible" content="IE=Edge"> -- IE 兼容模式
<meta charset="UTF-8">
在线参考手册
http://www.runoob.com/bootstrap/bootstrap-ui-editor.html
http://pikock.github.io/bootstrap-magic/app/#!/editor
在线制定图标
http://www.runoob.com/try/demo_source/bootstrap-glyph-customization.htm
http://www.runoob.com/bootstrap/bootstrap-tutorial.html