Bootstrap媒体对象学习使用


Posted in Javascript onMarch 07, 2017

Bootstrap媒体对象的学习使用,供大家参考,具体内容如下

基本结构:

<div class="media">
  <a class="pull-left" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
    <img class="media-object" src="bg.jpg" alt="媒体对象">
  </a>

  <div class="media-body">
    <h4 class="media-heading">媒体标题</h4>
    这是一些示例文本。这是一些示例文本。
    这是一些示例文本。这是一些示例文本。 
  </div>
</div>
<ul class="media-list">
  <li class="media">
    <a class="pull-left" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
      <img class="media-object" src="bg.jpg" alt="通用的占位符图像">
    </a>

    <div class="media-body">
      <h4 class="media-heading">媒体标题</h4>
      <p>这是一些示例文本。这是一些示例文本。
        这是一些示例文本。这是一些示例文本。
        这是一些示例文本。这是一些示例文本。
        这是一些示例文本。这是一些示例文本。</p>
    </div>
  </li>
  <li class="media">
    <a class="pull-right" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
      <img class="media-object" src=bg.jpg" alt="通用的占位符图像">
    </a>

    <div class="media-body">
      <h4 class="media-heading">媒体标题</h4>
      这是一些示例文本。这是一些示例文本。
      这是一些示例文本。这是一些示例文本。
    </div>
  </li>
</ul>

媒体对象轻量标记、易于扩展的特性是通过向简单的标记应用 class 来实现的。

在 HTML 标签中添加以下两种形式来设置媒体对象:

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

嵌套的媒体对象:

<ul class="media-list">
  <li class="media">
    <a class="pull-left" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
      <img class="media-object" src="bg.jpg"
         alt="通用的占位符图像">
    </a>

    <div class="media-body">
      <h4 class="media-heading">媒体标题</h4>
      <p>这是一些示例文本。这是一些示例文本。
        这是一些示例文本。这是一些示例文本。
        这是一些示例文本。这是一些示例文本。
        这是一些示例文本。这是一些示例文本。
        这是一些示例文本。这是一些示例文本。</p>

      <!-- 嵌套的媒体对象 -->
      <div class="media">
        <a class="pull-left" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
          <img class="media-object" src="bg.jpg"
             alt="通用的占位符图像">
        </a>

        <div class="media-body">
          <h4 class="media-heading">嵌套的媒体标题</h4>
          这是一些示例文本。这是一些示例文本。
          这是一些示例文本。这是一些示例文本。

          <!-- 嵌套的媒体对象 -->
          <div class="media">
            <a class="pull-left" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
              <img class="media-object" src="bg.jpg"
                 alt="通用的占位符图像">
            </a>
            <div class="media-body">
              <h4 class="media-heading">嵌套的媒体标题</h4>
              这是一些示例文本。这是一些示例文本。
              这是一些示例文本。这是一些示例文本。               
            </div>
          </div>

        </div>
      </div>

      <!-- 嵌套的媒体对象 -->
      <div class="media">
        <a class="pull-left" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
          <img class="media-object" src="bg.jpg"
             alt="通用的占位符图像">
        </a>
        <div class="media-body">
          <h4 class="media-heading">嵌套的媒体标题</h4>
          这是一些示例文本。这是一些示例文本。
          这是一些示例文本。这是一些示例文本。
        </div>
      </div>
    </div>
  </li>

  <li class="media">
    <a class="pull-right" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
      <img class="media-object" src="bg.jpg"
         alt="通用的占位符图像">
    </a>

    <div class="media-body">
      <h4 class="media-heading">媒体标题</h4>
      这是一些示例文本。这是一些示例文本。
      这是一些示例文本。这是一些示例文本。       
    </div>
  </li>
</ul>

效果图:

