Jump Start Bootstrap 第4章

Bootstrap 官网地址 原文出处

Bootstrap装饰插件

JavaScript是网页上事实上的脚本语言。流行的网页功能,例如:漂亮的图片幻灯片、下拉菜单、弹出框等,都可以结合JavaScript和CSS实现。在这章,我们将讨论一些Bootstrap 3 提供的随时可用的JavaScript插件,很容易创建一些高级的网页功能。

这里有两种不同的使用Bootstrap的JavaScript插件的方法。第一种根本不需要JavaScript,您只需要遵循一些推荐的HTML标记来使用它们。另一种需要一些JavaScript知识来初始化和定制这些插件。这两种使用插件的方式,我们都将讨论,你可以选择最适合你的。

本章将使用的全部插件都包含在文件bootstrap.js或bootstrap.min.js中。如果你遵循了第一章的Bootstrap下载说明,你将在项目的/js目录下找到bootstrap.js。

扩展功能

想象一个没有任何下拉功能的菜单栏。有点无聊,对吧?上一章,导航栏只包含一个简单的链接列表。在本节中,我们将使用一些Bootstrap的JavaScript插件帮助扩展我们网站现有组件的功能。我们将会看到如何添加下拉菜单到导航栏、切换按钮的状态、当点击按钮时漂亮的警告信息会在显示一段时间后消失等等功能。

下拉(Dropdowns)

实现下拉功能的代码如下:

<div class="container">
    <div class="dropdown">
        <a data-toggle="dropdown" href="#">Dropdown <span class="caret"></span> </a>
        <ul class="dropdown-menu">
            <li><a href="#">Link 1</a> </li>
            <li><a href="#">Link 2</a> </li>
            <li><a href="#">Link 3</a> </li>
            <li><a href="#">Link 4</a> </li>
        </ul>
    </div>
</div>

data-toggle属性告诉Bootstrap当点链接击时,激活链接元素上的下拉效果。【注:data-target=”#”经过测试会导致Uncaught Error: Syntax error, unrecognized expression: #,data-target不再是类属性】

一旦链接和图标被正确放置,您就可以创建一个ul列表来表示下拉菜单中的链接列表。这个ul元素应该有类”dropdown-menu”。现在,我们有了一个简单的下拉菜单,在单击链接时显示菜单。我们可以在浏览器中查看它,如图所示。

让我们结合使用下拉式插件和我们在前一章中创建的标签和按钮菜单。

<div class="container">
    <ul class="nav nav-pills">
        <li class="active"><a href="#">Home</a> </li>
        <li class="dropdown">
            <a data-toggle="dropdown" href="#">Profile <span class="caret"></span> </a>
            <ul class="dropdown-menu">
                <li><a href="#">Link 1</a> </li>
                <li><a href="#">Link 2</a> </li>
                <li><a href="#">Link 3</a> </li>
                <li><a href="#">Link 4</a> </li>
            </ul>
        </li>
        <li><a href="#">Messages</a> </li>
    </ul>
</div>

我们已经在第二个<li>元素中添加了一个下拉插件。因此,上面包含下拉插件的的按钮菜单将如图所示:

您可以在任何组件中使用这个dropdown插件,将其注入前面代码中所示的内容。

使用JavaScript下拉

Bootstrap的下拉插件也可以使用JavaScript完成。你可以使用JavaScript对象来替代data-*提供自定义属性。Bootstrap使用JQuery库来完成全部和JavaScript相关的操作;因此,在Bootstrap中自定义JavaScript相关操作,导入JQuery.js是必须的。

要通过JQuery触发下拉插件,你需要使用方法dropdown();

$().dropdown('toggle');

在页面加载后,我们可以使用这个方法把下拉插件的从关闭状态切换到开启状态。例如,如果我们创建下拉列表的代码片段如下:【注:data-target已不再是类属性】

<div class="container">
    <div class="dropdown" id="myDropdown">
        <a class="myDropdownHandle" data-toggle="dropdown" href="#">Dropdown <span class="caret"></span> </a>
        <ul class="dropdown-menu">
            <li><a href="#">Link 1</a> </li>
            <li><a href="#">Link 2</a> </li>
            <li><a href="#">Link 3</a> </li>
            <li><a href="#">Link 4</a> </li>
        </ul>
    </div>
</div>

你可以在JQuery的ready方法中调用dropdown方法:

<!-- jquery 3.2.1 -->
<script type="text/javascript" src="webjars/jquery/dist/jquery.min.js"></script>
<!--注意顺序(在jquery.min.js后面)-->
<script type="text/javascript">
    $(document).ready(function () {
        $('.myDropdownHandle').dropdown('toggle');
    });
</script>

结果如图所示

你可以看到,我在调用了.myDropdownHandle之后,使用了dropdown()方法。下拉插件的默认状态是关闭的;然而你刷新页面后它将切换状态并使菜单可见。

