top
Loading...
Bootstrap4 輸入框組

Bootstrap4 輸入框組

我們可以使用 .input-group 類來向表單輸入框中添加更多的樣式,如圖標、文本或者按鈕。

使用 .input-group-prepend 類可以在輸入框的的前面添加文本信息, .input-group-append 類添加在輸入框的後面。

最後,我們還需要使用 .input-group-text 類來設置文本的樣式。

Bootstrap4 實例

<form> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text">@</span> </div> <input type="text" class="form-control" placeholder="Username"> </div> <div class="input-group mb-3"> <input type="text" class="form-control" placeholder="Your Email"> <div class="input-group-append"> <span class="input-group-text">@</span> </div> </div> </form>

嘗試一下 »

輸入框大小

使用 .input-group-sm 類來設置小的輸入框, .input-group-lg 類設置大的輸入框:

Bootstrap4 實例

<form> <div class="input-group mb-3 input-group-sm"> <div class="input-group-prepend"> <span class="input-group-text">Small</span> </div> <input type="text" class="form-control"> </div> </form> <form> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text">Default</span> </div> <input type="text" class="form-control"> </div> </form> <form> <div class="input-group mb-3 input-group-lg"> <div class="input-group-prepend"> <span class="input-group-text">Large</span> </div> <input type="text" class="form-control"> </div> </form>

嘗試一下 »

多個輸入框和文本

Bootstrap4 實例

<!-- 多個輸入框 --> <form> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text">Person</span> </div> <input type="text" class="form-control" placeholder="First Name"> <input type="text" class="form-control" placeholder="Last Name"> </div> </form> <!-- 多個文本信息 --> <form> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text">One</span> <span class="input-group-text">Two</span> <span class="input-group-text">Three</span> </div> <input type="text" class="form-control"> </div> </form>

嘗試一下 »

復選框與單選框

文本信息可以使用復選框與單選框替代:

Bootstrap4 實例

<div class="input-group mb-3"> <div class="input-group-prepend"> <div class="input-group-text"> <input type="checkbox"> </div> </div> <input type="text" class="form-control" placeholder="RUNOOB"> </div> <div class="input-group mb-3"> <div class="input-group-prepend"> <div class="input-group-text"> <input type="radio"> </div> </div> <input type="text" class="form-control" placeholder="GOOGLE"> </div>

嘗試一下 »

輸入框添加按鈕組

Bootstrap4 實例

<div class="input-group mb-3"> <div class="input-group-prepend"> <button class="btn btn-outline-secondary" type="button">Basic Button</button> </div> <input type="text" class="form-control" placeholder="Some text"> </div> <div class="input-group mb-3"> <input type="text" class="form-control" placeholder="Search"> <div class="input-group-append"> <button class="btn btn-success" type="submit">Go</button> </div> </div> <div class="input-group mb-3"> <input type="text" class="form-control" placeholder="Something clever.."> <div class="input-group-append"> <button class="btn btn-primary" type="button">OK</button> <button class="btn btn-danger" type="button">Cancel</button> </div> </div>

嘗試一下 »

設置下拉菜單

輸入框中添加下拉菜單不需要使用 .dropdown 類。

Bootstrap4 實例

<div class="input-group mt-3 mb-3"> <div class="input-group-prepend"> <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown"> 選擇網站 </button> <div class="dropdown-menu"> <a class="dropdown-item" href="https://www.google.com">GOOGLE</a> <a class="dropdown-item" href="https://www.sharebody.com">RUNOOB</a> <a class="dropdown-item" href="https://www.taobao.com">TAOBAO</a> </div> </div> <input type="text" class="form-control" placeholder="網站地址"> </div>

嘗試一下 »

輸入框組標籤

在輸入框組通過在輸入框組外圍的 label 來設置標籤,標籤的 for 屬性需要與輸入框組的 id 對應,點擊標籤後可以聚焦輸入框:

Bootstrap4 實例

<label for="demo">Write your email here:</label> <div class="input-group mb-3"> <input type="text" class="form-control" placeholder="Email" id="demo" name="email"> <div class="input-group-append"> <span class="input-group-text">@</span> </div> </div>

嘗試一下 »
北斗有巢氏 有巢氏北斗