如何使用引導

Question

google search http://tech-and-teaching.com/wp-content/uploads/2012/11/firefox-search.png

如何創建像一個搜索框突出了使用引導（圖像的頂部）中添加一個文本框搜索圖標？放大鏡圖標應該是可點擊的。

Answer 1

你需要做的是彼此相鄰的形式，然後使用CSS絕對定位在表格頂部的按鈕創建一個按鈕和輸入。

樣式按鈕（引導包括了許多有用的圖標）看起來像放大鏡和你去那裏！

-Edit-

一些示例代碼，因爲我感覺很慷慨。

<div id="form-master"> 
<form method="post"> 
    <div id="search-box"> 
     <input type="text" name="search" /> 
    </div> 

    <div id="search-button"> 
     <input type="submit" name="run" /> 
    </div> 
</form> 
</div> 

而CSS：

#form-master { 
position: relative; 
width: 200px; 
height: 30px; 
} 

#search-box { 
position: absolute; 
top: 0; 
left: 0; 
z-index: 1; 
width: 190px; 
height: 20px; 
padding: 5px; 
} 

#search-button { 
position: absolute; 
top: 5px; 
right: 5px; 
z-index: 5; 
border: none; 
width: 25px; 
height: 25px; 
background: url('magnifier.png') top no-repeat; 
} 

這是非常粗糙，但在正確的方向。

Answer 2

添加圖標作爲背景圖像，或者如果你想，要成爲可點擊例如：像谷歌做浮動輸入，然後輸入文字添加邊框半徑在頂部和底部的左側，並在輸入提交補充的bordr半徑右邊部分在底部和上面，使他們在相同的背景下，並在輸入提交添加作爲背景IMG圖標，你想要的。它的外觀一樣:)