bootstrap-form的功能筆記-02

接續著上一篇記錄有關Bootstrap的form元件有關的內容。

input-group

首先將你想要合併的內容，用input-group把它們包起來。

你可以看到上面的範例，最外層用.input-group包起來，
然後，內層的input欄位保持不變，其class名稱還是保持form-control，
接著，要跟這個input欄位接在一起的span就會再被一個input-group-append區塊包起來，
然後，最終這個span自己的class名稱命名為input-group-text。
至於，
為什麼有input-group-append 和 input-group-prepend的˙差別，
這就要看你希望這個input-group-text要接在鄰近的input欄位的前面或後面來決定囉。

另外，當你要將某個內容接在input欄位的後面，除了它的外層區塊className要為input-group-append，
在html文件中，這個input-group-append區塊撰寫的順序也要在鄰近input欄位的後面喔。

同時加入 input-group-prepend 和 input-group-append

同時加入 input-group-prepend 和 input-group-append在一個input-group中

以上這個範例你可以看到input欄位的前面加入了一個$號，而後方加入了一個藍色的按鈕。

input-group尺寸

你只需要在該input-group的class中再加上input-group-sm或input-group-lg就能調整其大小囉。
ex:

<div class="demo">
  <div class="input-group input-group-sm">
    <div class="input-group-prepend">
      <span class="input-group-text" id="inputGroup-sizing-sm">@</span>
    </div>
    <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="inputGroup-sizing-sm">
  </div>
  <br>
  <div class="input-group input-group-lg">
    <div class="input-group-prepend">
      <span class="input-group-text" id="inputGroup-sizing-lg">@</span>
    </div>
    <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="inputGroup-sizing-lg">
  </div>
</div>

input-group的dropdown功能

首先，你要達成bootstrap的dropdown功能的話，你需要先載入它們家的js檔案進去你的專案。
以上這個範例，最外層還是一樣用.input-group包起來，
在.input-group裡面包了input欄位和一個div區塊，
那這個div區塊的class名稱為input-group-prepend，代表它要接在這個input欄位的前面。
接著，你就在這個input-group-prepend的區塊中，加入dropdown的按鈕，與其要觸發的內容，
這樣就完成利用input-group達成dropdown的效果囉~