快捷導(dǎo)航

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

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

這篇文章主要為大家詳細(xì)介紹了Bootstrap輸入框組件的簡(jiǎn)單實(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)文章

頁(yè)面定時(shí)刷新(1秒刷新一次)
頁(yè)面定時(shí)刷新的示例想必大家也見(jiàn)到不少，在本文將為大家介紹的是，如何實(shí)現(xiàn)1秒刷新一次，感興趣的朋友可以了解下本文
2013-11-11
JS中實(shí)現(xiàn)簡(jiǎn)單Formatter函數(shù)示例代碼
JS沒(méi)有提供方便使用的Formatter函數(shù)，用字符拼接的方式看起來(lái)混亂難讀，下面是JS簡(jiǎn)單實(shí)現(xiàn)版本(沒(méi)有嚴(yán)格測(cè)試)
2014-08-08
使用JavaScript渲染頁(yè)面的方法詳解
本文主要介紹了使用JavaScript渲染頁(yè)面的方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,感興趣的小伙伴下面隨著小編來(lái)一起來(lái)學(xué)習(xí)吧
2023-12-12
switchery按鈕的使用方法
下面小編就為大家分享一篇switchery按鈕的使用方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2017-12-12
uniapp自定義應(yīng)用退出執(zhí)行內(nèi)容實(shí)例代碼
近幾日使用uni-app開(kāi)發(fā)移動(dòng)應(yīng)用APP遇到了個(gè)不常見(jiàn)的需求,下面這篇文章主要給大家介紹了關(guān)于uniapp自定義應(yīng)用退出執(zhí)行內(nèi)容的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-12-12
超漂亮的Bootstrap 富文本編輯器summernote
Summernote 是一個(gè)簡(jiǎn)單，靈活，所見(jiàn)即所得（WYSIWYG）的編輯器，基于 jQuery 和 Bootstrap 構(gòu)建。對(duì)bootstrap 文本編輯器相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧
2016-04-04
JS是按值傳遞還是按引用傳遞
在分析這個(gè)問(wèn)題之前，我們需了解什么是按值傳遞(call by value)，什么是按引用傳遞(call by reference)。在計(jì)算機(jī)科學(xué)里，這個(gè)部分叫求值策略(Evaluation Strategy)。它決定變量之間、函數(shù)調(diào)用時(shí)實(shí)參和形參之間值是如何傳遞的。
2015-01-01
微信小程序 Animation實(shí)現(xiàn)圖片旋轉(zhuǎn)動(dòng)畫(huà)示例
這篇文章主要介紹了微信小程序 Animation實(shí)現(xiàn)圖片旋轉(zhuǎn)動(dòng)畫(huà)示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-08-08
JavaScript實(shí)現(xiàn)篩選數(shù)組
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)篩選數(shù)組，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-03-03
ajax如何實(shí)現(xiàn)頁(yè)面局部跳轉(zhuǎn)與結(jié)果返回
AJAX即“Asynchronous Javascript And XML”（異步JavaScript和XML），是指一種創(chuàng)建交互式網(wǎng)頁(yè)應(yīng)用的網(wǎng)頁(yè)開(kāi)發(fā)技術(shù)，通過(guò)在后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換，AJAX 可以使網(wǎng)頁(yè)實(shí)現(xiàn)異步更新，本篇文章給大家介紹ajax如何實(shí)現(xiàn)頁(yè)面局部跳轉(zhuǎn)與結(jié)果返回，感興趣的朋友一起來(lái)學(xué)習(xí)
2015-08-08