bootstrap-警告框/进度条／列表组／面板

警告框

div.alert

警告框颜色

success/info/warning/danger

可关闭的警告框

 <a href="" class="close" data-dismiss="alert">x</a>

警告框的链接

alert-link

进度条

<div class="progress">
      <div class="progress-bar progress-bar-danger" style="width: 66%"></div>
</div>

进度条颜色

success/info/warning/danger

条纹进度条

progress-striped

激活进度条

active

回复列表

<div class="media">
      <a href="" class="pull-left">
        <img src="holder.js/64x64" alt="" class="media-object">
      </a>
      <div class="media-body">
        <h4 class="media-heading">Cras justo odio, dapibus </h4>
        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravidadapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida</p>
      </div>
    </div>

媒体对象

.media

.media-left

.media-object

.media-body

.media.heading

列表组

ul.list-group

li.list-group-itme

链接列表

div.list.group

a.list-group-itme active

列表定制内容

 <div class="list-group col-md-4">
      <a href="" class="list-group-item active">
        <h4>Donec id elit non mi</h4>
        <p>facilisis in, egestas eget quam. Donec id elit non mi porta gravida dapibus ac facilisis in, egestas eget quam</p>
      </a>
      <a href="" class="list-group-item">
        <h4>Donec id elit non mi</h4>
        <p>facilisis in, egestas eget quam. Donec id elit non mi porta gravida dapibus ac facilisis in, egestas eget quam</p>
      </a>
      <a href="" class="list-group-item">
        <h4>Donec id elit non mi</h4>
        <p>facilisis in, egestas eget quam. Donec id elit non mi porta gravida dapibus ac facilisis in, egestas eget quam</p>
      </a>
    </div> 

面板

.panel

.panel-primary

.panel-heading

.panel-title

.panel-body

.panel-footer

内嵌框架

embed-responsive

embed-responsive-16by9
embed-responsive-4by3
embed-responsive-item
well
div.well