Bootstrap为下拉插件提供了一些附加事件,它们是:

  1. show.bs.dropdown: 这个事件在句柄被单击时触发;下拉句柄收到请求去显示隐藏菜单;
  2. shown.bs.dropdown: 这个事件在菜单被显示时触发;
  3. hide.bs.dropdown: 这个事件在菜单关闭前触发;
  4. hidden.bs.dropdown: 这个事件在菜单关闭后触发;

show或hide事件在完成请求之前发生,而在请求完成时触发shown或hidden事件。在这里,请求是打开和关闭下拉菜单。

让我展示一个如何使用这些事件的例子。我已经写了下面的JQuery代码片段去监听所有的下拉插件状态,并打印每个事件触发时的状态。

<!-- jquery 3.2.1 -->
<script type="text/javascript" src="webjars/jquery/dist/jquery.min.js"></script>
<!--注意顺序(在jquery.min.js后面)-->
<script type="text/javascript">
    $('#myDropdown').on('show.bs.dropdown', function () {
        console.log("Opening dropdown..")
    })
    $('#myDropdown').on('shown.bs.dropdown', function () {
        console.log("Dropdown opened..")
    })
    $('#myDropdown').on('hide.bs.dropdown', function () {
        console.log("Hiding dropdown..")
    })
    $('#myDropdown').on('hidden.bs.dropdown', function () {
        console.log("Dropdown hidden..")
    })
</script>

在单击链接句柄时,将在控制台依次打印:“Opening dropdown”和 “Dropdown opened”,如图所示。

再次点击句柄将依次显示后面的两条信息,如图所示。

最后,包含上述事件的dropdowns.html完整代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- bootstrap 3.3.7 -->
    <link rel="stylesheet" href="webjars/bootstrap/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
    <div class="dropdown" id="myDropdown">
        <a class="myDropdownHandle" data-toggle="dropdown" href="#">Dropdown <span class="caret"></span> </a>
        <ul class="dropdown-menu">
            <li><a href="#">Link 1</a> </li>
            <li><a href="#">Link 2</a> </li>
            <li><a href="#">Link 3</a> </li>
            <li><a href="#">Link 4</a> </li>
        </ul>
    </div>
</div>

<!-- jquery 3.2.1 -->
<script type="text/javascript" src="webjars/jquery/dist/jquery.min.js"></script>
<!--注意顺序(在jquery.min.js后面)-->
<script type="text/javascript">
    $('#myDropdown').on('show.bs.dropdown', function () {
        console.log("Opening dropdown..")
    });
    $('#myDropdown').on('shown.bs.dropdown', function () {
        console.log("Dropdown opened..")
    });
    $('#myDropdown').on('hide.bs.dropdown', function () {
        console.log("Hiding dropdown..")
    });
    $('#myDropdown').on('hidden.bs.dropdown', function () {
        console.log("Dropdown hidden..")
    });
</script>

<!-- bootstrap 3.3.7 -->
<script type="text/javascript" src="webjars/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

在下拉菜单中的链接动态地填充来自服务器的数据时,您会发现这些事件非常有用。在这种情况下,您可以在show.bs.dropdown事件中向服务器发出Ajax请求,并在显示之前填充下拉菜单。

警告消息

Bootstrap提供了一个非常有用的组件在网页的任何地方显示警告消息;你可以使用它们来显示成功消息、警告消息、失败消息、信息等;这些消息对访问者来说是恼人的,因此他们应该忽略添加的功能,让访问者能够隐藏它们。

在本节中,我们将使用Bootstrap创建一个警告消息,并查看如何添加解除功能。

这里是”成功”警告消息的代码:

每个警报都应该有一个警戒等级。它还应该有一个额外的上下文类,比如alert - success。有四个关于警告信息的自解释上下文类:

  1. alert-success
  2. alert-info
  3. alert-danger
  4. alert-warning
<div class="container">
    <div class="alert alert-success alert-dismissable">
        Amount has bean transferred successfully.
    </div>
</div>

上面代码中所示的警报并没有解除功能,所以它在web页面中总是可见,如图4.5所示。

一个可解除的警告框的标记,以及它在图中的外观,如下所示:【注:”×”即乘号×】

<div class="container">
    <div class="alert alert-success alert-dismissable">
        <button type="button" class="close" data-dismiss="alert">&times;</button>
        Amount has bean transferred successfully.
    </div>
</div>

结果如图所示

为了产生一个可解除的警告消息,我们需要给警告消息添加一个类”alter-dismissable”;然后我们需要一个按钮,点击它关闭警告消息;这个按钮需要有一个data-dismiss属性,用来告诉Bootstrap点击时解除警告。Bootstrap通过类”close”将按钮放置在警告消息的右上角。关闭按钮的解除动作靠data-dismiss属性来触发,由Bootstrap使用JavaScript实现。

警告消息和JavaScript

你也可以用Bootstrap的alert()方法来解除警告。

$(".alert").alert('close');

