<!--

    media                              图文混排

    media-left(right)                图片的区域 在左边显示(右边)

    media-body                        内容区域

    media-heading                    内容区域里的标题

    media-middle                    图片居中

    media-bottom                    图片居下

-->

<div class="container">

    <div class="row" style="width:500px">

        <div class="media">

            <a href="#" class="media-left media-middle media-bottom">

                <img src="user_photo.png" width="100"/>

            </a>

            <div class="media-body">

                <h4 class="media-heading">java学院</h4>

                <p>javajavajavajavajavajavajavajavajava

                    javajavajavajavajavajavajavajavajava

                </p>

            </div>

        </div>

    </div>

    <!-- 图片在右边显示-->

    <div class="row" style="width:500px">

        <div class="media">

            <div class="media-body">

                <h4 class="media-heading">java学院</h4>

                <p>javajavajavajavajavajavajavajavajava

                    javajavajavajavajavajavajavajavajava

                </p>

            </div>

            <a href="#" class="media-right">

                <img src="user_photo.png" width="100"/>

            </a>

        </div>

    </div>

    <!-- 左右都有图片-->

    <div class="row" style="width:500px">

        <div class="media">

            <a href="#" class="media-left">

                <img src="user_photo.png" width="100"/>

            </a>

            <div class="media-body">

                <h4 class="media-heading">java学院</h4>

                <p>javajavajavajavajavajavajavajavajava

                    javajavajavajavajavajavajavajavajava

                </p>

            </div>

            <a href="#" class="media-right">

                <img src="user_photo.png" width="100"/>

            </a>

        </div>

    </div>

    <!-- 类似留言引用 右侧内容又嵌套了一个media-->

    <div class="row" style="width:500px">

        <div class="media">

            <a href="#" class="media-left">

                <img src="user_photo.png" width="100"/>

            </a>

            <div class="media-body">

                <h4 class="media-heading">java学院</h4>

                <p>javajavajavajavajavajavajavajavajava

                    javajavajavajavajavajavajavajavajava

                </p>

                <div class="media">

                    <a href="#" class="media-left">

                        <img src="user_photo.png" width="100"/>

                    </a>

                    <div class="media-body">

                        <h4 class="media-heading">java学院</h4>

                        <p>javajavajavajavajavajavajavajavajava

                            javajavajavajavajavajavajavajavajava

                        </p>

                    </div>

                </div>

            </div>

        </div>

    </div>

</div>

效果：

bootstrap-图文混排 media的更多相关文章

  1. Android 图文混排 通过webview实现并实现点击图片

    在一个开源项目看到是用的webview 实现的 1. 这是在asset中的一个模板html <html> <head> <title>News Detail< ...

  2. 用NSAttributedString实现简单的图文混排

    iOS7以后,因为TextKit的强大,可以用NSAttributedString很方便的实现图文混排(主要是利用了NSTextAttachment). 关于Textkit的牛逼之处,可以参考objc ...

  3. 图文混排－－CoreText的简单运用

    常见的在一些微博微信中可以看见一段文字中有不同的字体,字体有不同的颜色,并且可能会有一些笑脸之类的表情,这些可以通过图文混排做到. 图文混排可以通过WebView和CoreText做到,其他还有别的方 ...

  4. 【转】关于FLASH中图文混排聊天框的小结

    原文链接 图文混排也是FLASH里一个很古老的话题了,我们不像美国佬那样游戏里面聊天框就是聊天框,全是文字干干净净,也不像日本人发明了并且频繁地使用颜文字.不管是做论坛.做游戏,必定要实现的一点就是带 ...

  5. DIV+CSS 图文混排的图片居中办法

    不少人为了让 Div 图文混排的图片可以居中,给 IMG 套各式各样的 SPAN.DIV.LI 等等,以便于使用 text-align来进行居中. <div>图文混排 <br> ...

  6. ios图文混排

    图文混排的形式 1. 富文本形式 2. core Text(文字排版) 3. TextKit 4. UIWebView 一.富文本 我们可以采用attributeString来进行图文混排.例如一个文 ...

  7. Coretext实现图文混排及Gif图片播放

    CoreText是iOS3.2推出的一套文字排版和渲染框架,可以实现图文混排,富文本显示等效果. CoreText中的几个重要的概念:  CTFont CTFontCollection CTFontD ...

  8. 【iOS】使用CoreText实现图文混排

    iOS没有现成的支持图文混排的控件,而要用多个基础控件组合拼成图文混排这样复杂的排版,是件很苦逼的事情.对此的解决方案有使用CoreText进行绘制,或者使用TextKit.本文主要讲解对于CoreT ...

  9. ListView异步加载图片，完美实现图文混排

    昨天参加一个面试,面试官让当场写一个类似于新闻列表的页面,文本数据和图片都从网络上获取,想起我还没写过ListView异步加载图片并实现图文混排效果的文章,so,今天就来写一下,介绍一下经验. Lis ...

随机推荐

  1. Windows Store App 变形特效

    在应用程序的开发过程中,为了让界面按照期望的效果显示,有时会对界面元素应用变形特效,例如图片的缩放.旋转.移动等.与3D特效不同,在界面元素实现变形特效之后,其平行关系不会发生改变,只不过是位置.大小 ...

  2. Windows Store App 旋转特效

    使用Projection类可以实现界面元素的三维效果,它可以使界面上的元素在三维空间中沿着X轴.Y轴或者Z轴旋转一定的角度,在透视转换中此类又称为元素的Projection属性,用于对元素使用3D特效 ...

  3. 测试nfs和cifs

    losetup /dev/loop1 file1.img losetup /dev/loop2 file2.img losetup /dev/loop3 file3.img mkfs -t ext4 ...

  4. iOS开发多线程篇—创建线程

    iOS开发多线程篇—创建线程 一.创建和启动线程简单说明 一个NSThread对象就代表一条线程 创建.启动线程 (1) NSThread *thread = [[NSThread alloc] in ...

  5. asp.net还原备份数据库（C#）

    因为做项目的时候用到对数据库的还原和备份,第一次接触,所以上网查了关于这方面的资料,网络果然是个好东西,该有的都有了,这里我就把原文中的代码直接粘贴过来了. using System; using S ...

  6. ubuntu arm妙算加载cp210x驱动

    在妙算TK1上安装ros后,插上usb串口竟然没有驱动 无奈装 从http://www.silabs.com/products/mcu/pages/usbtouartbridgevcpdrivers. ...

  7. C# 跨线程操作无效

    提示此错误的原因就是控件由主线程创建,在另一个线程进行操作时就会被阻止,防止数据间随意篡改. 如果一定要跨线程作业,如进度条或状态显示等,基本有三种方法解决: 1.Control.CheckForIl ...

  8. BaiduMap Search List

    using AnfleCrawler.Common; using HtmlClient; using System; using System.Collections.Generic; using S ...

  9. oracle查看当前用户权限

    查看用户和默认表空间的关系select username,default_tablespace from dba_users;--查看当前用户能访问的表select * from user_table ...

  10. C#中this在扩展方法的应用

    给类添加扩展方法 1.定义一个类Service public class Service { private string _name; public string Name { get { retu ...