一、多媒体对象

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

  • .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. MySQL 性能优化--优化数据库结构之优化数据大小

    MySQL性能优化--优化数据库结构之优化数据大小   By:授客  QQ:1033553122 尽量减少表占用的磁盘空间.通常,执行查询期间处理表数据时,小表占用更少的内存. 表列 l   尽可能使 ...

  2. 取消Eclipse等号、分号、空格代码自动补全

      本文主要参考了以下文章 http://www.cnblogs.com/a-zx/p/3388041.html 本文基于 Eclipse Java EE IDE for Web Developers ...

  3. Hexo + Github 个人博客设置以及优化

    原文地址: Hexo + Github 个人博客设置以及优化 一.博客设置 分类.标签云.关于等页面 在站点目录下分别执行: hexo new page "categories" ...

  4. Ant使用及项目实践

    1.简介 Ant 是一个 Apache 基金会下的跨平台的基于 Java 语言开发的构件工具.这是一个基于开放的操作系统构建和部署的工具,该工具需要从命令行执行. 2.特点 Ant 是基于 Java ...

  5. CSS网页菜单

    <%@ Control Language="C#" AutoEventWireup="true" CodeFile="WebUserContro ...

  6. JavaScript高级特性-创建对象的九种方式

    1. 对象字面量 通过这种方式创建对象极为简单,将属性名用引号括起来,再将属性名和属性值之间以冒号分隔,各属性名值对之后用逗号隔开,最后一个属性不用逗号隔开,所有的属性名值对用大括号括起来,像这样: ...

  7. xshell 5连接NAT模式的虚拟机

    这里简称真实的外部电脑为主机.当虚拟机NAT模式上网时(区别于桥接上网,桥接上网的话,主机和虚拟机可以互访),虚拟机是可以访问主机的,但是由于NAT机制,导致主机不能访问虚拟机,那么如何让主机上的xs ...

  8. ccf-20160903--炉石传说

    本题思路如下图: 题目和代码如下: 问题描述 试题编号: 201609-3 试题名称: 炉石传说 时间限制: 1.0s 内存限制: 256.0MB 问题描述: 问题描述 <炉石传说:魔兽英雄传& ...

  9. Mac快速上手指南

    上周刚入手了2017版MacBookPro,预装macOS High Sierra.第一次接触Mac系统,经过一周的使用,简单总结下与Windows相比最常用的功能,快速上手. 1.Mac键盘实现Ho ...

  10. 用js实现随机选取10–100之间的10个数字，存入一个数组，并排序

    var iArray = []; function getRandom(istart, iend) { var iChoice = iend - istart + 1; //加1是为了取到100 va ...