警告消息有两个关联的事件:

  1. close.bs.alert: 即将关闭警告信息时触发
  2. closed.bs.alert: 关闭警告信息后触发

这里是一个使用上面事件的例子:

<!-- jquery 3.2.1 -->
<script type="text/javascript" src="webjars/jquery/dist/jquery.min.js"></script>

<script type="text/javascript">
    $('.alert').on('close.bs.alert', function () {
        console.log("Closing alert..")
    })
</script>

结果如图所示

按钮

在前面的章节中,我们看到了如何创建各种类型的按钮。这里,我们将看到使用Bootstrap的JavaScript插件如何在不同的状态使用它们,并且让它们切换状态。

Bootstrap按钮有两个状态;active和inactive,active状态有一个类”active”,但inactive状态没有关联类;相反的,你可以用下面的代码创建一个简单的按钮并切换状态。

<button type="button" class="btn btn-lg btn-default" data-toggle="button">Toggle Me!</button>

在这代码中,我使用类btn、btn-lg、btn-default创建了一个大的灰色按钮,它正好处于inactive状态,当我们点击它,Bootstrap将在按钮上添加类active。

当你点击按钮时,你会看到一个类似于插图效果的样式;在再次单击时,它返回到原来的样式,如图所示。data-toggle=”button”实现了这个切换功能。

复选框

包含CSS样式的单选、复选按钮用起来并不方便,Bootstrap提供了一个重新设计的方案:它将一组复选框或单选按钮组合成一组Bootstrap按钮,这些按钮被放在一起。让我们来看看一些示例代码,结果如图所示:

<div class="container">
    <div class="btn-group" data-toggle="buttons">
        <label class="btn btn-default">
            <input type="checkbox"> Option 1
        </label>
        <label class="btn btn-default">
            <input type="checkbox"> Option 2
        </label>
        <label class="btn btn-default">
            <input type="checkbox"> Option 3
        </label>
    </div>
</div>

Bootstrap已经完全修改了复选框(checkbox)的显示。它们现在看起来是一组Bootstrap按钮。因为它们是复选框,所以我可以选中选项1和选项3。要创建此复选框组,您需要一个带有类”btn-group”的<div>包裹按钮,这个<div>还应该具有一个data-toggle=”buttons”属性来切换数据。所有复选框类型的输入元素都应该封装在标签元素中。这些标签必须有Bootstrap的按钮类。在这种情况下,我选择了灰色的按钮。

您可以通过混合Bootstrap的按钮类来创建按钮组中的多色按钮,比如btn-primary、 btn-info等。

单选按钮

您还可以创建一组单选按钮,其中只有一个按钮是可选的。

<div class="container">
    <div class="btn-group" data-toggle="buttons">
        <label class="btn btn-info">
            <input type="radio" name="options"> Option 1
        </label>
        <label class="btn btn-info">
            <input type="radio" name="options"> Option 2
        </label>
        <label class="btn btn-info">
            <input type="radio" name="options"> Option 3
        </label>
    </div>
</div>

此外,您还必须在所有的这些按钮中都包含一个统一name属性值,从而在逻辑上对这些按钮进行分组。在本例中,我还将btn-default替换为btn-info,这将使按钮的颜色从灰色改为浅蓝色。

管理内容

正确管理内容对于任何网站来说都是非常重要的。如果事情变得复杂,访问者很可能不会回到你的网站。Bootstrap提供了许多JavaScript插件,可以帮助我们组织和显示我们的内容。让我们来看看其中的一些。

ScrollSpy(滚动监听)

ScrollSpy是当今最流行的JavaScript插件之一。它被广泛应用于只有单页面网站。该插件在任何DOM元素中侦听滚动,并根据元素的滚动位置在导航栏中突出显示菜单项。

基本上,它是一个双组件的插件;它由一个导航条和一个内容区域组成。内容区域划分为多个部分,每个部分都有一个惟一的ID。导航条仅由内部链接作为href属性的值组成。当用户开始滚动时,导航栏中的相应链接将按当前显示的部分高亮显示。

让我们先建立一个navbar,下面是代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- bootstrap 3.3.7 -->
    <link rel="stylesheet" href="webjars/bootstrap/css/bootstrap.min.css" />
