前言

在頁面上看到的這種輸入框控制元件可以用Bootstrap 輸入框元件input-group來實現

input-group 輸入框組

輸入框組擴充套件自 表單控制元件，通過向輸入域新增字首和字尾的內容，可以向用戶輸入新增公共的元素。
例如，您可以新增美元符號，或者在使用者名稱前新增 @，也可以在輸入框後面加搜尋2個字或button按鈕。
使用input-group，輕鬆在輸入框前後新增文字或者按鈕元素，使用方法如下：

• 1.用一個包裹住輸入框 input 按鈕。
• 2.給input加上class="form-control"樣式。
• 3.在input的前後新增一個,在span中新增文字或者其他元素。

<div style="padding: 200px 200px 50px;">
    <form class="" role="form">
        <div class="input-group">
            <span class="input-group-addon">@</span>
            <input type="text" class="form-control" placeholder="your name">
        </div>
        <br>
        <div class="input-group">
            <input type="text" class="form-control">
            <span class="input-group-addon">搜尋</span>
        </div>
        <br>
        <div class="input-group">
            <span class="input-group-addon">$</span>
            <input type="text" class="form-control">
            <span class="input-group-addon">.00</span>
        </div>
    </form>
</div>
 

頁面效果

輸入框組大小設定

輸入框大小可通過新增class屬性設定

• input-group 預設大小
• input-group input-group-lg 大號輸入框
• input-group input-group-sm 小號輸入框

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

input-group-btn 按鈕

輸入框後面加一個button按鈕，可以通過新增class屬性input-group-btn實現

<div class="input-group">
            <input type="text" class="form-control">
            <span class="input-group-btn">
                <button class="btn" type="button">搜尋</button>
            </span>
        </div><br>

實現效果

帶有下拉選單的按鈕

參考菜鳥教程https://www.runoob.com/bootstrap/bootstrap-input-groups.html