媒体对象

本小节我们将讲解 Bootstrap 中的媒体对象（Media Object）。

媒体对象可以包含图片、视频或音频等媒体，以达到对象和文本组合显示的样式效果。

基本实例

<div class="media">
    <div class="media-left">
    <img src="img/media.jpg" alt="" class="media-object">
    </div>
    <div class="media-body">
    <h4 class="media-heading">标题</h4>
    <p>针对美国财长称将于近期来华磋商消息,中国商务部新闻发言人高峰16日在新闻发布会上称,中方不掌握美方来华计划  </p>
    </div>
</div>

运行结果如下:

如果想让媒体对象在右边,把包含 .media-body类 的 div 与包含媒体对象的 div 互换位置,且把 media-left 类换成 media-right

媒体对象列表

<ul class="media-list">
<li class="media">
    <div class="media-left">
    <a href="#"><img class="media-object" src="..." alt="..."></a>
    </div>
    <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    </div>
</li>
......
</ul>

Well

Well
Well 组件可以实现简单的嵌入效果。

为了创建 Well，只需要简单地把内容放在带有.well类的 div 中即可。

如下：

<div class="well"> Bootstrap </div>

我们可以使用可选类 well-lg 或 well-sm 来改变 Well 的尺寸大小。

通过这两种可选修饰类，可以控制此组件的内补（padding）和圆角的设置。

<div class="well well-lg"> 我在更大的 well 中 </div>
<div class="well well-sm"> 我在更小的 well 中 </div>

运行结果:

引入插件

站点引用 Bootstrap 插件的方式有两种：

单个引入：使用 Bootstrap 提供的单个 *.js 文件。
一次性全部引入：使用bootstrap.js 或压缩版的bootstrap.min.js。
一些插件和 CSS 组件依赖于其他插件。如果单独引用插件，请确保在文档中检查插件之间的依赖关系。

jQuery 必须在所有插件之前引入页面。

data 属性

data 属性
你可以仅仅通过 data 属性 API 就能使用所有的 Bootstrap 插件。

然而在某些情况下可能需要将此功能关闭。因此，我们还提供了关闭 data 属性 API 的方法，即解除以 data-api 为命名空间并绑定在文档上的事件。就像下面这样：

$(document).off('.data-api')

如需关闭某个特定的插件，只需在 data-api 前面添加那个插件的名称作为命名空间，如下：

$(document).off('.alert.data-api')

编程方式的 API

Bootstrap 插件中所有公开的 API 都是支持单独或链式调用方式，并且返回其所操作的元素集合。

注：和 jQuery 的调用形式一致

例如：

$(".btn.danger").button("toggle").addClass("fat")

所有的方法都可以接受一个可选的选项对象作为参数，或者一个代表特定方法的字符串，或者不带任何参数（这种情况下，将会初始化插件为默认行为），如下所示：

// 初始化为默认行为
$("#myModal").modal()    
 // 初始化为不支持键盘               
$("#myModal").modal({ keyboard: false })  
// 初始化并立即调用 show
$("#myModal").modal('show')

每个插件在 Constructor 属性上也暴露了其原始的构造函数：$.fn.popover.Constructor。如果你想获取某个特定插件的实例，可以直接通过页面元素获取：

 $('[rel=popover]').data('popover').

避免命名空间冲突
某些时候 Bootstrap 插件可能需要与其他 UI 框架一起使用。

在这种情况下，可能会发生命名空间冲突。如果不幸发生了这种情况，你可以通过调用插件的 .noConflict 方法恢复其原始值。

// 返回 $.fn.button 之前所赋的值
var bootstrapButton = $.fn.button.noConflict() 
// 为 $().bootstrapBtn 赋予 Bootstrap 功能                           
$.fn.bootstrapBtn = bootstrapButton

事件

Bootstrap 为大多数插件的独特行为提供了自定义事件。

一般来说，这些事件都有两种动词的命名形式：

不定式：表示其在事件开始时被触发
例如: show

$('#myModal').on('show.bs.modal', function (e) {
  if (!data) return e.preventDefault() // 阻止模态框的展示
})

过去式：在动作执行完毕之后被触发。例如 shown。

所有以不定式动词命名的事件都提供了 preventDefault 功能，这使得在事件开始执行前可以将其停止。

模态框

模态框插件（Modal）， 这是一款交互式网站非常常见的弹窗功能插件。

比如点击一个按钮弹出一个框，弹出的框可能是一段文件描述，也可能带有按钮操作，也有可能弹出的是一张图片。如下图所示：

引入
我们可以引入合并好的 bootstrap.js 或者其独立的插件文件 modal.js。这里以加载合并好的js为例：

<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

基本结构
使用模态框的弹窗组件需要三层 div 容器元素，分别为 modal(模态声明层) 、dialog(窗口声明层) 、content(内容层) 。

在内容层里面，还有三层，分别为 header(头部)、body(主体)、footer(注脚)。

模态弹出窗的结构及说明如下:

<!-- 模态声明，show 表示初始化时模态框显示 -->
<div class="modal show">
    <!-- 窗口声明 -->
    <div class="modal-dialog">
        <!-- 内容声明 -->
        <div class="modal-content">
            <!-- 头部 -->
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span>×</span>
                </button>
                <h4 class="modal-title">会员登录</h4>
            </div>
            <!-- 主体 -->
            <div class="modal-body">
                <p> 暂时无法登录会员 </p>
            </div>
            <!-- 注脚 -->
            <div class="modal-footer">
                <button type="button" class="btn btn-default"> 注册 </button>
                <button type="button" class="btn btn-primary"> 登录 </button>
            </div>
        </div>
    </div>
