我想在我的表单输入提交按钮上使用twitter引导图标。
http://twitter.github.com/bootstrap/base-css.html#icons上的例子主要是有样式的超链接。
我最接近的方法是让图标显示在按钮旁边，但不是在按钮里面。
<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>
当前回答
我认为这是解决你问题的办法
<input type="text" placeholder="search here" />
<button type="submit"><i class="glyphicon glyphicon-search"></button>
其他回答
<!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>
有一种新的方法可以用bootstrap 3做到这一点:
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star"></span> Star
</button>
在bootstrap glyphicons页面的“如何使用”下面:
我想这种更好的方法对我来说很好。
<form name="myform">
<!-- form fields -->
<a href="#" class="btn btn-success" onclick="document.myform.submit();">
Submit <i class="icon-plus"></i> Icon
</a>
</form>
您可以在某处添加一个<a/>图标，并绑定一个JavaScrit动作 向它提交表单。类的名称和值(如有必要) 原始提交按钮的名称+值可以在一个隐藏属性中。这很简单 jQuery，请允许我避免纯JavaScript版本。
假设这是原始形式:
<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();
});
或者如果你想确保用户总是能提交表单，那就是 换做是我，你可以把正常的提交按钮留在里面 并使用jQuery .hide()隐藏它。它确保登录仍然有效 无需JavaScript和jQuery按正常提交按钮(有 人们使用链接，w3m和类似的浏览器)，但提供 如果可能的话，一个带有图标的花哨按钮。
在附加组件类中使用输入附加
<div class="input-append">
<input class="span2" id="appendedPrependedInput" type="text">
<span class="add-on">.00</span>
</div>
