博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Bootstrap<基础二十七> 多媒体对象(Media Object)
阅读量:6549 次
发布时间:2019-06-24

本文共 2413 字,大约阅读时间需要 8 分钟。

原文:

Bootstrap 中的多媒体对象(Media Object)。这些抽象的对象样式用于创建各种类型的组件(比如:博客评论),我们可以在组件中使用图文混排,图像可以左对齐或者右对齐。媒体对象可以用更少的代码来实现媒体对象与文字的混排。

媒体对象轻量标记、易于扩展的特性是通过向简单的标记应用 class 来实现的。你可以在 HTML 标签中添加以下两种形式来设置媒体对象:

  • .media:该 class 允许将媒体对象里的多媒体(图像、视频、音频)浮动到内容区块的左边或者右边。
  • .media-list:如果你需要一个列表,各项内容是无序列表的一部分,可以使用该 class。可用于评论列表与文章列表。

让我们来看看下面这个有关默认的媒体对象 .media 的实例:

   Bootstrap 实例 - 默认的媒体对象   
媒体对象

媒体标题

这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。
媒体对象

媒体标题

这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。
媒体对象

媒体标题

这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。

结果如下所示:

默认的媒体对象

让我们来看看下面这个有关媒体对象列表 .media-list 的实例:

   Bootstrap 实例 - 媒体对象列表   
  • 通用的占位符图像

    媒体标题

    这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。

    通用的占位符图像

    嵌套的媒体标题

    这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。
    通用的占位符图像

    嵌套的媒体标题

    这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。
    通用的占位符图像

    嵌套的媒体标题

    这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。
  • 通用的占位符图像

    媒体标题

    这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。

结果如下所示:

媒体对象列表
 
系列文章:

转载地址:http://vtgdo.baihongyu.com/

你可能感兴趣的文章
给Jenkins换新装后,测试部的妹子都说好看
查看>>
yum搭建lnmp环境
查看>>
沒有量化數據,何來有效管理
查看>>
Solr官方文档系列——Conclusion
查看>>
android性能监测工具,帮了我很大的忙
查看>>
linux如何分大于2T的磁盘分区
查看>>
Android:ListView、BaseAdapter、convertView、ListView优化及事件、notifyDataSetChanged()
查看>>
JS操作JSON总结
查看>>
Grafan5.4.2+Zabbix安装配置
查看>>
windows8.1 下硬盘安装 ubuntu-14.04.2-desktop-amd64.iso
查看>>
人大MapReduce编程题解答-001,A+B Per Line
查看>>
Java程序员从笨鸟到菜鸟之(三十四)大话设计模式(五)创建者模式和原型模式...
查看>>
eclipse构建maven的web项目
查看>>
Ubuntu去掉命令行前用户名和主机名步骤
查看>>
java实现断点续传
查看>>
Linux中sendmail启动速度慢的解决方法
查看>>
如何在Eclipse中查看Android API源码以及support包源码
查看>>
android SharedPreferences apply和commit的区别
查看>>
实现Bootstrap导航条可点击和鼠标悬停显示下拉菜单
查看>>
MongoDB入门3——更新文档和修改器1
查看>>