Bootstrap导航栏search图标
导航栏search表单的引导示例只有一个文本框。
我希望能够在开始时添加一个search图标，就像Twitter在search框中一样。 我怎样才能用bootstrap做到这一点？
这是我迄今为止所尝试的，但它是失败的： http : //jsfiddle.net/C4ZY3/3/
要做到这一点的方法之一是添加左填充字段，并为该字段添加背景图像。
看例子： http : //jsfiddle.net/hYAEQ/
这不是twitter.com做的确切的方法，他们在search字段上方使用绝对位置元素，因为它们在单个精灵中都有所有图像，并且不能轻易将它们用作背景，但应该这样做。
我使用内联图像作为背景，使其更容易发布到jsfiddle，但是可以随意在这里使用正常的图像链接。
编辑：使用引导精灵和图标http://jsfiddle.net/hYAEQ/2/的附加容器;
编辑2：
修复白色bootstrap主题： http : //jsfiddle.net/hYAEQ/273/
编辑3：
如果你使用navbar-inverse（黑色的导航栏），你会想要这个小调整： http : //jsfiddle.net/hYAEQ/410/
.navbar-search .search-query { padding-left: 29px !important; } 下面是如何使用:before伪代码select器和graphics引导2.3.2，而不是在input背景图像。
这里有几个简单的例子： http : //jsfiddle.net/qdGZy/
<style type="text/css"> input.search-query { padding-left:26px; } form.form-search { position: relative; } form.form-search:before { content:''; display: block; width: 14px; height: 14px; background-image: url(2.3.2/assets/img/glyphicons-halflings.png); background-position: -48px 0; position: absolute; top:8px; left:8px; opacity: .5; z-index: 1000; } </style> <form class="form-search form-inline"> <input type="text" class="search-query" placeholder="Search..." /> </form>
更新为Bootstrap 3.0.0
这是bootstrap 3.0更新的小提琴： http : //jsfiddle.net/66Ynx/
玩这个小提琴，我把一些松香的弓为你： http : //jsfiddle.net/pYRbm/
.fornav { position:relative; margin-left:-22px; top:-3px; z-index:2; } <div class="navbar"> <div class="navbar-inner"> <div class="container"> <form class="navbar-search"> <div class="input-append"> <input type="text" class="search-query span2" placeholder="Search…"><span class="fornav"><i class="icon-search"></i></span> </div> </form> </div> </div> </div>
您也可以通过使用像这样的前置表单input来完全不触及css
<form class="navbar-search"> <div class="input-prepend"> <span class="add-on"><i class="icon-search"></i></span><input name="url" type="text" class="span2" placeholder="Page Url"> </div> </form>
请注意， </span>和<input>之间的空格将在图标和文本框之间创build一个间隙。
在bootstrap 3.xx中
<div class="input-group"> <input type="text" class="form-control" id="search"> <span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span> </div>
新版本2.1.1修复了这个问题。 它不处理15像素半径的情况，所以我继续前进并相应地devise它。 我也join了navbar-inverse的乐趣。
几个警告。 CSS可以更好地优化，但最近我被宠坏了。 最后，在放大镜的左边有一个很小的，几乎看不见的左边框。 我不知道究竟是什么造成的，但可能是盒子的影子。
请随意分叉和改进。
对于那些使用Rails的人来说，我的解决scheme不是最漂亮的，而是可行的。
<%= form_tag PATH_TO_MODEL, :method => 'get', :class => "navbar-search" do %> <%= text_field_tag :search, params[:search], :class => "search-query", :style => "padding-left:29px" %> <div class="icon-search" style="position:absolute;top:7px;left:11px;"></div> <% end %>
这个晚会晚了…
我用下面的图标来实现searchinput
<div class="input-append"> <input id="appendedInputButton" class="span6" type="text" placeholder="Search..."> <button class="btn" type="button"><i class="icon-search"></i></button> </div>
你应该改变你的方法。 使用span.search-query作为覆盖 – 在这里你有最重要的事情：
.navbar-search { position: relative } /* wrapper */ .search-query { position: absolute; left: 0; top: 0; z-index: 2; width: x } /* icon */ .span3 { position: relative; z-index: 1; padding-left: x } /* input */
