這篇文章主要為大家展示了“bootstrap輸入框組有哪些用法”,內(nèi)容簡而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“bootstrap輸入框組有哪些用法”這篇文章吧。
成都創(chuàng)新互聯(lián)公司自2013年創(chuàng)立以來,先為鳳慶等服務(wù)建站,鳳慶等地企業(yè),進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為鳳慶企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。1、Bootstrap4 輸入框組
我們可以使用.input-group
類來向表單輸入框中添加更多的樣式,如圖標(biāo)、文本或者按鈕。使用.input-group-prepend
類可以在輸入框的的前面添加文本信息, .input-group-append
類添加在輸入框的后面。最后,我們還需要使用 .input-group-text
類來設(shè)置文本的樣式。
<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">@runoob.com</span> </div> </div></form>
2、輸入框大小
使用 .input-group-sm
類來設(shè)置小的輸入框,.input-group-lg
類設(shè)置大的輸入框:
<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>
3、多個(gè)輸入框和文本
<!-- 多個(gè)輸入框 --><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> <!-- 多個(gè)文本信息 --><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>
4、復(fù)選框與單選框
<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>
5、輸入框加按鈕組
<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>
6、設(shè)置下拉菜單
<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"> 選擇網(wǎng)站 </button> <div class="dropdown-menu"> <a class="dropdown-item" href="https://www.google.com">GOOGLE</a> <a class="dropdown-item" href="https://www.runoob.com">RUNOOB</a> <a class="dropdown-item" href="https://www.taobao.com">TAOBAO</a> </div> </div> <input type="text" class="form-control" placeholder="網(wǎng)站地址"></div>
7、輸入框組標(biāo)簽
在輸入框組通過在輸入框組外圍的 label 來設(shè)置標(biāo)簽,標(biāo)簽的 for 屬性需要與輸入框組的 id 對(duì)應(yīng),點(diǎn)擊標(biāo)簽后可以聚焦輸入框:
<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">@runoob.com</span> </div></div>
以上是“bootstrap輸入框組有哪些用法”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
分享題目:bootstrap輸入框組有哪些用法-創(chuàng)新互聯(lián)
本文鏈接:http://bm7419.com/article30/cdispo.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供品牌網(wǎng)站設(shè)計(jì)、用戶體驗(yàn)、網(wǎng)站設(shè)計(jì)公司、網(wǎng)站策劃、靜態(tài)網(wǎng)站、云服務(wù)器
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容