第 12 章 列表組皮膚和嵌入元件

水之原發表於2016-04-24
元件

學習要點：

1.列表組元件
2.皮膚元件
3.響應式嵌入元件

主講教師：李炎恢

本節課我們主要學習一下 Bootstrap 的三個元件功能：列表組元件、皮膚元件、 響應式嵌入元件。

一．列表組元件
列表組元件用於顯示一組列表的元件。
//基本例項

<ul class="list-group">
    <li class="list-group-item">
        1.這是起始
    </li>
    <li class="list-group-item">
        2.這是第二條資料
    </li>
    <li class="list-group-item">
        3.這是第三排資訊
    </li>
    <li class="list-group-item">
        4.這是末尾
    </li>
</ul>

//列表項帶勳章

<li class="list-group-item">
    1.這是起始 <span class="badge">10</span>
</li>

//連結和首選

<div class="list-group">
    <a href="#" class="list-group-item active">1.這是起始 <span class="badge">10</span></a>
    <a href="#" class="list-group-item">2.這是第二條資料</a>
    <a href="#" class="list-group-item">3.這是第三排資訊</a>
    <a href="#" class="list-group-item">4.這是末尾</a>
</div>

//按鈕式列表

<div class="list-group">
    <button class="list-group-item active">
        1.這是起始 <span
        class="badge">10</span>
    </button>
    <button class="list-group-item">
        2.這是第二條資料
    </button>
    <button class="list-group-item">
        3.這是第三排資訊
    </button>
    <button class="list-group-item">
        4.這是末尾
    </button>

</div>

//設定專案被禁用

class="list-group-item disabled"

//情景類

<li class="list-group-item list-group-item-success">
    3.這是第三排資訊
</li>

//定製內容

<div class="list-group">
    <a href="#" class="list-group-item active"> <h4>內容標題</h4>
    <p class="list-group-item-text">
        這裡是相關內容詳情！
    </p> </a>
    <a href="#" class="list-group-item"> <h4>內容標題</h4>
    <p class="list-group-item-text">
        這裡是相關內容詳情！
    </p> </a>
    <a href="#" class="list-group-item"> <h4>內容標題</h4>
    <p class="list-group-item-text">
        這裡是相關內容詳情！
    </p> </a>
</div>

 

二．皮膚元件
皮膚元件就是一個存放內容的容器元件。
//基本例項

<div class="panel panel-default">
    <div class="panel-body">
        這裡是詳細內容區！
    </div>
</div>

//帶標題容器的皮膚

<div class="panel panel-default">
    <div class="panel-heading">
        皮膚標題
    </div>
    <div class="panel-body">
        這裡是詳細內容區！
    </div>
</div>

//也可以設定標題元素

<div class="panel-heading">
    <h3 class="panel-title">皮膚標題</h3>
</div>

//帶註腳的皮膚

<div class="panel-footer">
    這裡是底部
</div>

//情景效果：default、success、info、warning、danger、primary

<div class="panel panel-success">

//表格類皮膚

<div class="panel panel-default">
    <div class="panel-heading">
        表格標題
    </div>
    <div class="panel-body">
        <p>
            這裡是表格標題的詳細內容！
        </p>
    </div>
    <table class="table">
        <tr>
            <th>1</th>
            <th>2</th>
            <th>3</th>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
    </table>
</div>

//列表類皮膚

<div class="panel panel-default">
    <div class="panel-heading">
        表格標題
    </div>
    <div class="panel-body">
        <p>
            這裡是表格標題的詳細內容！
        </p>
    </div>
    <ul class="list-group">

        <li class="list-group-item">
            1.這裡是首頁
        </li>
        <li class="list-group-item">
            2.這裡是第二個專案
        </li>
        <li class="list-group-item">
            3.這裡是第三個專案
        </li>
        <li class="list-group-item">
            4.這裡是第四個專案
        </li>
    </ul>
</div>

 

三．響應式嵌入元件
根據被嵌入內容的外部容器的寬度， 自動建立一個固定的比例， 從而讓瀏覽器自動確定內容的尺寸，能夠在各種裝置上縮放。
這些規則可以直接用於<iframe>、<embed>、<video>和<object>元素。

//16:9 響應式

<div class="embed-responsive embed-responsive-16by9">
    <embed width="100%" height="100%"
    src="http://www.tudou.com/v/OUG5JBZ8udc/&bid=05&rpid=50797543&resourceId=50797543_05_05_99/v.swf" type="application/x-shockwave-flash"
    allowscriptaccess="always" allowfullscreen="true" wmode="opaque"></embed>
</div>

//4:3 響應式

<div class="embed-responsive embed-responsive-4by3">
    <embed width="100%" height="100%"
    src="http://www.tudou.com/v/OUG5JBZ8udc/&bid=05&rpid=50797543&resourceId=50797543_05_05_99/v.swf" type="application/x-shockwave-flash"
    allowscriptaccess="always" allowfullscreen="true" wmode="opaque"></embed>
</div>

相關文章