Bootstrap学习（二）——Bootstrap 布局组件

来源：互联网发布：在端口1433连接失败编辑：程序博客网时间：2024/06/06 20:36

Bootstrap 布局组件

Bootstrap 字体图标(Glyphicons)

什么是字体图标？

字体图标是在 Web 项目中使用的图标字体。

获取字体图标

Bootstrap 3.x 版本，在 fonts 文件夹内可以找到字体图标，它包含了下列这些文件：

glyphicons-halflings-regular.eot
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff

字体图标列表

http://www.runoob.com/try/demo_source/bootstrap3-glyph-icons.htm

用法

如需使用图标，只需要简单地使用下面的代码即可。请在图标和文本之间保留适当的空间。

<span class="glyphicon glyphicon-search"></span>

Bootstrap 下拉菜单（Dropdowns）

如需使用下列菜单，只需要在 class .dropdown 内加上下拉菜单即可

<div class="dropdown">   <button type="button" class="btn dropdown-toggle" id="dropdownMenu1"       data-toggle="dropdown">      主题      <span class="caret"></span>   </button>   <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">      <li role="presentation">         <a role="menuitem" tabindex="-1" href="#">Java</a>      </li>      <li role="presentation">         <a role="menuitem" tabindex="-1" href="#">数据挖掘</a>      </li>      <li role="presentation">         <a role="menuitem" tabindex="-1" href="#">            数据通信/网络         </a>      </li>      <li role="presentation" class="divider"></li>      <li role="presentation">         <a role="menuitem" tabindex="-1" href="#">分离的链接</a>      </li>   </ul></div>

按钮上拉菜单

菜单也可以往上拉伸的，只需要简单地向父 .btn-group 容器添加 .dropup 即可

选项

对齐

通过向 .dropdown-menu 添加 class .pull-right 来向右对齐下拉菜单

标题

使用 class dropdown-header 向下拉菜单的标签区域添加标题

<li role="presentation" class="dropdown-header">下拉菜单标题</li>

Bootstrap 按钮组

按钮组允许多个按钮被堆叠在同一行上

<div class="btn-group">  <button type="button" class="btn btn-default">按钮 1</button>  <button type="button" class="btn btn-default">按钮 2</button>  <button type="button" class="btn btn-default">按钮 3</button></div>

.btn-group-vertical : 该 class 让一组按钮垂直堆叠显示，而不是水平堆叠显示。

.btn-toolbar:该 class 有助于把几组 <div class=”btn-group”> 结合到一个 <div class=”btn-toolbar”> 中，一般获得更复杂的组件。

<div class="btn-toolbar" role="toolbar">  <div class="btn-group">  <button type="button" class="btn btn-default">按钮 1</button>  <button type="button" class="btn btn-default">按钮 2</button>  <button type="button" class="btn btn-default">按钮 3</button> </div>  <div class="btn-group">  <button type="button" class="btn btn-default">按钮 4</button>  <button type="button" class="btn btn-default">按钮 5</button>  <button type="button" class="btn btn-default">按钮 6</button>  </div></div>

.btn-group-lg, .btn-group-sm, .btn-group-xs:这些 class 可应用到整个按钮组的大小调整，而不需要对每个按钮进行大小调整。

嵌套

在一个按钮组内嵌套另一个按钮组，即，在一个 .btn-group 内嵌套另一个 .btn-group

<div class="btn-group">  <button type="button" class="btn btn-default">按钮 1</button>  <button type="button" class="btn btn-default">按钮 2</button>  <div class="btn-group">    <button type="button" class="btn btn-default dropdown-toggle"       data-toggle="dropdown">      下列      <span class="caret"></span>    </button>    <ul class="dropdown-menu">      <li><a href="#">下拉链接 1</a></li>      <li><a href="#">下拉链接 2</a></li>    </ul>  </div></div>

Bootstrap 输入框组

通过向输入域添加前缀和后缀的内容，可以向用户输入添加公共的元素

向 .form-control 添加前缀或后缀元素的步骤如下：

把前缀或后缀元素放在一个带有 class .input-group 的 <div> 中。
接着，在相同的 <div> 内，在 class 为 .input-group-addon 的 <span> 内放置额外的内容。

