Bootstrap中多媒體對象Media的使用

標籤：

 第一、基本的多媒體對象Media-Object：可用在圖片的解說，論壇的留言上etc

  

<div class="container">        <h3>            基本的多媒體對象執行個體</h3>        <div class="media">            <a class="pull-left" href="#">                <img class="media-object" src="Images/mediaobject/c1.jpg" alt="car 1" />            </a>            <div class="media-body">                <h4 class="media-heading">                    this is a Automobili Lamborghini S.p.A.[white]                </h4>                this is content for object.do you think about media. welcome use the media object                for you website.            </div>        </div>        <div class="media">            <a class="pull-left" href="#">                <img class="media-object" src="Images/mediaobject/c2.jpg" alt="car 2" />            </a>            <div class="media-body">                <h4 class="media-heading">                    this is a Automobili Lamborghini S.p.A.[gray]                </h4>                this is content for object.do you think about media. welcome use the media object                for you website.                <br />                this is a Automobili Lamborghini S.p.A.[gray] this is content for object.do you                think about media. welcome use the media object for you website.                <br />                <br />                <br />                <br />                <br />                <br />                <br />                <br />                <div class="media">                    <a class="pull-left" href="#">                        <img class="media-object" src="Images/mediaobject/c3.jpg" alt="car3" />                        <h4 class="media-heading">                            this is a Automobili Lamborghini S.p.A.[orange]                        </h4>                        this is a Automobili Lamborghini S.p.A.[gray] this is content for object.do you                        think about media. welcome use the media object for you website. </a>                </div>            </div>        </div>    </div>

View Code

 

 第二、 多媒體列表組：通過無序列表實現裡面也可嵌套：

 

<div class="container">        <h3>            多媒體對象列表通過無序列表來實現</h3>        <ul class="media-list">            <li class="media"><a class="pull-left" href="#">                <img class="media-object" src="Images/mediaobject/c4.jpg" alt="car 4" />            </a>                <div class="media-body">                    <h4 class="media-heading">                        this is a Automobili Lamborghini S.p.A.[yellow]</h4>                    <p class="media-middle">                        do something for your future.</p>                    <div class="media-bottom">                        you are successful</div>                </div>            </li>            <li class="media"><a class="pull-right" href="#">                <img class="media-object" src="Images/mediaobject/c5.jpg" alt="car 5" />            </a>                <div class="media-body">                    <h4 class="media-heading">                        this is a Automobili Lamborghini S.p.A.[green]</h4>                    <div class="media-right">                        turn of right?</div>                    <div class="media-left">                        turn of left?</div>                </div>            </li>        </ul>    </div>

View Code

 

 

如下：

 

Bootstrap中多媒體對象Media的使用