4.五、Bootstrap V4自學之路------組件---輸入框

基本示例

核心類 .input-group-addon 。把一個附加內容或按鈕放在輸入框的任一側。你能夠把它們同時放在輸入框的兩側。咱們不支持在同一側放多個附加內容，一樣也不支持多個表單控件放在一個輸入框組中。

<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>
<br>
<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">.00</span>
</div>
<br>
<label for="basic-url">Your vanity URL</label>
<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>
<br>
<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>

以前文檔裏面遇到過 .input-group-addon類。還記得嗎？

尺寸

在.input-group上添加相關的表單尺寸類，它裏面的內容會自動調整尺寸——不須要在每一個元素上重複添加表單控件尺寸類

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

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

沒什麼好說的，留一個疑問。<span class=input-group-addon>的文本值，

是否會配合<input>的aria-describedby一塊兒傳參到後臺，成爲一個完整的數據。

複選框和單選鈕附加

請將複選框或單選鈕選項放在一個輸入框組的addon中，替換掉文本。

<div class="row">

  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="checkbox" aria-label="Checkbox for following text input">
      </span>
      <input type="text" class="form-control" aria-label="Text input with checkbox">
    </div>
  </div>
    
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="radio" aria-label="Radio button for following text input">
      </span>
      <input type="text" class="form-control" aria-label="Text input with radio button">
    </div>
  </div>
  
</div>

PS：這裏注意的是，<span>標籤中沒有寫文字，而是插入一個<input type=checkbox_or_radio>。

按鈕附加

輸入框組中的按鈕有一點不一樣，它須要額外的嵌套級別。

你須要用.input-group-btn而不是.input-group-addon以包裹按鈕。

這是必須的，由於默認瀏覽器樣式沒法重寫它。

<div class="row">

  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-btn">
        <button class="btn btn-secondary" type="button">Go!</button>
      </span>
      <input type="text" class="form-control" placeholder="Search for...">
    </div>
  </div>

  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search for...">
      <span class="input-group-btn">
        <button class="btn btn-secondary" type="button">Go!</button>
      </span>
    </div>
  </div>

</div>

PS：若是使用按鈕固定的話。則使用 .input-group-btn類實現。

若是繼續使用 .input-group-addon類的話，樣式不協調。

帶彈出菜單的按鈕

一個組合拳，一種現實方式。

<div class="row">
  <div class="col-lg-6">
      
    <div class="input-group">
      <div class="input-group-btn">
        <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Action
        </button>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
          <div role="separator" class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Separated link</a>
        </div>
      </div>
      <input type="text" class="form-control" aria-label="Text input with dropdown button">
    </div>
      
  </div>
  <div class="col-lg-6">
      
    <div class="input-group">
      <input type="text" class="form-control" aria-label="Text input with dropdown button">
      <div class="input-group-btn">
        <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Action
        </button>
        <div class="dropdown-menu dropdown-menu-right">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
          <div role="separator" class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Separated link</a>
        </div>
      </div>
    </div>
      
  </div>
</div>

分段按鈕

另外一種組合拳，也是一種方式。用在哪裏好呢？

<div class="row">
  <div class="col-lg-6">
      
    <div class="input-group">
      <div class="input-group-btn">
        <button type="button" class="btn btn-secondary">Action</button>
        <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <span class="sr-only">Toggle Dropdown</span>
        </button>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
          <div role="separator" class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Separated link</a>
        </div>
      </div>
      <input type="text" class="form-control" aria-label="Text input with segmented button dropdown">
    </div>
      
  </div>
  <div class="col-lg-6">
      
    <div class="input-group">
      <input type="text" class="form-control" aria-label="Text input with segmented button dropdown">
      <div class="input-group-btn">
        <button type="button" class="btn btn-secondary">Action</button>
        <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <span class="sr-only">Toggle Dropdown</span>
        </button>
        <div class="dropdown-menu dropdown-menu-right">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
          <div role="separator" class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Separated link</a>
        </div>
      </div>
    </div>
      
  </div>
</div>

可訪問性

若是你沒有用label包裹每一個input的話，屏幕閱讀器在處理你的表單時將遇到麻煩。對於那些輸入組，確保任何額外的label或者功能都可以向輔助技術傳達。

使用精確的技術（使用.sr-only類隱藏<label>元素，或者使用aria-label、aria-labelledby、aria-describedby、title和placeholder 屬性）。須要傳達的額外的信息決取於你所使用的接口部件的精確類型。本章節的示例提供了一些建議、特殊場合的方法。

使用這些很是用的編程語言，在恰當的地方使用符合當下場景的語義。會使網站的具備內涵！這將是我要追求的！