把该 <span> 放置在 <input> 元素的前面或者后面。

<div class="input-group">     <span class="input-group-addon">$</span>     <input type="text" class="form-control">     <span class="input-group-addon">.00</span></div>

输入框组的大小

通过向 .input-group 添加相对表单大小的 class（比如 .input-group-lg、input-group-sm、input-group-xs）来改变输入框组的大小

复选框和单选插件

<div class="input-group">    <span class="input-group-addon">        <input type="checkbox">    </span>    <input type="text" class="form-control"></div>

按钮插件

可以把按钮作为输入框组的前缀或者后缀元素，使用 class .input-group-btn 来包裹按钮

<div class="input-group">    <span class="input-group-btn">        <button class="btn btn-default" type="button">            Go!        </button>    </span>    <input type="text" class="form-control"></div>

带有下拉菜单的按钮

在输入框组中添加带有下拉菜单的按钮，只需要简单地在一个 .input-group-btn class 中包裹按钮和下拉菜单即可

<div class="input-group">    <div class="input-group-btn">        <button type="button" class="btn btn-default             dropdown-toggle" data-toggle="dropdown">            下拉菜单             <span class="caret"></span>        </button>        <ul class="dropdown-menu">            <li><a href="#">功能</a></li>            <li><a href="#">另一个功能</a></li>            <li><a href="#">其他</a></li>            <li class="divider"></li>            <li><a href="#">分离的链接</a></li>        </ul>    </div><!-- /btn-group -->    <input type="text" class="form-control"></div>

Bootstrap 导航元素

表格导航或标签

创建一个标签式的导航菜单：

以一个带有 class .nav 的无序列表开始。

添加 class .nav-tabs。

<p>标签式的导航菜单</p><ul class="nav nav-tabs">   <li class="active"><a href="#">Home</a></li>   <li><a href="#">SVN</a></li>   <li><a href="#">iOS</a></li>   <li><a href="#">VB.Net</a></li>   <li><a href="#">Java</a></li>   <li><a href="#">PHP</a></li></ul>

胶囊式的导航菜单

基本的胶囊式导航菜单

如果需要把标签改成胶囊的样式，只需要使用 class .nav-pills 代替 .nav-tabs 即可

<p>基本的胶囊式导航菜单</p><ul class="nav nav-pills">   <li class="active"><a href="#">Home</a></li>   <li><a href="#">SVN</a></li>   <li><a href="#">iOS</a></li>   <li><a href="#">VB.Net</a></li>   <li><a href="#">Java</a></li>   <li><a href="#">PHP</a></li></ul>

这里写图片描述

垂直的胶囊式导航菜单
在使用 class .nav、.nav-pills 的同时使用 class .nav-stacked，让胶囊垂直堆叠

<p>垂直的胶囊式导航菜单</p><ul class="nav nav-pills nav-stacked">   <li class="active"><a href="#">Home</a></li>   <li><a href="#">SVN</a></li>   <li><a href="#">iOS</a></li>   <li><a href="#">VB.Net</a></li>   <li><a href="#">Java</a></li>   <li><a href="#">PHP</a></li></ul>

<img 3>

两端对齐的导航

在屏幕宽度大于 768px 时，通过在分别使用 .nav、.nav-tabs 或 .nav、.nav-pills 的同时使用 class .nav-justified，让标签式或胶囊式导航菜单与父元素等宽

<p>两端对齐的导航元素</p><ul class="nav nav-pills nav-justified">   <li class="active"><a href="#">Home</a></li>   <li><a href="#">SVN</a></li>   <li><a href="#">iOS</a></li>   <li><a href="#">VB.Net</a></li>   <li><a href="#">Java</a></li>   <li><a href="#">PHP</a></li></ul><br><br><br><ul class="nav nav-tabs nav-justified">   <li class="active"><a href="#">Home</a></li>   <li><a href="#">SVN</a></li>   <li><a href="#">iOS</a></li>   <li><a href="#">VB.Net</a></li>   <li><a href="#">Java</a></li>   <li><a href="#">PHP</a></li></ul>

<img 4>

禁用链接

对每个 .nav class，如果添加了 .disabled class，则会创建一个灰色的链接，同时禁用了该链接的 :hover 状态

