1、下拉菜单

     
 
       Dropdown   
      
 
       
Action
 
       
Another action
 
       
Something else here
 
       
 
       
Separated link
 
      
 
     

aria-haspopup :true表示点击的时候会出现菜单或是浮动元素； false表示没有pop-up效果。

aria-expanded:表示展开状态。默认为undefined, 表示当前展开状态未知。其它可选值：true表示元素是展开的；false表示元素不是展开的

aria-labelledby：当想要的标签文本已在其他元素中存在时，可以使用aria-labelledby，并将其值为所有读取的元素的id。如下：

当ul获取到焦点时，屏幕阅读器是会读：“选择您的职位”

data-toggle: 表示什么事件类型发生

2、模态框

创建模态框
 
      删除 
      
     
 
      
 
       
 
        
 
         × 
         
是否删除
 
        
 
        
         你确定要删除吗？
        
 
        
 
         关闭 
         确定 
        
 
       
 
        
      
 
       
     

在模态框中需要注意两点：

• 1. 第一是.modal，用来把 <div>的内容识别为模态框。
  2. 第二是.fade class。当模态框被切换时，它会引起内容淡入淡出。
• aria-labelledby="myModalLabel" ，该属性引用模态框的标题。
• 属性 aria-hidden="true" 用于保持模态窗口不可见，直到触发器被触发为止（比如点击在相关的按钮上）。
• <div class="modal-header"> ，modal-header 是为模态窗口的头部定义样式的类。
• class="close"，close 是一个 CSS class，用于为模态窗口的关闭按钮设置样式。
• data-dismiss="modal"，是一个自定义的 HTML5 data 属性。在这里它被用于关闭模态窗口。
• class="modal-body"，是 Bootstrap CSS 的一个 CSS class，用于为模态窗口的主体设置样式。
• class="modal-footer"，是 Bootstrap CSS 的一个 CSS class，用于为模态窗口的底部设置样式。
• data-toggle="modal"，HTML5 自定义的 data 属性 data-toggle 用于打开模态窗口。

通过js控制模态框弹出

        
     
 
      
 
       
 
        
 
         
 
          
 
          
 
         
 
         
 
          
创建模态框
 
           
          删除 
           
          
 
           
 
            
 
             
 
              × 
              
是否删除
 
             
 
             
              你确定要删除吗？
             
 
             
 
              关闭 
              确定 
             
 
            
 
             
           
 
            
          
 
         
 
        
 
       
 
      
 
     
 
       
        

3、滚动监听

     
 
      
 
       
 
         切换导航     
        luffy 
       
 
       
 
        
 
         
 iOS 
 
         
 SVN 
 
         
 Java   
          
 
           
 jmeter 
 
           
 ejb 
 
           
 
           
 spring 
 
          
 
 
        
 
       
 
      
 
     
 
     
 
      
iOS
 
      
iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple TV。iOS 派生自 OS X，它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上，iOS 是苹果的移动版本。 
 
      
SVN
 
      
Apache Subversion，通常缩写为 SVN，是一款开源的版本控制系统软件。Subversion 由 CollabNet 公司在 2000 年创建。但是现在它已经发展为 Apache Software Foundation 的一个项目，因此拥有丰富的开发人员和用户社区。 
 
      
jMeter
 
      
jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序，用于负载和性能测试。 
 
      
EJB
 
      
Enterprise Java Beans（EJB）是一个创建高度可扩展性和强大企业级应用程序的开发架构，部署在兼容应用程序服务器（比如 JBOSS、Web Logic 等）的 J2EE 上。 
 
      
Spring
 
      
Spring 框架是一个开源的 Java 平台，为快速开发功能强大的 Java 应用程序提供了完备的基础设施支持。 
 
      
Spring 框架最初是由 Rod Johnson 编写的，在 2003 年 6 月首次发布于 Apache 2.0 许可证下。 
 
     

通过javascript 调用滚动监听，选取要监听的元素，然后调用.scrollspy()函数

$('.navbar-header').scrollspy('.bs-js-navbar-scrollspy')

像后面还介绍了：

1. 手风琴效果
   data-toggle="collapse" 添加到您想要展开或折叠的组件的链接上。

href 或 data-target 属性添加到父组件，它的值是子组件的 id。

data-parent 属性把折叠面板（accordion）的 id 添加到要展开或折叠的组件的链接2

1. 弹出框

2. 警告框

3. 轮播

   通过 data 属性：使用 data 属性可以很容易控制轮播（Carousel）的位置。

4. 属性data-slide接受关键字prev或next，用来改变幻灯片相对于当前位置的位置

5. 使用data-slide-to来向轮播传递一个原始滑动索引，data-slide-to="2" 将把滑块移动到一个特定的索引，索引从 0 开始计数。
6. data-ride="carousel"属性用于标记轮播在页面加载时就开始动画播放

上面是常用Bootstrap插件，相关代码都在Bootstrap的官网上。大家自行copy一定要演示