1.Bootstrap 按鈕下拉菜單

向按鈕添加下拉菜單，只需要簡單地在在一個 .btn-group 中放置按鈕和下拉菜單即可。您也可以使用 <span class="caret"></span> 來指示按鈕作為下拉菜單。

<div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">默認
        <span class="caret"></span>
    </
 
button>
    <ul class="dropdown-menu" role="menu">
        <li>
            <a href="#">功能</a>
        </li>
        <li>
            <a href="#">另一個功能</a>
        </li> 
    </ul>
</div>

1.1分割的按鈕下拉菜單

分割的按鈕下拉菜單使用與下拉菜單按鈕大致相同的樣式，但是對下拉菜單添加了原始的功能。分割按鈕的左邊是原始的功能，右邊是顯示下拉菜單的切換。

<div class="btn-group">
    <button type="button" class="btn btn-default">默認</button>
    <button type="button" class="btn btn-default dropdown-toggle" 
        data-toggle="dropdown">
        <span class="caret"></span>
        <span class="sr-only">切換下拉菜單</
 
span>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li><a href="#">功能</a></li>
        <li><a href="#">另一個功能</a></li> 
    </ul>
</div>

1.3按鈕上拉菜單

菜單也可以往上拉伸的，只需要簡單地向父 .btn-group 容器添加 .dropup 即可。

<div class="row" style="margin-left:50px; margin-top:200px">
    <div class="btn-group dropup">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">默認
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu">
            <li>
                <a href="#">功能</a>
            </li>
            <li>
                <a href="#">另一個功能</a>
            </li>
             
        </ul>
    </div>
</div>

2.Bootstrap 輸入框組

向 .form-control 添加前綴或後綴元素的步驟如下：

• 把前綴或後綴元素放在一個帶有 class .input-group 的 <div> 中。
• 接著，在相同的 <div> 內，在 class 為 .input-group-addon 的 <span> 內放置額外的內容。
• 把該 <span> 放置在 <input> 元素的前面或者後面。

為了保持跨瀏覽器的兼容性，請避免使用 <select> 元素，因為它們在 WebKit 瀏覽器中不能完全渲染出效果。也不要直接向表單組應用輸入框組的 class，輸入框組是一個孤立的組件。

2.1基本的輸入框組

<div style="padding: 100px 100px 10px;">
    <form class="bs-example bs-example-form" role="form">
        <div class="input-group">
            <span class="input-group-addon">@</span>
            <input type="text" class="form-control" placeholder="twitterhandle">
        </div>
        <br>
        <div class="input-group">
            <input type="text" class="form-control">
            <span class="input-group-addon">.00</span>
        </div>
        <br>
        <div class="input-group">
            <span class="input-group-addon">$</span>
            <input type="text" class="form-control">
            <span class="input-group-addon">.00</span>
        </div>
    </form>
</div>

2.2復選框和單選插件

<div style="padding: 100px 100px 10px;">
    <form class="bs-example bs-example-form" role="form">
        <div class="row">
            <div class="col-lg-5">
                <div class="input-group">
                    <span class="input-group-addon">
                        <input type="checkbox"></span>
                    <input type="text" class="form-control">
                </div><!-- /input-group -->
            </div><!-- /.col-lg-5 -->
       
            <div class="col-lg-5">
                <div class="input-group">
                    <span class="input-group-addon">
                        <input type="radio"></span>
                    <input type="text" class="form-control">
                </div><!-- /input-group -->
            </div><!-- /.col-lg-5 -->
        </div><!-- /.row -->
    </form>
</div>

2.3按鈕插件

把按鈕作為輸入框組的前綴或者後綴元素，這個時候您就不是添加 .input-group-addon class，您需要使用 class.input-group-btn 來包裹按鈕。

<div style="padding: 100px 100px 10px;">
    <form class="bs-example bs-example-form" role="form">
        <div class="row">
            <div class="col-lg-6">
                <div class="input-group">
                    <span class="input-group-btn">
                        <button class="btn btn-default" type="button">Go!</button>
                    </span>
                    <input type="text" class="form-control">
                </div><!-- /input-group -->
            </div><!-- /.col-lg-6 -->
            
            <div class="col-lg-6">
                <div class="input-group">
                    <input type="text" class="form-control">
                    <span class="input-group-btn">
                        <button class="btn btn-default" type="button">Go!</button>
                    </span>
                </div><!-- /input-group -->
            </div><!-- /.col-lg-6 -->
        </div><!-- /.row -->
    </form>
</div>

3.Bootstrap 導航元素

表格導航或標簽

創建一個標簽式的導航菜單：

• 以一個帶有 class .nav 的無序列表開始。
• 添加 class .nav-tabs。

<p>標簽式的導航菜單</p>
<ul class="nav nav-tabs">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">SVN</a></li>
  <li><a href="#">iOS</a></li>
  <li><a href="#">VB.Net</a></li>
  <li><a href="#">Java</a></li>
  <li><a href="#">PHP</a></li>
</ul>

3.1垂直的膠囊式導航菜單

使用 class .nav、.nav-pills 的同時使用 class .nav-stacked，讓膠囊垂直堆疊。

<p>垂直的膠囊式導航菜單</p>
<ul class="nav nav-pills nav-stacked">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">SVN</a></li>
  <li><a href="#">iOS</a></li>
  <li><a href="#">VB.Net</a></li>
  <li><a href="#">Java</a></li>
  <li><a href="#">PHP</a></li>
</ul>

3.2下拉菜單

帶有下拉菜單的標簽

向標簽添加下拉菜單的步驟如下：

• 以一個帶有 class .nav 的無序列表開始。
• 添加 class .nav-tabs。
• 添加帶有 .dropdown-menu class 的無序列表。

<p>帶有下拉菜單的標簽</p>
  <ul class="nav nav-tabs">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">SVN</a></li>
    <li><a href="#">iOS</a></li>
    <li><a href="#">VB.Net</a></li>
    <li class="dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">
        Java <span class="caret"></span>
      </a>
      <ul class="dropdown-menu">
        <li><a href="#">Swing</a></li>
        <li><a href="#">jMeter</a></li>
        <li><a href="#">EJB</a></li>
        <li class="divider"></li>
        <li><a href="#">分離的鏈接</a></li>
      </ul>
    </li>
    <li><a href="#">PHP</a></li>
  </ul>

Boostrap 布局組件（二）