媒体对象 - Media Objects

怎样创建一个媒体对象 ?

一个媒体对象由以下及部分组成

  • 父容器 .media
  • 媒体部分 .media-left 或者 .media-right,其内部包含图像使用 同时设置 .media-object
  • 内容部分 .media-body ,其内部包含标题

    同时设置 .media-heading ,还可以设置小标题

大标题 小标题

.......

媒体对象 - Media Objects_第1张图片
媒体对象

如何让媒体对象的图片变成圆角或者圆形样式 ?

添加一个 .img-circle 或者 .img-round 样式

......
媒体对象 - Media Objects_第2张图片
圆角

媒体对象中文本和图像在水平方向上怎样对齐 ?

如果图片高度大,文字高度小,则图片和文字顶部顶部对齐;如果图片高度小,文字高度大,则

  • 默认情况下是顶部对齐
  • .media-left.media-right 上使用.media-middle 则水平居中对齐
  • .media-left.media-right 上使用.media-bottom 则底部对齐
......
......
媒体对象 - Media Objects_第3张图片
对齐方式

媒体对象列表是什么东东?如何创建?

媒体对象列表就是一堆媒体对象,使用列表的好处是可以嵌套

  • 最外层使用
      元素设置 .media-list 创建媒体对象列表
    • 第一层的媒体对象使用
    • 设置 .media 创建,其它层还是使用
      创建
    • 嵌套媒体对象在 .media-body 部分创建
    • ......
      ......
      ......
      ......
      ......
      ......
      ......
      ......
    • ......
      ......
    媒体对象 - Media Objects_第4张图片
    04.PNG

你可能感兴趣的:(媒体对象 - Media Objects)