bootstrap學習筆記 多媒體物件

浪花一朵朵發表於2015-05-22
boot筆記物件

本文將介紹Bootstrap中的多媒體物件(Media Object).這些抽象的物件樣式用於建立各種型別的元件（比如部落格評論），我們可以在元件中使用圖文混排，影象可以左對齊或者右對齊。媒體物件可以用更少的程式碼來實現媒體物件與文字的混排。

媒體物件輕量標記、易於擴充套件的特性是通過向簡單的標記應用class來實現的。你可以在html標籤中新增以下兩種形式來設定媒體物件：

      media:該class 允許將媒體物件裡的多媒體（影象、視訊、音訊）浮動到內容區塊的左邊或者右邊。

  　 media-list 如果你需要一個列表，各項內容是無序列表的一部分，可以使用class.可用於評論列表與文章列表。

先看例項：

html

<h2>Media</h2>
<div class="media">
    <a class="pull-left" href="#">
        <img alt="媒體物件" src="~/aiya.png" />
    </a>
    <div class="media-body">
        <h4 class="media-heading">媒體物件</h4>
        去年8月7日晚上7時50分左右,小晴和小勇到南海某小區游泳池游泳。下水約10分鐘後,小晴就被發現側身躺在泳池中溺水昏迷。救生員對其展開現場施救,約20分鐘後,醫護人員趕到,小晴被送往南海區中醫院搶救,後又先後轉至廣州珠江醫院和廣東三九腦科醫院救治。
    </div>
</div>

<div class="media">
    <a class="pull-left" href="#">
        <img class="media-object" src="~/aiya.png" alt="" />
    </a>
    <div class="media-body">
        <h4 class="media-heading">媒體標題</h4>
        在巴西最著名的城市裡約熱內盧，李克強從市長手裡接受了一把金色的“城市鑰匙”。此前獲贈過這把“城市鑰匙”的，只有巴西前總統盧拉、教皇方濟各、國際足聯主席布拉特、國際奧委會主席巴赫4位客人。
        <div class="media">
            <a href="#" class="pull-left">
                <img src="~/QQ截圖20150506113947.png" alt="" />
            </a>
            <div class="media-body">
                <h4 class="media-heading">媒體標題</h4>
                國新辦今日舉行國務院政策例行吹風會，介紹全面推開縣級公立醫院綜合改革、城市公立醫院綜合改革試點、中醫藥健康服務發展規劃(2015-2020年)、深化醫藥衛生體制改革2015年重點工作等有關情況。
            </div>
        </div>

    </div>
</div>

 

media list效果：

html:

<h4>列表</h4>

<ul class="media-list">
    <li class="meida">
        <a class="pull-left" href="#">
            <img alt="媒體物件" src="~/aiya.png" />
        </a>
        <div class="media-body">
            <h4 class="media-heading">媒體物件</h4>
            去年8月7日晚上7時50分左右,小晴和小勇到南海某小區游泳池游泳。下水約10分鐘後,小晴就被發現側身躺在泳池中溺水昏迷。救生員對其展開現場施救,約20分鐘後,醫護人員趕到,小晴被送往南海區中醫院搶救,後又先後轉至廣州珠江醫院和廣東三九腦科醫院救治。
            <div class="media">
                <a href="#" class="pull-left">
                    <img src="~/aiya.png" alt="" />
                </a>
                <div class="media-body">
                    <h4 class="media-heading">媒體標題</h4>
                    國新辦今日舉行國務院政策例行吹風會，介紹全面推開縣級公立醫院綜合改革、城市公立醫院綜合改革試點、中醫藥健康服務發展規劃(2015-2020年)、深化醫藥衛生體制改革2015年重點工作等有關情況。
                </div>
            </div>
        </div>
    </li>
    <li class="meida">
        <a class="pull-left" href="#">
            <img class="media-object" src="~/aiya.png" alt="" />

        </a>
        <div class="media-body">
            <h4 class="media-heading">媒體標題</h4>
            在巴西最著名的城市裡約熱內盧，李克強從市長手裡接受了一把金色的“城市鑰匙”。此前獲贈過這把“城市鑰匙”的，只有巴西前總統盧拉、教皇方濟各、國際足聯主席布拉特、國際奧委會主席巴赫4位客人。
        <div class="media">
            <a href="#" class="pull-left">
                <img src="~/aiya.png" alt="" />
            </a>
            <div class="media-body">
                <h4 class="media-heading">媒體標題</h4>
                國新辦今日舉行國務院政策例行吹風會，介紹全面推開縣級公立醫院綜合改革、城市公立醫院綜合改革試點、中醫藥健康服務發展規劃(2015-2020年)、深化醫藥衛生體制改革2015年重點工作等有關情況。
                <div class="media">
                    <a href="#" class="pull-left">
                        <img src="~/aiya.png" alt="" />
                    </a>
                    <div class="media-body">
                        <h4 class="media-heading">媒體標題</h4>
                        國新辦今日舉行國務院政策例行吹風會，介紹全面推開縣級公立醫院綜合改革、城市公立醫院綜合改革試點、中醫藥健康服務發展規劃(2015-2020年)、深化醫藥衛生體制改革2015年重點工作等有關情況。


                    </div>
                </div>

            </div>
        </div>

        </div>
    </li>

    <li class="media">
        <a href="#" class="pull-left">
            <img src="~/aiya.png" alt="" />
        </a>
        <div class="media-body">
            <h4 class="media-heading">媒體標題</h4>
            國新辦今日舉行國務院政策例行吹風會，介紹全面推開縣級公立醫院綜合改革、城市公立醫院綜合改革試點、中醫藥健康服務發展規劃(2015-2020年)、深化醫藥衛生體制改革2015年重點工作等有關情況。


        </div>
    </li>
</ul>

本節完。

相關文章