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àn)價值觀，此功能應(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)站！
您可能感興趣的文章:
- 學(xué)習(xí)使用Bootstrap輸入框、導(dǎo)航、分頁等常用組件
- Bootstrap輸入框組件簡單實(shí)現(xiàn)代碼
- bootstrap輸入框組件使用方法詳解
- Bootstrap CSS組件之輸入框組
- Bootstrap基本組件學(xué)習(xí)筆記之input輸入框組(9)
- 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 禁止復(fù)制js 復(fù)制js 禁止右鍵 復(fù)制文件js 禁止 js禁止選擇 js禁止右鍵代碼2008-02-02
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)底部彈窗，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
本文詳細(xì)介紹了JavaScript中的Map數(shù)據(jù)結(jié)構(gòu),包括它的創(chuàng)建、常用方法、迭代方式以及與對象的區(qū)別,文章簡要介紹了WeakMap的概念和使用場景,感興趣的朋友一起看看吧2025-02-02
這篇文章主要介紹了小程序中為什么使用var that=this的相關(guān)知識，本文通過示例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-08-08
這篇文章主要介紹了javascript中常用的字符串函數(shù)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-02-02
這篇文章主要介紹了Javascript 鏈?zhǔn)阶饔糜蛟敿?xì)介紹的相關(guān)資料,需要的朋友可以參考下2017-02-02
JavaScript使用performance實(shí)現(xiàn)查看內(nèi)存
這篇文章主要為大家詳細(xì)介紹了JavaScript如何使用performance實(shí)現(xiàn)查看內(nèi)存,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-03-03
setTimeout( ) 是屬于 window 的 method, 但我們都是略去 window 這頂層物件名稱, 這是用來設(shè)定一個時間, 時間到了, 就會執(zhí)行一個指定的 method2013-04-04
javascript 數(shù)組(list)添加/刪除的實(shí)現(xiàn)
這篇文章主要介紹了javascript 數(shù)組(list)添加/刪除，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
js實(shí)現(xiàn)下載(文件流式)方法詳解與完整實(shí)例源碼
這篇文章主要介紹了js實(shí)現(xiàn)下載(文件流式)的方法,需要的朋友可以參考下2022-12-12