Bootstrap入门(十四)组件8:媒体对象

这是一个抽象的样式,用以构建不同类型的组件,这些组件都具有在文本内容的左或右侧对齐的图片(就像博客评论或 Twitter 消息等)。

1.基本样式

2.嵌套使用

3.图片位置

4.使用<ul><li>标签嵌套使用

先引入本地的CSS文件

<link href="bootstrap.min.css" rel="stylesheet">

1.基本样式

我们先在容器div中创建一个class为media的div(媒体对象)

     <div class="container">
<div class="media">
         ...
</div>
</div>

先来一个图片(我们这里就不放了),放在左边

         <a class="media-left" href="#">
<img src="" alt="64*64图片">
</a>

<a>标签之外就需要承载内容区域,是主体部分,又一个为了div,class为media-body,他的标题需要media-heading类

效果明显和方便,随便输入了大量大写字母

EXAMPLE
<div class="container">
<div class="media">
<a class="media-left" href="#">
<img src="" alt="64*64图片">
</a>
<div class="media-body">
<h4 class="media-heading">ASD</h4>
<p>
ASDFGHHJKASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl
ASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl
ASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl
ASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl
ASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl
</p>
</div>
</div>
</div>

效果

再复制几个,就有回复贴之类的效果

2.嵌套使用

可是,有时候不是所有的需求都是在同一排,而是有的是缩进的

我们这里就只需要为其中一个嵌套使用,也就是在一个class为media的div中在嵌入一个class为media的div

        <div class="media">
<a class="media-left" href="#">
<img src="" alt="64*64图片">
</a>
<div class="media-body">
<h4 class="media-heading">ASD</h4>
<p>
ASDFGHHJKASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl
ASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl
ASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl
ASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl
ASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl
</p>
<div class="media">
<a class="media-left" href="#">
<img src="" alt="64*64图片">
</a>
<div class="media-body">
<h4 class="media-heading">ASD</h4>
<p>
ASDFGHHJKASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl
ASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl
ASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl
ASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl
ASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl
</p>
</div>
</div>
</div>
</div>

效果:

3.图片位置

①居右,有人说就是直接把<a>标签的media-left改为media-right就可以了,的确,但是还要把<a>标签放在div中主题内容的下面,即:

        <div class="media">
<div class="media-body">
<h4 class="media-heading">ASD</h4>
<p>
ASDFGHHJKASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl
ASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl
ASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl
ASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl
ASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl
</p>
</div>
<a class="media-right" href="#">
<img src="" alt="64*64图片">
</a>
</div>

效果:

②图片下移

有时候希望图片正在中间显示或者在下面显示,需要在<a>标签中添加新属性(中间media-middle,下面media-bottom)

        <div class="media">
<a class="media-left media-middle" href="#">
<img src="" alt="64*64图片">
</a>
<div class="media-body">
<h4 class="media-heading">ASD</h4>
<p>
ASDFGHHJKASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl
ASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl
ASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl
ASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl
ASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl
</p>
</div>
</div> <div class="media">
<a class="media-left media-bottom" href="#">
<img src="" alt="64*64图片">
</a>
<div class="media-body">
<h4 class="media-heading">ASD</h4>
<p>
ASDFGHHJKASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl
ASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl
ASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl
ASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl
ASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl
</p>
</div>
</div>

效果:

4.如果量多,可以不用div的形式,而是使用<ul><li>标签嵌套使用

(嵌套,图片移动的效果同上)

DIV UL LI
<div class="container">
<ul class="media-list">
<li class="media">
<a class="media-left" href="#">
<img src="" alt="64*64图片">
</a>
<div class="media-body">
<h4 class="media-heading">ASD</h4>
<p>
ASDFGHHJKASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl
ASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl
ASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl
ASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl
ASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl
</p>
</div>
</li>
<li class="media">
<a class="media-left" href="#">
<img src="" alt="64*64图片">
</a>
<div class="media-body">
<h4 class="media-heading">ASD</h4>
<p>
ASDFGHHJKASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl
ASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl
ASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl
ASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl
ASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl
</p>
</div>
</li>
<li class="media">
<a class="media-left" href="#">
<img src="" alt="64*64图片">
</a>
<div class="media-body">
<h4 class="media-heading">ASD</h4>
<p>
ASDFGHHJKASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl
ASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl
ASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl
ASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl
ASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl
</p>
</div>
</li>
</ul>
</div>

效果:

