learnbootstrap.md

起步

• 兼容<IE9 <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>

    ``<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->``
  

• bootstrap基本模板

  • 顺序不能颠倒
  • 用最新的IE渲染模式
  • <meta name="viewport" content="width=device-width, initial-scale=1"> 给移动浏览器设置视口信息，宽度为设备宽度，初始缩放比例为1
  • 加入bootstrap.min.css
  • 加入自己的style.css
  • body
  • 加入jquery.min.js
  • 加入bootstrap.min.js
  • 加入个人的js

• bootstrap的全局样式

  • 保留部分浏览器默认的样式
  • body移除margin声明，默认背景为白色
  • 为排版设置了基本的字体，行高，字号
  • 设置全局链接颜色，：hover时，显示下划线

排版

* bootstrap标题
	* 重置了默认标题样式，使在任何浏览器下标题样式相同
	* 依然使用``<h1>~<h6>``
	* 增加了.h1~.h6，添加对应类则获得对应标题的样式
	* 副标题
		* ``<small>``标签
		* 嵌套在标题中使用``<h1>hello<small>world></small></h1>``
			* font-weight:normal;
			* clor:#ccc
			* font-size:h1~h3,65%;h4~h6,75%


* bootstrap段落
	* 默认文本样式
		* 本字号为14px(font-size)
		* 行高为1.42857143（line-height），大约是20px
		* 颜色为深灰色（#333）
		* 字体为"Helvetica Neue", Helvetica, Arial, sans-serif;（font-family）
		* p元素默认margin-bottom:10px;
	* 强调内容
		* 添加类名.lead
			* 增大字号，加粗文本，调整行高和margin
		* ``<small>``
		* ``<em>``
		* ``<cite>``
		* ``<strong>``或者``<b>``加粗文本
		* ``<em>````<i>``斜体
		* 添加类，强调内容，对应不同颜色的字体
			* .text-muted：提示
			* .text-primary：主要
			* .text-info：通知
			* .text-success：成功
			* .text-warning：警告
			* .text-danger：危险
	* 文本对齐
		* 通过类来控制效果
			* .text-left
			* .text-right
			* .text-center
			* .text-justify;两端对齐
