编程 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 相关文章推荐

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 日漫