search

Home >Web Front-end >HTML Tutorial >BootStrap学习(5)_多媒体对象&列表组_html/css_WEB-ITnose

BootStrap学习(5)_多媒体对象&列表组_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:34:001327browse

一、多媒体对象

这些抽象的对象样式用于创建各种类型的组件（比如：博客评论），我们可以在组件中使用图文混排，图像可以左对齐或者右对齐。媒体对象可以用更少的代码来实现媒体对象与文字的混排。

  • .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>

    效果:

     

    二、列表组 

    列表组件用于以列表形式呈现复杂的和自定义的内容

  • 向元素
      添加 class .list-group。
  • 向
  • 添加 class .list-group-item。
  • 可以向任意的列表项添加徽章组件，它会自动定位到右边。只需要在
  • 元素中添加  即可

    • 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>

    效果:

    Statement：
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
    Previous article：form 表单默认的提示_html/css_WEB-ITnoseNext article：css:outline_html/css_WEB-ITnose

    Related articles

    See more