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实现计算代码行数的简单方法附代码
Aug 13 Javascript
Jquery下判断Id是否存在的代码
Jan 06 Javascript
javascript克隆对象深度介绍
Nov 20 Javascript
js使用html()或text()方法获取设置p标签的显示的值
Aug 01 Javascript
在JavaScript里防止事件函数高频触发和高频调用的方法
Sep 06 Javascript
jQuery实现鼠标经过事件的延时处理效果
Aug 20 Javascript
详解Angularjs filter过滤器
Feb 06 Javascript
利用vue写todolist单页应用
Dec 15 Javascript
详解用JS添加和删除class类名
Mar 25 Javascript
node读写Excel操作实例分析
Nov 06 Javascript
解决在Vue中使用axios POST请求变成OPTIONS的问题
Aug 14 Javascript
js实现简单商品筛选功能
Feb 02 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
List the UTC Time on a Computer
2007/06/11 Javascript
我见过最全的个人js加解密功能页面
2007/12/12 Javascript
Lazy Load 延迟加载图片的jQuery插件中文使用文档
2012/10/18 Javascript
jquery attr方法获取input的checked属性问题
2014/05/26 Javascript
window.open不被拦截的简单实现代码(推荐)
2016/08/04 Javascript
Vue通过URL传参如何控制全局console.log的开关详解
2017/12/07 Javascript
手动下载Chrome并解决puppeteer无法使用问题
2018/11/12 Javascript
Vue.js实现开发购物车功能的方法详解
2019/02/22 Javascript
vue elementUI 表单校验的实现代码(多层嵌套)
2019/11/06 Javascript
Echarts实现单条折线可拖拽效果
2019/12/19 Javascript
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
2021/03/01 Vue.js
[01:13:51]TNC vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python 读写文件,按行修改文件的方法
2018/07/12 Python
Python获取数据库数据并保存在excel表格中的方法
2019/06/12 Python
Python 使用folium绘制leaflet地图的实现方法
2019/07/05 Python
pytorch实现onehot编码转为普通label标签
2020/01/02 Python
解决jupyter notebook显示不全出现框框或者乱码问题
2020/04/09 Python
tensorflow实现残差网络方式(mnist数据集)
2020/05/26 Python
pytorch cuda上tensor的定义 以及减少cpu的操作详解
2020/06/23 Python
python3环境搭建过程(利用Anaconda+pycharm)完整版
2020/08/19 Python
Python常用GUI框架原理解析汇总
2020/12/07 Python
美国在线珠宝商店:SZUL
2017/02/11 全球购物
Levi’s西班牙官方网站:李维斯,著名的牛仔裤品牌
2020/08/20 全球购物
英国发展最快的在线超市之一:Click Marketplace
2021/02/15 全球购物
求最大连续递增数字串(如"ads3sl456789DF3456ld345AA"中的"456789")
2015/09/11 面试题
Linux文件操作命令都有哪些
2015/02/27 面试题
你经历的项目中的SCM配置项主要有哪些?什么是配置项?
2013/11/04 面试题
自荐信怎么写好
2013/11/11 职场文书
优秀毕业生自我鉴定
2014/01/19 职场文书
党员公开承诺事项
2014/03/25 职场文书
联谊活动总结
2014/08/28 职场文书
明确岗位职责
2015/02/14 职场文书
医学生自荐信范文
2015/03/05 职场文书
2019年学校消防安全责任书(2篇)
2019/10/09 职场文书
yyds什么意思?90后已经听不懂00后讲话了……
2022/02/03 杂记
python_tkinter事件类型详情
2022/03/20 Python