Bootstrap入门(十四)组件8:媒体对象的更多相关文章

  1. Bootstrap<基础十四> 按钮下拉菜单

    使用 Bootstrap class 向按钮添加下拉菜单.如需向按钮添加下拉菜单,只需要简单地在在一个 .btn-group 中放置按钮和下拉菜单即可.也可以使用 <span class=&qu ...

  2. Bootstrap历练实例:默认的媒体对象

    Bootstrap 多媒体对象(Media Object) 本章我们将讲解 Bootstrap 中的多媒体对象(Media Object).这些抽象的对象样式用于创建各种类型的组件(比如:博客评论), ...

  3. Bootstrap入门(四)表格

    Bootstrap入门(四)表格 <table>标签 首先,引入bootstrap的css文件,然后表格内容放在一个class为table的<table>标签中(class=& ...

  4. Bootstrap历练实例:嵌套的媒体对象

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  5. (十)进度条媒体对象和 Well 组件

    一.Well 组件 有 lg 和 sm 两种可选值 <div class="well well-lg"> Bootstrap </div> 二.进度条组件 ...

  6. Spring入门(十四):Spring MVC控制器的2种测试方法

    作为一名研发人员,不管你愿不愿意对自己的代码进行测试,都得承认测试对于研发质量保证的重要性,这也就是为什么每个公司的技术部都需要质量控制部的原因,因为越早的发现代码的bug,成本越低,比如说,Dev环 ...

  7. Bootstrap 学习笔记5 进度条媒体对象和well组件

    代码: <ul class="media-list"> <li class="media"> <div class="m ...

  8. [WebGL入门]十四,绘制多边形

    注意:文章翻译http://wgld.org/.原作者杉本雅広(doxas),文章中假设有我的额外说明,我会加上[lufy:].另外,鄙人webgl研究还不够深入.一些专业词语,假设翻译有误,欢迎大家 ...

  9. Android入门(十四)内容提供器-实现跨程序共享实例

    原文链接:http://www.orlion.ga/661/ 打开SQLite博文中创建的 DatabaseDemo项目,首先将 MyDatabaseHelper中使用 Toast弹出创建数据库成功的 ...

  10. BootStrap入门教程 (四) :JQuery类库插件(模态窗口,滚动监控,标签效果,提示效果,“泡芙”效果,警告区域,折叠效果,旋转木马,输入提示)

    上讲回顾:Bootstrap组件丰富同时具有良好可扩展性,能够很好地应用在生产环境.这些组件包括按钮(Button),导航(Navigation),缩略图( thumbnails),提醒(Alert) ...

随机推荐

  1. 最短路径问题 HDU 3790

    最短路径问题 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Subm ...

  2. VS+VA 开发NDK

    工欲善其事,必先利其器. Android NDK开发环境,可选择VIM+插件.Eclipse+CDT等,这里介绍另一种选择:VS+VA 软件准备:Visual studio 2008 // 其他版本也 ...

  3. gridcontrol第一行为0,没有选中为-999999

  4. PAT (Advanced Level) 1013. Battle Over Cities (25)

    并查集判断连通性. #include<iostream> #include<cstring> #include<cmath> #include<algorit ...

  5. linux自动启动程序

    下面用自启动apache为例: 有两种方法可以让Apache在系统启动时自动启动   1. 在/etc/rc.d/rc.local中增加启动apache的命令,例如:/usr/local/httpd/ ...

  6. Inside dependency property

    依赖属性的定义,分为3步(以PresentationFramework中的System.Windows.Controls.Button为例) 1.  声明依赖属性 public static read ...

  7. Nginx 负载均衡 后端 监控检测 nginx_upstream_check_module 模块的使用

    在使用nginx 的负载均衡 中,我们通常会使用到 Nginx 自带的 ngx_http_proxy_module 健康检测模块. ngx_http_proxy_module 自带的 健康检测模块参数 ...

  8. PHP 安装 redis、memcached、openssl、pdo_mysql等

        PHP openssl 扩展的安装 这些插件可以通过在 php.ini 中添加 extension 的方式来加载所需要的插件,其实在 php 的安装包里就已经有相关的插件代码包了,在 php7 ...

  9. Unity3D中的函数方法及解释

    一.刷新函数 Update 当MonoBehaviour启用时,其Update在每一帧被调用. LateUpdate 当Behaviour启用时,其LateUpdate在每一帧被调用. FixedUp ...

  10. OPENCV条形码检测与识别

    条形码是当前超市和部分工厂使用比较普遍的物品,产品标识技术,使用摄像头检测一张图片的条形码包含有两个步骤,第一是定位条形码的位置,定位之后剪切出条形码,并且识别出条形码对应的字符串,然后就可以调用网络 ...