谷歌搜索欄twitter-bootstrap

我正在尋找創建一個谷歌風格的中心搜索欄的簡單索引頁面，但我努力使Twitter Bootstrap看起來不錯。谷歌搜索欄twitter-bootstrap

搜索欄必須在搜索字段的末尾（右側）附加一個搜索圖標按鈕。由於我打算編寫一個下拉式搜索建議系統，因此我使用了typeahead。

<div class="hero-unit"> 
<div class="input-append"> 
    <input type="text" data-provider="typeahead" class="input-large" 
    placeholder="What do you want to know?" autocomplete="off"> 
    <button type="submit" class="btn-large btn-success"> 
    <i class="icon-search"></i> 
    </button> 
</div>

它也必須比標準的文本框大（高），該功能不是Twitter的引導的穩定版本尚未公佈，因此CSS我不得不將其投入的頂部頁。

<style> 
input[class=input-large] { 
    width: 540px; 
    height: 24px; 
    margin-bottom: 10px; 
    margin-right: -7px; 
    line-height: 30px; 
    padding: 11px 19px; 
    font-size: 17.5px; 
    -webkit-border-radius: 6px; 
     -moz-border-radius: 6px; 
      border-radius: 6px; 
    }

我能看到，讓搜索按鈕更接近搜索欄的唯一方法是使用陰性切緣（當您使用BTN-出現大的空隙）。不是我引以爲傲的東西，它看起來非常混亂。

我很感激這方面的一些指導。提前致謝。

來源

2013-03-20 Lemon

嘗試使用'input-append'和'add-on';他們從字面上將按鈕和欄合併爲一個 – Amelia 2013-03-20 15:44:17

<div class='container'> 
    <div class='row'> 
     <form> 
     <div class='span3 input-append' style="margin-top:30%; margin-left:30%"> 
      <input class="span2" style="height:26px;width:400px;" id="main_search" type="text" > 
      <input class="btn btn-large btn-primary" type="button" value="search"> 
     </div> 

     </form> 
    </div> 
</div>

Fiddle-

Updated fiddle

來源

2013-03-20 15:49:51 Manoj

不要在HTML5中使用'/>'作爲自閉元素;它無效，並創建一個void元素。它也是無效的HTML4 :) – Amelia 2013-03-20 15:51:44

@HIROTO，rozar那！ – Manoj 2013-03-20 15:52:48

你可以使用''像bootstrap文檔做 – Amelia 2013-03-20 15:55:48

您可以嘗試extended form controls

<div class="input-append"> 
    <span class="add-on"><input id="search-button" value="Search"></span> 
    <!-- stick a search icon in there instead --> 
    <input class="span2" id="search"> 
</div>

你將不得不如果你這樣做來調節按鈕的CSS（填充，輪廓線），雖然，但他們將作爲一個單位留在移動視圖中。如果您真的想要自定義視圖，那麼無論如何您都會降低利潤率。

來源

2013-03-20 15:50:48 Amelia

再一次，這不會幫助主要問題 - btn大和更大/更高的文本框。我一定錯過了文檔中的擴展控制位，所以謝謝參考。 – Lemon 2013-03-20 16:21:21

谷歌搜索欄twitter-bootstrap

回答

相關問題