首页 > 代码库 > Bootstrap 插件（二）

Bootstrap 插件（二）

2024-11-19 13:37:39   203人阅读

1.Bootstrap 下拉菜单（Dropdown）插件

Bootstrap 下拉菜单 这一章讲解了下拉菜单，但是没有涉及到交互部分，本章将具体讲解下拉菜单的交互。使用下拉菜单（Dropdown）插件，您可以向任何组件（比如导航栏、标签页、胶囊式导航菜单、按钮等）添加下拉菜单

1.1用法

通过 data 属性：向链接或按钮添加 data-toggle="dropdown" 来切换下拉菜单，如下所示：

<div class="dropdown">
  <a data-toggle="dropdown" href="#">下拉菜单（Dropdown）触发器</a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    <li>step1</li>
    <li>step2</li>
  </ul>
</div>

技术分享

如果您需要保持链接完整（在浏览器不启用 JavaScript 时有用），请使用 data-target 属性代替 href="http://www.mamicode.com/#"：

<div class="dropdown">
  <a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
    下拉菜单（Dropdown） <span class="caret"></span>
  </a>


  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    <li>step1</li>
    <li>step2</li>
  </ul>
</div>

通过 JavaScript：通过 JavaScript 调用下拉菜单切换，请使用下面的方法（控制下拉列表是否显示）：

$(‘.dropdown-toggle‘).dropdown()

2.Bootstrap 滚动监听（Scrollspy）插件

滚动监听（Scrollspy）插件，即自动更新导航插件，会根据滚动条的位置自动更新对应的导航目标。其基本的实现是随着您的滚动，基于滚动条的位置向导航栏添加 .active class。

2.1用法

通过 data 属性：向您想要监听的元素（通常是 body）添加 data-spy="scroll"。然后添加带有 Bootstrap .nav 组件的父元素的 ID 或 class 的属性 data-target。为了它能正常工作，您必须确保页面主体中有匹配您所要监听链接的 ID 的元素存在。

<body data-spy="scroll" data-target=".navbar-example">
...
<div class="navbar-example">
    <ul class="nav nav-tabs">
        ...
    </ul>
</div>
...
</body>

通过 JavaScript：您可以通过 JavaScript 调用滚动监听，选取要监听的元素，然后调用 .scrollspy() 函数：

$(‘body‘).scrollspy({ target: ‘.navbar-example‘ })

3.Bootstrap 标签页（Tab）插件

3.1用法

通过 data 属性：您需要添加 data-toggle="tab" 或 data-toggle="pill" 到锚文本链接中。

添加 nav 和 nav-tabs 类到 ul 中，将会应用 Bootstrap 标签样式，添加 nav 和 nav-pills 类到 ul 中，将会应用 Bootstrap 胶囊式样式。

<ul class="nav nav-tabs">
    <li><a href="#identifier" data-toggle="tab">Home</a></li>
    ...
</ul>

通过 JavaScript：您可以使用 Javscript 来启用标签页，如下所示：

$(‘#myTab a‘).click(function (e) {
  e.preventDefault()
  $(this).tab(‘show‘)
})

实例：

// 通过名称选取标签页
$(‘#myTab a[href="http://www.mamicode.com/#profile"]‘).tab(‘show‘)

// 选取第一个标签页
$(‘#myTab a:first‘).tab(‘show‘)

// 选取最后一个标签页
$(‘#myTab a:last‘).tab(‘show‘)

// 选取第三个标签页（从 0 开始索引）
$(‘#myTab li:eq(2) a‘).tab(‘show‘)

3.2淡入淡出效果

如果需要为标签页设置淡入淡出效果，请添加 .fade 到每个 .tab-pane 后面。第一个标签页必须添加 .in 类，以便淡入显示初始内容，如下面实例所示：

<div class="tab-content">
    <div class="tab-pane fade in active" id="home">...</div>
    <div class="tab-pane fade" id="svn">...</div>
    <div class="tab-pane fade" id="ios">...</div>
    <div class="tab-pane fade" id="java">...</div>
</div>

4.Bootstrap 提示工具（Tooltip）插件

通过 data 属性：如需添加一个提示工具（tooltip），只需向一个锚标签添加 data-toggle="tooltip" 即可。锚的 title 即为提示工具（tooltip）的文本。默认情况下，插件把提示工具（tooltip）设置在顶部。

<a href="#" data-toggle="tooltip" title="Example tooltip">请悬停在我的上面</a>

通过 JavaScript：通过 JavaScript 触发提示工具（tooltip）：

$(‘#identifier‘).tooltip(options)

 

Bootstrap 插件（二）


联系
我们