BootStrap学习(5)_多媒体对象&列表组
一、多媒体对象
这些抽象的对象样式用于创建各种类型的组件（比如：博客评论），我们可以在组件中使用图文混排，图像可以左对齐或者右对齐。媒体对象可以用更少的代码来实现媒体对象与文字的混排。
- .media：该 class 允许将媒体对象里的多媒体（图像、视频、音频）浮动到内容区块的左边或者右边。
- .media-list：如果你需要一个列表，各项内容是无序列表的一部分，可以使用该 class。可用于评论列表与文章列表。
1.基本多媒体对象
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<style type="text/css">
.media-object {
width:60px;
height:60px;
}
</style>
</head>
<body>
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" src="../Imgs/img1/1.jpg"
alt="媒体对象"/>
</a>
<div class="media-body">
<h4 class="media-heading">企鹅-标题</h4>
这是一个企鹅。这是一个企鹅。
这是一个企鹅。这是一个企鹅。
这是一个企鹅。这是一个企鹅。
这是一个企鹅。这是一个企鹅。
这是一个企鹅。这是一个企鹅。
</div>
</div>
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" src="../Imgs/img1/1.jpg"
alt="媒体对象"/>
</a>
<div class="media-body">
<h4 class="media-heading">企鹅</h4>
这是一个企鹅。这是一个企鹅。
这是一个企鹅。这是一个企鹅。
这是一个企鹅。这是一个企鹅。
这是一个企鹅。这是一个企鹅。
这是一个企鹅。这是一个企鹅。
</div>
</div>
</body>
</html>
效果:
2.嵌套的媒体对象
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<style type="text/css">
.media-object {
width: 30px;
height: 30px;
}
</style>
</head>
<body>
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" src="../Imgs/img1/1.jpg"
alt="媒体对象" />
</a>
<div class="media-body">
<h4 class="media-heading"><a href="#">用户1</a></h4>
今天的天气真好，空气清新，阳光明媚。
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" src="../Imgs/img1/1.jpg"
alt="媒体对象" />
</a>
<div class="media-body">
<span class="media-heading"><a href="#">用户1:</a></span>
是啊，天气真好。
</div>
</div>
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" src="../Imgs/img1/1.jpg"
alt="媒体对象" />
</a>
<div class="media-body">
<span class="media-heading"><a href="#">企鹅3:</a></span>
嗯嗯，是的呢。
</div>
</div>
</div>
</div>
</body>
</html>
效果:
二、列表组
列表组件用于以列表形式呈现复杂的和自定义的内容
- 向元素 <ul> 添加 class .list-group。
- 向 <li> 添加 class .list-group-item。
- 可以向任意的列表项添加徽章组件，它会自动定位到右边。只需要在 <li> 元素中添加 <span class="badge"> 即可
1.基本列表组
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body style="margin-top:20px;margin-left:20px;">
<ul class="list-group">
<li class="list-group-item"><span class="badge">新</span>新闻1</li>
<li class="list-group-item"><span class="badge">荐</span>新闻2</li>
<li class="list-group-item">新闻3</li>
<li class="list-group-item">新闻4</li>
</ul>
</body>
</html>
效果:
2.向列表组添加链接
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body style="margin-top:20px;margin-left:20px;"> <a href="#" class="list-group-item"><span class="badge">新</span>新闻1</a>
<a href="#" class="list-group-item"><span class="badge">荐</span>新闻2</a>
<a href="#" class="list-group-item active">新闻3</a>
<a href="#" class="list-group-item">新闻4</a>
</body>
</html>
效果:
3.自定义内容
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body style="margin-top:20px;margin-left:20px;"> <div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">
新闻
</h4>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">
新闻1
</h4>
<p class="list-group-item-text">
新闻内容新闻内容新闻内容新闻内容新闻内容......
</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">
新闻2
</h4>
<p class="list-group-item-text">
新闻2内容新闻2内容新闻2内容新闻2内容......
</p>
</a>
</div>
</body>
</html>
效果:
BootStrap学习(5)_多媒体对象&列表组的更多相关文章
- Bootstrap<基础二十七> 多媒体对象（Media Object）
Bootstrap 中的多媒体对象(Media Object).这些抽象的对象样式用于创建各种类型的组件(比如:博客评论),我们可以在组件中使用图文混排,图像可以左对齐或者右对齐.媒体对象可以用更少的 ...
- Bootstrap -- 缩略图、进度条、列表组、面板
Bootstrap -- 缩略图.进度条.列表组.面板 1. 缩略图 大多数站点都需要在网格中布局图像.视频.文本等.Bootstrap 通过缩略图为此提供了一种简便的方式.使用 Bootstrap ...
- Bootstrap历练实例：默认的列表组
Bootstrap 列表组 本章我们将讲解列表组.列表组件用于以列表形式呈现复杂的和自定义的内容.创建一个基本的列表组的步骤如下: 向元素 <ul> 添加 class .list-grou ...
- Bootstrap 警告、进度条、列表组、面板
摘要:该部分包括警告.进度条.列表组.面板等部分. 1.警告(alert) 1.1 基本的警告(.alert) 警告的基类是 .alert .和其他样式类一块使用.例如: .alert-success ...
- BootStrap学习(2)_下拉菜单&按钮组
一.下拉菜单 1.基本下拉菜单 如需使用下列菜单,只需要在class .dropdown 内加上下拉菜单即可.下面的实例演示了基本的下拉菜单: <!DOCTYPE html> <ht ...
- Bootstrap 媒体对象 列表组
@{ Layout = null;}<!DOCTYPE html><html><head> <meta name="viewport&q ...
- BootStrap学习(7)_轮播图
一.轮播图 Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式.除此之外,内容也是足够灵活的,可以是图像.内嵌框架.视频或者其他您想要放置的任何类型的内容. 如果 ...
- BootStrap学习(4)_分页&标签&缩略图&警告&进度条
一.分页 分页(Pagination),是一种无序列表,Bootstrap 像处理其他界面元素一样处理分页. .pagination --添加该 class 来在页面上显示分页. .disa ...
- BootStrap学习(3)_导航菜单
一.导航元素 1.表格导航或标签 以一个带有 class .nav 的无序列表开始. 添加 class .nav-tabs. <!DOCTYPE html> <html xmlns= ...
随机推荐
- python自动化开发-5b
python的常用模块(续) time和datetime模块 time模块和datetime模块举例 例子:获取当前时间 import datetime,time now = time.strftim ...
- MySQL四种隔离级别和MVCC
事务在一个数据库中的地位尤为重要,尤其是高并发的场合.保证数据库操作的原子性和错误出现情况下的回滚,对数据的安全性和可靠性提供了保障.事务有四大原则,即ACID原则.网上关于这个问题的文章有很多,读者 ...
- (小技巧)Sql server查看sql语句的执行时间(转)
转自CSDN: 在写数据库sql的时候,我们往往很关心该sql语句的执行效率,如下小技巧可以帮助程序员简单快速的得到某条或某几条sql的执行时间. declare @d datetime set @d ...
- 【Tomcat】Unrecognized Windows Sockets error: 10106: Socket creation failed
tomcat8启动过程中报如下错误 -Nov- ::]: java.net.SocketException: Unrecognized Windows Sockets error: : create ...
- python网络编程：socketserver的基本使用
本文内容: socketserver的介绍 socketserver的使用 socketserver的异步服务端 首发时间:2018-03-21 也可以使用socketserver来创建socket ...
- contains方法
contains方法,表示判断是否有当前字符串,有为true,没有为false; String str ="今天的菜谱有:QQ,当地,单独,方法,额额,混合,存储,最终,看看."; ...
- nginx ssl 自签证书实验
两台服务器 11.11.11.3 (生成证书然后到CA服务上注册) 11.11.11.4 (nginx服务.CA证书签发) 1.建立CA服务器(11.3) .在CA上生成私钥文件 在/e ...
- emWin及StemWin使用中关于菜单栏的应用与问题
前言:在我看来,emWin和StemWin就是基本相同的库文件,关于这个库文件的移植,网络上有很多教材,比如“ALIENTEK emWin开发手册”,他们家提供了各种STM32系列的开发手册,我这里记 ...
- 在Oracle中使用Guid
sys_guid() - 唯一索引 在Oracle中可以用SYS_GUID()来生成一个guid,相当于msSql中的newid(). 在Oracle9i和Oracle 10g 里SYS_GUID ...
- Linux基础第四课——文件操作
文件的创建 touch sudo touch 文件1 文件2 文件3 #支持批量创建文件 sudo rm -f 文件1 文件2 文件3 #支持批量创建 也支持批量删除 echo '谁动谁输,对不起我输 ...