Bootstrap(Js插件篇)

    在上周的基础上继续学习Bootatrap，这一次主要是关于JS插件部分的内容。可以使用一次性全部导入的bootstrap.js，也可以一个个插件单独导入相关的js文件（总共有12个插件）。这些插件的触发方式有可以是属性触发也可以用js代码触发。

    1、模态弹出框（modals）：data-toggle="modal"。分别运用了“modal”、“modal-dialog”和“modal-content”样式，而弹出窗真正的内容都放置在“modal-content”中，包括“modal-header”，“modal-body”，“modal-footer”。有两种触发方式：一是属性声明式触发，二是“jacascript”代码触发。二者参数设置相似。添加过渡动态效果可以给最外围的容器添加类名“fade”。

    2、下拉菜单（dropdown）:data-toggle="dropdown"。与上一篇中的下拉菜单相似。同样的也有两种触发方式：一种是属性声明式用法，另一种是JavaScript方法。

    3、滚动监控器：data-toggle="collapse"。当用户鼠标滚动时，滚动条的位置会自动更新导航条中相应的导航项。分别为导航条和下拉菜单项定义一个锚点链接，锚点分别为“#blog”,“html”,“#css”,“#sass”,“#js”,“php”,“#about”。同时为导航条定义一个id值“navbar-menu”（id名称可自由定义），方便滚动监控。设计监控对象。这里将监控对象内容都放置在一个div名为scrollspy（这个类名可自由定义）的容器中，其中放了多个子内容框。每个子内容框有一个标题，而且每个标题的ID值与导航菜单项中的锚点链接名相对应，并且注意加入“data-target="#navbar-menu"”属性（这个属性值要与前面的nav标签的id名称保持一致）。可以在容器中监控也可以在body中监控。与前两个相似，均有两种触发方式。

    4、选项卡（tabs）：data-toggle="tab"。点击或悬浮对应的菜单项，能切换出对应的内容。选项卡组件（也就是菜单组件），对应的是 Bootstrap的nav-tabs），底部可以切换的选项卡面板，在 Bootstrap 中通常 tab-pane 来表示。除了在HTML设置 data-toggle 来触发选项卡之外，还可以通过JavaScript直接调用。也可以添加动画，“fade”样式。

    5、提示框（tooltip）：data-toggle="tooltip"。结构：按钮和提示信息。提示框的触发方式和前面介绍的插件略有不同。不能直接通过自定义的属性 data- 来触发。必须得依赖于JavaScript的代码触发。但是属性仍旧可以直接在HTML中添加，当然也可以在JS代码中添加。

    6、弹出框（popover）：与提示框的区别：除了标题以外还有内容部分。触发弹出框与触发提示框一样需要依赖于Javascript脚本。属性添加方法同提示框。

    7、警告框（alert）：在警示框的基础上添加了一个关闭按钮。同样可以采用使用声明式触发也可以用Javascript触发。

    8、按钮插件（button）：按钮插件有很多种。①单击按钮时，会显示loading状态信息。注意：无法通过声明式触发此效果。 ②单选按钮或复选按钮：可以通过给按钮组自定义属性data-toggle="buttons"来实现。复选框还需要将input[type="radio"]换成input[type="checkbox"]。③按钮状态切换：data-toggle="button"可以实现在激活和未激活之间进行状态切换。

     9、手风琴（collapse）：是我们常见的手风琴效果。点击标题，可以让其对应的内容显示或隐藏。结构：每个标题都一个对应的内容面板。手风琴可以通过声明式触发。

     10、图片轮播（carousel）：显示的效果就是多幅图片轮回播放。结构：图片，计数器，控制器。图片轮播也有声明式和JS两种触发方式。

      11、固定定位（affix）：常见的三种：顶部固定，侧边栏固定，底部固定。可以用声明式触发，data-spy：取值 affix，表示元素固定不变的，data-offset：整数值，比如 90，表示元素 top 和 bottom 的值都是 90px。

      12、自定义Bootstrap：有两种方式，是用CSS预处理器或者使用在线自定义设置。