Bootstrap drop-down menu (dropdowns) and buttons

1. Drop-down menu

<div class= "dropdown" >
   <button type= "button" class= "btn dropdown-toggle" id= " 
      dropdownMenu1" data-toggle= "dropdown" >
      theme
      <span class= "caret" ></span>//set down the small triangle
   </button>
   <ul class= "Dropdown-menu" role= "menu" aria-labelledby= "dropdownMenu1" >
      <li role= "Presentation" >
         <a role= "MenuItem" tabindex= "-1" href= "#" >Java</a>
      </li>
      <li role= " Presentation ">
         <a role=" MenuItem "tabindex="-1 "href=" # "> Data Mining </a>
      </li>
           < Li role= "presentation" class= "divider" ></li>//set a split line
      <li role= "Presentation" >
         <a role = "MenuItem" tabindex= "-1" href= "#" > Detached links </a>
      </li>
   </ul>
</div>

2. Add drop-down menu title

<li role= "Presentation" class= "Dropdown-header" > drop-down menu title </li>

3. Button Group

. Btn-group: Forms a basic group of buttons
. Btn-toolbar: Combine several button groups
. Btn-group-lg,.btn-group-sm,.btn-group-xs: Adjustment
of the entire button group size . btn-group-vertical: Vertical stacking of buttons instead of horizontally stacked display

Button group, three buttons on one line display
<div class= "Btn-group" >
  <button type= "button" class= "btn Btn-default" > button 1 </button>
  <button type= "button" class= "btn btn-default" > button 2</button> <button
  type= " Button "class=" btn btn-default "> button 3</button>
</div>

//button on one line, three for a group <div class= "Btn-toolbar" role= "Toolbar" > <div class= "Btn-group" > <button type= "button" class= "btn btn-default" > button 1</button> <button type= "button" class= "Btn btn-d Efault "> button 2</button> <button type=" button "class=" btn btn-default "> button 3</button> </div> & Lt;div class= "Btn-group" > <button type= "button" class= "btn btn-default" > button 4</button> <button type= " Button "class=" btn btn-default "> button 5</button> <button type=" button "class=" btn btn-default "> button 6</ Button> </div> </div> 

Button nesting
<div class= "Btn-group" >//Large Group of buttons
  <button type= "button" class= "btn btn-default" > button 1</ button>
  <button type= "button" class= "btn btn-default" > button 2</button> <div class=

  "Btn-group ">//Nested small button group
    <button type=" button "class=" btn btn-default dropdown-toggle " 
      data-toggle=" dropdown " >//drop-down menu the
      following
      <span class= "caret" ></span>//Display black small triangle
    </button>
    <ul class= " Dropdown-menu ">
      <li><a href=" # "> Lower zipper 1</a></li>
      <li><a href=" # "> Under Zipper 2</a></li>
    </ul>
  </div>
</div>

4. Split button drop-down menu

<div class= "Btn-group" >
   <button type= "button" class= "btn Btn-default" > Default </button>//First define a normal button , the display text is the default
   <button type= "button" class= "btn btn-default dropdown-toggle" 
      data-toggle= "dropdown" >// Define a button that appears as a black small triangle
      <span class= "caret" ></span>
      <span class= "sr-only" > Toggle drop-down menu </span>
   </button>
   <ul class= "Dropdown-menu" role= "menu" >//drop-down menu contents
      <li><a href= "#" > function </a></li>
      <li><a href= "#" > Another feature </a></li>
      <li><a href= "#" > Other </a></li>
      <li class= "divider" ></li>
      <li><a href= "#" > Detached links </a></li>
   </ul>
</div>

5. button Pull-up menu
Add the. Dropup in the. Btn-group container.