[学习笔记] bootstrap (九) :布局组件[缩略图,警告,进度条,多媒体列表,列表组,面板,wells]

缩略图

<div class="thumbnail">
    <img src="11.png" alt="kk" />
    <div class="caption">
        <h3>商品名称</h3>
        <p>价格: $<strong>99.9</strong></p>
        <p><a href="#" >加入购物车</a> </p>
    </div>
</div>

警告

        <div class="alert alert-success alert-dismissable">
            <button type="button" class="close" data-dismiss="alert"
                    aria-hidden="true">
                &times;
            </button>
            成功！很好地完成了提交。
        </div>
        <div class="alert alert-info alert-dismissable">
            <button type="button" class="close" data-dismiss="alert"
                    aria-hidden="true">
                &times;
            </button>
            信息！请注意这个信息。
        </div>
        <div class="alert alert-warning alert-dismissable">
            <button type="button" class="close" data-dismiss="alert"
                    aria-hidden="true">
                &times;
            </button>
            警告！请不要提交。
        </div>
        <div class="alert alert-danger alert-dismissable">
            <button type="button" class="close" data-dismiss="alert"
                    aria-hidden="true">
                &times;
            </button>
            错误！请进行一些更改。
        </div>

进度条

<div class="progress progress-striped active">
    <div class="progress-bar progress-bar-success" role="progressbar"
         aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
         style="width: 40%;">
        <span class="sr-only">40% 完成</span>
    </div>
</div>

多媒体列表

……

列表组

<div class="list-group">
    <a href="#" class="list-group-item active">
        免费域名注册
    </a>
    <a href="#" class="list-group-item">24*7 支持</a>
    <a href="#" class="list-group-item">免费 Window 空间托管</a>
    <a href="#" class="list-group-item">图像的数量 <span class="badge">30</span></a>
    <a href="#" class="list-group-item">每年更新成本</a>
</div>

面板

<div class="panel panel-default">
    <div class="panel-heading">
        Title
    </div>
    <div class="panel-body">
        Body
    </div>
    <div class="panel-footer">
        Foot
    </div>
</div>

wells

<div class="well">
    Some words! some keys!
</div>