一、模态框（modal）插件

1）为要触发模态框的组件添加data-toggle="modal",data-target="对应ID"

2）使用一个div实现modal，给外层的div赋予类.modal,.fade，内嵌两个div，分别赋予类.modal-dialog和.modal-content. .modal-content所在div中包含若干div，如.modal_header;.modal_body以及.modal_footer等

二、下拉菜单（dropdown）插件

1）为触发下拉菜单的组件(链接或者按钮)，添加data-toggle="dropdown"

2）为一组ul赋予类.dropdown_menu.如果为li添加class="divider"则呈现一条分割线；如果为其添加class=""dropdown-header"则样式为下拉菜单的标题。

三、滚动监听组件(scrollspy)插件

1)为要监听的组件（一般是body或者添加了n个可切换div的外层div）添加data-spy="scroll", data-target="带有 Bootstrap .nav 组件的父元素的 ID 或 class 的属性 "

2）为nav赋予对应的类或者id，其实的li中的a元素href属性和要切换的div的id属性一一对应。

<!DOCTYPE html>

<html>

<head>

   <title>Bootstrap 实例 - 滚动监听（Scrollspy）插件</title>

   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">

   <script src="/scripts/jquery.min.js"></script>

   <script src="/bootstrap/js/bootstrap.min.js"></script>

</head>

<body>

<nav id="navbar-example" class="navbar navbar-default navbar-static" role="navigation">

   <div class="navbar-header">

      <button class="navbar-toggle" type="button" data-toggle="collapse"

         data-target=".bs-js-navbar-scrollspy">

         <span class="sr-only">切换导航</span>

         <span class="icon-bar"></span>

         <span class="icon-bar"></span>

         <span class="icon-bar"></span>

      </button>

      <a class="navbar-brand" href="#">教程名称</a>

   </div>

   <div class="collapse navbar-collapse bs-js-navbar-scrollspy">

      <ul class="nav navbar-nav">

         <li><a href="#ios">iOS</a></li>

         <li><a href="#svn">SVN</a></li>

         <li class="dropdown">

            <a href="#" id="navbarDrop1" class="dropdown-toggle"

               data-toggle="dropdown">Java

               <b class="caret"></b>

            </a>

            <ul class="dropdown-menu" role="menu"

               aria-labelledby="navbarDrop1">

               <li><a href="#jmeter" tabindex="-1">jmeter</a></li>

               <li><a href="#ejb" tabindex="-1">ejb</a></li>

               <li class="divider"></li>

               <li><a href="#spring" tabindex="-1">spring</a></li>

            </ul>

         </li>

      </ul>

   </div>

</nav>

<div data-spy="scroll" data-target="#navbar-example" data-offset="0"

   style="height:200px;overflow:auto; position: relative;">

   <h4 id="ios">iOS</h4>

   <p>iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple

      TV。iOS 派生自 OS X，它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上，iOS 是苹果的移动版本。

   </p>

   <h4 id="svn">SVN</h4>

   <p>Apache Subversion，通常缩写为 SVN，是一款开源的版本控制系统软件。Subversion 由 CollabNet 公司在 2000 年创建。但是现在它已经发展为 Apache Software Foundation 的一个项目，因此拥有丰富的开发人员和用户社区。

   </p>

   <h4 id="jmeter">jMeter</h4>

   <p>jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序，用于负载和性能测试。

   </p>

   <h4 id="ejb">EJB</h4>

   <p>Enterprise Java Beans（EJB）是一个创建高度可扩展性和强大企业级应用程序的开发架构，部署在兼容应用程序服务器（比如 JBOSS、Web Logic 等）的 J2EE 上。

   </p>

   <h4 id="spring">Spring</h4>

   <p>Spring 框架是一个开源的 Java 平台，为快速开发功能强大的 Java 应用程序提供了完备的基础设施支持。

   </p>

   <p>Spring 框架最初是由 Rod Johnson 编写的，在 2003 年 6 月首次发布于 Apache 2.0 许可证下。

   </p>

</div>

</body>

</html>

监听

