文档章节

媒体对象

o
 oneboi
发布于 2017/04/18 16:06
字数 352
阅读 3
收藏 0

##1.媒体对象 媒体对象是一些抽象元素,是用来建立复杂繁琐组件(比如说博客评论、推文等)的基础。它支持左对齐内容、右对齐内容、内容对齐选项、嵌套,等等。

##2.媒体对象的组成

  1. 媒体对像的容器:常使用“media”类名表示,用来容纳媒体对象的所有内容

  2. 媒体对像的对象:常使用“media-left”表示,就是媒体对象中的对象,常常是图片

  3. 媒体对象的主体:常使用“media-body”表示,就是媒体对像中的主体内容,可以是任何元素,常常是图片侧边内容

  4. 媒体对象的标题:常使用“media-heading”表示,就是用来描述对象的一个标题,此部分可选

<div class="media">
  <a class="media-left" href="#">

    <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
  </a>
  <div class="media-body">
    <h4 class="media-heading">标题</h4>
          文本
  </div>
</div>

##3. 媒体列表

      <ul class="media-list">
  <li class="media">
    <div class="media-left">
      <a href="#">
        <img src="MMVM.png" width="64px " height="64px">
      </a>
    </div>
    <div class="media-body">
      <h4 class="media-heading">Media heading</h4>
      <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>
  </div>
      
  </li>
   <li class="media">
    <div class="media-left">
      <a href="#">
        <img src="MMVM.png" width="64px " height="64px">
      </a>
    </div>
    <div class="media-body">
      <h4 class="media-heading">Media heading</h4>
      <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>
  </div>
      
  </li>

© 著作权归作者所有

o
粉丝 2
博文 89
码字总数 29764
作品 0
昆明
私信 提问
加载中

评论(1)

o
oneboi 博主
http://blog.csdn.net/bboyjoe/article/details/47186265
Bootstrap中的媒体对象

媒体对象 在Web页面或者说移动页面制作中,常常看到这样的效果,左边居左(或居右),内容居右(或居左)排列,如下图所示: 我们常常把这样的效果称为媒体对象。可以说他是一种抽像的样式,...

9秒教育
2015/12/01
30
0
Bootstrap 多媒体对象(Media Object)

本章我们将讲解 Bootstrap 中的多媒体对象(Media Object)。这些抽象的对象样式用于创建各种类型的组件(比如:博客评论),我们可以在组件中使用图文混排,图像可以左对齐或者右对齐。媒体...

wybo521
2016/01/28
51
0
Castle.ActiveRecord 多对多关系 引发的错误处理

在Castle.ActiveRecord 实体类中,如果两个对象有 “多对多” 关系,一般的做法是将其分解为 两个“一对多”关系,但有时引发了 “您要删除 或 引用 的对象#2在数据库中不存在”的异常 百思不...

杨义金
2015/02/10
36
0
Bootstrap响应式前端框架笔记十四——媒体对象与列表组

Bootstrap响应式前端框架笔记十四——媒体对象与列表组 在移动开发中经常会使用到列表,使用媒体对象可以方便的创建列表中每一行元素,常规的媒体对象实例如下:

珲少
2016/12/20
69
0
html5之video(audio)api

背景 在html4时代实现播放音频和视频的方法 <object classid="clsid:xxxxxx" width="500" height="900" codebase=""> <parem name="" value=""> <embed type="" width="" height="" src="" a......

bosscheng
2014/11/10
161
0

没有更多内容

加载失败,请刷新页面

加载更多

mysql概览

学习知识,首先要有一个总体的认识。以下为mysql概览 1-架构图 2-Detail csdn |简书 | 头条 | SegmentFault 思否 | 掘金 | 开源中国 |

程序员深夜写bug
今天
9
0
golang微服务框架go-micro 入门笔记2.2 micro工具之微应用利器micro web

micro web micro 功能非常强大,本文将详细阐述micro web 命令行的功能 阅读本文前你可能需要进行如下知识储备 golang分布式微服务框架go-micro 入门笔记1:搭建go-micro环境, golang微服务框架...

非正式解决方案
今天
6
0
前端——使用base64编码在页面嵌入图片

因为页面中插入一个图片都要写明图片的路径——相对路径或者绝对路径。而除了具体的网站图片的图片地址,如果是在自己电脑文件夹里的图片,当我们的HTML文件在别人电脑上打开的时候图片则由于...

被毒打的程序猿
今天
8
0
Flutter 系列之Dart语言概述

Dart语言与其他语言究竟有什么不同呢?在已有的编程语言经验的基础上,我们该如何快速上手呢?本篇文章从编程语言中最重要的组成部分,也就是基础语法与类型变量出发,一起来学习Dart吧 一、...

過愙
今天
5
0
rime设置为默认简体

转载 https://github.com/ModerRAS/ModerRAS.github.io/blob/master/_posts/2018-11-07-rime%E8%AE%BE%E7%BD%AE%E4%B8%BA%E9%BB%98%E8%AE%A4%E7%AE%80%E4%BD%93.md 写在开始 我的Arch Linux上......

zhenruyan
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部