Bootstrap 学习之（十五）------ 媒体对象,well

来源：互联网发布：js源代码加密编辑：程序博客网时间：2024/05/29 07:04

Bootstrap 多媒体对象（Media Object）

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

媒体对象轻量标记、易于扩展的特性是通过向简单的标记应用 class 来实现的。你可以在 HTML 标签中添加以下两种形式来设置媒体对象：

.media：该 class 允许将媒体对象里的多媒体（图像、视频、音频）浮动到内容区块的左边或者右边。
.media-list：如果你需要一个列表，各项内容是无序列表的一部分，可以使用该 class。可用于评论列表与文章列表。

<span style="font-size:18px;"><!DOCTYPE html><html><head>    <title>BootstrapTest</title>   <!-- 新 Bootstrap 核心 CSS 文件 -->    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->    <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script></head><body><ul class="media-list">    <li class="media">        <a class="pull-left" href="#">            <img class="media-object" src="img/bg_1.jpg"                 alt="通用的占位符图像">        </a>        <div class="media-body">            <h4 class="media-heading">媒体标题</h4>            <p>这是一些示例文本。这是一些示例文本。                这是一些示例文本。这是一些示例文本。                这是一些示例文本。这是一些示例文本。                这是一些示例文本。这是一些示例文本。                这是一些示例文本。这是一些示例文本。</p>            <!-- 嵌套的媒体对象 -->            <div class="media">                <a class="pull-left" href="#">                    <img class="media-object" src="img/bg_1.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="img/bg_1.jpg"                                 alt="通用的占位符图像">                        </a>                        <div class="media-body">                            <h4 class="media-heading">嵌套的媒体标题</h4>                            这是一些示例文本。这是一些示例文本。                            这是一些示例文本。这是一些示例文本。                            这是一些示例文本。这是一些示例文本。                            这是一些示例文本。这是一些示例文本。                            这是一些示例文本。这是一些示例文本。                        </div>                    </div>                </div>            </div>            <!-- 嵌套的媒体对象 -->            <div class="media">                <a class="pull-left" href="#">                    <img class="media-object" src="img/bg_1.jpg"                         alt="通用的占位符图像">                </a>                <div class="media-body">                    <h4 class="media-heading">嵌套的媒体标题</h4>                    这是一些示例文本。这是一些示例文本。                    这是一些示例文本。这是一些示例文本。                    这是一些示例文本。这是一些示例文本。                    这是一些示例文本。这是一些示例文本。                    这是一些示例文本。这是一些示例文本。                </div>            </div>        </div>    </li>    <li class="media">        <a class="pull-right" href="#">            <img class="media-object" src="img/bg_1.jpg"                 alt="通用的占位符图像">        </a>        <div class="media-body">            <h4 class="media-heading">媒体标题</h4>            这是一些示例文本。这是一些示例文本。            这是一些示例文本。这是一些示例文本。            这是一些示例文本。这是一些示例文本。            这是一些示例文本。这是一些示例文本。            这是一些示例文本。这是一些示例文本。        </div>    </li></ul></body></html></span>

Bootstrap Well

Well 是一种会引起内容凹陷显示或插图效果的容器 <div>。为了创建 Well，只需要简单地把内容放在带有 class .well 的 <div> 中即可。

尺寸大小

您可以使用可选类 well-lg 或 well-sm 来改变 Well 的尺寸大小。这两个类是与 .well 类结合使用的。这两个类会影响内边距（padding），根据使用的类，Well 会显示得更大或者更小。

<div class="well well-lg">您好，我在大的 Well 中！</div><div class="well well-sm">您好，我在小的 Well 中！</div>

0 0