6. 其它内置组件

1. 缩略图
 一般是一列图片，并且还有标题及描述信息。标题和描述信息需要放在同一个类名为“.caption”容器里面。

<div class="container">
    <div class="row">
    	<div class="col-xs-6 col-md-3">
			<a href="#" class="thumbnail">
				<img src="http://img.mukewang.com/5434eba100014fe906000338.png" style="height: 180px; width: 100%; alt="">
			</a>
			<div class="caption">
    		 <h4>js组件部分</h4>   
             <p>Bootstrap框架是一个优秀的前端框Bootstrap框架是一个优秀的前端框</p>
             <button class="btn btn-success" type="button">下载</button>
             <button class="btn btn-danger" type="button">不学</button>
			</div>
		</div>
	    <div class="col-xs-6 col-md-3">
	    	同上，略...
    		<div class="caption">
    		同上，略...
	    	</div>
    	<div class="col-xs-6 col-md-3">
		    同上，略...
    		<div class="caption">
    		 同上，略...
			</div>
	    </div>
	    <div class="col-xs-6 col-md-3">
	    	同上，略...
    		<div class="caption">
    		同上，略...
			</div>		    
	    </div>
	</div>
</div>

 
2. 警示框
 a. 默认警示框: 有几种风格(在类.alert基础上追加)： alert-success/info/warning/danger
 b. 可关闭的警示框  使用方法：
  1、需要在基本警示框“alert”的基础上添加“alert-dismissable”样式。
    2、在button标签中加入class="close"类，实现警示框关闭按钮的样式。
    3、要确保关闭按钮元素上设置了自定义属性：“data-dismiss="alert"”（因为可关闭警示框需要借助于Javascript来检测该属性，从而控制警示框的关闭）。
 

<div class="alert alert-info alert-dismissable" role="alert">请修改相应信息
    <button class="close" data-dismiss="alert" type="button">×</button>
</div>

  c. 警示框的链接  给警示框加的链接a标签添加一个名为“alert-link”的类名。


3. 进度条
  a.基本样式 用法： 外容器使用“progress”样式，子容器使用“progress-bar”样式。其中progress用来设置进度条的容器样式，而progress-bar用于限制进度条的进度。

结构优化：
 <div class="progress">
 <!-- min-width:用来当进度为零时也至少会显示2px的宽度 -->
    <div class="progress-bar" style="width:40%; min-width:2px" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
        <span class="sr-only">40% Complete</span>
    </div>
</div>

1、role属性作用：告诉搜索引擎这个div的作用是进度条。
2、aria-valuenow="40"属性作用：当前进度条的进度为40%。
3、aria-valuemin="0"属性作用：进度条的最小值为0%。
4、aria-valuemax="100"属性作用：进度条的最大值为100%。
  b.彩色进度条 有四种： progress-bar-info/success/warning/danger
  c.条纹进度条  在.progress基础上加类名“progress-striped”即可。
  d.动态条纹进度条 在进度条“progress progress-striped”两个类的基础上再加入“active”类名。
 特别注意：要让条纹进度条动起来，就需要让“progress-striped”和“active”同时运用，不然条纹进度条是不具备动效效果。
  e.层叠进度条 将不同状态的进度条放置在一起，按水平方式排列。

<div class="progress">
	<div class="progress-bar progress-bar-success" style="width:20%">20%</div>
	<div class="progress-bar progress-bar-info progress-bar-striped" style="width:20%">20%</div>
	<div class="progress-bar progress-bar-warning" style="width:60%">60%</div>
</div>

4.媒体对象
 效果为“左边居左（或居右），内容居右（或居左）排列”，比如评论回复评论的结构等。
 结构：
  ☑   媒体对像的容器：常使用“media”类名表示，用来容纳媒体对象的所有内容
  ☑  媒体对像的对象：常使用“media-object”表示，就是媒体对象中的对象，常常是图片
  ☑  媒体对象的主体：常使用“media-body”表示，就是媒体对像中的主体内容，可以是任何元素，常常是图片侧边内容
  ☑  媒体对象的标题：常使用“media-heading”表示，就是用来描述对象的一个标题，此部分可选


  a.媒体对象的嵌套

<div class="media">
    <a class="pull-left" href="#">
        <img class="media-object" src="…" alt="...">
    </a>
    <div class="media-body">
        <h4 class="media-heading">Media Heading</h4>
        <div>…</div>
        <div class="media">
            <a class="pull-left" href="#">
                <img class="media-object" src="…" alt="...">
            </a>
            </div>
        </div>
    </div>
</div>

  b. 媒体对象列表
 用法： 用ul结构时，在ul上添加类名“media-list”，而在li上使用“media”，往下结构同正常媒体对象结构。


 4.列表组
   a.基础列表组
用法；
  ☑  list-group：列表组容器，常用的是ul元素，当然也可以是ol或者div元素
  ☑  list-group-item：列表项，常用的是li元素，当然也可以是div元素
  b. 带徽章的列表组，只要往li里面加<span class="badge">文字/内容</span>即可。
  c. 带链接的列表组 