四、标签页(tab)组件

1）为一组ul添加.nav .nav-tabs/.nav-pills

2) 具体的标签页使用一组div来实现，这部分div被一个外围div所包围，为外围div赋予类.tab-content,其中的每个div赋予类.tab-pane .fade 。为第一个标签div添加.in;.active

3）ul中的li和对应div的id或者类属性一一对应。

五、bootstrap工具提示(tooltip)插件

为组件添加data-toggle="tooltip"；title属性赋予要提示的内容；data-placement=left/right/top/bottom即可

六、bootstrap弹出框(popover)插件

为组件添加data-toggle="popover",title属性赋予要弹出的内容标题，data-placement决定位置，data-content决定弹出框的内容。

七、bootstrap警告框(alert)插件

用一个div包含一个用于关闭的a和警告内容来实现，外层div赋予类.alert .alert_info/success等。

内层的赋予.close;data-dismiss="alert".内容为&times;

八、bootstrap按钮（button）插件

可以实现按钮的加载状态，一组复选框，单选框呈现为一组按钮等效果，详见api文档

九、bootstrap折叠面板(collapse)插件

可以创建折叠面板和简单的折叠组件。

1）为点击触发展开或折叠的组件加上data-toggle="collapse"；为进行折叠的元素添加类.collapse

2)data-target或者href属性附加到要折叠的div目标

3）如果要求同一时间内只能展开一个，那么添加data-parent为一组折叠组件的公共父元素，若无此要求，则可以不用添加

十、bootstrap轮播插件(carousel)

不需要data属性，只需要简单的基于class的开发。相关类包括：.carousel .slide;.carousel-indicators;.carousel-inner;.carousel_control具体代码如下：

<!DOCTYPE html>

<html>

<head>

   <title>Bootstrap 实例 - 简单的轮播（Carousel）插件</title>

   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">

   <script src="/scripts/jquery.min.js"></script>

   <script src="/bootstrap/js/bootstrap.min.js"></script>

</head>

<body>

<div id="myCarousel" class="carousel slide">

   <!-- 轮播（Carousel）指标 -->

   <ol class="carousel-indicators">

      <li data-target="#myCarousel" data-slide-to="" class="active"></li>

      <li data-target="#myCarousel" data-slide-to=""></li>

      <li data-target="#myCarousel" data-slide-to=""></li>

   </ol>

   <!-- 轮播（Carousel）项目 -->

   <div class="carousel-inner">

      <div class="item active">

         <img src="/wp-content/uploads/2014/07/slide1.png" alt="First slide">

      </div>

      <div class="item">

         <img src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide">

      </div>

      <div class="item">

         <img src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide">

      </div>

   </div>

   <!-- 轮播（Carousel）导航 -->

   <a class="carousel-control left" href="#myCarousel"

      data-slide="prev">&lsaquo;</a>

   <a class="carousel-control right" href="#myCarousel"

      data-slide="next">&rsaquo;</a>

</div> 

</body>

</html>

轮播实现代码

十一、bootstrap边栏/附加导航插件（affix）

没搞得太明白，回头再看看文档吧

