【原】python測(cè)試開發(fā)django-137.Bootstrap 輸入框組件input-group

上海悠悠 2021-09-23

展開全文

前言

在頁(yè)面上看到的這種輸入框控件可以用Bootstrap 輸入框組件input-group來(lái)實(shí)現(xiàn)

input-group 輸入框組

輸入框組擴(kuò)展自表單控件,，通過(guò)向輸入域添加前綴和后綴的內(nèi)容,，可以向用戶輸入添加公共的元素,。
例如,，您可以添加美元符號(hào),，或者在用戶名前添加 @,，也可以在輸入框后面加搜索2個(gè)字或button按鈕,。
使用input-group，輕松在輸入框前后添加文本或者按鈕元素,，使用方法如下：

1.用一個(gè)
包裹住輸入框 input 按鈕,。
2.給input加上class=”form-control”樣式。
3.在input的前后添加一個(gè),在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>

頁(yè)面效果

輸入框組大小設(shè)置

輸入框大小可通過(guò)添加class屬性設(shè)置

input-group 默認(rèn)大小
input-group input-group-lg 大號(hào)輸入框
input-group input-group-sm 小號(hào)輸入框

        <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 按鈕

輸入框后面加一個(gè)button按鈕,，可以通過(guò)添加class屬性input-group-btn實(shí)現(xiàn)

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

實(shí)現(xiàn)效果