Maison >interface Web >tutoriel HTML >BootStrap学习(5)_多媒体对象&列表组_html/css_WEB-ITnose
BootStrap学习(5)_多媒体对象&列表组_html/css_WEB-ITnose
- WBOYoriginal
- 2016-06-24 11:34:001337parcourir
一、多媒体对象
这些抽象的对象样式用于创建各种类型的组件（比如：博客评论），我们可以在组件中使用图文混排，图像可以左对齐或者右对齐。媒体对象可以用更少的代码来实现媒体对象与文字的混排。
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> 效果:
二、列表组
列表组件用于以列表形式呈现复杂的和自定义的内容
- 添加 class .list-group。
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>
效果:
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：form 表单默认的提示_html/css_WEB-ITnoseArticle suivant：css:outline_html/css_WEB-ITnose