</head>
<body>
    <div class="container">
        <nav id="navbarExample" class="navbar navbar-default" role="navigation">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbarLinks">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">SitePoint</a>
                </div>
                <div class="collapse navbar-collapse navbarLinks">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#home">Home</a> </li>
                        <li class=""><a href="#about">About</a></li>
                        <li class=""><a href="#contact">Contact Us</a></li>
                        <li class=""><a href="#map">Map</a></li>
                    </ul>
                </div>
            </div>
        </nav>
        <div data-spy="scroll" data-target="#navbarExample" data-offset="0" class="scrollspy-example">
            <h4 id="Home">Home</h4>
            <p>Lorem ipsum dolor sit amet, consectetur ... Lorem ipsum dolor sit amet, consectetur ... Lorem ipsum dolor sit amet, consectetur ... Lorem ipsum dolor sit amet, consectetur ... Lorem ipsum dolor sit amet, consectetur ... Lorem ipsum dolor sit amet, consectetur ... Lorem ipsum dolor sit amet, consectetur ... Lorem ipsum dolor sit amet, consectetur ...</p>
            <h4 id="about">About</h4>
            <p>Lorem ipsum dolor sit amet, consectetur ... Lorem ipsum dolor sit amet, consectetur ... Lorem ipsum dolor sit amet, consectetur ... Lorem ipsum dolor sit amet, consectetur ... Lorem ipsum dolor sit amet, consectetur ... Lorem ipsum dolor sit amet, consectetur ... Lorem ipsum dolor sit amet, consectetur ... Lorem ipsum dolor sit amet, consectetur ...</p>
            <h4 id="contact">Contact Us</h4>
            <p>Lorem ipsum dolor sit amet, consectetur ... Lorem ipsum dolor sit amet, consectetur ... Lorem ipsum dolor sit amet, consectetur ... Lorem ipsum dolor sit amet, consectetur ... Lorem ipsum dolor sit amet, consectetur ... Lorem ipsum dolor sit amet, consectetur ... Lorem ipsum dolor sit amet, consectetur ... Lorem ipsum dolor sit amet, consectetur ...</p>
            <h4 id="map">Map</h4>
            <p>Lorem ipsum dolor sit amet, consectetur ... Lorem ipsum dolor sit amet, consectetur ... Lorem ipsum dolor sit amet, consectetur ... Lorem ipsum dolor sit amet, consectetur ... Lorem ipsum dolor sit amet, consectetur ... Lorem ipsum dolor sit amet, consectetur ... Lorem ipsum dolor sit amet, consectetur ... Lorem ipsum dolor sit amet, consectetur ...</p>
        </div>
    </div>

    <!-- jquery 3.2.1 -->
    <script type="text/javascript" src="webjars/jquery/dist/jquery.min.js"></script>

    <!-- bootstrap 3.3.7 -->
    <script type="text/javascript" src="webjars/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

在图中,点击Map链接,页面跳转到Map内容。

Tabs选项卡

在前面的章节中,我们了解了如何使一组链接看起来像选项卡,但那不是真的选项卡。在本节中,我们将创建一些选项卡窗格,将一些虚拟数据放入其中,并使这些选项卡窗格响应相应的选项卡链接。

要让选项卡工作,我们需要Bootstrap的nav-tabs组件和tab-content组件。让我们创建一些nav-tabs:

<div class="container">
    <ul class="nav nav-tabs">
        <li class="active"><a href="#home" data-toggle="tab">Home</a> </li>
        <li><a href="#profile" data-toggle="tab">Profile</a> </li>
        <li><a href="#messages" data-toggle="tab">Messages</a></li>
        <li><a href="#settings" data-toggle="tab">Settings</a></li>
    </ul>
</div>

nav-tabs组件中的每个链接都应该有一个data-toggle=”tab”属性。这允许引导程序将单击事件映射到相应的选项卡窗格。这些链接中的href属性应该包含相应的选项卡窗格的id。

这里是选项卡窗格的代码:

<div class="container">
    <ul class="nav nav-tabs">
        <li class="active"><a href="#home" data-toggle="tab">Home</a> </li>
        <li><a href="#profile" data-toggle="tab">Profile</a> </li>
        <li><a href="#messages" data-toggle="tab">Messages</a></li>
        <li><a href="#settings" data-toggle="tab">Settings</a></li>
    </ul>
</div>

<div class="container">
    <div class="tab-content">
        <div class="tab-pane active" id="home">
            <h3>The home</h3>
        </div>
        <div class="tab-pane" id="profile">
            <h3>The profile</h3>
        </div>
        <div class="tab-pane" id="messages">
            <h3>Message central</h3>
        </div>
        <div class="tab-pane" id="settings">
            <h3>Setting panel</h3>
        </div>
    </div>
</div>

要创建选项卡窗格,首先需要为它们定义一个容器。这个容器应该有一个类列表内容。对于一个选项卡窗格,我们需要创建一个新的包含类tab-pane的<div>元素。这些选项卡窗格也应该有惟一的id,因为它们将被引用到导航标签(nav-tabs)的链接中。选项卡窗格的数量应该等于显示在导航栏中的链接数。在nav-tabs包裹的一个<li>元素中添加一个类”active”,将使它成为默认选项卡。

就是这样!你有了一个可以工作的选项卡插件。在浏览器中查看它,结果如图所示。

添加一个褪色(淡入淡出)的效果: 给每个tab-pane添加类fade,在选项卡切换时会有淡入淡出效果。默认选项卡不要包含此类,否则将不会显示内容:

