<!--

    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. java_easyui体系之DataGrid（3）[转]

    一:简介 在2的基础上实现增删改.增.改都是通过行编辑来实现的.具体业务逻辑: 1. 增加一条记录的时候: a) 在datagrid表格最前端增加一行(当然也可在指定位置增加.)增加的行的字段必须与要 ...

  2. webix源码阅读

    最近在用webix,需要一个类似九宫格的监控界面.自带的控件里没有,于是萌生出做一个Custom Component的需求.不过webix关于自定义控件的文档比较少,官方只有一篇<Creatin ...

  3. Android 绿豆蛙版连连看（简陋版）

    (里面有六张绿豆蛙的图片) 1.选中会有红色框 2.可以直线连(横竖相邻或是横竖间隔空格) 3.可以拐一次弯连接 4.可以拐两次弯连接 5.连接时会有线显示 6.绿色代表进度条,蓝色代表时间条 imp ...

  4. Windows 95 vs. Windows 10

  5. 性能测试报告的指标选择、数据选择和分析的参考【以Apache AB test为例】

    前几天尝试用loadrunner初试了一下性能测试,对于如何选择数据.生成数据后如何分析很是迷惑,刚刚翻看一篇网友的博客,很有条理,特此记录一下,以供参考 转自: http://liriguang.i ...

  6. 如何修改WAMP中mysql默认空密码 以及修改时报错的处理方法

    WAMP安装好后,mysql密码是为空的,那么要如何修改呢?其实很简单,通过几条指令就行了,下面我就一步步来操作. 首先,通过WAMP打开mysql控制台. 提示输入密码,因为现在是空,所以直接按回车 ...

  7. OpenCV是什么？

    OpenCV其实就是一对C和C++语言的源代码文件,这些源代码文件中实现了许多常用的计算机视觉算法.例如C借口函数cvCanny()实现了Canny边缘提取算法.可以直接将这些源代码添加到我们自己的项 ...

  8. Spark SQL Thrift Server 配置 Kerberos身份认证和权限管理

    转载请注明出处:http://www.cnblogs.com/xiaodf/ 之前的博客介绍了通过Kerberos + Sentry的方式实现了hive server2的身份认证和权限管理功能,本文主 ...

  9. Can 't connect to local MySQL server through socket '/var/lib/mysql/mysql.sock '(2) ;

    Can 't connect to local MySQL server through socket '/var/lib/mysql/mysql.sock '(2) ; 如果你在网上search这个 ...

  10. python数据结构与算法——二叉树结构与遍历方法

    先序遍历,中序遍历,后序遍历 ,区别在于三条核心语句的位置 层序遍历  采用队列的遍历操作第一次访问根,在访问根的左孩子,接着访问根的有孩子,然后下一层 自左向右一一访问同层的结点 # 先序遍历 # ...