bootstrap学习之三—插件的更多相关文章

  1. bootstrap学习笔记 插件概述

    Bootstrap插件概览 在前面布局组件章节中所讨论的组件仅仅是个开始.Bootstrap自带的12种jQuery插件,扩展了功能,可以给站点添加更多的互动.即使您不是一名高级的js开发人员, 你也 ...

  2. bootstrap学习——javascript插件篇

    飞近期做的一个小项目须要用到一个模态框和一个图片浏览插件,并把二者结合,刚好bootstrap有相应插件,下面是学习应用流程: 1.    引入js文件: 能够单个引入相应插件文件,或一次所有引入.飞 ...

  3. Bootstrap学习js插件篇之滚动监听

    1.滚动监听 案例 滚动监听插件可以根据滚动条的位置自动更新所对应的导航标记.Bootstrap中文网左侧就是一个滚动监听的例子. 代码段: <nav id="navbar-examp ...

  4. Bootstrap学习js插件篇之标签页

    简单的标签页 代码: <h1 class="page-header">4.3标签页</h1> <ul class="nav nav-tabs ...

  5. Bootstrap学习js插件篇之提示框

    案例 受到Jason Frame开发的jQuery.tipsy插件的启发,我们才把这个工具提示插件做的更好,而且此插件不依赖图片,只是使用CSS3来实现动画效果,并使用data属性存储标题. 将鼠标悬 ...

  6. Bootstrap学习js插件篇之下拉菜单

    案例 通过此插件可以为几乎所有东西添加下拉菜单,包括导航条.标签页.胶囊式按钮. 用于导航条 导航条分为四个部分.第一部分导航头,第二部分导航列,第三部分form查询表单,第四部分导航列. <n ...

  7. Bootstrap学习 - JavaScript插件

     模态框 <div class="modal" id="myModal" tabindex="-1" role="dialo ...

  8. bootstrap学习笔记--bootstrap安装环境

    Bootstrap 安装是非常容易的.此文是本人的学习汇总,便于以后查询学习,同时也希望给大家带来帮助. 下载 Bootstrap 您可以从 http://getbootstrap.com/ 上下载 ...

  9. Bootstrap学习笔记系列1-------Bootstrap网格系统

    Bootstrap网格系统 学习笔记 [TOC] 简单网格 先上代码再解释 <!DOCTYPE html> <html> <head> <title>B ...

随机推荐

  1. 【收集】JAVA多文件 上传文件接口代码 -兼容app

    原文:http://www.verydemo.com/demo_c143_i23854.html 我们在 multifile 中可以很容易的发现如何使用,这里就简单说说了,首先在页面上我们需要有这样几 ...

  2. cURL 学习笔记与总结（1）概念

    概念: cURL(Client URL Library Functions)is a command line tool for transfering data with URL syntax(使用 ...

  3. Python在windows下的安装与配置

    安装python 文件准备: A. python安装文件:我用的是python-3.4.3.amd64.msi: 安装很简单,直接双击点下一步即可: 配置环境变量,在windows系统变量中找到pat ...

  4. ArcGIS for Sever 10.1 服务迁移与恢复

    === 声明:以下内容本是自己写给单位内部同事的参考手册,但是被传到百度文库中.陆续有用户就这方面的问题,通过电话,邮件等方式联系我.首先,感到荣幸.其次是,由于本人当时测试和编写的时候,由于仓促,可 ...

  5. java继承覆盖总结

      Java基础(1)  版权声明:本文为博主原创文章,未经博主允许不得转载. java的继承与覆盖基本是java笔试中常出的题,也比较绕,我这里对java的继承覆盖做一个总结1.构造函数:      ...

  6. Java程序员从笨鸟到菜鸟之（二十一）java过滤器和监听器详解 【转】

     过滤器 1.Filter工作原理(执行流程) 当客户端发出Web资源的请求时,Web服务器根据应用程序配置文件设置的过滤规则进行检查,若客户请求满足过滤规则,则对客户请求/响应进行拦截,对请求头和请 ...

  7. jquery全选+下拉+单选+事件+挂事件

    1.全选 <body> <input type="checkbox" id="qx" /> 全选 <input type=&quo ...

  8. Makefile 如何轻松搞定

    最近在学习Linux下的C编程,买了一本叫<Linux环境下的C编程指南>读到makefile就越看越迷糊,可能是我的理解能不行. 于是google到了以下这篇文章.通俗易懂.然后把它贴出 ...

  9. Cloudera CDH 、Impala本地通过Parcel安装配置详解及什么是Parcel

    本文引用自:Cloudera CDH .Impala本地通过Parcel安装配置详解及什么是Parcelhttp://www.aboutyun.com/forum.php?mod=viewthread ...

  10. Hbase中rowkey设计原则

    1.热点问题 在某一时间段,有大量的数据同时对一个region进行操作 2.原因 对rowkey的设计不合理 对rowkey的划分不合理 3.解决方式 rowkey是hbase的读写唯一标识 最大长度 ...