参考：

      
    
        
     
         
      
       
           
        
               主题      
         
                
          
                 
           
                     
            
             Java            
             
                       
              
               数据挖掘            
               
                         
                
                             数据通信/网络                     
                 
                        
                  
                            
                   
                    分离的链接         
                   
                  
                 
                
               
              
             
            
           
          
         
        
       
      
     
    

分析：最外层是.dropdown类的一个div，bootstrap.css中，关于.dropdown类的代码如下：

.dropdown {

  position: relative;

}

然后是一个

class="btn dropdown-toggle" id="dropdownMenu1"       data-toggle="dropdown"

的button，bootstrap.css中

.btn {

  display: inline-block;

  padding: 6px 12px;

  margin-bottom: 0;

  font-size: 14px;

  font-weight: normal;

  line-height: 1.42857143;

  text-align: center;

  white-space: nowrap;

  vertical-align: middle;

  cursor: pointer;

  -webkit-user-select: none;

     -moz-user-select: none;

      -ms-user-select: none;

          user-select: none;

  background-image: none;

  border: 1px solid transparent;

  border-radius: 4px;

}

.btn:focus,

.btn:active:focus,

.btn.active:focus {

  outline: thin dotted;

  outline: 5px auto -webkit-focus-ring-color;

  outline-offset: -2px;

}

.btn:hover,

.btn:focus {

  color: #333;

  text-decoration: none;

}

.btn:active,

.btn.active {

  background-image: none;

  outline: 0;

  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);

          box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);

}

.btn.disabled,

.btn[disabled],

fieldset[disabled] .btn {

  pointer-events: none;

  cursor: not-allowed;

  filter: alpha(opacity=65);

  -webkit-box-shadow: none;

          box-shadow: none;

  opacity: .65;

}

而.dropdown-toogle在bootstrap.css中全是作为.btn-group的子元素进行设置的，未弄明白，有待研究。

id="dropdownMenu1"

则是自定义的，而

data-toggle="dropdown"

则是HTML 的全局属性——data-* 。参见：

定义和用法

data-* 属性用于存储页面或应用程序的私有自定义数据。

data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。

存储的（自定义）数据能够被页面的 JavaScript 中利用，以创建更好的用户体验（不进行 Ajax 调用或服务器端数据库查询）。

data-* 属性包括两部分：

• 属性名不应该包含任何大写字母，并且在前缀 "data-" 之后必须有至少一个字符

• 属性值可以是任意字符串

注释：用户代理会完全忽略前缀为 "data-" 的自定义属性。

data-* 属性是 HTML5 中的新属性。所有主流浏览器都支持 data-* 属性。

再然后则是.caret类的<span>，用于实现下拉箭头，bootstrap.css中，

.caret {

  display: inline-block;

  width: 0;

  height: 0;

  margin-left: 2px;

  vertical-align: middle;

  border-top: 4px solid;

  border-right: 4px solid transparent;

  border-left: 4px solid transparent;

}

再然后是折叠起来用于下拉显示的无序列表

.dropdown-menu {

  position: absolute;

  top: 100%;

  left: 0;

  z-index: 1000;

  display: none;

  float: left;

  min-width: 160px;

  padding: 5px 0;

  margin: 2px 0 0;

  font-size: 14px;

  text-align: left;

  list-style: none;

  background-color: #fff;

  -webkit-background-clip: padding-box;

          background-clip: padding-box;

  border: 1px solid #ccc;

  border: 1px solid rgba(0, 0, 0, .15);

  border-radius: 4px;

  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);

          box-shadow: 0 6px 12px rgba(0, 0, 0, .175);

}

role属性和aria-labelledby属性都属于。

接下来便是下拉菜单中具体的每一项

    
           
     
               
      
       分离的链接      
      
     
    

class="divider"的<li>用于显示分割线，

.dropdown-menu .divider {

  height: 1px;

  margin: 9px 0;

  overflow: hidden;

  background-color: #e5e5e5;

}

至于tabindex属性，参见：

至此，基本的下拉菜单分析完毕；下面再介绍几个相关的类。

通过向 .dropdown-menu 添加 class .pull-right 来向右对齐下拉菜单。

.pull-right {

  float: right !important;

}

.dropdown-menu.pull-right {

  right: 0;

  left: auto;

}

注：css !important作用是提高指定规则的应用优先权。参见：http://baike.baidu.com/link?url=aL1Hv6zw7A9dTNMxcujaKRhelkWRKdI-gnYNGaK0oWRlgZbHXlo_7KXD988MnpEQH0LY3kFuhfYRRbw73HhdjK

!important是CSS1就定义的语法，作用是提高指定样式规则的应用优先权。语法格式{ cssRule !important }，即

写在定义的最后面，例如：box{color:red !important;}

CSS企图创造一个平衡作者和用户之间的级层样式表。

默认情况下,CSS规则按级层覆盖，例如在.CSS文件中的定义可以被style标签的定义覆盖，反之则不行。

然而,对覆盖平衡而言,加上一个“!important”就优先于正常的CSS规则。

ie7,ie8,firefox,chrome等高端浏览器下，已经可以识别 !important属性， 但是IE 6.0仍然不能完全识别. important的样式属性和覆盖它的样式属性单独使用时(不在一个{}里)，IE 6.0认为! important优先级较高，否则当含! important的样式属性被同一个{}里的样式覆盖时，IE 6.0认为! important较低!

important，最主要是为了IE 6.0浏览器。