下拉菜单

导航菜单与下拉菜单使用相似的语法。默认情况下，列表项的锚与一些数据属性协同合作来触发带有 .dropdown-menu class 的无序列表

带有下拉菜单的标签

向标签添加下拉菜单的步骤如下：

以一个带有 class .nav 的无序列表开始。
添加 class .nav-tabs。

添加带有 .dropdown-menu class 的无序列表。

<p>带有下拉菜单的标签</p><ul class="nav nav-tabs">   <li class="active"><a href="#">Home</a></li>   <li><a href="#">SVN</a></li>   <li><a href="#">iOS</a></li>   <li><a href="#">VB.Net</a></li>   <li class="dropdown">      <a class="dropdown-toggle" data-toggle="dropdown" href="#">         Java <span class="caret"></span>      </a>      <ul class="dropdown-menu">         <li><a href="#">Swing</a></li>         <li><a href="#">jMeter</a></li>         <li><a href="#">EJB</a></li>         <li class="divider"></li>         <li><a href="#">分离的链接</a></li>      </ul>   </li>   <li><a href="#">PHP</a></li></ul>

<img 5>

带有下拉菜单的胶囊
步骤与创建带有下拉菜单的标签相同，只是需要把 .nav-tabs class 改为 .nav-pills

Bootstrap 导航栏

默认的导航栏

创建一个默认的导航栏的步骤如下：

向 <nav> 标签添加 class .navbar、.navbar-default。
向上面的元素添加 role=”navigation”，有助于增加可访问性。
向 <div> 元素添加一个标题 class .navbar-header，内部包含了带有 class navbar-brand 的 <a> 元素。这会让文本看起来更大一号。

为了向导航栏添加链接，只需要简单地添加带有 class .nav、.navbar-nav 的无序列表即可。

<nav class="navbar navbar-default" role="navigation">   <div class="navbar-header">      <a class="navbar-brand" href="#">W3Cschool</a>   </div>   <div>      <ul class="nav navbar-nav">         <li class="active"><a href="#">iOS</a></li>         <li><a href="#">SVN</a></li>         <li class="dropdown">            <a href="#" class="dropdown-toggle" data-toggle="dropdown">               Java                <b class="caret"></b>            </a>            <ul class="dropdown-menu">               <li><a href="#">jmeter</a></li>               <li><a href="#">EJB</a></li>               <li><a href="#">Jasper Report</a></li>               <li class="divider"></li>               <li><a href="#">分离的链接</a></li>               <li class="divider"></li>               <li><a href="#">另一个分离的链接</a></li>            </ul>         </li>      </ul>   </div></nav>

<img 6>

响应式的导航栏

为了给导航栏添加响应式特性，折叠的内容必须包裹在带有 classes .collapse、.navbar-collapse 的 <div> 中。折叠起来的导航栏实际上是一个带有 class .navbar-toggle 及两个 data- 元素的按钮。第一个是 data-toggle，用于告诉 JavaScript 需要对按钮做什么，第二个是 data-target，指示要切换到哪一个元素。三个带有 class .icon-bar 的 <span> 创建所谓的汉堡按钮。这些会切换为 .nav-collapse <div> 中的元素。为了实现以上这些功能，您必须包含 Bootstrap 折叠（Collapse）插件。

<nav class="navbar navbar-default" role="navigation">   <div class="navbar-header">      <button type="button" class="navbar-toggle" data-toggle="collapse"          data-target="#example-navbar-collapse">         <span class="sr-only">切换导航</span>         <span class="icon-bar"></span>         <span class="icon-bar"></span>         <span class="icon-bar"></span>      </button>      <a class="navbar-brand" href="#">W3Cschool</a>   </div>   <div class="collapse navbar-collapse" id="example-navbar-collapse">      <ul class="nav navbar-nav">         <li class="active"><a href="#">iOS</a></li>         <li><a href="#">SVN</a></li>         <li class="dropdown">            <a href="#" class="dropdown-toggle" data-toggle="dropdown">               Java <b class="caret"></b>            </a>            <ul class="dropdown-menu">               <li><a href="#">jmeter</a></li>               <li><a href="#">EJB</a></li>               <li><a href="#">Jasper Report</a></li>               <li class="divider"></li>               <li><a href="#">分离的链接</a></li>               <li class="divider"></li>               <li><a href="#">另一个分离的链接</a></li>            </ul>         </li>      </ul>   </div></nav>

