Bootstrap輸入框組件簡單實(shí)現(xiàn)代碼
更新時(shí)間:2017年03月06日 10:25:16 作者:deepquiet
這篇文章主要為大家詳細(xì)介紹了Bootstrap輸入框組件的簡單實(shí)現(xiàn)代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
Bootstrap輸入框組件的學(xué)習(xí)代碼,供大家參考,具體內(nèi)容如下
<html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE-edge"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Bootstrap 101 Template</title> <link rel="external nofollow" rel="stylesheet"> <link rel="external nofollow" rel="stylesheet"> </head> <body> <!-- span的位置決定前后 --> <!-- input-group-addon\input-group\form-control缺一不可 --> <div class="input-group"> <!-- 前面 --> <span class="input-group-addon">@ </span> <input type="text" class="form-control" placeholder="Username"> </div> <br/> <div class="input-group"> <input type="text" class="form-control" placeholder="Username"> <span class="input-group-addon">@ </span> </div> <br/> <!-- 大號 --> <div class="input-group input-group-lg"> <span class="input-group-addon">@ </span> <input type="text" class="form-control" placeholder="Username"> <span class="input-group-addon">qq </span> </div> <br/> <!-- form表單 form-control的效果--> <form action="" method="post" role="form"> <div class="form-group"> <label for="username">username:</label> <input class="form-control" id="username" name="username" type="text"><br> </div> <div class="form-group"> <label>password:</label> <input class="form-control" name="password" type="text"><br> </div> <input type="submit" value="submit"><input type="reset" value="reset"> </form> <script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script> <script src="http://cdn.bootcss.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> <script src="http://cdn.bootcss.com/bootstrap/3.3.1/js/npm.js"></script> </body> </html>
結(jié)果:
您可能感興趣的文章:
- 學(xué)習(xí)使用Bootstrap輸入框、導(dǎo)航、分頁等常用組件
- 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)后顯示一個新的輸入框?qū)崿F(xiàn)代碼
- Bootstrap輸入框組件使用詳解
相關(guān)文章
JS中實(shí)現(xiàn)簡單Formatter函數(shù)示例代碼
JS沒有提供方便使用的Formatter函數(shù),用字符拼接的方式看起來混亂難讀,下面是JS簡單實(shí)現(xiàn)版本(沒有嚴(yán)格測試)2014-08-08uniapp自定義應(yīng)用退出執(zhí)行內(nèi)容實(shí)例代碼
近幾日使用uni-app開發(fā)移動應(yīng)用APP遇到了個不常見的需求,下面這篇文章主要給大家介紹了關(guān)于uniapp自定義應(yīng)用退出執(zhí)行內(nèi)容的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12超漂亮的Bootstrap 富文本編輯器summernote
Summernote 是一個簡單,靈活,所見即所得(WYSIWYG)的編輯器,基于 jQuery 和 Bootstrap 構(gòu)建。對bootstrap 文本編輯器相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2016-04-04微信小程序 Animation實(shí)現(xiàn)圖片旋轉(zhuǎn)動畫示例
這篇文章主要介紹了微信小程序 Animation實(shí)現(xiàn)圖片旋轉(zhuǎn)動畫示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-08-08JavaScript實(shí)現(xiàn)篩選數(shù)組
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)篩選數(shù)組,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-03-03ajax如何實(shí)現(xiàn)頁面局部跳轉(zhuǎn)與結(jié)果返回
AJAX即“Asynchronous Javascript And XML”(異步JavaScript和XML),是指一種創(chuàng)建交互式網(wǎng)頁應(yīng)用的網(wǎng)頁開發(fā)技術(shù),通過在后臺與服務(wù)器進(jìn)行少量數(shù)據(jù)交換,AJAX 可以使網(wǎng)頁實(shí)現(xiàn)異步更新,本篇文章給大家介紹ajax如何實(shí)現(xiàn)頁面局部跳轉(zhuǎn)與結(jié)果返回,感興趣的朋友一起來學(xué)習(xí)2015-08-08