一、多媒体对象

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

  • .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)_多媒体对象&列表组的更多相关文章

  1. Bootstrap<基础二十七> 多媒体对象（Media Object）

    Bootstrap 中的多媒体对象(Media Object).这些抽象的对象样式用于创建各种类型的组件(比如:博客评论),我们可以在组件中使用图文混排,图像可以左对齐或者右对齐.媒体对象可以用更少的 ...

  2. Bootstrap -- 缩略图、进度条、列表组、面板

    Bootstrap -- 缩略图.进度条.列表组.面板 1. 缩略图 大多数站点都需要在网格中布局图像.视频.文本等.Bootstrap 通过缩略图为此提供了一种简便的方式.使用 Bootstrap ...

  3. Bootstrap历练实例：默认的列表组

    Bootstrap 列表组 本章我们将讲解列表组.列表组件用于以列表形式呈现复杂的和自定义的内容.创建一个基本的列表组的步骤如下: 向元素 <ul> 添加 class .list-grou ...

  4. Bootstrap 警告、进度条、列表组、面板

    摘要:该部分包括警告.进度条.列表组.面板等部分. 1.警告(alert) 1.1 基本的警告(.alert) 警告的基类是 .alert .和其他样式类一块使用.例如: .alert-success ...

  5. BootStrap学习(2)_下拉菜单&按钮组

    一.下拉菜单 1.基本下拉菜单 如需使用下列菜单,只需要在class .dropdown 内加上下拉菜单即可.下面的实例演示了基本的下拉菜单: <!DOCTYPE html> <ht ...

  6. Bootstrap 媒体对象 列表组

    @{    Layout = null;}<!DOCTYPE html><html><head>    <meta name="viewport&q ...

  7. BootStrap学习(7)_轮播图

    一.轮播图 Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式.除此之外,内容也是足够灵活的,可以是图像.内嵌框架.视频或者其他您想要放置的任何类型的内容. 如果 ...

  8. BootStrap学习(4)_分页&标签&缩略图&警告&进度条

    一.分页 分页(Pagination),是一种无序列表,Bootstrap 像处理其他界面元素一样处理分页.  .pagination     --添加该 class 来在页面上显示分页. .disa ...

  9. BootStrap学习(3)_导航菜单

    一.导航元素 1.表格导航或标签 以一个带有 class .nav 的无序列表开始. 添加 class .nav-tabs. <!DOCTYPE html> <html xmlns= ...

随机推荐

  1. Java并发编程（十三）线程间协作的两种方式：wait、notify、notifyAll和Condition

    在现实中,需要线程之间的协作.比如说最经典的生产者-消费者模型:当队列满时,生产者需要等待队列有空间才能继续往里面放入商品,而在等待的期间内,生产者必须释放对临界资源(即队列)的占用权.因为生产者如果 ...

  2. 【Java入门提高篇】Day28 Java容器类详解（十）LinkedHashMap详解

    今天来介绍一下容器类中的另一个哈希表———>LinkedHashMap.这是HashMap的关门弟子,直接继承了HashMap的衣钵,所以拥有HashMap的全部特性,并青出于蓝而胜于蓝,有着一 ...

  3. (其他)最常用的15大Eclipse开发快捷键技巧

    转自CSDNJava我人生(陈磊兴)   原文出处 引言 做java开发的,经常会用Eclipse或者MyEclise集成开发环境,一些实用的Eclipse快捷键和使用技巧,可以在平常开发中节约出很多 ...

  4. 手把手教你撸一个简易的 webpack

    背景 随着前端复杂度的不断提升,诞生出很多打包工具,比如最先的grunt,gulp.到后来的webpack和Parcel.但是目前很多脚手架工具,比如vue-cli已经帮我们集成了一些构建工具的使用. ...

  5. 慕学在线网0.4_xadmin后台管理

    admin是基于Django开发的后台管理框架,方便,快捷,而且简单: 而xadmin就相当于admin的升级版,更加强大. 1.安装xadmin(源码安装方式) 教程 PS: - 卸载pip安装的x ...

  6. [20170622]传输表空间与dblink.txt

    [20170622]传输表空间与dblink.txt --//测试看看使用dblink+传输表空间的情况.写的情况相对复杂一点,具体看测试: 1.环境:--//2个数据库版本一致.实际上在1台主机上. ...

  7. Python实例---模拟微信网页登录(day5)

    第六步: 实现发送/接受消息---day5代码 settings.py """ Django settings for weixin project. Generated ...

  8. The Art of Unit Testing With Examples in .NET

    The Art of Unit Testing With Examples in .NET

  9. [项目实践] 在项目实战中提升代码效率的的一次应用实践-----使用列表解析式输出当前android设备的CPU核数

    1.先按照初学者思维代码应该是这样的 #coding:utf-8 import os text = os.popen("adb shell command cat /proc/cpuinfo ...

  10. node_01_自定义模块（先创建package.json）

    package.json必须是json格式 你必须确保所有的字符串,包括属性名,都是使用双引号而不是单引号 { "name": "163", "ver ...