[學習筆記] 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>