Bootstrap媒体对象学习使用

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JScript中的undefined和&quot;undefined&quot;的区别
Mar 08 Javascript
javascript定义变量时带var与不带var的区别分析
Jan 12 Javascript
jQuery简单实现隐藏以及显示特效
Feb 26 Javascript
在HTML中插入JavaScript代码的示例
Jun 03 Javascript
JavaScript中循环遍历Array与Map的方法小结
Mar 12 Javascript
jQuery实现图片向左向右切换效果的简单实例
May 18 Javascript
jQuery实现点击查看大图并以弹框的形式居中
Aug 08 Javascript
如何利用JSHint减少JavaScript的错误
Aug 23 Javascript
vue better-scroll插件使用详解
Jan 25 Javascript
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
Apr 17 jQuery
Vue组件实现触底判断
Jun 26 Javascript
element-ui和vue表单(对话框)验证提示语(残留)清除操作
Sep 11 Javascript
angular十大常见问题
Mar 07 #Javascript
Bootstrap表单控件学习使用
Mar 07 #Javascript
jQuery插件HighCharts绘制的基本折线图效果示例【附demo源码下载】
Mar 07 #Javascript
Bootstrap进度条实现代码解析
Mar 07 #Javascript
JQuery实现文字无缝滚动效果示例代码(Marquee插件)
Mar 07 #Javascript
JavaScript实现向select下拉框中添加和删除元素的方法
Mar 07 #Javascript
js仿网易表单及时验证功能
Mar 07 #Javascript
You might like
绿山咖啡和蓝山咖啡
2021/03/04 新手入门
phpmyadmin操作流程
2006/10/09 PHP
一些被忽视的PHP函数(简单整理)
2010/04/30 PHP
解析thinkphp中的M()与D()方法的区别
2013/06/22 PHP
腾讯CMEM的PHP扩展编译安装方法
2015/09/25 PHP
thinkPHP5框架auth权限控制类与用法示例
2018/06/12 PHP
jQuery Validation实例代码 让验证变得如此容易
2010/10/18 Javascript
jQuery之过滤元素操作小结
2013/11/30 Javascript
javascript实现五星评价代码(源码下载)
2015/08/11 Javascript
js图片轮播手动切换效果
2015/11/10 Javascript
详解vuelidate 对于vueJs2.0的验证解决方案
2017/03/09 Javascript
关于jQuery.ajax()的jsonp碰上post详解
2017/07/02 jQuery
react-native fetch的具体使用方法
2017/11/01 Javascript
Vue的移动端多图上传插件vue-easy-uploader的示例代码
2017/11/27 Javascript
解决js ajax同步请求造成浏览器假死的问题
2018/01/18 Javascript
JS实现的抛物线运动效果示例
2018/01/30 Javascript
js动态设置select下拉菜单的默认选中项实例
2018/08/21 Javascript
vue 中使用 watch 出现了如下的报错的原因分析
2019/05/21 Javascript
node.js域名解析实现方法详解
2019/11/05 Javascript
js中关于Blob对象的介绍与使用
2019/11/29 Javascript
python修改注册表终止360进程实例
2014/10/13 Python
手把手教你用python抢票回家过年(代码简单)
2018/01/21 Python
python PIL和CV对 图片的读取,显示,裁剪,保存实现方法
2019/08/07 Python
基于Python实现ComicReaper漫画自动爬取脚本过程解析
2019/11/11 Python
基于python实现雪花算法过程详解
2019/11/16 Python
python实现超级玛丽游戏
2020/03/18 Python
html5实现输入框fixed定位在屏幕最底部兼容性
2020/07/03 HTML / CSS
爱尔兰领先的在线体育用品零售商:theGAAstore
2018/04/16 全球购物
俄罗斯名牌服装网上商店:UNIQUE FABRIC
2019/07/25 全球购物
LN-CC日本:高端男装和女装的奢侈时尚目的地
2019/09/01 全球购物
应用化学专业本科生求职信
2013/09/29 职场文书
中学生自我鉴定
2014/02/04 职场文书
服装设计师求职信
2014/06/04 职场文书
Django如何与Ajax交互
2021/04/29 Python
oracle通过存储过程上传list保存功能
2021/05/12 Oracle
MySQL高级进阶sql语句总结大全
2022/03/16 MySQL