</div>

弹出框头部（modal-header），主要包括标题和关闭按钮
弹出框主体（modal-body），弹出框的主要内容
弹出框脚部（modal-footer），主要放置操作按钮
class="close"，用于为模态窗口的关闭按钮设置样式。
data-dismiss="modal"，用于关闭模态窗口。

模态框 - 基本使用

Bootstrap 框架针对模态框提供了自定义 data-属性 来控制模态框。

有关于模态框自定义属性相关说明如下所示：

我们还可以通过给 .modal 增加类 fade 为模态弹出框增加一个过渡动画效果：当模态框被切换时，它会引起内容淡入淡出。

如下：

<div class="modal fade" id="myModal">


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Bootstrap 实例 - 模态框（Modal）插件</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<!-- 按钮触发模态框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
    开始演示模态框
</button>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    ×
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    模态框（Modal）标题
                </h4>
            </div>
            <div class="modal-body">
                在这里添加一些文本
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                </button>
                <button type="button" class="btn btn-primary">
                    提交更改
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
</body>
</html>
  1. 触发模态框的方法（一）
    众所周知，模态框在页面加载完成时，是被隐藏在页面中的，只有通过一定的动作（事件）才能触发模态弹出窗的显示。

声明式触发方法
用 data-toggle 和 data-target 来控制模态框（bootstrap 中声明式触发方法一般依赖于这些自定义的 data-xxx 属性。比如data-toggle="" 或者 data-dismiss=""）。

如下：

<!-- 触发模态弹出窗的元素 -->
<button type="button" data-toggle="modal" data-target="#mymodal" class="btn btn-primary">点击我会弹出模态弹出窗</button>
<!-- 模态框 -->
<div class="modal fade" id="mymodal">
    <div class="modal-dialog">
        <div class="modal-content">
        <!-- 模态框内容 -->
        </div>
    </div>
</div>

注意以下事项：
1、data-toggle 必须设置为 modal ；
2、data-target 可以设置为 CSS 的选择符，也可以设置为模态框的 ID 值(一般情况设置为模态框的 ID 值，因为ID值是唯一的值)。

  1. 触发模态框的方法（二）
    除了使用自定义属性触发模态框之外，还可以通过 JavaScript 方法来触发模态框。

比如说给一个按钮一个单击事件，然后触发模态框。

模态框支持 4 种事件，分别对应弹出前、弹出后、关闭前和关闭后。具体描述如下：

调用方法如下：

$('#myModal').on('hidden.bs.modal', function (e) {
    // 处理代码...
})

比如如下代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>Bootstrap 实例 - 模态框（Modal）插件事件</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<!-- 按钮触发模态框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
    开始演示模态框
</button>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    模态框（Modal）标题
                </h4>
            </div>
            <div class="modal-body">
                点击关闭按钮检查事件功能。
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">
                    关闭
                </button>
                <button type="button" class="btn btn-primary">
                    提交更改
                </button>
            </div>
        </div>
    </div>
</div>
<script>
   $(function () { $('#myModal').modal('hide')});
</script>
<script>
   $(function () { $('#myModal').on('hide.bs.modal', function () {
      alert('您真的要关闭么');})
   });
</script>

</body>
</html>

下拉菜单 —— 通过 data 属性声明

下拉菜单

和模态框一样，触发下拉菜单方式有两种，一种是属性声明式用法，另一种是 JavaScript 方法。

常规使用中，和组件方法一样(声明式用法)，代码如下：

<div class="dropdown">
    <button class="btn btn-primary" data-toggle="dropdown"> 下拉菜单 <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
          <li><a href="#">首页</a></li>
          ...
    </ul>
</div>

实现下拉菜单原理：

Dropdown 插件加载时，对所有带有 "data-toggle=dropdown" 样式的元素绑定了事件;
单击带有 "data-toggle=dropdown" 样式的链接或按钮时， 会触发 JavaScript 事件代码:
下拉菜单的父容器会添加一个 open 类名，此时下拉菜单显示;
再次单击时，JavaScript 会删除刚添加的 open 类名，此时下拉菜单将隐藏。
综上所述，声明式用法的关键核心如下：
1. 父容器使用 class="dropdown"包裹；
2. 内部点击按钮事件绑定 data-toggle="dropdown"；
3. 菜单元素使用 class="dropdown-menu"。

如果按钮在容器外部，可以通过 data-target 进行绑定。

<button class="btn btn-primary" id="btn" data-toggle="dropdown" data-target="#dropdown">

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Bootstrap 实例 - 默认的导航栏</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">首页</a>
        </div>
        <div>
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">产品</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        资讯
                        <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="#">1</a></li>
                        <li><a href="#">2</a></li>
                        <li class="divider"></li>
                        <li><a href="#">分离的3</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>

</body>
</html>

下拉菜单 —— 通过 JavaScript 触发
和模态框一样，Bootstrap 框架中的下拉菜单也支持 JavaScript 方法触发下拉菜单显示。

使用JavaScript触发下拉菜单和声明式原理是基本类似的。

方法
通过 JavaScript 调用下拉菜单，请使用下面的方法：

$('#btn').dropdown();
$('#btn').dropdown('toggle');

无论是通过 JavaScript 调用下拉列表还是使用 data-api，都需要在下拉列表的触发元素上显示 data-toggle =“dropdown”。

最后修改：2022 年 12 月 05 日
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