推薦教學:Bootstrap教學
範例程式碼
<div class="input-group"> <div class="input-icon-group"> <input type="text" class="form-control fc-clear" /> <span id="scan" data-role="md" class="md md-center-focus-weak fa-lg input-icon input-icon-md" style="display: inline;"> </span> </div> <span class="input-group-btn"> <button class="btn btn-primary" type="button"> 批号 </button> </span> </div>
效果圖:
解讀:
1、首先使得他們在一行主要是"input-group
"、「input-icon-group
」和「input-group-btn
」屬性起作用
2、使得input裡面的圖標在input裡面展現的效果主要是「input-icon input-icon-md
#」起作用,和「display: inline
」起作用。
3、對於input框能夠佔據整行空隙,而不是寬度很小,起作用的是「form-control
」。
4、對於input框裡面輸入文字後,不會覆蓋圖標,起作用的是「fc-clear
」。
以上是bootstrap怎麼為input加圖標的詳細內容。更多資訊請關注PHP中文網其他相關文章!