Bootstrap3 input輸入框插入glyphicon圖標(biāo)的方法

更新時間：2016年05月16日 11:54:33 投稿：mrr

這篇文章主要介紹了Bootstrap3 input輸入框插入glyphicon圖標(biāo)的方法的相關(guān)資料,需要的朋友可以參考下

bootstrap3如何在input輸入框插入glyphicon圖標(biāo)呢？插入圖標(biāo)看起來比較醒目，滿足用戶體驗價值觀，此功能應(yīng)用于各大網(wǎng)站。

怎么把圖標(biāo)放在輸入框的開頭？？

<div class="form-group has-feedback">
<label class="col-md-2 control-label" for="username">用戶名</label>
<div class="col-md-6">
<span class="glyphicon glyphicon-user form-control-feedback"></span>
<input type="text" class="form-control" id="username" name="username" placeholder="用戶名" autofocus>
</div>
</div>
<div class="form-group has-feedback">
<label class="col-md-2 control-label" for="password">密　碼</label>
<div class="col-md-6">
<i></i>
<span class="glyphicon glyphicon-lock form-control-feedback"></span>
<input type="password" class="form-control" id="password" name="password" placeholder="密碼">
</div>
</div>

------解決思路----------------------

改樣式就好了啊，它是用絕對定位做的，left多少，再改下輸入框的padding-left就可以了

------解決思路----------------------

樣式修改下唄

form-control-feedback{
right:0 //改稱 left:0
}

以上內(nèi)容是小編給大家介紹的Bootstrap3 input輸入框插入glyphicon圖標(biāo)的方法，希望對大家有所幫助，如果大家想了解更多內(nèi)容敬請關(guān)注腳本之家網(wǎng)站！

您可能感興趣的文章:

相關(guān)文章

js模擬點擊以提交表單為例兼容主流瀏覽器
我們會常常用到JS的模事件，比如說點擊事件，舉個簡單的例子，點擊表單外的“提交”按鈕來提交表單，下面為大家介紹下具體的實現(xiàn)
2013-11-11
JS設(shè)計模式之訪問者模式的用法詳解
JS訪問者模式是一種行為型設(shè)計模式,用于將算法與對象結(jié)構(gòu)分離, 該模式允許你定義新的操作（訪問者）而無需修改現(xiàn)有對象結(jié)構(gòu)（被訪問者）, 通過這種方式,你可以在不改變對象結(jié)構(gòu)的情況下添加新的操作,本文就給大家詳細(xì)的講講JS訪問者模式的用法
2023-08-08
JavaScript中函數(shù)柯里化示例詳解
JavaScript 函數(shù)柯里化是將一個多參數(shù)的函數(shù)轉(zhuǎn)換為一系列單參數(shù)的函數(shù),每個單參數(shù)函數(shù)都可以接收一個參數(shù),并返回一個新的函數(shù),本文將通過代碼示例給大家講講JavaScript函數(shù)柯里化的優(yōu)缺點,需要的朋友可以參考下
2023-09-09
使用bootstraptable插件實現(xiàn)表格記錄的查詢、分頁、排序操作
這篇文章主要介紹了使用bootstraptable插件實現(xiàn)表格記錄的查詢、分頁、排序操作,需要的朋友可以參考下
2017-08-08
JS實現(xiàn)向表格行添加新單元格的方法
這篇文章主要介紹了JS實現(xiàn)向表格行添加新單元格的方法,涉及javascript針對表格進(jìn)行動態(tài)操作的技巧,需要的朋友可以參考下
2015-03-03
javascript addBookmark 加入收藏多瀏覽器兼容
不錯的加入收藏代碼，加入了對一些常見瀏覽器的判斷，更好的體現(xiàn)用戶體驗，兼容了ie,firefox.
2009-08-08
JS與CSS3實現(xiàn)圖片響應(yīng)鼠標(biāo)移動放大效果示例
這篇文章主要介紹了JS與CSS3實現(xiàn)圖片響應(yīng)鼠標(biāo)移動放大效果,結(jié)合實例形式分析了javascript與css3響應(yīng)鼠標(biāo)事件動態(tài)修改頁面元素屬性實現(xiàn)圖片放大效果相關(guān)操作技巧,需要的朋友可以參考下
2018-05-05
IE瀏覽器PNG圖片透明效果代碼
平常，我們經(jīng)常使用Gif格式的圖片以保持圖片在瀏覽器中透明，以支持底色。但由于IE瀏覽器本身的原因，我們無法使透明的PNG圖片透明起來。那么，如何將它在IE瀏覽器下變得透明呢？
2008-09-09
如何在一個頁面顯示多個百度地圖
經(jīng)常有人問，百度地圖JavaScript API能在同一頁面顯示多個地圖嗎？當(dāng)然可以啊，為什么不可以呢？地圖之于頁面無非就是個div，我們可以在頁面顯示多個div，自然也可以顯示多個地圖。
2013-04-04
js判斷是否按下了Shift鍵的方法
這篇文章主要介紹了js判斷是否按下了Shift鍵的方法,主要通過event.shiftKey方法來判斷,需要的朋友可以參考下
2015-01-01