<div class="container">
    <div class="tab-content">
        <div class="tab-pane fade in active" id="home">
            <h3>The home</h3>
        </div>
        <div class="tab-pane fade" id="profile">
            <h3>The profile</h3>
        </div>
        <div class="tab-pane fade" id="messages">
            <h3>Message central</h3>
        </div>
        <div class="tab-pane fade" id="settings">
            <h3>Setting panel</h3>
        </div>
    </div>
</div>

Collapse(手风琴插件)

折叠插件被广泛地称为Web上的“手风琴”插件。它是一个插入多个垂直堆叠标签的插件,但同一时间只能打开一个标签。

在Bootstrap中,通过将多个面板组件组合在一个容器中来创建Collapse。我们在最近一章看到了如何创建一个面板。我们还知道一个面板有两个组件:panel-heading和panel-body。

为了创建Collapse,我们需要一组嵌在容器内的面板,这个容器是使用div元素和类面板组创建的。它也应该有一个与之相关的ID。

<div class="panel-group" id="accordion">

</div>

我们需要用不同的面板组件来填充这个容器,这些组件将充当选项卡。让我们在这个面板组(panel-group)中创建一个面板组件(panel):

<div class="container">
    <div class="panel-group" id="accordion">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Collapsible Group Item #1</a>
                </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse in">
                <div class="panel-body">
                    Lorem ipsum dolor sit amet, consectetur ... Lorem ipsum dolor sit amet, consectetur ... Lorem ipsum dolor sit amet, consectetur ... Lorem ipsum dolor sit amet, consectetur ... Lorem ipsum dolor sit amet, consectetur ... Lorem ipsum dolor sit amet, consectetur ... Lorem ipsum dolor sit amet, consectetur ... Lorem ipsum dolor sit amet, consectetur ...
                </div>
            </div>
        </div>
    </div>
</div>

这里,我在panel-group容器中插入了一个panel组件的标记。每个panel都分为两个部分:一个a panel-heading元素和一个panel-body元素。

panel- heading元素包含一个嵌套了<a>元素的h4元素。这个组合的< h4 >和< a >标签在Collapse插件中制作了一个选项卡。<h4>元素应该有一个类panel-title。<a>元素应该有三个非常重要的属性:data-toggle、data-parent、href;data-toggle应该代表插件的类型(Collapse);data-parent元素应该包含panel-group元素的ID;最后,这些链接的href应该包含panel-body的父元素的ID。

与普通面板的panel-body没有包装在任何div中不同,在这里被div包裹是强制性的,以达到折叠的效果。包裹体可以有三个类panel-collapse、collapse和in;类collapse用来折叠和隐藏面板中panel-body的内容,而in显示这些内容。因此,第一个包裹体同时拥有collapse和in来显示完整的内容,其他包裹体内只应该包含collapse。【注,如果有多个包裹体包含了in,在初始化界面后会有多个包裹体处于打开状态,这是应该避免的】Bootstrap的JavaScript依靠类panel-collapse来识别包裹体。

重复相似的代码来生成多个选项卡;下面的代码展示了一个包含三个竖直选项卡的collapse插件,结果如图所示:

<div class="container">
    <div class="panel-group" id="accordion">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Collapsible Group Item #1</a>
                </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse in">
                <div class="panel-body">
                    Lorem ipsum dolor sit amet, consectetur ... Lorem ipsum dolor sit amet, consectetur ... Lorem ipsum dolor sit amet, consectetur ... Lorem ipsum dolor sit amet, consectetur ... Lorem ipsum dolor sit amet, consectetur ... Lorem ipsum dolor sit amet, consectetur ... Lorem ipsum dolor sit amet, consectetur ... Lorem ipsum dolor sit amet, consectetur ...
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">Collapsible Group Item #2</a>
                </h4>
            </div>
            <div id="collapseTwo" class="panel-collapse collapse in">
                <div class="panel-body">
                    Lorem ipsum dolor sit amet, consectetur ... Lorem ipsum dolor sit amet, consectetur ... Lorem ipsum dolor sit amet, consectetur ... Lorem ipsum dolor sit amet, consectetur ... Lorem ipsum dolor sit amet, consectetur ... Lorem ipsum dolor sit amet, consectetur ... Lorem ipsum dolor sit amet, consectetur ... Lorem ipsum dolor sit amet, consectetur ...
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">Collapsible Group Item #3</a>
                </h4>
            </div>
            <div id="collapseThree" class="panel-collapse collapse in">
                <div class="panel-body">
                    Lorem ipsum dolor sit amet, consectetur ... Lorem ipsum dolor sit amet, consectetur ... Lorem ipsum dolor sit amet, consectetur ... Lorem ipsum dolor sit amet, consectetur ... Lorem ipsum dolor sit amet, consectetur ... Lorem ipsum dolor sit amet, consectetur ... Lorem ipsum dolor sit amet, consectetur ... Lorem ipsum dolor sit amet, consectetur ...
                </div>
            </div>
        </div>
    </div>
</div>

你也可以给Collapse()方法传递参数

  1. collapse(‘toggle’): 切换选项卡状态
  2. collapse(‘show’): 打开一个选项卡
  3. collapse(‘hide’): 关闭一个选项卡