<img 7>

导航栏中的表单

使用 .navbar-form class,这确保了表单适当的垂直对齐和在较窄的视口中折叠的行为

<nav class="navbar navbar-default" role="navigation">   <div class="navbar-header">      <a class="navbar-brand" href="#">W3Cschool</a>   </div>   <div>      <form class="navbar-form navbar-left" role="search">         <div class="form-group">            <input type="text" class="form-control" placeholder="Search">         </div>         <button type="submit" class="btn btn-default">提交</button>      </form>       </div></nav>

<img 8>

导航栏中的按钮

使用 class .navbar-btn 向不在 <form> 中的 <button> 元素添加按钮，按钮在导航栏上垂直居中。.navbar-btn 可被使用在 <a> 和 <input> 元素上

<nav class="navbar navbar-default" role="navigation">   <div class="navbar-header">      <a class="navbar-brand" href="#">W3Cschool</a>   </div>   <div>      <form class="navbar-form navbar-left" role="search">         <div class="form-group">            <input type="text" class="form-control" placeholder="Search">         </div>         <button type="submit" class="btn btn-default">提交按钮</button>      </form>          <button type="button" class="btn btn-default navbar-btn">         导航栏按钮      </button>   </div></nav>

<img 9>

导航栏中的文本

如果需要在导航中包含文本字符串，请使用 class .navbar-text。这通常与 <p> 标签一起使用，确保适当的前导和颜色

<nav class="navbar navbar-default" role="navigation">   <div class="navbar-header">      <a class="navbar-brand" href="#">W3Cschool</a>   </div>   <div>      <p class="navbar-text">Signed in as Thomas</p>   </div></nav>

非导航链接

使用 class navbar-link 来为默认的和倒转的导航栏选项添加适当的颜色

<p class="navbar-text navbar-right">     <a href="#" class="navbar-link">Runoob</a> 登录</p>

组件对齐方式

使用实用工具 class .navbar-left 或 .navbar-right 向左或向右对齐导航栏中的导航链接、表单、按钮或文本这些组件

导航栏的位置

Bootstrap 导航栏可以动态定位。默认情况下，它是块级元素，它是基于在 HTML 中放置的位置定位的。通过一些帮助器类，可以把它放置在页面的顶部或者底部，或者可以让它成为随着页面一起滚动的静态导航栏。

固定到顶部：向 .navbar class 添加 class .navbar-fixed-top

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">   ...</nav>

固定到底部：向 .navbar class 添加 class .navbar-fixed-bottom

<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">   ...</nav>

静态的顶部（随着页面一起滚动的导航栏）：添加 .navbar-static-top class
```
<nav class="navbar navbar-default navbar-static-top" role="navigation">   ...</nav>
```
倒置的导航栏（带有黑色背景白色文本的倒置的导航栏）：向 .navbar class 添加 .navbar-inverse class
```
<nav class="navbar navbar-inverse" role="navigation">   ...</nav>
```

Bootstrap 面包屑导航（Breadcrumbs）

面包屑导航（Breadcrumbs）是一种基于网站层次信息的显示方式。以博客为例，面包屑导航可以显示发布日期、类别或标签。它们表示当前页面在导航层次结构内的位置。

Bootstrap 中的面包屑导航（Breadcrumbs）是一个简单的带有 .breadcrumb class 的无序列表。分隔符会通过 CSS（bootstrap.min.css）中下面所示的 class 自动被添加：

