Bootstrap輸入框組件簡單實現(xiàn)代碼

更新時間：2017年03月06日 10:25:16 作者：deepquiet

這篇文章主要為大家詳細(xì)介紹了Bootstrap輸入框組件的簡單實現(xiàn)代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下

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é)果：

您可能感興趣的文章:

相關(guān)文章

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