快捷導(dǎo)航

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

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

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

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

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

<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>

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

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

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

樣式修改下唄

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

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

您可能感興趣的文章:

相關(guān)文章

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