Bootstrap简单认识之Dropdown组件

Dropdown（下拉框）组件

一、简介

• 此组件可以不指定 data-target 属性，不指定的话，必须按.dropdown-toggle 按钮和 dropdown-menu 列表放在同一个父元素下
• 注意，如果想要指定 data-target 属性，那么不是指向 .drop-menu 元素，而是指向包含 .dropdown-toggle 按钮和 dropdown-menu 列表的父元素 .dropdown

二、样式

1. 隐藏与显示也是通过父类的 show 类，来控制子元素的 display 属性，在 none 和 block 之间切换

   .show {
      // Show the menu
      > .dropdown-menu {
        display: block;
      }
   
     // Remove the outline when :focus is triggered
     > a {
       outline: 0;
     }
   }

2. 发现.show类是可以让a标签的outline为0的，但是是show的直接子元素a才有此属性，而下面提到a标签必须被放在li标签里才可以被上下键选来选去，这样一来上下键选的时候a标签依旧有outline

3. 按钮里的倒三角，只要指定了 dropdown-toggle 就可以有了，因为此类指定了after伪类，使用css3画了个三角：

   .dropdown-toggle {
   &::after {
     display: inline-block;
     width: 0;
     height: 0;
     margin-left: $caret-width;
     vertical-align: middle;