编程 Javascript

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媒体对象学习使用

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

Bootstrap媒体对象学习使用

- Author -

Dannii_

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javascript EXCEL 操作类代码

Jul 30 Javascript

JS 仿腾讯发表微博的效果代码

Dec 25 Javascript

jquery 绑定回车动作扑捉回车键触发的事件

Mar 26 Javascript

一个支持任意尺寸的图片上下左右滑动效果

Aug 24 Javascript

javascript检测两个数组是否相似

May 19 Javascript

jquery实现的动态回到顶部特效代码

Oct 28 Javascript

javascript回到顶部特效

Jul 30 Javascript

漂亮! js实现颜色渐变效果

Aug 12 Javascript

jquery插入兄弟节点的操作方法

Dec 07 Javascript

3分钟掌握常用的JS操作JSON方法总结

Apr 25 Javascript

vue.js绑定事件监听器示例【基于v-on事件绑定】

Jul 07 Javascript

微信小程序之 catalog 切换实现解析

Sep 12 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

对讲机(1) i5 10400(1) Tomcat(18) i7 6700(1) React(6) GTX1660(1) ipad(1) win10(43) i5 9400(1) win11(40)

You might like

PHP生成word文档的三种实现方式

2016/11/14 PHP

对JavaScript的eval()中使用函数的进一步讨论

2008/07/26 Javascript

JavaScript 动态添加表格行使用模板、标记

2009/10/24 Javascript

两个listbox实现选项的添加删除和搜索

2013/03/01 Javascript

浅谈JavaScript字符串拼接

2015/06/25 Javascript

js基础知识（公有方法、私有方法、特权方法）

2015/11/06 Javascript

给angular加上动画效遇到的问题总结

2016/02/17 Javascript

Angularjs整合微信UI（weui）

2016/03/15 Javascript

jQuery代码实现对话框右上角菜单带关闭×

2016/05/03 Javascript

jQuery实现点击弹出背景变暗遮罩效果实例代码

2016/06/24 Javascript

VUE2实现事件驱动弹窗示例

2017/10/21 Javascript

React.Js添加与删除onScroll事件的方法详解

2017/11/03 Javascript

JavaScript生成指定范围随机数和随机序列的方法

2018/05/05 Javascript

微信小程序封装自定义弹窗的实现代码

2019/05/08 Javascript

node创建Vue项目步骤详解

2020/03/06 Javascript

jquery实现抽奖功能

2020/10/22 jQuery

Swift中的协议(protocol)学习教程

2016/07/08 Python

在python的类中动态添加属性与生成对象

2016/09/17 Python

Python 爬虫图片简单实现

2017/06/01 Python

利用python批量给云主机配置安全组的方法教程

2017/06/21 Python

Python3视频转字符动画的实例代码

2019/08/29 Python

python同步两个文件夹下的内容

2019/08/29 Python

python重要函数eval多种用法解析

2020/01/14 Python

python3 字符串知识点学习笔记

2020/02/08 Python

Python实现一个简单的毕业生信息管理系统的示例代码

2020/06/08 Python

python 解决函数返回return的问题

2020/12/05 Python

英国领先的大码时装品牌之一：Elvi

2018/08/26 全球购物

C#公司笔试题

2014/03/28 面试题

毕业生的自我评价分享

2013/12/18 职场文书

超市促销活动方案

2014/03/05 职场文书

学校德育工作总结2015

2015/05/11 职场文书

原告离婚代理词

2015/05/23 职场文书

负责培养人意见

2015/06/05 职场文书

毕业证明模板

2015/06/19 职场文书

2016中考冲刺决心书

2015/09/22 职场文书