* 列表
	* 普通列表
		* 正常的ul
			* 对margin做了点优化
			* 可嵌套
	* 有序列表
		* 正常的ol
			* 对margin做了点优化
			* 可嵌套
	* 去点列表
		* .list-unstyled
			* 去除左内边距
			* list-style:none
	* 内联列表
		* .list-inline
			* 垂直列表换成水平列表，而且去掉项目符号（编号），保持水平显示
	* 定义列表
		* dl(相当于ul）,dt（标题）,dd（内容）
		* 水平定义列表
			* .dl-horizontal
				* 有媒体查询的效果，大于768px的才会水平
				* 内容（dd）和行标题（dt）在同一行
				* 实现
				* dt左浮动，添加160px宽度
				* dd设置margin-left:180px达到水平效果
				* 标题超过160px显示三个省略号
* 代码
	* 硬编码<和>必须用&lt和&gt代替
	* ``<code>``行内代码
	* ``<pre>``整块代码
		* 如果代码太多可以给``<prev>``添加类.pre-scrollable，代码高度超过340px时自动添加scroll
		* 保持原有格式不变，包括空格
	* ``<kbd>``提示用户输入，比如crtl+v
* 表格
	* .table基本表格（这个类必须有）
		* 如果不添加，不会有任何表格效果，即使添加了如.table-hover
			* 实现
				* 设置表格的margin-bottom和表格内距
				* thead下面2px灰色实线
				* 每个单元格顶部1px灰色线
	* .table-striped斑马线表格
	* .table-bordered带边框的表格
	* .table-hover鼠标悬停高亮的表格
	* .table-condensed紧凑型表格
	* .table-responsive响应式表格
		* 应用于一个div来包含表格，使得表格具有响应式，div.table-responsive>table.table.table-bordered
		* 其他的类都是直接用在``<table>``上
		* 几种类可以组合使用，必须包含.table类
	* 表格行的类``<tr>``
		* 添加类使表格行有不同的颜色
			* .avtive
			* .success
			* .info
			* .warning
			* .danger

• 表单
  • 表单分类
    • 基础表单
      • <form>添加类.form-control
    • 水平表单
      • 输入框和标签在同一行
      • <form>添加类.form-horizontal
        • 必须配合网格系统，用div.form-group包住input组
          • 没有.form-horizontal 也相当于div.row
        • form-group相当于网格系统的row
    • 内联表单
      • <form>添加类.form-inline
        • 必须给<input>标签设置<label>兼容屏幕阅读器，如果不需要显示可以给<label>标签加.sr-only隐藏
        • label会导致换行，input在label的下一行；如果你必须添加这样的一个label标签，并且不想让input换行，你需要将label标签也放在容器“form-group”中
  • 表单控件
    • <input>添加.form-control
      • 添加了.form-control，则width默认为100%
    • select
      • 添加.form-control
      • 多行选择，multiple属性值设置为multiple
    • textarea
      • row
      • col
        • 如果textarea添加了.form-control无需设置col；.form-control设置宽度为100%或auto
    • checkbox,radio
      • div.checkbox>label>input[type='checkbox']{多选}
      • div.radio>label>input[type='radio']{单选}
      • 水平排列
        • label添加类checkbox-inline
        • label添加类raido-inline
        • 不要用div.radio或者div.checkbox包住
  • 表单控件大小
    • input.input-sm比正常大小更小，高度
    • input.input-lg比正常大小更大，高度
      • 对表单大小的控制实现
      • height
        • line-hight
        • padding
        • font-size
    • div.form-group相当于div.row，通过div.col-md-5来对输入控件的宽度进行控制
    • 对form.form-horizontal，通过在div.form-group上添加类，来控制大小
      • .form-group-lg
      • .form-group-sm
  • 表单状态
    • 必须给表单添加.form-control
    • 焦点状态
      • 实现：focus
      • 改变outline属性
    • 禁用状态
      • 添加disabled属性
        • 实现：cursor:not-allowed，pointer-events: none
        • field设置禁用，整个域都禁用
          • 禁用的域中如果有legend标签且legend标签中有输入框，输入框不会被禁用
          • 如果fieldset中有a.btn，则这个a不受影响
    • 只读状态
      • input设置readonly属性
      • 效果和禁用类似，只是不显示禁用的标记
    • 验证状态
      • 在div.form-group上添加类
        • .has-error
        • .has-worning
        • .has-success
      • 其中的.control-label,.form-control,.help-block都受影响
    • 添加对应的图标
      • 在div.form-group上同时添加类.has-feedback
      • 在表单里每个div.form-group中添加一个<span>
        • 成功：<span class="glyphicon glyphicon-ok form-control-feedback"></span>
        • 警告：<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
        • 错误：<span class="glyphicon glyphicon-remove form-control-feedback"></span>
      • 没有label的输入框，input输入框组需要手动定位
        • 输入框最好都跟着一个label
  • 表单提示信息
    • .help-block
      • 在div.form-group中加上<span class="help-block">你输入的信息是正确的</span>
      • 提示信息会显示在输入控件的下方
• 按钮
  • 必须有.btn
    • input,a,button上都可以添加从而变成按钮
    • 导航和导航条组件仅支持button
    • a作为按钮使用，用于启动功能而不是跳转链接，添加role=‘button’属性
    • 最佳实践：用button元素
      • input.btn在Firefox上无法被设置line-height属性，从而造成样式不同意
  • 基本按钮 * button.btn
  • 默认按钮 * .btn的基础上增加.btn-default * 改变按钮的颜色、边框颜色和文本颜色
  • 多标签支持 * 任何标签添加了类.btn都可以变成按钮 * 为了保证兼容性，建议只用button和a标签来制作按钮
  • 定制风格
    • 在.btn的基础上添加指定的类名
      • 边框颜色，按钮颜色，文字颜色不同
    • 类别
      • .btn-primary
      • .btn-success
      • .btn-info
      • .btn-warning
      • .btn-danger
      • .btn-link
  • 按钮大小
    • .btn基础上增加类
      • .btn-lg
      • .btn-sm
      • .btn-xs(超小)
        • 实现：通过padding,font-size,line-height,border-radius控制按钮大小
  • 块状按钮
    • .btn的基础上增加.btn-block
      • 实现：按钮充满这个父容器：width：100%
      • 按钮不会有和人padding和margin（水平方向）
  • 按钮状态
    • 活动状态
      • :hover
      • :active
      • :focus
      • 不同风格下的按钮都具有这些状态
      • 对a元素通过添加类.active实现，也可以把.active用于button
        • 按钮处于激活状态，表现为被按压下去
    • 禁用状态
      • 方法
        • 标签中添加disabled属性 disabled='disabled'
          • 不禁止按钮的默认行为
        • 添加.disabled
          • 禁止按钮的默认行为，比如说<a>依然会链接行为
        • 实际应用中，在<a>上应用，.disabled禁止默认行为！！
  • 图像和图标
    • 图像分类
      • .img-responsive 响应式图片
        • 本质：width:100%;height:auto;display:block
        • 让.img-responsive水平居中，用.center-block
        • IE8-10中，响应式SVG图片显示尺寸不均匀
          • 有问题的地方加上width:100%\9;
      • .img-rounded 圆角图片
      • .img-circle 圆形图片
      • .img-thumbnail 略缩图片
        • 用法：在<img>标签中添加对应类
        • 图片大小
          • 通过图片容器大小来控制图像大小，不要通过CSS直接修改img大小，这样就不响应了
        • < ie8一下没有圆角效果，bootstrap用CSS3做的圆角效果
  • 图标
    • <span class="glyphicon glyphicon-search"></span>
      • 参考bootstrap的图标http://getbootstrap.com/components/#glyphicons
      • 实现：用CSS3的@font-face配合字体实现icon效果，字体图标
      • 可以使用第三方图标字体，Font Awesome(http://www.bootcss.com/p/font-awesome/)
      • 实现：添加.glyphicon类实现默认样式，通过:before伪类的content属性调取对应icon编码
  • 辅助类工具
    • 情景文本颜色
      • .text-muted
      • .text-primary
      • .text-success
      • .text-info
      • .text-warning
      • .text-danger
    • 背景颜色
      • .bg-primary
      • .bg-success
      • .bg-info
      • .bg-warning
      • .bg-danger
    • 关闭按钮
      • button.close>span{×}
    • 三角符号
      • span.caret
    • 快速浮动
      • .pull-left
      • .pull-right
        • 实现：float:right !important
    • 内容块居中
      • .center-block类
        • 实现：{display:block;margin-left:auto;margin-right:auto
    • 清除浮动
      • 为父元素添加.clearfix
        • 实现:.clearfix(){&:before,&:after{content:" ";display:table;}&:after{clear:both;}}}
    • 显示或隐藏内容
      • .show
        • display:block !important;
      • .hidden或者.sr-only
        • display:none !important;
      • .invisible
        • visibility:hidden;
    • 屏幕阅读器
      • .sr-only
        • 对屏幕阅读器以外的设备隐藏内容
      • .sr-only结合.sr-only-focusable
        • 对屏幕阅读器以外的设备隐藏内容，在使用键盘tab键获取焦点时显示
    • 图片替换
  • 响应式工具
    • 显示
      • .visible-xs-*
      • .visible-sm-*
      • .visible-md-*
      • .visible-lg-*
        • 对应范围可见
        • *可以是block,inline,inline-block，分别对应相关的display
    • 隐藏
      • .hidden-xs
        • <768px隐藏
      • .hidden-sm

        • 768px 隐藏

      • .hidden-md

        • 992px隐藏

      • .hidden-lg

        • 1200px隐藏

网格布局

• 通过定义容器大小，一行平分为12份，调整外边距并结合媒体查询
  • 可以用负外边距抵消内边距
• 工作原理
  • 数据div.row，必须包含在div.container内
  • div.row内添加列，列数之和不能超过总数12，比如div.col-md-4表示占据4份的一个列
  • 具体内容放在列内，只有行可以是div.container的子元素
• 使用方法
  • 列组合
    • <div class="col-md-4">.col-md-4</div>
      • 通过浮动和宽度百分比实现
  • 列偏移
    • 把相邻的列分开点
    • 列元素上添加类 col-md-offset-x
      • x表示想要偏移的量，比如col-md-offset-4表示偏移4份
      • 利用1/12的margin-left，偏移多少，，就加多少margin-left
      • 列断行显示
        • 列和偏移列的总数如果超过12，就会断行显示
      • 可能会把元素顶到下一行，类似推箱子
  • 列排序
    • 改变列的方向
    • 改变左右浮动
      • 调整right和left
    • 添加类名
      • .col-md-push-x:向右
      • .col-md-pull-x：向左
        • x表示移动多少份
      • 可能会产生重叠部分，类似推拉门
  • 列嵌套
    • 在一个人列中加入一个或多个行，这个行中可以继续添加列。
    • 被嵌入的行的宽度100%为外部列的宽度
    • 嵌套列也不要超过12个列

菜单、按钮、导航

• 下拉菜单
  • 基本用法
    • 必须加入jquery.js和bootstrap.js
    • 用法
      • 用一个div.dropdown包裹整个下拉菜单元素，包括ul.drop-menu
      • 用一个button.dropdown-toggle[data-toggle=dropdown]作为父菜单，data-toggle属性为bootstrap自定义属性，属性值必须和最外容器类名一致，就写成ata-toggle=‘dropdown’
        • <span class='caret'></span>在button内容后面加上，会显示下拉提示箭头
      • 下拉菜单用一个ul列表，ul.dropdown-menu
    • 用div.dropup表示为向上弹出菜单
  • 原理
    • 给.dropdown-menu默认样式中设置了display:none；默认状态下拉菜单隐藏
    • 用户点击button.dropdown-toggle时，通过给div.dropdown添加或删除.open类来控制显示或隐藏
  • 下拉分割线
    • 在下拉菜单的两组中间添加一个空的li.divider实现分隔线功能
  • 菜单标题
    • 给下拉菜单的每个分组添加一个标题
    • 用法
      • 添加li.dropdown-header{标题内容}，表示一个分组的标题
  • 对齐方式
    • 菜单按钮相对于菜单内容左对齐或者右对齐
    • 默认是左对齐
    • 变成右对齐
      • 给.dropdown添加样式float:left；
      • .dropdown-menu上添加.pull-right或者.dropdown-menu-right
        • 实现原理
          • right:0;left:auto;
      • 再变回左对齐
        • .dropdown-menu添加.dropdown-menu-left
          • 实现：right:quto;left:0;
  • 菜单项状态
    • ：hover
    • :focus
    • .active
      • 对应的li上添加该类
    • .disabled
      • 对应的li上添加该类
• 按钮组
  • 按钮组
    • 最好加一个label
    • 必须添加jquery.js和bootstrap.js
    • 用div.btn-group容器把多个按钮包裹起来形成按钮组
      • 给div.btn-group添加role=group
      • 容器内的元素必须有.btn类（bootstrap的按钮标志，最好是<a>和<button>）
    • 按钮组出了第一个和最后一个具有边上的圆角，其他按钮没有圆角。（一般bootstrap中的按钮都有圆角）
      • 实现：
        • 默认所有按钮有圆角
        • 除了第一个和最后一个，其他按钮取消圆角效果
        • 第一个保留左边的圆角：border-top-right-radius: 0;border-bottom-right-radius: 0;
        • 最后一个保留右边的圆角：border-top-left-radius: 0;border-bottom-left-radius: 0;
  • 按钮工具栏
    • 必须加一个label
    • 用一个div.btn-toolbar将多个div.btn-group包裹起来，形成工具栏
      • 给div.btn-toolbar添加role=toolbar
      • 实现方式
        • 将被包含的div.btn-group左浮动，并组间保持5px的左外边距
        • 在.btn-toolbar上清除浮动
          • .btn-toolbar:after{clear:both}
    • 工具栏中的按钮组如果也有对应的label，则会堆积到最后（左浮动的原因）
  • 按钮组大小
    • 类似操作按钮大小，在div.btn-group上添加相应类
    • .btn-group-lg
    • .btn-group-sm
    • .btn-group-xs
  • 嵌套分组
    • 结合下拉菜单和按钮组
    • 使用
      • div.btn-group当做div.dropdown,并且和普通按钮放在同一级，下拉菜单其他部分不变，buttondata-toggle=dropdown
      • 下拉菜单的触发按钮当成按钮组的一个成员
  • 垂直分组
    • 把最外层.btn-group换成.btn-group-vertical
    • 如果进行嵌套，里面的每个下拉菜单还是用div.btn-group包裹
      • 实现
        • display:inline-block;position:relative;vertical-align:middle
  • 等分按钮组（自适应分组,两端对齐）
    • 自适应分组，整个按钮组是容器的100%，组中的按钮平分容器宽度
    • 制作等分按钮组使用<a>来制作按钮，保证兼容性（不要用button）
      • 如果非要用button，则把每个button放入一个div.btn-group
        • 大部分浏览器不能把对齐的CSS应用到button元素上
    • .btn-group上追加.btn-group-justified
      • 原理
        • 把btn-group-justified模拟成表格：display:table;把按钮模拟成表格单元：display:table-cell;
• 按钮下拉菜单
  • 把其中一个子按钮当成触发下拉菜单的按钮
    • 在按钮的基础上增加下拉菜单相关的类 <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">按钮下拉菜单<span class="caret"></span></button>
  • 分裂式按钮下拉菜单
    • 一个div.btn-group包含两个按钮，第一个button包含按钮上的文字，第二个button包含小三角，且作为触发下拉菜单的按钮
  • 按钮大小
    • .btn-lg
    • .btn-md
    • .btn.sm
    • .btn-xs
  • 向上弹出下拉菜单
    • 给包裹的div.btn-group添加.dropup
• 输入框组
  • 给input元素进行扩展
    • 只适用于input
    • input.form-control
  • 用div.input-group包裹
  • 可以给input的前、后添加额外元素span.input-group-addon
    • 一个输入框的一侧只能有一个额外元素
    • 一个输入框组只能有一个input
    • span.input-group-addon里面可以添加checkbox,radio
    • 也可以添加button，此时span替换为div.input-group-btn
      • button可以作为触发按钮从而添加下拉菜单
      • button可以表现为分裂式按钮
  • 输入框组大小
    • .input-group-lg
    • .input-group-md
    • .input-group-sm
    • .input-group-xs
• 导航
  • 如果是用导航组件构建导航，需要用nav[role=navigation]元素或者div[role=navigation]包含整个导航
  • 基础样式
    • ul.nav.nav-tabs>li>a{导航文字}
      • 单独的.nav没有导航效果，必须再配合.nav-tabs或者.nav-pills
  • 标签形tab导航
    • 在.nav上追加.nav-tabs
      • 实现原理
        • li按块显示，并在同一水平行上排列
        • 定位非高亮菜单样式和鼠标悬浮效果
    • 添加当前选项（设置默认选项）
      • li.active
    • 禁用选项
      • li.disabled
  • 胶囊形导航
    • .nav追加.nav-pills
      • .active
      • .disabled
  • 垂直堆叠导航
    • 在.nav.nav-pills的基础上追加.nav-stacked
      • 实现：导航不浮动，垂直排列，相邻导航项留有一定间距
    • 组间分割线
      • li.nav-divider
  • 自适应导航
    • 在.nav.nav-tabs或.nav.nav-pills的基础上增加.nav-justified
      • 效果如同.btn-group-justified
      • 存在媒体查询，视口宽度大于768px在一行显示，<798px则堆叠在一起
      • 实现原理
        • ul设置为width:100%;li设置为display:table-cell
  • 导航加下拉菜单
    • 导航结合下拉菜单
    • li当作容器，添加类.dropdown;在容器内添加下拉菜单的内容
      • 可以在嵌套的下拉菜单中添加li.nav-divider或者li.divider充当分隔线
  • 禁用的连接
    • li中添加.disabled
      • 只改变外观，点击依然有效
  • 添加下拉菜单
    • 把li中的a当做下拉菜单的触发器
  • 面包屑导航（路径导航）
    • 告诉用户现在所处页面的位置
    • 使用：ol.breadcrumb>li>a

##导航条

• 特点
  • 响应式
  • 移动设备上可以折叠，可开可关，@grid-float-breakpoint=768px
  • 视口足够大则变为水平展开模式，导航条内元素太多可能会造成内容折行
• 必须用nav[role=navigation]包含整个导航
• 导航条基础
  • 和导航的区别
    • 导航条有背景色，可以是纯链接，可以是表单，还可以表单导航相结合
• 基础导航条
  • div.navbar.nabar-default>ul.nav.navbar-nav>li>a{导航内容}
    • 导航的列表基础上添加.navbar-nav,并添加新的容器div.navbar.navbar-default
    • .navbar在导航.nav基础上，调整菜单浮动、设置左右padding和圆角效果，.navbar-default设置颜色
• 为导航条添加标题、二级菜单及状态
  • div.nvbar.navbar-default>div.navbar-header>a.navbar-brand{标题文字}
    • 可以在菜单项中.avtive,.disabled
    • 添加下拉菜单，li.dropdown当作容器
• 带表单的导航条
  • div.navbar.navbar-default>ul.nav.navbar-nav+form.navbar-form
    • 在导航条中添加一个form.navbar-form
      • 此时form会占据一整行，后面的元素会被挤到下一行
        • 使用navbar-left,或者navbar-right使之浮动，后面的元素可以上来
      • 使表单可以垂直对齐，视口<768px时可以折叠
    • form追加样式.navbar-left,.navbar-right表示左对齐和右对齐
      • 添加浮动float
• 导航条中的按钮、文本和链接（最好别用）
  • 要和.navbar-brand、.navbar-nav配合使用，且数量最多两个
  • .navbar-btn
    • 可能会另起一行，还是别用
    • 不在form中的按钮，在导航条中垂直居中
      • 不要给a元素使用
  • .navbar-text
    • 文本包含在其中，得到正确的样式
  • .navbar-link
    • 让a元素有正确的样式
• 固定导航条
  • 在导航条最外部容器div.navbar上追加以下类
  • .navbar-fixed-top
  • .navbar-fixed-bottom
    • 实现：position:fixed；top或者bottom为0
    • nav包含一个div.container,可以让导航条居中，并在两侧添加padding
    • 固定导航条遮挡主内容
      • 固定导航条默认高度50px，body设置padding-top:70px;或padding-bottom:70px;
      • 把导航条放到内容前面（html中）
  • .navbar-static-top
    • 会随着滚动而消失
• 响应式导航条
  • 窄屏时需要折叠的内容必须包含在div.collapse.navbar-collapse内，并给这个div添加ID或类名
  • 保证窄屏时显示的图标样式（固定写法）
    • <button class="navbar-toggle" type="button" data-toggle="collapse" data-target='#ID> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
  • data-target属性指定需要折叠的div
  • 当屏幕小于768px时，data-target指定位置的div隐藏，显示icon-bar图标；再点击icon-bar图标，隐藏内容显示
• 反色导航条
  • 把.navbar-default换成.navbar-inverse
    • 颜色变化
• 分页导航（带页码）
  • ul.pagination>li>a{1,2,3,...}
  • 设置大小
    • .pagination-lg
    • .pagination-sm
  • li.disable不能禁用点击功能
    • 把<a>换成<span>
• 分页导航（翻页分页导航）
  • ul.pager>(li>a{第一页}+li>a{第二页})
    • 默认状态下分页导航居中显示
      • li.previous“上一页”按钮居左
      • li.next“下一页”按钮居右
    • li.disable不能禁用点击功能
      • 把<a>换成<span>
• 标签
  • 额外信息，提示作用
  • span.label.label-default
    • 颜色
      • .label-default
      • .label-primary
      • .label-success
      • .label-info
      • .label-warning
      • .label-danger
• 徽章
  • 未读消息提醒
  • span.badge
    • 紧跟选项后面
      • 行内元素是可以放到文字节点边上的

其他内置组件

• 略缩图
  • .thumbnail配合网格系统实现
    • div.container>div.row>div.col-md-x>a.thumbnail>img
    • 添加描述信息
      • div.container>div.row>div.col-md-x>(a.thumbnail>img+div.caption)
        • div.caption中放置其他内容，如标题，文本，按钮等
• 警示框
  • 默认警示框
    • div.alert.alert-success{文本}
      • .alert-info
      • .alert-warning
      • .alert.danger
  • 可关闭警示框
    • .alert上追加.alert-dismissable
    • div.alert.alert-dismissable>button.close[data-dismiss=alert]{&times};
      • .close实现警示框关闭按钮的样式
      • data-dismiss='alert'调用js控制关闭
      • &times显示为叉号
  • 警示框链接
    • 给警示框的链接添加.alert-link
    • div.alert.alert-info>a.alert-link{链接地址}
• 进度条
  • 基本样式
    • 两个容器，外部容器表示总进度100%，内部表示当前进度，通过宽度来表示进度
    • div.progress>div.progress-bar[style='width:40%']
  • 彩色进度条
    • .progress-bar追加颜色
      • .progress-bar-success
      • .progress-bar-info
      • .progess-bar-warning
      • .progress-bar-danger
  • 条纹进度条
    • 在.progress上追加.progress-striped
      • CSS3线性渐变
  • 动态进度条
    • 在div.progress.progress-striped上追加.active
      • 动画使背景图像位置不断变化
  • 层叠进度条
    • 不同颜色的进度条放置在一起水平排列
    • div.progress>(div.progress-bar)*3
      • 所有进度条的宽度总和不能超过100%
      • 左浮动
  • 带label的进度条
    • div.progress>div.progress-bar.progress-bar-success[aria-valuenow='20'][aria-valuemin='0][aria-valuemax='100'][style='width:20%]{20%}
• 媒体对象
  • 默认媒体对象
    • div.meida>（a.pull-left>img.media-object）+div.media-body>h1.media-heading
      • .pull-left表示整体居左
      • .media-object一般指图片作为媒体对象的对象
      • .media-body媒体对象的主体
      • .media-heading用来描述一个对象的标题，可选
  • 媒体对象的嵌套
    • 把一组媒体对象放到另一组的.media-body中
      • 阶梯式回复
  • 媒体对象列表
    • ul.media-list>li.media
      • li.media当作默认媒体对象中的外层div.media
      • 实际上就是把媒体对象放到列表中
• 列表组
  • 基础列表组
    • ul.list-group>li.list-group-item
  • 带徽章的列表组
    • li.list-item>span.badge{13}
      • 列表组和徽章组件结合
  • 带链接的列表组
    • 用div.list-group>a.list-group-item代替原来的组合
      • ul和li的配合插入链接，只有文字区域可点击
      • div和a的组合使得整个区域可点击
  • 自定义列表组
    • div.list-group>a.list-group-item>h1.list-group-item-heading+p.list-group-item -text
      • .list-group-item-heading表示定义列表头样式
      • .list-group-item -text定义列表内容
  • 列表组状态设置
    • 在.list-group-item上追加
      • .active
      • .disabled
  • 多彩列表组
    • 在.list-group-item上追加
      • .list-group-item-success
      • .list-group-item-info
      • .list-group-item-warning
      • .list-group-item-danger
• 面板
  • 基础面板
    • div.panel.panel-default>div.panel-body
  • 带有头和尾的面板
    • div.panel.panel-default>(div.panel-heading+div.panel-body+div.panel-footer)
  • 彩色面板
    • 替换.panel-default
      • .panel-success
      • .panel-info
      • .panel-warning
      • .panel-danger
  • 面板中嵌套表格
    • div.panel-body就是一个容器，包裹面板内容
    • 把<table>放到div.panel-body中
      • 把<table>放到div.panel-body外
        • 表格边缘和面板边缘重合
  • 面板中嵌套列表
    • div.panel-body就是一个容器，包裹面板内容
    • 把ul.list-group放到div.panel-body中
      • 列表和面板边缘有间距
        • 把ul.list-group放到div.panel-body外
          • 列表和面板边缘重合

##支持的js插件

• 各功能插件被整合在bootstrap.js中
• 导入js插件
  • 直接导入bootstrap.js或者分开导入各部分插件
• 动画过渡
  • 对应插件transition.js
  • CSS3实现<ie8的不起作用
• 模态弹出框
  • 结构分析
    • div.modal>div.modal-dialog>div.modal-content>(div.modal-header+div.modal-body+div.modal-footer)
    • 实例
  ×Close

  模态弹出窗标题

  模态弹出窗主体内容

  关闭 保存

* 实现原理 * 特点 * 模态弹窗固定在浏览器 * 模态弹窗是自适应的且.modal-dialog水平居中 * 视窗大于768px时，模态弹窗的宽度为600px * 模态弹窗自带蒙版效果 * 调整弹窗大小 * 在.modal-dialog上追加样式.modal-lg,.modal-sm * 触发的两种方法 * 声明式触发 * button[data-toggle='modal'][data-target='#id']+div.modal#id * a[data-toggle='modal'][href='#id'] * js触发 * button.btn+div.modal#id * $('.btn').click(function(){$("#id").modal()}) * 为弹出框增加过度动画效果 * 在.madol追加类名.fade为弹出框增加过渡动画效果 * 使用 * data-参数说明(作为属性使用，放到触发器上） * data-toggle * data-target * data-backdrop * 如果为true，会包含一个背景div，单击背景则关闭弹窗 * 如果为static，单击背景不会关闭弹窗 * data-keyboard * true：可以通过ESC键关闭弹窗 * false：ESC不可关闭弹窗 * data-show * true：显示弹窗 * false：不显示弹窗 * href * 用````触发，href不是以#开头，表示是一个url，弹窗会先加载url内容，并替换.modal-content中的内容 * href设置地址，data-target必须填写定制的id * js方法触发时的参数设置 * $('.btn').click(function(){$('#mymodal').modal({keyboard:false});}) * modal()中的参数(和data系列参数对应) * backdrop布尔值 * keyboard布尔值 * show布尔值，表示初始化时模态弹出窗是否显示 * remote * toggle反转弹出窗的显示状态 * show 触发时显示弹出窗 * hide 触发时关闭弹出窗 * 支持的事件类型 * show.bs.modal * show调用时触发 * shown.bs.modal * 弹出窗完全显示后触发 * hide.bs.modal * hide调用时触发 * hiden.bs.modal * 弹出窗完全隐藏后触发 * $('#mymodal').on('hidden.bs.modal',function(){...})