谷歌搜索栏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

回答

相关问题