Bootstrap也给Collapse插件附加了四个自定义事件:

  1. show.bs.collapse: 即将打开选项卡时触发
  2. shown.bs.collapse: 打开选项卡后触发
  3. hide.bs.collapse: 关闭选项卡前触发
  4. hidden.bs.collapse: 关闭选项卡后触发

下面是如何使用它们:

$('.collapse').on('show.bs.collapse', function () {
    console.log('Opening tab..');
});
$('.collapse').on('shown.bs.collapse', function () {
    console.log('Tab opened.');
});
$('.collapse').on('hide.bs.collapse', function () {
    console.log('Hiding tab..');
});
$('.collapse').on('hidden.bs.collapse', function () {
    console.log('Tab hidden');
});

Tooltip(悬浮提示)

Bootstrap的Tooltip是一个鼠标移动到组件上出现的小型的浮动消息。它通常用于显示特定组件的帮助文本。

Bootstrap的Tooltip用CSS制作,通过JavaScript触发。时至今日,相对于其他可用的悬浮提示插件,它是及其轻量的。它也可以轻松的自定义相对父容器的位置(上下左右)。要使用悬浮提示,我们必须定义一些自定义的data-*属性。

让我们建立一个demo,演示按钮上的悬浮提示:【注,悬浮提示不是移动端可用的功能】

<div class="container">
    <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="I am a Bootstrap button">Who am I ?</button>
</div>

Getting Fancy(异想天开)

我们将讨论两个非常重要的插件:carousel和modal

Carousel是一个响应式幻灯片插件、modal是一个模态框插件;它们每一个都让你以一种奇特的方式展示你的内容。

Carousel(旋转木马)

幻灯片非常流行,可以用于新闻、电子商务和视频共享网站。这种类型的功能被用来在网站上展示最受欢迎的项目,有组织的,有吸引力的幻灯片。然而,构建这样的幻灯片可能很耗时,而且这些特性也很容易发生bug。在本节中,我们将看到如何使用Bootstrap的carousel插件来构建漂亮的响应式幻灯片。

创建一个Carousel的代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- bootstrap 3.3.7 -->
    <link rel="stylesheet" href="webjars/bootstrap/css/bootstrap.min.css" />
</head>
<body>

    <div class="container">
        <div id="bestGirl" class="carousel slide" data-ride="girl">
            <ol class="carousel-indicators">
                <li data-target="#bestGirl" data-slide-to="0" class="active"></li>
                <li data-target="#bestGirl" data-slide-to="1"></li>
            </ol>

            <div class="carousel-inner">
                <div class="item active">
                    <img src="images/11.jpg">
                    <div class="carousel-caption">
                        <h3>Girl 1</h3>
                        <p>This is a beautiful girl ..</p>
                    </div>
                </div>
                <div class="item">
                    <img src="images/22.jpg">
                    <div class="carousel-caption">
                        <h3>Girl 2</h3>
                        <p>This is a beautiful girl ..</p>
                    </div>
                </div>
            </div>

            <!--至此简单的幻灯片制作完成-->
            <!--下面是添加左右换页-->
			
            <a class="left carousel-control" href="#bestGirl" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"></span>
            </a>
            <a class="right carousel-control" href="#bestGirl" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right"></span>
            </a>
        </div>
    </div>

    <!-- jquery 3.2.1 -->
    <script type="text/javascript" src="webjars/jquery/dist/jquery.min.js"></script>

    <!-- bootstrap 3.3.7 -->
    <script type="text/javascript" src="webjars/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

如代码中所示,我们的carousel的主包装容器应该有类:carousel和slide。类slide是用来给carousel的每张幻灯片产生滑动效果的。它还应该有一个自定义属性data-ride,它告诉Bootstrap在页面加载时就可以启动滑动效果。如果没有这个属性,在您第一次手动操作之前,幻灯片将不会自动更改。

每一个carousel都由三部分组成:指示器、本体、控制器

要创建carousel指示器,您必须定义一个包含类carousel-indicators的有序列表。<li>元素的数量取决于你想要的幻灯片的数量。每个<li>元素都应该有一个包含carousel容器ID的data-target属性。它还应该有一个data-slide-to属性,该属性包含它将要指向的特定幻灯片的序列号。

接下来,我们构建旋转木马的心脏:幻灯片。首先,我们为所有的幻灯片创建一个包装器元素。这将是一个包含类carousel-inner的div。每个幻灯片由一个具有类”item”的<div>元素定义。每个项目都必须有一个表示图像和可选的文本数据。这个图像将被用作这个特殊的幻灯片项目的背景。对于每个图像,我们可以添加相关的标题和一些额外的文本数据。这些标题由一个<div>元素包装,它有一个类carousel-caption。可以使用任何一个HTML标题标签插入标题:< h1 >,< h2 >,< h3 >,等等。对于相关文本,可以使用<p>标记。

