Bootstrap輸入框組件使用詳解
Bootstrap輸入框組件的使用方法,具體內(nèi)容如下
.input-group——設(shè)置div為輸入框組;
.input-group-lg、.input-group-sm、.input-group-xs——改變輸入框組的尺寸;
.input-group-addon——在輸入框前或后加入額外內(nèi)容;
.input-group-btn——在輸入框前或后加入button或button式下拉菜單組件。
代碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>組件_輸入框組</title> <link rel="stylesheet" href="bootstrap.min.css" type="text/css"> <!--<link rel="stylesheet" >--> <script src="jquery-1.11.1.min.js"></script> <script src="bootstrap.min.js"></script> </head> <body> <div class="container"> <p> <div class="input-group"> <span class="input-group-addon">$</span> <input type="number" class="form-control"/> <span class="input-group-addon">.00</span> </div> </p> <p> <div class="input-group input-group-lg"> <span class="input-group-addon">$</span> <input type="number" class="form-control"/> <span class="input-group-addon">.00</span> </div> </p> <p> <div class="row"> <div class="col-md-4"> <div class="input-group"> <span class="input-group-addon"> <input class="checkbox" type="checkbox"/> </span> <input type="text" class="form-control"/> </div> </div> <div class="col-md-4"> <div class="input-group"> <input type="text" class="form-control" placeholder="馬上查詢"/> <span class="input-group-btn"> <button class="btn btn-primary" type="button" >Go!</button> </span> </div> </div> <div class="col-md-4"> <div class="input-group"> <div class="input-group-btn"> <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> 產(chǎn)品分類 <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#" role="menuitem">男裝</a></li> <li><a href="#" role="menuitem">女裝</a></li> <li><a href="#" role="menuitem">童裝</a></li> </ul> </div> <input type="text" class="form-control" placeholder="清涼一夏"> </div> </div> </div> </p> </div> </body> </html>
效果:
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 學(xué)習(xí)使用Bootstrap輸入框、導(dǎo)航、分頁等常用組件
- Bootstrap輸入框組件簡單實(shí)現(xiàn)代碼
- bootstrap輸入框組件使用方法詳解
- Bootstrap CSS組件之輸入框組
- Bootstrap基本組件學(xué)習(xí)筆記之input輸入框組(9)
- Bootstrap3 input輸入框插入glyphicon圖標(biāo)的方法
- bootstrap下拉列表與輸入框組結(jié)合的樣式調(diào)整
- bootstrap布局中input輸入框右側(cè)圖標(biāo)點(diǎn)擊功能
- 基于Bootstrap使用jQuery實(shí)現(xiàn)輸入框組input-group的添加與刪除
- BootStrap點(diǎn)擊下拉菜單項(xiàng)后顯示一個(gè)新的輸入框?qū)崿F(xiàn)代碼
相關(guān)文章
通過修改360搶票的刷新頻率和突破8車次限制實(shí)現(xiàn)方法
這篇文章主要介紹了通過修改360搶票的刷新頻率和突破8車次限制實(shí)現(xiàn)方法的相關(guān)資料,現(xiàn)在刷票工具很多,這里就舉一例修改,增加搶票頻率及突破8車次限制,需要的朋友可以參考下2017-01-01淺談JS對(duì)象添加getter與setter的5種方法
這篇文章主要介紹了淺談 JS 對(duì)象添加 getter與 setter 的5種方法以及如何讓對(duì)象屬性不可配置或枚舉,需要的朋友可以參考下2018-06-06JavaScript錯(cuò)誤處理try..catch...finally+涵蓋throw+TypeError+RangeEr
這篇文章主要介紹了JavaScript錯(cuò)誤處理:try..catch...finally+涵蓋throw+TypeError+RangeError,文章內(nèi)容具有一定的參考價(jià)值,需要的小伙伴可以參考一下,希望對(duì)你有所幫助2021-12-12WEB泡泡堂2.0(圖形界面+電腦對(duì)玩)(javascript)
WEB泡泡堂2.0(圖形界面+電腦對(duì)玩)(javascript)2007-01-01JavaScript中防止微信瀏覽器被整體拖動(dòng)的方法
這篇文章主要介紹了JavaScript中防止微信瀏覽器被整體拖動(dòng)的方法,需要的朋友可以參考下2017-08-08JavaScript為事件句柄綁定監(jiān)聽函數(shù)實(shí)例詳解
這篇文章主要介紹了JavaScript為事件句柄綁定監(jiān)聽函數(shù)的方法,結(jié)合實(shí)例詳細(xì)分析了常見的事件句柄綁定監(jiān)聽函數(shù)的實(shí)現(xiàn)技巧,并實(shí)例講解了跨瀏覽器的實(shí)現(xiàn)方法,需要的朋友可以參考下2015-12-12