Bootstrap3系列:輸入框組


1. 基本實例

  通過在文本輸入框 <input> 前面、后面或是兩邊加上文字或按鈕,實現對表單控件的擴展。

  .input-group包含.input-group-addon.form-control 的前面或后面添加額外的元素。

  輸入框組只支持文本輸入框 <input>,避免使用 <select>、<textarea>。

1.1 示例代碼

<div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" />
</div>
<div class="input-group">
    <input type="text" class="form-control" />
    <span class="input-group-addon">.00</span>
</div>
<div class="input-group">
    <span class="input-group-addon">$</span>
    <input type="text" class="form-control" />
    <span class="input-group-addon">.00</span>
</div>

1.2 示例效果

 

2. 尺寸

  .input-group 添加.input-group-*尺寸類設置尺寸。

2.1 示例代碼

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

2.2 示例效果

3. 按鈕額外元素

3.1 示例代碼

<div class="input-group">
    <input type="text" class="form-control" placeholder="請輸入關鍵字">
    <span class="input-group-btn">
        <input type="submit" class="btn btn-default" value="查詢" />
    </span>
</div>

3.2 示例效果

4. 按鈕式下拉菜單額外元素

4.1 示例代碼

<div class="input-group">
    <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><a href="#">菜單項1</a></li>
            <li><a href="#">菜單項2</a></li>
            <li><a href="#">菜單項3</a></li>
        </ul>
    </div>
    <input type="text" class="form-control">
</div>

4.2 示例效果

5. 分裂式按鈕下拉菜單額外元素

5.1 示例代碼

<div class="input-group">
    <div class="input-group-btn">
        <button class="btn btn-default">
            下拉菜單
        </button>
        <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li><a href="#">菜單項1</a></li>
            <li><a href="#">菜單項2</a></li>
            <li><a href="#">菜單項3</a></li>
        </ul>
    </div>
    <input type="text" class="form-control">
</div>

5.2 示例效果


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM