AyK*_*rsi 223 twitter-bootstrap twitter-bootstrap-2
我想在表单输入提交按钮上使用twitter bootstrap图标.
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>
Sim*_*ham 388
您可以使用按钮标记而不是输入
<button type="submit" class="btn btn-primary">
<i class="icon-user icon-white"></i> Sign in
</button>
Chr*_*ael 66
我认为您可以为此目的使用标签标签.以下是twitter bootstrap HTML导航栏的示例:
<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>
基本上你得到输入的标签元素(type = submit),然后隐藏实际的输入提交.用户可以单击标签元素,仍然可以使用表单提交.
pen*_*izt 14
我想你应该试试这个FontAwesome设计用于Twitter Bootstrap.
<button class="btn btn-primary icon-save">Button With Icon</button>
小智 11
您可以在某处添加带有图标的<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和类似的浏览器),但如果可能的话,提供带有图标的花哨按钮.
使用bootstrap 3有一种新的方法:
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star"></span> Star
</button>
它位于"如何使用"下的bootstrap glyphicons页面上:
我想将Twitter Bootstrap图标转换为基本的Rails表单,并且发现了这篇文章.经过一番搜索后,我想出了一个简单的方法.不确定你是否使用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(用于编辑,删除和新的提交按钮)
# 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
有一种方法,如何获得(bootstrap的)glyphicons input 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(../images/glyphicons-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(../images/glyphicons-halflings.png) no-repeat -48px 0,
linear-gradient(to bottom,#fff 0%,#eee 100%); /* Standard way */
}
如果多个背景重叠,则顶部将是background:符号的第一个背景.所以在顶部是16px从左侧缩进的背景(16px是单个glyphicon的宽度),在底层是整体glyphicons-halflings.png,在底层(覆盖整个元素)是与顶层相同的背景渐变.
-48px 0px是搜索图标(icon-search)的剪切,但很容易显示任何其他图标.
如果有人需要:hover效果,则必须再次以相同的形式输入背景.