快捷導(dǎo)航

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/>
<!-- 大號(hào) -->
<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é)果：

您可能感興趣的文章:

相關(guān)文章

JS庫 Highlightjs 添加代碼行號(hào)的實(shí)現(xiàn)代碼
Highlightjs是一款優(yōu)秀的代碼高亮Js組件，可以很方便地對(duì)各種語言編寫的代碼添加語法高亮樣式。本文重點(diǎn)給大家介紹Highlightjs 添加代碼行號(hào)的實(shí)現(xiàn)代碼，需要的朋友參考下吧
2017-09-09
仿淘寶JSsearch搜索下拉深度用法
本篇文章通過仿照淘寶搜索關(guān)鍵字后下拉相關(guān)產(chǎn)品搜索樣子的制作，深度分析了JSsearch的用法，一起跟著小編學(xué)習(xí)下吧。
2018-01-01
談?wù)刯avascript中使用連等賦值操作帶來的問題
這篇文章主要介紹了javascript中使用連等賦值操作帶來的問題的相關(guān)資料,需要的朋友可以參考下
2015-11-11
JS 9個(gè)Promise面試題
這篇文章主要介紹了JS 9個(gè)Promise面試題，對(duì)異步Promise感興趣的同學(xué)，可以參考下
2021-05-05
Babel轉(zhuǎn)譯失敗的常見原因及解決方案
Babel是一個(gè)JavaScript編譯器,用于將現(xiàn)代JavaScript代碼轉(zhuǎn)換為兼容舊版瀏覽器和運(yùn)行環(huán)境的JavaScript代碼,然而,在項(xiàng)目中使用Babel進(jìn)行轉(zhuǎn)譯時(shí),有時(shí)會(huì)遇到轉(zhuǎn)譯失敗的問題,本文將詳細(xì)分析Babel轉(zhuǎn)譯失敗的常見原因,并提供相應(yīng)的解決方案,需要的朋友可以參考下
2025-02-02
原生js實(shí)現(xiàn)輪播圖的示例代碼
本篇文章主要介紹了原生js實(shí)現(xiàn)輪播圖的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-02-02
Electron點(diǎn)擊穿透不規(guī)則窗體的透明區(qū)域的實(shí)現(xiàn)
本文主要介紹了Electron點(diǎn)擊穿透不規(guī)則窗體的透明區(qū)域的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-09-09
復(fù)制js對(duì)象方法(詳解)
復(fù)制js對(duì)象方法，需要的朋友可以參考下
2013-07-07
JS中正則表達(dá)式全局匹配模式 /g用法詳解
本文章通過實(shí)例代碼給大家詳細(xì)介紹js中正則表達(dá)式的全局匹配模式 /g的用法，需要的朋友參考下
2017-04-04
webpack配置完熱更新會(huì)刷新整個(gè)頁面
本文主要介紹了webpack配置完熱更新會(huì)刷新整個(gè)頁面,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-11-11