Bootstrap插件

发表于   |  

1.插件——概述

Bootstrap基于jQuery提供了十几个插件函数（类似于jQueryUI插件库），每个插件对应一个.js文件，可以单独引用，也可以整体引用(bootstrap.js)。
调用上述十几个插件可以用两种格式：

  1. 传统的JS方式调用： $(...).dropdown(); $().tab(...);
  2. 使用data-*扩展属性方式调用： <a data-toggle="dropdown">

2.插件——下拉菜单

  1. $().dropdown( );
  2. <a data-toggle="dropdown">

3.插件——标签页(tab)

  1. $().tab();
  2. <a data-toggle="tab">

4.插件——Bootstrap提供的弹出框

(1)工具提示框(tooltip)
data-toggle="tooltip"

(2)弹出框(popover)
data-toggle="popover"

(3)警告框(alert) —— 常见

<div class="alert  alert-四种颜色 alert-dismissible">
    <span class="close" data-dismiss="alert">&times;</span>
    xxxx
</div>

(4)模态对话框(modal) —— 常见

模态框定义：在父窗体中弹出一个子窗体，子窗体若不关闭，父窗体就无法获得焦点，同时父子窗体间还可以传递数据。window.alert()/confirm()/prompt()就是典型例子。模态框必需的结构：

<div class="modal">                   <!--半透明的黑色遮罩层-->
  <div class="modal-dialog">         <!--宽/定位-->
<div class="modal-content">     <!--边框/背景色/阴影-->
  <div class="modal-header">头部</div>
  <div class="modal-body">主体</div>
  <div class="modal-footer">尾部</div>
</div>
  </div>
</div>

显示一个模态框：

  1. <a href="#模态框ID" data-toggle="modal">
  2. <button data-toggle="modal" data-target="#模态框ID">

5.插件——折叠效果(collapse)

触发一个折叠效果：

  1. <a href="#折叠元素ID" data-toggle="collapse">

  2. <button data-toggle="collapse" data-target="#折叠元素ID">

    加in样式效果：

    <div id="折叠元素ID" class="collapse in"></div>

折叠组件的两个扩展用途：

  1. Accordion（手风琴）
  2. 响应式导航条在手机屏幕中的效果

6.插件——轮播广告(carousel)——比较重要

本身结构较复杂，编写时只需要记住根class: .carousel

<div class="carousel">
  <div class="carousel-inner">
      <div class="item active">
          <img>
      </div>
  </div>
</div>

7.插件——附加导航（Affix）

<div data-spy="affix" data-offset-top="100">
    <ul class="nav nav-pills">
</div>

9.插件——滚动监听（scrollspy）——比较好玩

随着页面内容的滚动，某个导航中的项目，会自动的更改.active位置。
实现思路：

  1. 页面中必须首先有一个导航菜单(.nav)——其中可以定义一个菜单项为.active
  2. 导航菜单中的超链接的href属性值必须和页面中的某个锚点名一样
  3. 为页面添加滚动事件的监听函数 
body.onscroll= function(){
    if(body滚动的距离 === 某个锚点距离顶端的距离){
        此锚点对应的超链接的父元素li添加.active；
    }
}

热评文章