Bootstrap輸入框組 - xiaohuochai－IT工程師數位筆記本

文章出處

前面的話

　　有時，我們需要將文本輸入框(input group)和文件或者小icon組合在一起進行顯示，我們稱之為addon。也就是通過在文本輸入框 <input> 前面、后面或是兩邊加上文字或按鈕，來實現對表單控件的擴展。本文將詳細介紹Bootstrap輸入框組

基本用法

　　在輸入框的任意一側添加額外元素或按鈕。還可以在輸入框的兩側同時添加額外元素

<div class="input-group">
  <span class="input-group-addon" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>

<div class="input-group">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
  <span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>

<div class="input-group">
  <span class="input-group-addon">$</span>
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  <span class="input-group-addon">.00</span>
</div>

<div class="input-group">
  <span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
  <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>

【注意事項】

　　1、避免使用 <select> 元素，因為 WebKit 瀏覽器不能完全繪制它的樣式

　　2、避免使用 <textarea> 元素，由于它們的 rows 屬性在某些情況下不被支持

　　3、不要將表單組或柵格列（column）類直接和輸入框組混合使用。而是將輸入框組嵌套到表單組或柵格相關元素的內部

<h3>錯誤示范</h3>
<div class="input-group col-xs-4">
  <span class="input-group-addon" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
<div class="input-group col-xs-8">
  <span class="input-group-addon" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
<h3>正確示范</h3>
<div class="col-xs-4">
    <div class="input-group">
      <span class="input-group-addon" id="basic-addon1">@</span>
      <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
    </div>
</div>
<div class="col-xs-8">
    <div class="input-group">
      <span class="input-group-addon" id="basic-addon1">@</span>
      <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
    </div>
</div>

　　4、可以添加多個（.input-group-addon 或 .input-group-btn）

<div class="input-group">
  <span class="input-group-addon" id="basic-addon1">@</span>
  <span class="input-group-addon" id="basic-addon1">@</span>    
  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
  <span class="input-group-addon" id="basic-addon1">@</span>
</div>

　　5、不支持在單個輸入框組中添加多個表單控件

<div class="input-group">
  <span class="input-group-addon" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>

尺寸

　　為 .input-group 添加相應的尺寸類，其內部包含的元素將自動調整自身的尺寸。不需要為輸入框組中的每個元素重復地添加控制尺寸的類。提供了.input-group-lg和.input-group-sm，未提供超小型的樣式，也許作者認為不需要

<div class="input-group input-group-lg">
  <span class="input-group-addon" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
<div class="input-group input-group-sm">
  <span class="input-group-addon" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
<div class="input-group">
  <span class="input-group-addon" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>

額外元素

【多選框或單選框】

　　可以將多選框或單選框作為額外元素添加到輸入框組中

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

【按鈕】

　　為輸入框組添加按鈕需要額外添加一層嵌套，不是 .input-group-addon，而是添加 .input-group-btn 來包裹按鈕元素。由于.btn按鈕樣式定義了各種各樣的樣式，其不像checkbox、radio、label等直接放到.input-group-addon樣式里就可以的。所以，為了避免沖突，作者為.btn樣式又單獨設置了一個.input-group-btn樣式，用來替換.input-group-addon作為新的addon容器

<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" placeholder="Search for...">
</div>

【按鈕式下拉菜單】

　　很自然，能支持按鈕，也就能支持按鈕式下拉菜單，不需要額外的樣式支持，只需要在普通的.btn按鈕上應用一個data-toggle="dropdown"屬性即可

<div class="input-group">
 <div class="input-group-btn">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li role="separator" class="divider"></li>
      <li><a href="#">Separated link</a></li>
    </ul>
  </div>
  <input type="text" class="form-control" aria-label="...">
</div>

【分裂式按鈕下拉菜單】

<div class="input-group">
 <div class="input-group-btn">
     <button class="btn btn-default" type="button">Action</button>
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li role="separator" class="divider"></li>
      <li><a href="#">Separated link</a></li>
    </ul>
  </div>
  <input type="text" class="form-control" aria-label="...">
</div>