在twitter引导2中添加图标提交button
我想在我的表单input提交button上使用twitter引导程序图标。
http://twitter.github.com/bootstrap/base-css.html#icons上的示例主要显示样式化的超链接。
我来的最近的是获取button旁边显示的图标，但不是在里面。
<div class="input-prepend"> <span class="add-on"><i class="icon-user icon-white"></i></span> <input type="submit" class="btn-primary" value="Login" > </div> 您可以使用button标记而不是input
<button type="submit" class="btn btn-primary"> <i class="icon-user icon-white"></i> Sign in </button>
我想你可以使用标签来达到这个目的。 这是一个twitter引导HTML navbar的示例：
<form class="navbar-search"> <input type="text" class="search-query" placeholder="Search here" /> <label for="mySubmit" class="btn"><i class="icon-search icon-white"></i> Search me</label> <input id="mySubmit" type="submit" value="Go" class="hidden" /> </form>
基本上你会得到一个input的标签元素（type = submit），然后隐藏实际的input提交。 用户可以点击标签元素，然后通过表单提交。
我想你应该尝试这个FontAwesomedevise用于Twitter Bootstrap。
<button class="btn btn-primary icon-save">Button With Icon</button>
您可以在图标的某处添加一个<a/>，并绑定一个JavaScrit操作，提交表单。 如有必要，原始提交button的名称和值的值可以在隐藏属性中。 使用jQuery很容易，请允许我避免使用纯JavaScript版本。
假设这是原始的forms：
<form method="post" id="myFavoriteForm> ...other fields... <input class="btn btn-primary" type="submit" name="login" value="Let me in" /> </form>
像这样改变它：
<form method="post" id="myFavoriteForm"> ...other fields... <a href="#" class="btn btn-primary" id="myFavoriteFormSubmitButton"> <i class="icon-user icon-white"></i> Let me in </a> </form>
…然后是神奇的jQuery：
$("#myFavoriteFormSubmitButton").bind('click', function(event) { $("#myFavoriteForm").submit(); });
或者，如果你想确保用户可以随时提交表单 – 这就是我所要做的 – 你可以在表单中保留正常的提交button，并用jQuery.hide（）隐藏它。 它确保login仍然没有JavaScript和jQuery按照正常的提交button（有人使用链接，W3M和类似的浏览器），但提供了一个花哨的button尽可能图标。
我想Twitter的Bootstrap图标到一个基本的Rails的forms，并遇到这个职位。 经过四处寻找，我想出了一个简单的方法来做到这一点。 不知道你是否使用Rails，但是这是代码。 关键是将一个块传递给link_to视图助手：
<tbody> <% @products.each do |product| %> <tr> <td><%= product.id %></td> <td><%= link_to product.name, product_path(product) %></td> <td><%= product.created_at %></td> <td> <%= link_to(edit_product_path(product), :class => 'btn btn-mini') do %> Edit <i class="icon-pencil"></i> <% end %> <%= link_to(product_path(product), :method => :delete, :confirm => 'Are you sure?', :class => 'btn btn-mini btn-danger') do %> Delete <i class="icon-trash icon-white"></i> <% end %> </td> </tr> <% end %> </tbody> </table> <%= link_to(new_product_path, :class => 'btn btn-primary') do %> New <i class="icon-plus icon-white"></i> <% end %>
如果你不使用Rails，这里是带有图标的链接的输出HTML（用于编辑，删除和新的提交button）
# Edit <a href="/products/1/edit" class="btn btn-mini">Edit <i class="icon-pencil"></i></a> # Delete <a href="/products/1" class="btn btn-mini btn-danger" data-confirm="Are you sure?" data-method="delete" rel="nofollow"> Delete <i class="icon-trash icon-white"></i></a> # New <a href="/products/new" class="btn btn-primary">New <i class="icon-plus icon-white"></i></a>
下面是链接到完成结果的截图： http ： //grab.by/cVXm
有一个新的方法来做到这一点与引导3：
<button type="button" class="btn btn-default btn-lg"> <span class="glyphicon glyphicon-star"></span> Star </button>
它位于“如何使用”下的自举graphics页面上：
有一种方法，如何获得（引导）的graphicsinput type="submit" 。 使用css3多个背景。
HTML：
<form class="form-search"> … <input type="submit" value="Search"> </form>
和CSS：
.form-search input[type="submit"] { padding-left:16px; /* space for only one glyphicon */ background:-moz-linear-gradient(top,#fff 0%,#eee 100%) no-repeat 16px top, url(..http://img.dovov.comglyphicons-halflings.png) no-repeat -48px 0, -moz-linear-gradient(top,#fff 0%,#eee 100%); /* FF hack */ /* another hacks here */ background:linear-gradient(to bottom,#fff 0%,#eee 100%) no-repeat 16px top, url(..http://img.dovov.comglyphicons-halflings.png) no-repeat -48px 0, linear-gradient(to bottom,#fff 0%,#eee 100%); /* Standard way */ }
如果多个背景重叠，在顶部将是背景的第一个background:符号。 所以顶端是从左侧缩进16px背景（ 16px是单个graphics的宽度），底层是整个glyphicons-halflings.png ，底层（覆盖整个元素）的背景是与背景相同的背景渐变顶层。
-48px 0px是search图标（ icon-search ）的剪切，但很容易显示任何其他图标。
如果有人需要:hover效果， 背景必须以相同的forms重新input。
我得到了这个工作，但还有一些我还没有解决的警告。
无论如何，这是如何做到的：
以你的平均inputbutton：
<input type="submit" class="btn btn-success" value="Save">
从glyphicons sprite文件中剪出你想要提交button的图标，确保它是一个14×14像素的图像。 是的，在理想的情况下，你可以重复使用精灵，如果有人知道，我会很高兴听到它是如何完成的。 🙂
一旦你这样做，你可以编写你的inputbutton的CSS这样的：
input[type='submit'] { background-image: url('..http://img.dovov.comsubmit-icon.png'), #62C462; /* fallback color if gradients are not supported */ background-image: url('..http://img.dovov.comsubmit-icon.png'), -webkit-linear-gradient(top, #62C462, #51A351); background-image: url('..http://img.dovov.comsubmit-icon.png'), -moz-linear-gradient(top, #62C462, #51A351); /* For Fx 3.6 to Fx 15 */ background-image: url('..http://img.dovov.comsubmit-icon.png'), -ms-linear-gradient(top, #62C462, #51A351); /* For IE 10 Platform Previews and Consumer Preview */ background-image: url('..http://img.dovov.comsubmit-icon.png'), -o-linear-gradient(top, #62C462, #51A351); /* For Opera 11.1 to 12.0 */ background-image: url('..http://img.dovov.comsubmit-icon.png'), linear-gradient(top, #62C462, #51A351); /* Standard syntax; must be the last statement */ background-repeat: no-repeat; background-position: 5px 50%, 0cm 0cm; padding-left: 25px; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); } input[type='submit']:hover { background-image: url('..http://img.dovov.comsubmit-icon.png'), #51A351; /* fallback color if gradients are not supported */ background-image: url('..http://img.dovov.comsubmit-icon.png'), -webkit-linear-gradient(top, #51A351, #51A351); background-image: url('..http://img.dovov.comsubmit-icon.png'), -moz-linear-gradient(top, #51A351, #51A351); /* For Fx 3.6 to Fx 15 */ background-image: url('..http://img.dovov.comsubmit-icon.png'), -ms-linear-gradient(top, #51A351, #51A351); /* For IE 10 Platform Previews and Consumer Preview */ background-image: url('..http://img.dovov.comsubmit-icon.png'), -o-linear-gradient(top, #51A351, #51A351); /* For Opera 11.1 to 12.0 */ background-image: url('..http://img.dovov.comsubmit-icon.png'), linear-gradient(top, #51A351, #51A351); /* Standard syntax; must be the last statement */ background-position: 5px 50%, 0cm 0cm; padding-left: 25px; }
适用于Firefox 14，Chrome 21
在IE 9中不起作用
tl; dr：用一点css你可以自动把图标放在你的提交button上，但是你需要把图标放在一个单独的文件中，并且它在Internet Explorer中不起作用。
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <button type="button" class="btn btn-info"> <span class="glyphicon glyphicon-search"></span> Search </button> </p> <a href="#" class="btn btn-success btn-lg"> <span class="glyphicon glyphicon-print"></span> Print </a> </p> </div> </body> </html>
我认为它是你的问题的解决scheme
<input type="text" placeholder="search here" /> <button type="submit"><i class="glyphicon glyphicon-search"></button>
使用input-append和附加类
<div class="input-append"> <input class="span2" id="appendedPrependedInput" type="text"> <span class="add-on">.00</span> </div>
我想这个更好的方法，对我来说工作得很好。
<form name="myform"> <!-- form fields --> <a href="#" class="btn btn-success" onclick="document.myform.submit();"> Submit <i class="icon-plus"></i> Icon </a> </form>
