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

 

 

效果图如下：

 

转载于:https://www.cnblogs.com/professional-NET/p/4774696.html