对每张幻灯片重复相同的项目标记。在您完成创建所有幻灯片之后,我们将构建一个用于导航carousel内容的控件部分。

carousel控制器是使用< a >标记和一个类carouselcontrol和一个方向类(如左或右)构造的。这些链接的href属性应该包含carousel包装的ID。一旦控制器成形,我们就插入左右符号。这些符号是glyphicons类型的。

现在是查看浏览器中的carousel的时候了,如图所示。

神奇的,不是吗?我们已经创建了一个强大的响应式幻灯片,不需要编写一个JavaScript或CSS。

Carousels使用JavaScript

Bootstrap通过JavaScript调用carousel()方法来操作Carousels。您可以使用此方法通过定制参数来更改Carousels的默认行为。

Carousels有三个参数:interval(间隔), pause(停顿),wrap(包裹);下面是它们的代码:

var options = {
interval: 7000,
pause: 'hover',
wrap: true
};
$('#bestGirl').carousel(options);

interval参数指定两张幻灯片之间的时间间隔;pause参数设为:”hover”:用来在鼠标经过的时候暂停幻灯片,设为null,不会对鼠标响应;wrap参数是Carousels旋转的开关,如果设为true,Carousels会在最后一张幻灯片显示之后,回到第一张。

还可以传递给carousel()方法的其他参数包括:

  1. cycle:旋转carousel
  2. pause:暂停幻灯片播放
  3. number: 转到指定帧(基于0,类似于数组)
  4. prev: 转到前一帧
  5. next: 转到后一帧

Carousels插件有两个事件:

  1. slide.bs.carousel: 滚动前触发
  2. slid.bs.carousel: 滚动后触发

这里是如何使用它们:

$('#bestCarsCarousel').on('slide.bs.carousel', function () {
console.log("Changing slide..");
});
$('#bestCarsCarousel').on('slid.bs.carousel', function () {
console.log("Slide changed.");
});

Modals(模式对话框)

Modals是在网页中隐藏的HTML元素,在触发时从屏幕顶部滑下来。它是用来显示对话框提示的最佳插件之一,例如警告和确认对话框。您还可以使用它来展示一个更大的图像版本,显示一长串的术语和条件,或者显示注册/登录表单。

在Bootstrap 3版本,modals已经变得有响应性;这意味着它们看起来很好,即使在小屏幕上也能运行良好。让我们来创建一个modals:

<div class="container">
    <div class="modal fade" id="myModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <!--Modal Header-->
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Welcome Back!</h4>
                </div>
                <!--Modal Body-->
                <div class="modal-body">
                    <h1>Hello Readers!</h1>
                </div>
                <!--Modal Footer-->
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>
</div>

每个模式对话框都应该有一个带有类modal的容器。为了给模式对话框提供一个逐渐消失的效果,我们需要在这个容器中添加类fade。接下来,我们定义一个包含类modal-dialog的div元素。这是负责控制模态的大小。默认情况下,它按屏幕大小调整大小。不久,我们将看到如何通过在modal-dialog中添加一些额外的类来更改模式的大小。在模式对话框中,我们将创建一个包裹体元素,它封装了一个模式对话框的各个子部分。这个包裹体元素应该有一个名为modal-content的类。

模式对话框的子部分是页眉、本体和页脚。页眉和页脚部分是可选的。要创建页眉,您需要一个带有类modal-header的div元素。在里面你可以放一个标题和关闭按钮。该标题是包含类modal-title<h4>元素。这里的关闭按钮图标是一个乘法(x)符号。这个按钮应该有一个close类,这样它就可以对齐到模式对话框的左上角。添加data-dismiss使按钮在单击时关闭模式对话框。

对于本体,我们需要一个包含类modal-body<div>元素。您可以将几乎任何内容放到该元素中。你甚至可以使用Bootstrap的网格系统来组织内容。

最后,为了创建一个模式页脚,我们定义了一个div元素,它有一个类modal-footer。在默认情况下,模式页脚中的内容是右对齐的。

如果您在浏览器中检查前面的模式对话框代码片段,则将一无所获;模式对话框是隐藏的。你必须创建一个句柄来触发它:

<div class="container">
    <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch modal</button>
</div>

在这段代码中,我使用了一个按钮来触发模式对话框。它应该有一个data-target属性来告诉Bootstrap,在一个网页中可以有多个模式对话框。我们还需要定义的data-toggle属性来确定单击时触发的内容。

现在我们准备好使用我们的模式对话框了。点击按钮,查看浏览器中的模式对话框,如图所示。

模式对话框的放置

模式对话框必须放在文档的顶层位置,以防止与其他组件发生冲突。 【注:顶层是指<div class="container">内第一层】 然而,当放置模式句柄时,没有限制。它可以放在文档的任何位置。

