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 相关文章推荐
URL编码转换,escape() encodeURI() encodeURIComponent()
Dec 27 Javascript
javascript 限制输入和粘贴(IE,firefox测试通过)
Nov 14 Javascript
Extjs学习笔记之四 工具栏和菜单
Jan 07 Javascript
基于jQuery的获取标签名的代码
Jul 16 Javascript
Express的路由详解
Dec 10 Javascript
JS实现漂亮的时间选择框效果
Aug 20 Javascript
JavaScript输入分钟、秒倒计时技巧总结(附代码)
Aug 17 Javascript
小程序视频或音频自定义可拖拽进度条的示例代码
Sep 30 Javascript
ng-repeat指令在迭代对象时的去重方法
Oct 02 Javascript
vue插件--仿微信小程序showModel实现模态提示窗功能
Aug 19 Javascript
OpenLayers3实现对地图的基本操作
Sep 28 Javascript
在vue中使用inheritAttrs实现组件的扩展性介绍
Dec 07 Vue.js
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
mysql 字段类型说明
2007/04/27 PHP
php侧拉菜单 漂亮,可以向右或者向左展开,支持FF,IE
2009/10/15 PHP
PHP之生成GIF动画的实现方法
2013/06/07 PHP
yii2 页面底部加载css和js的技巧
2016/04/21 PHP
PHP长连接实现与使用方法详解
2018/02/11 PHP
IE与FireFox的兼容性问题分析
2007/04/22 Javascript
基于jquery实现瀑布流布局
2020/06/28 Javascript
JS获取时间的相关函数及时间戳与时间日期之间的转换
2016/02/04 Javascript
基于KO+BootStrap+MVC实现的分页控件代码分享
2016/11/07 Javascript
详解Angular的内置过滤器和自定义过滤器【推荐】
2016/12/26 Javascript
浅谈js算法和流程控制
2016/12/29 Javascript
html5 canvas 详细使用教程
2017/01/20 Javascript
在knockoutjs 上自己实现的flux(实例讲解)
2017/12/18 Javascript
解决mpvue + vuex 开发微信小程序vuex辅助函数mapState、mapGetters不可用问题
2018/08/03 Javascript
使用Node搭建reactSSR服务端渲染架构
2018/08/30 Javascript
js canvas实现橡皮擦效果
2018/12/20 Javascript
小程序实现录音上传功能
2019/11/22 Javascript
小程序实现长按保存图片的方法
2019/12/31 Javascript
[00:59]DOTA2英雄背景故事——上古巨神
2020/06/28 DOTA
python中string模块各属性以及函数的用法介绍
2016/05/30 Python
Python性能提升之延迟初始化
2016/12/04 Python
Python中实例化class的执行顺序示例详解
2018/10/14 Python
pycharm 在windows上编辑代码用linux执行配置的方法
2018/10/27 Python
python如何实现单链表的反转
2020/02/10 Python
python 安装impala包步骤
2020/03/28 Python
Django静态资源部署404问题解决方案
2020/05/11 Python
一篇文章带你学习CSS3图片边框
2020/11/04 HTML / CSS
AmazeUI 导航条的实现示例
2020/08/14 HTML / CSS
中东奢侈品购物网站:Ounass
2020/09/02 全球购物
房地产销售员的自我评价分享
2013/12/04 职场文书
安全生产投入制度
2014/01/29 职场文书
影子教师研修方案
2014/06/14 职场文书
总经理司机岗位职责
2015/04/10 职场文书
志愿服务心得体会
2016/01/15 职场文书
Python实现简单的俄罗斯方块游戏
2021/09/25 Python
「约定的梦幻岛」作画发布诺曼生日新绘
2022/03/21 日漫