本文目錄

• 1. 概述
• 2. 使用輸入組
• 3. 調整輸入組的大小
• 4. 小結

1. 概述

Bootstrap還提供了一種組合使用表單控制元件的方式，即輸入組。可以為輸入控制元件新增前置、後置的補充內容。

注意補充內容可以是文字，也可以是其他表單控制元件。

2. 使用輸入組

輸入組的使用並不複雜，通過.input-group類修飾的元素包裹輸入控制元件，然後在輸入控制元件的前、後新增.input-group-addon類修飾的元素即可。

程式碼如下：

  			<div class="col-md-6">
                <div class
 
="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">￥</div>
                        <input type="text" class="form-control">
                        <div class
 
="input-group-addon">元</div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group">
                    <div class="input-group">
 

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

效果如下，可見使用輸入組後，確實樣式好看了許多。

3. 調整輸入組的大小

輸入組同樣可以通過設定樣式類，來調整整個輸入組元素的大小。

程式碼如下，我們為輸入組設定了.input-group-lg和.input-group-sm。

 			<div class="col-md-6">
                <div class="form-group">
                    <div class="input-group input-group-lg">
                        <div class="input-group-addon">￥</div>
                        <input type="text" class="form-control">
                        <div class="input-group-addon">元</div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group">
                    <div class="input-group input-group-sm">
                        <div class="input-group-addon">￥</div>
                        <input type="text" class="form-control">
                        <div class="input-group-addon">元</div>
                    </div>
                </div>
            </div>

對比效果如下，左上角為預設尺寸，左下角為大號尺寸，右下角為小號尺寸。

4. 小結

Bootstrap輸入組提供了一種組合使用控制元件的方式，樣式更加美觀，也比較實用。

如有問題請掃碼聯絡我