Modals有三个宽度:大的,默认的,小的。这些对于在模式对话框中适当地填充内容非常有帮助。如果没有为modal-dialog元素提供额外的类,它的默认宽度是600px。为了调整大小,您需要将下面的一个类添加到modal-dialog元素:

  1. modal-lg: 大型模式对话框,宽度900px
  2. modal-sm: 小型模式对话框,宽度300px

Modals使用JavaScript

Bootstrap提供了通过JavaScript触发模式对话框的modal()方法。该方法还接受包含多种属性的选项对象,用于定制模式对话框的默认行为:

var options = {
backdrop: true,
keyboard: false,
show: true,
remote: false
}
$("#myModal").modal(options);

backdrop属性接受布尔值或字符串值“static”。当一个模式对话框被启动时,一个黑暗透明的背景会默认出现在模式对话框的后面;将此属性设置为true可以使背景可见。把它设为false,背景就消失了。当设置为“静态”时,当在模态主体外的任何地方点击时,模式对话框不会关闭。

keyboard属性用于启用或禁用键盘的escape键功能,当设置为false时,Esc键不会关闭模式对话框。

show属性用于通过JavaScript切换模式的可见性。当设置为true时,模式对话框将自动显示,不需要单击任何句柄元素。

<a>元素,可以作为一个modal handle元素,可以包含一个包含链接的属性href。Bootstrap模式对话框有一个选项,当单击该句柄时,将该链接加载到它的modal-body元素中。这个特性在默认情况下是关闭的。如果您想要使用该特性并加载modal内的链接,则将remote属性设置为true。

与Bootstrap模式对话框相关的事件包括:

  1. show.bs.modal: 即将打开对话框前触发
  2. shown.bs.modal: 打开对话框后触发
  3. hide.bs.modal: 即将隐藏对话框前触发
  4. hidden.bs.modal: 隐藏对话框后触发
  5. loaded.bs.modal: 远程容器加载后触发 下面是如何使用它们:$('#myModal').on('show.bs.modal', function () { console.log("Opening Modal.."); }); $('#myModal').on('shown.bs.modal', function () { console.log("Modal opened."); }); $('#myModal').on('hide.bs.modal', function () { console.log("Hiding Modal.."); }); $('#myModal').on('hidden.bs.modal', function () { console.log("Modal hidden."); });

小结

通过本章,我们了解了如何使用许多流行的Bootstrap JavaScript插件。我们还学习了如何通过设置自定义data-*属性和通过JavaScript来定制它们。当使用Bootstrap时,您应该始终使用内置的插件,避免编写自定义插件。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏听雨堂

JQuery笔记(二) animate支持的属性

以常见的图片切换效果对animate的动画做了实验,用了两种方式,一种是修改相对位置,一个是修改背景的位置,结果第一种可以,第二种失败。 <!DOCTYPE h...

21210
来自专栏PPV课数据科学社区

【工具】一个投行工作十年MM的Excel操作大全

>移动到当前数据区域的边缘:CTRL+ 箭头键 移动到行首:HOME 移动到工作表的开头:CTRL+HOME 移动到工作表的最后一个单元格。:CTRL+END ...

2854
来自专栏ionic3+

【Appetite】ionic3实录(四)微调Segment,并引出自定义组件概念

用ionic3来实现就是采用segment组件。其中ios和android的样式分别如下两图:

932
来自专栏更流畅、简洁的软件开发方式

页面回发后,让页面自动滚动到指定位置的一种简单的方法

最近某客户做实施,顺便完善一下程序。突然找到了一个老问题的解决方法。 就是当用户按一个按钮后,希望回发后的页面滚到一个指定的位置,而不是页面的开头部分。以...

2877
来自专栏vue学习

20、分类详情页之数据渲染

然后复制一系列就是我们左侧栏的各个标题了,记住这里的每个标题的id要和首页各个分类名的id相对应。

1872
来自专栏DeveWork

WordPress自带TinyMCE编辑器相关功能增强

WordPress 默认的那个编辑器叫做TinyMCE。TinyMCE是一个轻量级的基于浏览器的所见即所得编辑器,由JavaScript写成。它对IE6+和Fi...

3085
来自专栏企鹅号快讯

wordpress导航菜单详解及改造

对于wordpress主题来说 wp的菜单是必不可少的 可以用于制作导航栏 也可以做侧边栏、页脚导航等等 只要熟练掌握 就能利用wp菜单做成想要的东西 话不多说...

4447
来自专栏九彩拼盘的叨叨叨

Firefox 使用小技巧

Sage: 体验性上,还是没有一些专业做rss 阅读器的好,比如feedly 以及 鲜果

742
来自专栏跟着阿笨一起玩NET

__dopostback的用法

转载:http://blog.csdn.net/fwj380891124/article/details/8819926

922
来自专栏IMWeb前端团队

jQuery日历价格、库存设置Web组件2,前后台适用,可自定义字段及颜色风格

本文作者:IMWeb capricorncd 原文出处:IMWeb社区 未经同意,禁止转载 calendar-price-jquery 基于Jquer...

2825

扫码关注云+社区