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 相关文章推荐
用一段js程序来实现动画功能
Mar 06 Javascript
Js 获取HTML DOM节点元素的方法小结
Apr 24 Javascript
jQuery 学习 几种常用方法
Jun 11 Javascript
js获取url参数值的两种方式
Sep 10 Javascript
浅谈JavaScript事件绑定的常用方法及其优缺点分析
Nov 01 Javascript
微信小程序开发之相册选择和拍照详解及实例代码
Feb 22 Javascript
JS验证码实现代码
Sep 14 Javascript
JavaScript中的E-mail 地址格式验证
Mar 28 Javascript
基于VuePress 轻量级静态网站生成器的实现方法
Apr 17 Javascript
JavaScript实现微信红包算法及问题解决方法
Apr 26 Javascript
微信小程序动画组件使用解析,类似vue,且更强大
Aug 01 Javascript
jQuery实现判断滚动条滚动到document底部的方法分析
Aug 27 jQuery
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
php 深入理解strtotime函数的使用详解
2013/05/23 PHP
smarty模板中拼接字符串的方法
2014/02/14 PHP
php实现生成code128条形码的方法详解
2017/07/19 PHP
PHP的new static和new self的区别与使用
2019/11/27 PHP
面向对象的javascript(笔记)
2009/10/06 Javascript
js tab效果的实现代码
2009/12/26 Javascript
js获取电脑分辨率的思路及操作
2013/11/22 Javascript
jQuery 1.9移除了$.browser可以使用$.support来替代
2014/09/03 Javascript
javascript使用数组的push方法完成快速排序
2014/09/15 Javascript
如何屏蔽防止别的网站嵌入框架代码
2015/08/24 Javascript
整理Javascript函数学习笔记
2015/12/01 Javascript
浅谈React 属性和状态的一些总结
2016/11/21 Javascript
JavaScript定时器实现的原理分析
2016/12/06 Javascript
angularjs实现过滤并替换关键字小功能
2017/09/19 Javascript
Vue2.0父组件与子组件之间的事件发射与接收实例代码
2017/09/19 Javascript
angularJS自定义directive之带参方法传递详解
2018/10/09 Javascript
Vue动态组件和异步组件原理详解
2019/05/06 Javascript
浅谈python抛出异常、自定义异常, 传递异常
2016/06/20 Python
Pycharm学习教程(1) 定制外观
2017/05/02 Python
python实现人民币大写转换
2018/06/20 Python
Python一行代码实现快速排序的方法
2019/04/30 Python
python 列表输出重复值以及对应的角标方法
2019/06/11 Python
解决Djang2.0.1中的reverse导入失败的问题
2019/08/16 Python
python interpolate插值实例
2020/07/06 Python
长曲棍球装备:Lacrosse Monkey
2020/12/02 全球购物
Java面试题及答案
2012/09/08 面试题
经典演讲稿范文
2013/12/30 职场文书
党校培训思想汇报
2013/12/30 职场文书
住宅使用说明书
2014/05/09 职场文书
交通事故委托书范本
2014/09/28 职场文书
网站文案策划岗位职责
2015/04/14 职场文书
鲁冰花观后感
2015/06/10 职场文书
工作后的感想
2015/08/07 职场文书
oracle DGMGRL ORA-16603报错的解决方法(DG Broker)
2021/04/06 Oracle
基于python制作简易版学生信息管理系统
2021/04/20 Python
Java实现超大Excel文件解析(XSSF,SXSSF,easyExcel)
2022/07/15 Java/Android