Bootstrap 輸入框和導航組件（六）

一、輸入框組件

<div class="input-group input-group-lg">
      <span class="input-group-addon">$</span>
      <input type="text" class="form-control">
      <span class="input-group-addon">元</span>
</div> 

<div class="input-group">
      <span class="input-group-addon"><input type="checkbox"></span>
      <input type="text" class="form-control">
      <span class="input-group-addon"><input type="radio"></span>
</div>

<div class="input-group">
     <input type="text" class="form-control">
     <div class="input-group-btn">
       <button class="btn btn-default">提交</button>
     </div>
</div>

1、在 .input-group 框里 可分別左右兩側添加文字， <input> 用 .form-control 添加樣式。

2、文字元素用 span.inpt-group-addon

3、尺寸大小（從大到小）: input-group-lg 、默認 、xs 、sm

4、使用復選框和單選框，也放入 .input-group-addon 中 。

5、使用按鈕，把 div.btn-group 換成 .input-group-btn 。

6、使用下拉菜單或分列式，把 div.btn-group 換成 .input-group-btn ，分列式就是兩個button。

<div class="input-group">
     <input type="text" class="form-control">
     <div class="input-group-btn">
       <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
          下拉菜單
          <span class="caret"></span>
       </button>
       <ul class="dropdown-menu">
         <li class="dropdown-header">導航</li>
         <li><a href="#">首頁</a></li>
         <li><a href="#">資訊</a></li>
         <li class="divider"></li>
         <li class="disabled"><a href="#">產品</a></li>
       </ul>
     </div>
</div>

 

二、導航組件

<ul class="nav nav-tabs">
    <li class="active"><a href="#">首頁</a></li>
    <li><a href="#">資訊</a></li>
    <li><a href="#">產品</a></li>
    <li><a href="#">關於</a></li>
</ul>

.nav   //  定義是一個導航類

.nav-tabs   //   實現便簽頁導航樣式

.active   //   當前項

 

<ul class="nav nav-pills">

.nav-pills   //  膠囊式導航

 

<ul class="nav nav-pills nav-stacked">

.nav-stacked   //   垂直膠囊式導航

 

<ul class="nav nav-tabs nav-justified">

.nav-justified   //   導航兩端對齊，均分100%

 

<li class="disabled"><a href="#">產品</a></li>

.disabled   //   禁用項

 

帶有下拉菜單的導航：

<ul class="nav nav-tabs nav-justified">
    <li class="active"><a href="#">首頁</a></li>
    <li><a href="#">資訊</a></li>
    <li><a href="#">產品</a></li>
    <li class="dropdown">
        <a href="#" data-toggle="dropdown">
          下拉菜單
          <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
          <li><a href="#">導航一</a></li>
          <li><a href="#">導航二</a></li>
        </ul>
    </li>
    <li><a href="#">關於</a></li>
</ul>

.dropdown 定義在 li 上，按鈕處需要添加 data-toggle="dropdown" ， ul.dropdown-menu 定義下拉列表項

 

三、導航條組件

<nav class="navbar navbar-default">
    <div class="container">
      <div class="navbar-header">
         <a href="#" class="navbar-brand">標題</a>
      </div>
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">首頁</a></li>
        <li><a href="#">資訊</a></li>
        <li class="disabled"><a href="#">產品</a></li>
        <li><a href="#">關於</a></li>
      </ul>
      
      <form action="" class="navbar-form navbar-right">
        <div class="input-group">
          <input type="text" class="form-control">
          <div class="input-group-btn">
            <button class="btn btn-default">提交</button>
          </div>
        </div>
      </form>  

      <button class="btn btn-default navbar-btn navbar-left">按鈕</button>
      
      <p class="navbar-text">我是一段文本 <a href="#" class="navbar-link">鏈接</a></p>

    </div>
 </nav>

.navbar    //   定義表示是一個導航條

.navbar-default    //   導航條基本默認樣式  

.navbar-inverse    //   導航條反色調，深色背景

.container    //   把導航條固定在某一個區域

.navbar-brand    //   導航條標題或者LOGO， 自帶左浮動

.navbar-header    //   標題內容多可放入該區域中，只有一個時可直接使用 .navbar-brand , 自帶左浮動

.navbar-nav    //   導航條中的導航

.navbar-form    //   導航中使用表單

.navbar-left       //   導航中使用的對齊方式：居左

.navbar-right    //   導航中使用的對齊方式：居右

.navbar-btn    //   導航中使用按鈕

.navbar-text    //   導航中使用一段文字

.navbar-link    //   非導航鏈接，一般需要置入文本區域內 ,屬於內聯，只改變樣式與導航樣式同步

.navbar-fixed-top    //   導航固定在頂部

.navbar-fixed-bottom    //   導航固定在底部

.navbar-static-top    //   靜態導航，和頁面等寬，兩端對齊，寬度100%，並去掉了圓角