<!-- 缩略图thumbnail --> <div> <div> <div> <img src="https://www.jb51.net/111.png"> <div> <h3>Thumbnail label</h3> <p><a href="#" role="button">Button</a></p> </div> </div> </div> <!-- 第二个 --> <div> <div> <img src="https://www.jb51.net/111.png"> <div> <h3>Thumbnail label</h3> <p><a href="#" role="button">Button</a></p> </div> </div> </div> <!-- 第三个 --> <div> <div> <img src="https://www.jb51.net/111.png"> <div> <h3>Thumbnail label</h3> <p><a href="#" role="button">Button</a></p> </div> </div> </div> </div>
六、可关闭的警告框
使用类：alert-dismissible和一个button 贴码如下：
<!-- 为警告框提供关闭按钮 --> <div role="alert"> <button type="button" data-dismiss="alert" aria-label="close"> <span aria-hidden="true">×</span> --添加aria-hidden属性 </button> <strong>warning</strong>better check yourself,you are not looking too good. </div> <!-- data-dismiss="alert"为确保在所有设备上的正确行为 -->
关于情景色，可自行替换。不再描述。设置alert-link可设置与当前警告框相符的颜色。
七、进度条
使用类:progress和实现动画的进度条
<!-- 进度条 --> <div> <div role="progressbar" aria-valuenow="60" aria-valuemax="100" aria-valuemin="0"> 60% </div> </div> <!-- 设置最低宽度 --> <div> <div role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">80% </div> </div> <div> <div role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100">2% </div> </div>
实现动画效果的进度条，条纹的进度条使用progress-bar-striped,实现动画效果加 active即可。贴码如下：不再截图
<!-- 条纹类使用progress-bar-striped --> <div> <div role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"> <span>40% complete</span>100% </div> </div>
也可结合情景色，改变进度条条纹的颜色。
八、列表组，输入组组件
先来看列表组，主要用到list-group类，其次列表项目用list-group-item来写。贴码如下：
<!-- 列表组 --> <ul> <li><span>3</span>1111</li> <li><span>5</span>2222</li> <li>3333</li> <li>4444</li> <li>5555</li> </ul> <!-- 链接作为列表组 也可添加情景类--> <div> <a href="#">2222</a> <a href="#">33333</a> <a href="#">44444</a> <a href="#">55555</a> </div> <!-- 按钮作为列表组，使用div,不能用.btn类 --> <div> <button type="button">1111</button> <button type="button">2222</button> <button type="button">3333</button> <button type="button">4444</button> </div> <!--列表组定制内容 --> <div> <a href="#"> <h4>list group item</h4> <p>11111</p> </a> <a href="#"> <h4>list group item</h4> <p>22222</p> </a> </div>
来看看输入组，使用input-group类，将组件包裹在一起使用。贴码如下：
<!-- 输入组 --> <div> --组件均包含在inout-group的里面 <span> <button type="button">Go</button> </span> <input type="text" aria-label="text"> </div>
九、响应式特性的嵌入内容
理解一下什么意思，什么叫嵌入内容？如何嵌入呢？又如何响应呢？
嵌入：即利用<iframe>、<embed>、<video> 和 <object> 等标签引入外部文件内容。相信html5里的新增的属性大家都知道.video,radio等
响应：根据被嵌入内容的外部容器的宽度，自动创建一个固定的比例，从而让浏览器自动确定视频或 内容 的尺寸，能够在各种设备上缩放。
如果希望让最终样式与其他属性相匹配，还可以明确地使用一个派生出来的 .embed-responsive-item 类。
贴码如下：