缩略图
缩略图在网站中最常用的地方就是产品列表页面，一行显示几张图片，有的在图片底下（左侧或右侧）带有标题、描述等信息。Bootstrap框架将这一部独立成一个模块组件。并通过“thumbnail”样式配合bootstrap的网格系统来实现。可以将产品列表页变得更好看。
<h1>简单的缩略图</h1>
<div class="container">
<div class="row">
<div class="col-md-6 col-xs-3">
<a href="#">
<img src="bootstrap.png" alt="..." class="thumbnail"
style="width: 100px;height: 100px; display: block;">
</a>
</div>
<div class="col-md-6 col-xs-3">
...
</div>
<div class="col-md-6 col-xs-3">
...
</div>
<div class="col-md-6 col-xs-3">
...
</div>
</div>
</div>给缩略图添加标题、描述信息、按钮等
1、把带有 class .thumbnail 的 <a> 标签改为 <div>。
2、在该 <div> 内，您可以添加任何您想要添加的东西。由于这是一个 <div>，我们可以使用默认的基于 span 的命名规则来调整大小。
3、如果您想要给多个图像进行分组，请把它们放置在一个无序列表中，且每个列表项向左浮动。
<h1>简单的缩略图</h1> <div class="container"> <div class="row"> <div class="col-md-6 col-xs-3"> <a href="#"> <img src="bootstrap.png" alt="..." class="thumbnail" style="width: 100px;height: 100px; display: block;"> </a> <div class="caption"> <h3>Bootstrap学习</h3> <p>...</p> <p> <a href="#" class="btn btn-info" type="button">开始学习</a> <a href="#" class="btn btn-info" type="button">正在学习</a> </p> </div> </div> <div class="col-md-6 col-xs-3"> ... </div> <div class="col-md-6 col-xs-3"> ... </div> <div class="col-md-6 col-xs-3"> ... </div> </div> </div>
警示框
Bootstrap框架通过“alert“样式来实现警示框效果。在默认情况之下，提供了四种不同的警示框效果：
1、成功警示框：alert-success
2、信息警示框：alert-info
3、警告警示框：alert-warnning
4、错误警示框：alert-danger
<!-- 警示框 --> <div class="alert alert-info" role="alert">请修改相应信息</div> <div class="alert alert-success" role="alert">谢谢，操作成功</div> <div class="alert alert-warning" role="alert">你已失败两次，还有最后一次机会</div> <div class="alert alert-danger" role="alert">对不起，操作失败</div>可关闭的警示框
大家在平时浏览网页的时候，会发现一些警示框带有关闭按钮，用户一点击关闭按钮就能自动关闭显示的警示框（也就是让警示框隐藏不显示）。在Bootstrap框架中的警示框也具有这样的功能。
使用方法：
只需要在默认的警示框里面添加一个关闭按钮。然后进行三个步骤：
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">×</button> </div>警示框链接
Bootstrap框架是通过给警示框加的链接添加一个名为“alert-link”的类名，通过“alert-link”样式给链接提供高亮显示。
<div class="alert alert-info" role="alert"> 操作成功，5s后<a href="#" class="alert-link">跳转</a> </div>进度条
在网页中，进度条的效果并不少见，比如一个评分系统，比如加载状态等。就如下图所示的一个评分系统，他就是一个简单的进度条效果
Bootstrap框架中对于进度条提供了一个基本样式，一个100%宽度的背景色，然后个高亮的色表示完成进度。其实制作这样的进度条非常容易，一般是使用两个容器，外容器具有一定的宽度，并且设置一个背景颜色，他的子元素设置一个宽度，比如完成度是30%（也就是父容器的宽度比例值），同时给其设置一个高亮的背景色。
1、role属性作用：告诉搜索引擎这个div的作用是进度条。<div class="progress"> <div class="progress-bar" style="width:40%;" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"> <span class="sr-only">40% Complete</span> </div> </div>
2、aria-valuenow="40"属性作用：当前进度条的进度为40%。
3、aria-valuemin="0"属性作用：进度条的最小值为0%。
4、aria-valuemax="100"属性作用：进度条的最大值为100%。
彩色进度条 progress-bar-info | progress-bar-success | progress-bar-warning | progress-bar-danger
<div class="progress"> <div class="progress-bar progress-bar-info" style="width: 60%" role="progressbar" ariavaluenow="60" aria-valuemin="0" aria-valuemax="100"> <span class="sr-only">60% Complete</span> </div> </div>条纹进度条
progress-striped
<div class="progress progress-striped"> <div class="progress-bar progress-bar-info" style="width: 40%" role="progressbar" ariavaluenow="40" aria-valuemin="0" aria-valuemax="100"> <span class="sr-only">40% Complete</span> </div> </div>动态条纹进度条
active
<div class="progress progress-striped active"> <div class="progress-bar progress-bar-info" style="width: 80%" role="progressbar" ariavaluenow="80" aria-valuemin="0" aria-valuemax="100"> <span class="sr-only">80% Complete</span> </div> </div>层叠进度条
可以将不同状态的进度条放置在一起，按水平方式排列。
有一点需要注意，层叠进度条宽度之和不能大于100%，大于100%就会造成下面的不良效果
<div class="progress progress-striped active"> <div class="progress-bar progress-bar-info" style="width: 20%" role="progressbar" ariavaluenow="20" aria-valuemin="0" aria-valuemax="100"> <span class="sr-only">20% Complete</span> </div> <div class="progress-bar progress-bar-warning" style="width: 30%" role="progressbar" ariavaluenow="30" aria-valuemin="0" aria-valuemax="100"> <span class="sr-only">30% Complete</span> </div> <div class="progress-bar progress-bar-success" style="width: 28%" role="progressbar" ariavaluenow="28" aria-valuemin="0" aria-valuemax="100"> <span class="sr-only">28% Complete</span> </div> </div>带label的进度条
<div class="progress progress-striped active"> <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width:90%">90%</div> </div>媒体对象
媒体对象一般是成组出现，而一组媒体对象常常包括以下几个部分：
1、媒体对像的容器：常使用“media”类名表示，用来容纳媒体对象的所有内容
2、媒体对像的对象：常使用“media-object”表示，就是媒体对象中的对象，常常是图片
3、媒体对象的主体：常使用“media-body”表示，就是媒体对像中的主体内容，可以是任何元素，常常是图片侧边内容
4、媒体对象的标题：常使用“media-heading”表示，就是用来描述对象的一个标题，此部分可选
在Bootstrap框架中还常常使用“pull-left”或者“pull-right”来控制媒体对象中的对象浮动方式。
媒体对象的嵌套<div class="media"> <a href="#" class="pull-left"> <img src="bootstrap.png" alt="yy" class="media-object" style="width: 150px;height: 100px" /> </a> <div class="media-body"> <h3 class="media-heading">Bootstrap框架教程</h3> <div>Bootstrap框架是一个优秀的前端框，就算您是一位后端程序员或者你是一位不懂设计的前端人员，你也能依赖于Bootstrap制作做优美的网站...</div> </div> </div>
在Bootstrap框架中的媒体对象的嵌套，只需要将另一个媒体对象结构放置在媒体对象的主体内“media-body”
媒体对象列表<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 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 class="media-body"> <h4 class="media-heading">Media Heading</h4> <div>...</div> </div> </div> </div> </div> </div> </div>
Bootstrap框架提供了一个列表展示的效果，在写结构的时候可以使用ul，并且在ul上添加类名“media-list”，而在li上使用“media”
<ul class="media-list"> <li class="media"> <a href="#" class="pull-left"> <img src="http://a.disquscdn.com/uploads/users/3740/2069/avatar92.jpg?1406972031" alt="..." class="media-object"> </a> <div class="media-body"> <h3 class="media-heading">我是大漠</h3> <div>我是W3cplus站长大漠，我在写Bootstrap框中的媒体对象测试用例</div> </div> </li> <li class="media"> <a href="#" class="pull-left"> <img src="http://tp2.sinaimg.cn/3306361973/50/22875318196/0" alt="..." class="media-object"> </a> <div class="media-body"> <h3 class="media-heading">慕课网</h3> <div>大漠写的《玩转Bootstrap》系列教程即将会在慕课网上发布</div> </div> </li> <li class="media"> <a href="#" class="pull-left"> <img src="http://tp4.sinaimg.cn/1167075935/50/22838101204/1" alt="..." class="media-object"> </a> <div class="media-body"> <h3 class="media-heading">W3cplus</h3> <div>W3cplus站上还有很多教程....</div> </div> </li> </ul>列表组
列表组是Bootstrap框架新增的一个组件，可以用来制作列表清单、垂直导航等效果，也可以配合其他的组件制作出更漂亮的组件。
基础列表组
1、list-group：列表组容器，常用的是ul元素，当然也可以是ol或者div元素
2、list-group-item：列表项，常用的是li元素，当然也可以是div元素
<ul class="list-group"> <li class="list-group-item">揭开CSS3的面纱</li> <li class="list-group-item">CSS3选择器</li> <li class="list-group-item">CSS3边框</li> <li class="list-group-item">CSS3背景</li> <li class="list-group-item">CSS3文本</li> </ul>带徽章的列表组
只要在“list-group-item”中添加徽章组件“badge”
<ul class="list-group"> <li class="list-group-item"><span class="badge">13</span>揭开CSS3的面</li> <li class="list-group-item"><span class="badge">456</span>CSS3选择器</li> <li class="list-group-item"><span class="badge">892</span>CSS3边框</li> <li class="list-group-item"><span class="badge">90</span>CSS3背景</li> <li class="list-group-item"><span class="badge">1290</span>CSS3文本</li> </ul>带链接的列表组
1、在基础列表组的基础上，给列表项的文本添加链接，这样做有一个不足之处，就是链接的点击区域只在文本上有效
2、在Bootstrap框架中，还是采用了另一种实现方式。就是将ul.list-group使用div.list-group来替换，而li.list-group-item直接用a.list-group-item来替换。
<div class="list-group"> <a href="#" class="list-group-item">性能优化之PHP优化<span class="badge">23</span></a> <a href="#" class="list-group-item">Canvas绘图详解<span class="badge">34</span></a> <a href="#" class="list-group-item">玩转Bootstrap<span class="badge">5</span></a> <a href="#" class="list-group-item">基于Bootstrap的网页开发<span class="badge">13</span></a> </div>自定义列表组
Bootstrap框加在链接列表组的基础上新增了两个样式：
1、list-group-item-heading：用来定义列表项头部样式
2、list-group-item-text：用来定义列表项主要内容
这两个样式最大的作用就是用来帮助开发者可以自定义列表项里的内容
<div class="list-group"> <a href="#" class="list-group-item"> <h4 class="list-group-item-heading">玩转Bootstrap<span class="badge">5</span></h4> <p class="list-group-item-text">Bootstrap框架是一个非常受欢迎的前端开发框架，他能让后端程序员和不懂设计的前端人员制作出优美的Web页面或Web应用程序。</p> </a> <a href="#" class="list-group-item"> <h4 class="list-group-item-heading">基于Bootstrap的网页开发<span class="badge">13</span></h4> <p class="list-group-item-text">Bootstrap是用于前端开发的工具包，提供了优雅的HTML和CSS规范，并基于jQuery开发了丰富的Web组件。课程介绍了Bootstrap框架的基本知识，并基于Bootstrap框架...</p> </a> </div>列表项的状态设置：active | disabled
<div class="list-group"> <a href="##" class="list-group-item active">性能优化之PHP优化<span class="badge">10</span></a> <a href="##" class="list-group-item">Canvas绘图详解<span class="badge">3</span></a> <a href="##" class="list-group-item disabled">玩转Bootstrap<span class="badge">0</span></a> <a href="##" class="list-group-item">基于bootstrap的网页开发<span class="badge">22</span></a> </div>
多彩列表组
list-group-item-success：成功，背景色绿色
list-group-item-info：信息，背景色蓝色
list-group-item-warning：警告，背景色为黄色
list-group-item-danger：错误，背景色为红色<div class="list-group"> <a href="##" class="list-group-item list-group-item-success">性能优化之PHP优化<span class="badge">10</span></a> <a href="##" class="list-group-item list-group-item-info">Canvas绘图详解<span class="badge">3</span></a> <a href="##" class="list-group-item list-group-item-warning">玩转Bootstrap<span class="badge">0</span></a> <a href="##" class="list-group-item list-group-item-danger">基于bootstrap的网页开发<span class="badge">22</span></a> </div>面板
面板（Panels）是Bootstrap框架新增的一个组件，其主要作用就是用来处理一些其他组件无法完成的功能。
基础面板非常简单，就是一个div容器运用了“panel”样式，产生一个具有边框的文本显示块。由于“panel”不控制主题颜色，所以在“panel”的基础上增加一个控制颜色的主题“panel-default”，另外在里面添加了一个“div.panel-body”来放置面板主体内容<div class="panel panel-default"> <div class="panel-body">我是一个基础面板，带有默认主题样式风格</div> </div>带有头和尾的面板
1、panel-heading：用来设置面板头部样式
2、panel-footer：用来设置面板尾部样式彩色面板<div class="panel panel-default"> <div class="panel-heading">头部</div> <div class="panel-body">我是一个基础面板</div> <div class="panel-footer">尾部</div> </div>
panel-primary：重点蓝
panel-success：成功绿
panel-info:信息蓝
panel-warning：警告黄
panel-danger：危险红
面板中嵌套表格
<div class="panel panel-default"> <div class="panel-heading">图解CSS3</div> <div class="panel-body"> <p>详细讲解了...</p> <table class="table table-bordered"> ... </table> </div> <div class="panel-footer">作者：大漠</div> </div>这样嵌套的表格由于panel设置了padding:15px所以表格与面板之间会有留白，在实际使用的时候需要把table提取到panel-body外面
<div class="panel panel-default"> <div class="panel-heading">图解CSS3</div> <div class="panel-body"> <p>详细讲解了...</p> </div> <table class="table table-bordered"> <thead> <tr> <th>书名</th> <th>作者</th> </tr> </thead> <tbody> <tr> <td>图解CSS3</td> <td>大漠</td> </tr> </tbody> </table> <div class="panel-footer">作者：大漠</div> </div>面板中嵌套列表组
面板中嵌套列表组与嵌套表格相似，如果将列表组放入“panel-body”中，面板与列表组之间有留白，故可以将列表组拿出来，优化代码如下：
<div class="panel panel-default"> <div class="panel-heading">图解CSS3</div> <div class="panel-body">…</div> <ul class="list-group"> <li class="list-group-item">我是列表项</li> <li class="list-group-item">我是列表项</li> <li class="list-group-item">我是列表项</li> </ul> <div class="panel-footer">作者：大漠</div> </div>
158
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