缺点： 点击区域只在文本上有效
解决办法：可以用div代替ul,a代替li标签。
  d. 自定义列表组
用法：  还可结合网格系统实现水平排列
  ☑  list-group-item-heading：用来定义列表项头部样式
  ☑  list-group-item-text：用来定义列表项主要内容

<div class="list-group">
	<a href="##" class="list-group-item">
		<h4 class="list-group-item-heading">Sass中国</h4>
		<p class="list-group-item-text">致力于为中国开发者提供最全面，最具影响力，最前沿的Sass相关技术与教程...</p>
	</a>
</div>

  e. 列表项的状态设置
  ☑  active：表示当前状态
  ☑  disabled：表示禁用状态
  f. 多彩列表组  有： list-group-item-success/info/warning/danger


5.面板
  a. 基础面板 包括外层容器panel,标题panel-heading，内容panel-body,尾部panel-footer。

<div class="panel panel-default">
	<div class="panel-heading">panel-heading</div>
	<div class="panel-body">详细讲解了选择器...</div>
	<div clas="panel-footer">panel-footer</div>
</div>

  b. 彩色面板 有panel-primary/success/info/warning/danger,在panel基础上添加。
  c. 面板中嵌套表格
因为panel-body有个内边距为15，所以若想表格紧贴着body,可把table移出panel-body容器外。
  d. 面板中嵌套列表组
注意的是：列表组ul用“.list-group”, ul用“.list-group-item”，同上理由，也可移出panel-body外。




支持Javascript插件
1. 导入 （直接导入bootstrap.js即可。）
  ☑ 动画过渡（Transitions）:对应的插件文件“transition.js”
  ☑ 模态弹窗（Modal）:对应的插件文件“modal.js”
  ☑ 下拉菜单（Dropdown）：对应的插件文件“dropdown.js”
  ☑ 滚动侦测（Scrollspy）：对应的插件文件“scrollspy.js”
  ☑ 选项卡（Tab）：对应的插件文件“tab.js”
  ☑ 提示框（Tooltips）：对应的插件文件“tooltop.js”
  ☑ 弹出框（Popover）：对应的插件文件“popover.js”
  ☑ 警告框（Alert）：对应的插件文件“alert.js”
  ☑ 按钮（Buttons）：对应的插件文件“button.js”
  ☑ 折叠/手风琴（Collapse）：对应的插件文件“collapse.js”
  ☑ 图片轮播Carousel：对应的插件文件“carousel.js”
  ☑ 自动定位浮标Affix：对应的插件文件“affix.js”


2.动画过渡（Transitions）
注： 因为是采用CSS3实现的，所以IE6~8不支持。
Bootstrap中使用了过渡动画的组件有：
模态弹出窗（Modal）的滑动和渐变效果、选项卡（Tab）的渐变效果、警告框（Alert）的渐变效果、图片轮播（Carousel）的滑动效果


3.模态弹出框（Modals）
结构：
  ☑最外层容器.modal，第二层.modal-dialog，内容.modal-content，以下为内容包含部分：
  ☑ 弹出框头部，一般使用“modal-header”表示，主要包括标题和关闭按钮
  ☑ 弹出框主体，一般使用“modal-body”表示，弹出框的主要内容
  ☑ 弹出框脚部，一般使用“modal-footer”表示，主要放置操作按钮
原理分析：
  1.弹出窗是因定在浏览器中（默认隐藏），且是自适应水平居中，当可视窗口>768px小于其它宽度时，宽度为600px。
  2.默认有一个的黑色蒙层效果。
  3.对话框有modal-lg和modal-sm两种尺寸，加在modal-dialog容器上。
  4.触发模态弹出窗2种方法
主要有两种：
 声明式触发方法： 通过自定义属性data-toggle="modal"(固定)和data-target="类名/ID名"。
        或者用a标签的href属性代替data-target属性
 js触发方法： 取消data-属性，用js触发


  a. 为弹出框增加过度动画效果  在.modal容器上添加.fade
  b. 模态弹出窗的参数使用说明：
自定义data-属性
 
JavaScript触发时的参数设置 （ 包括属性设置、参数设置和事件设置 ）

<button class="btn btn-primary" type="button">点击我</button>
<div class="modal" id="mymodal">
    <div class="modal-dialog">
        <div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
				<h4 class="modal-title">模态弹出窗标题</h4>
			</div>
			<div class="modal-body">
				<p>模态弹出窗主体内容</p>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
				<button type="button" class="btn btn-primary">保存</button>
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal-dialog -->
</div><!-- /.modal -->


<script>
  $(function(){
    $(".btn").click(function(){
      $("#mymodal").modal("show");
    });
    
    $("#mymodal").on("show.bs.modal",function(e){
        alert("e.target: "+ e.target);
    }).on("shown.bs.modal",function(e){
        alert("e.target: "+e.target);
    }).on("hide.bs.modal",function(e){
        alert("e.target: "+e.target);
    }).on("hidden.bs.modal",function(e){
        alert("e.target: "+e.target);
    });
  });
</script>

其他的还有蛮多的，之后再补好了。