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 相关文章推荐
由点击页面其它地方隐藏div所想到的jQuery的delegate
Aug 29 Javascript
JavaScript中的6种运算符总结
Oct 16 Javascript
解决js下referer兼容各大浏览器的方法
Nov 03 Javascript
jQuery中prev()方法用法实例
Jan 08 Javascript
JS给超链接加确认对话框的方法
Feb 24 Javascript
javascript简单实现滑动菜单效果的方法
Jul 27 Javascript
基于javascript实现彩票随机数生成(简单版)
Apr 17 Javascript
bootstrap轮播图示例代码分享
May 17 Javascript
React-Native中props具体使用详解
Sep 04 Javascript
webpack css加载和图片加载的方法示例
Sep 11 Javascript
微信小程序云开发使用方法新手初体验
May 16 Javascript
微信小程序实现滚动Tab选项卡
Nov 16 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
smarty模板引擎中内建函数if、elseif和else的使用方法
2015/01/22 PHP
浅谈PHP拦截器之__set()与__get()的理解与使用方法
2016/10/18 PHP
php遍历替换目录下文件指定内容的方法
2016/11/10 PHP
PHP实现用户登录的案例代码
2018/05/10 PHP
PHP实现单例模式建立数据库连接的方法分析
2020/02/11 PHP
张孝祥JavaScript学习阶段性总结(2)--(X)HTML学习
2007/02/03 Javascript
javascript 关闭IE6、IE7
2009/06/01 Javascript
js换图片效果可进行定时操作
2014/06/09 Javascript
Javascript中的默认参数详解
2014/10/22 Javascript
js实现登陆遮罩效果的方法
2015/07/28 Javascript
基于JavaScript操作DOM常用的API小结
2015/12/01 Javascript
微信小程序 Tab页切换更新数据
2017/01/05 Javascript
JavaScript简单拖拽效果(1)
2017/05/17 Javascript
在vue-cli中组件通信的方法
2017/12/16 Javascript
使用jquery DataTable和ajax向页面显示数据列表的方法
2018/08/09 jQuery
vue填坑之webpack run build 静态资源找不到的解决方法
2018/09/03 Javascript
详解Angular5/Angular6项目如何添加热更新(HMR)功能
2018/10/10 Javascript
前端天气插件tpwidget使用方法详解
2019/06/24 Javascript
使用nodeJS中的fs模块对文件及目录进行读写,删除,追加,等操作详解
2020/02/06 NodeJs
JavaScript中如何调用Java方法
2020/09/16 Javascript
删除目录下相同文件的python代码(逐级优化)
2012/05/25 Python
python实现删除文件与目录的方法
2014/11/10 Python
把django中admin后台界面的英文修改为中文显示的方法
2019/07/26 Python
浅谈pytorch中torch.max和F.softmax函数的维度解释
2020/06/28 Python
Django实现文章详情页面跳转代码实例
2020/09/16 Python
python统计mysql数据量变化并调用接口告警的示例代码
2020/09/21 Python
美国标志性加大尺码时装品牌:Ashley Stewart
2016/12/15 全球购物
匡威德国官网:Converse德国
2019/01/26 全球购物
MYSQL基础面试题
2012/05/13 面试题
党员自我评价分享
2013/12/13 职场文书
充分就业社区汇报材料
2014/05/07 职场文书
代办委托书怎么写
2014/08/01 职场文书
企业法人授权委托书范本
2014/09/23 职场文书
小学生光盘行动倡议书
2015/04/28 职场文书
法制教育主题班会
2015/08/13 职场文书
python实现手机推送 代码也就10行左右
2022/04/12 Python