.breadcrumb > li + li:before {    color: #CCCCCC;    content: "/ ";    padding: 0 5px;}

eg:

<ol class="breadcrumb">  <li><a href="#">Home</a></li>  <li><a href="#">2013</a></li>  <li class="active">十一月</li></ol>

Bootstrap 分页

分页（Pagination）

下表列出了 Bootstrap 提供的处理分页的 class。

默认的分页

<ul class="pagination">  <li><a href="#">&laquo;</a></li>  <li><a href="#">1</a></li>  <li><a href="#">2</a></li>  <li><a href="#">3</a></li>  <li><a href="#">4</a></li>  <li><a href="#">5</a></li>  <li><a href="#">&raquo;</a></li></ul>

翻页（Pager）

创建一个简单的分页链接为用户提供导航，可通过翻页来实现。与分页链接一样，翻页也是无序列表。默认情况下，链接是居中显示。

<!-- 默认的翻页 --><ul class="pager">  <li><a href="#">Previous</a></li>  <li><a href="#">Next</a></li></ul><!-- 对齐的链接 --><ul class="pager">  <li class="previous"><a href="#">&larr; Older</a></li>  <li class="next"><a href="#">Newer &rarr;</a></li></ul>

Bootstrap 标签

class .label 标签可用于计数、提示或页面上其他的标记显示。使用修饰的 class label-default、label-primary、label-success、label-info、label-warning、label-danger 来改变标签的外观

<span class="label label-default">默认标签</span><span class="label label-primary">主要标签</span><span class="label label-success">成功标签</span><span class="label label-info">信息标签</span><span class="label label-warning">警告标签</span><span class="label label-danger">危险标签</span>

Bootstrap 徽章（Badges）

徽章与标签相似，主要的区别在于徽章的边角更加圆滑。
徽章（Badges）主要用于突出显示新的或未读的项。如需使用徽章，只需要把 <span class=”badge”> 添加到链接、Bootstrap 导航等这些元素上即可

<h4>列表导航中的激活状态</h4><ul class="nav nav-pills nav-stacked" style="max-width: 260px;">   <li class="active">      <a href="#">         <span class="badge pull-right">42</span>         首页      </a>   </li>   <li><a href="#">简介</a></li>   <li>      <a href="#">         <span class="badge pull-right">3</span>         消息      </a>   </li></ul>

Bootstrap 超大屏幕（Jumbotron）

该组件可以增加标题的大小，并为登陆页面内容添加更多的外边距（margin）。使用超大屏幕（Jumbotron）的步骤如下：

创建一个带有 class .jumbotron. 的容器 <div>。

除了更大的 <h1>，字体粗细 font-weight 被减为 200px。

<div class="container">   <div class="jumbotron">      <h1>欢迎登陆页面！</h1>      <p>这是一个超大屏幕（Jumbotron）的实例。</p>      <p><a class="btn btn-primary btn-lg" role="button">         学习更多</a>      </p>   </div></div>

页面标题（Page Header）会在网页标题四周添加适当的间距,如需使用页面标题（Page Header），把标题放置在带有 class .page-header 的 <div> 中

<div class="page-header">   <h1>页面标题实例      <small>子标题</small>   </h1></div>

Bootstrap 缩略图

使用 Bootstrap 创建缩略图的步骤如下：

在图像周围添加带有 class .thumbnail 的 <a> 标签。
这会添加四个像素的内边距（padding）和一个灰色的边框。

当鼠标悬停在图像上时，会动画显示出图像的轮廓。

<a href="#" class="thumbnail">    <img src="/wp-content/uploads/2014/06/kittens.jpg"     alt="通用的占位符缩略图"></a>

添加自定义的内容

把带有 class .thumbnail 的 <a> 标签改为 <div>。
在该 <div> 内，您可以添加任何您想要添加的东西。由于这是一个 <div>，我们可以使用默认的基于 span 的命名规则来调整大小。

如果您想要给多个图像进行分组，请把它们放置在一个无序列表中，且每个列表项向左浮动。

<div class="thumbnail">     <img src="/wp-content/uploads/2014/06/kittens.jpg"      alt="通用的占位符缩略图">     <div class="caption">        <h3>缩略图标签</h3>        <p>一些示例文本。一些示例文本。</p>        <p>           <a href="#" class="btn btn-primary" role="button">              按钮           </a>            <a href="#" class="btn btn-default" role="button">              按钮           </a>        </p>     </div></div>

Bootstrap 警告（Alerts）

创建一个 <div>，并向其添加一个 .alert class 和四个上下文 class（即 .alert-success、.alert-info、.alert-warning、.alert-danger）之一，来添加一个基本的警告框

可取消的警告（Dismissal Alerts）

创建一个可取消的警告（Dismissal Alert）步骤如下：

通过创建一个 <div>，并向其添加一个 .alert class 和四个上下文 class（即 .alert-success、.alert-info、.alert-warning、.alert-danger）之一，来添加一个基本的警告框。
同时向上面的 <div> class 添加可选的 .alert-dismissable。

添加一个关闭按钮。

<div class="alert alert-success alert-dismissable">   <button type="button" class="close" data-dismiss="alert"       aria-hidden="true">      &times;   </button>   成功！很好地完成了提交。</div>

警告（Alerts）中的链接

在警告（Alerts）中创建链接的步骤如下：

通过创建一个 <div>，并向其添加一个 .alert class 和四个上下文 class（即 .alert-success、.alert-info、.alert-warning、.alert-danger）之一，来添加一个基本的警告框。
使用 .alert-link 实体类来快速提供带有匹配颜色的链接。

Bootstrap 进度条

默认的进度条

创建一个基本的进度条的步骤如下：
添加一个带有 class .progress 的 <div>。
接着，在上面的 <div> 内，添加一个带有 class .progress-bar 的空的 <div>。

添加一个带有百分比表示的宽度的 style 属性，例如 style=”60%”; 表示进度条在 60% 的位置。

<div class="progress">   <div class="progress-bar" role="progressbar" aria-valuenow="60"       aria-valuemin="0" aria-valuemax="100" style="width: 40%;">      <span class="sr-only">40% 完成</span>   </div></div>

条纹的进度条

创建一个条纹的进度条的步骤如下：

添加一个带有 class .progress 和 .progress-striped 的 <div>。
接着，在上面的 <div> 内，添加一个带有 class .progress-bar 和 class progress-bar-* 的空的 <div>。其中，* 可以是 success、info、warning、danger。
添加一个带有百分比表示的宽度的 style 属性，例如 style=”60%”; 表示进度条在 60% 的位置。

动画的进度条

创建一个动画的进度条的步骤如下：

添加一个带有 class .progress 和 .progress-striped 的 <div>。同时添加 class .active。
接着，在上面的 <div> 内，添加一个带有 class .progress-bar 的空的 <div>。
添加一个带有百分比表示的宽度的 style 属性，例如 style=”60%”; 表示进度条在 60% 的位置。

堆叠的进度条

<div class="progress">   <div class="progress-bar progress-bar-success" role="progressbar"       aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"       style="width: 40%;">      <span class="sr-only">40% 完成</span>   </div>   <div class="progress-bar progress-bar-info" role="progressbar"       aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"           style="width: 30%;">      <span class="sr-only">30% 完成（信息）</span>   </div>   <div class="progress-bar progress-bar-warning" role="progressbar"       aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"        style="width: 20%;">      <span class="sr-only">20% 完成（警告）</span>   </div></div>

Bootstrap 多媒体对象（Media Object）

在 HTML 标签中添加以下两种形式来设置媒体对象：

.media：该 class 允许将媒体对象里的多媒体（图像、视频、音频）浮动到内容区块的左边或者右边。

.media-list：如果你需要一个列表，各项内容是无序列表的一部分，可以使用该 class。可用于评论列表与文章列表。

<div class="media">   <a class="pull-left" href="#">      <img class="media-object" src="/wp-content/uploads/2014/06/64.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="/wp-content/uploads/2014/06/64.jpg"       alt="媒体对象">   </a>   <div class="media-body">      <h4 class="media-heading">媒体标题</h4>      这是一些示例文本。这是一些示例文本。       这是一些示例文本。这是一些示例文本。      这是一些示例文本。这是一些示例文本。      这是一些示例文本。这是一些示例文本。      这是一些示例文本。这是一些示例文本。      <div class="media">         <a class="pull-left" href="#">            <img class="media-object" src="/wp-content/uploads/2014/06/64.jpg"             alt="媒体对象">         </a>         <div class="media-body">            <h4 class="media-heading">媒体标题</h4>            这是一些示例文本。这是一些示例文本。            这是一些示例文本。这是一些示例文本。            这是一些示例文本。这是一些示例文本。             这是一些示例文本。这是一些示例文本。            这是一些示例文本。这是一些示例文本。         </div>      </div>   </div></div>