码迷,mamicode.com
首页 > 其他好文 > 详细

Bootstrap中多媒体对象Media的使用

时间:2015-09-01 01:40:51      阅读:184      评论:0      收藏:0      [点我收藏+]

标签:

 第一、基本的多媒体对象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的使用

标签:

原文地址:http://www.cnblogs.com/professional-NET/p/4774696.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!