Bootstrap入门(十四)组件8:媒体对象
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:媒体对象的更多相关文章
- Bootstrap<基础十四> 按钮下拉菜单
使用 Bootstrap class 向按钮添加下拉菜单.如需向按钮添加下拉菜单,只需要简单地在在一个 .btn-group 中放置按钮和下拉菜单即可.也可以使用 <span class=&qu ...
- Bootstrap历练实例:默认的媒体对象
Bootstrap 多媒体对象(Media Object) 本章我们将讲解 Bootstrap 中的多媒体对象(Media Object).这些抽象的对象样式用于创建各种类型的组件(比如:博客评论), ...
- Bootstrap入门(四)表格
Bootstrap入门(四)表格 <table>标签 首先,引入bootstrap的css文件,然后表格内容放在一个class为table的<table>标签中(class=& ...
- Bootstrap历练实例:嵌套的媒体对象
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- (十)进度条媒体对象和 Well 组件
一.Well 组件 有 lg 和 sm 两种可选值 <div class="well well-lg"> Bootstrap </div> 二.进度条组件 ...
- Spring入门(十四):Spring MVC控制器的2种测试方法
作为一名研发人员,不管你愿不愿意对自己的代码进行测试,都得承认测试对于研发质量保证的重要性,这也就是为什么每个公司的技术部都需要质量控制部的原因,因为越早的发现代码的bug,成本越低,比如说,Dev环 ...
- Bootstrap 学习笔记5 进度条媒体对象和well组件
代码: <ul class="media-list"> <li class="media"> <div class="m ...
- [WebGL入门]十四,绘制多边形
注意:文章翻译http://wgld.org/.原作者杉本雅広(doxas),文章中假设有我的额外说明,我会加上[lufy:].另外,鄙人webgl研究还不够深入.一些专业词语,假设翻译有误,欢迎大家 ...
- Android入门(十四)内容提供器-实现跨程序共享实例
原文链接:http://www.orlion.ga/661/ 打开SQLite博文中创建的 DatabaseDemo项目,首先将 MyDatabaseHelper中使用 Toast弹出创建数据库成功的 ...
- BootStrap入门教程 (四) :JQuery类库插件(模态窗口,滚动监控,标签效果,提示效果,“泡芙”效果,警告区域,折叠效果,旋转木马,输入提示)
上讲回顾:Bootstrap组件丰富同时具有良好可扩展性,能够很好地应用在生产环境.这些组件包括按钮(Button),导航(Navigation),缩略图( thumbnails),提醒(Alert) ...
随机推荐
- 最短路径问题 HDU 3790
最短路径问题 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Subm ...
- VS+VA 开发NDK
工欲善其事,必先利其器. Android NDK开发环境,可选择VIM+插件.Eclipse+CDT等,这里介绍另一种选择:VS+VA 软件准备:Visual studio 2008 // 其他版本也 ...
- gridcontrol第一行为0,没有选中为-999999
- PAT (Advanced Level) 1013. Battle Over Cities (25)
并查集判断连通性. #include<iostream> #include<cstring> #include<cmath> #include<algorit ...
- linux自动启动程序
下面用自启动apache为例: 有两种方法可以让Apache在系统启动时自动启动 1. 在/etc/rc.d/rc.local中增加启动apache的命令,例如:/usr/local/httpd/ ...
- Inside dependency property
依赖属性的定义,分为3步(以PresentationFramework中的System.Windows.Controls.Button为例) 1. 声明依赖属性 public static read ...
- Nginx 负载均衡 后端 监控检测 nginx_upstream_check_module 模块的使用
在使用nginx 的负载均衡 中,我们通常会使用到 Nginx 自带的 ngx_http_proxy_module 健康检测模块. ngx_http_proxy_module 自带的 健康检测模块参数 ...
- PHP 安装 redis、memcached、openssl、pdo_mysql等
PHP openssl 扩展的安装 这些插件可以通过在 php.ini 中添加 extension 的方式来加载所需要的插件,其实在 php 的安装包里就已经有相关的插件代码包了,在 php7 ...
- Unity3D中的函数方法及解释
一.刷新函数 Update 当MonoBehaviour启用时,其Update在每一帧被调用. LateUpdate 当Behaviour启用时,其LateUpdate在每一帧被调用. FixedUp ...
- OPENCV条形码检测与识别
条形码是当前超市和部分工厂使用比较普遍的物品,产品标识技术,使用摄像头检测一张图片的条形码包含有两个步骤,第一是定位条形码的位置,定位之后剪切出条形码,并且识别出条形码对应的字符串,然后就可以调用网络 ...