Thêm biểu tượng để gửi nút trong twitter bootstrap 2

Tôi muốn sử dụng các biểu tượng bootstrap twitter trên các nút gửi biểu mẫu nhập của tôi.

Các ví dụ trên http://twitter.github.com/bootstrap/base-css.html#icons chủ yếu hiển thị các siêu liên kết theo kiểu.

Gần nhất tôi đến là có biểu tượng hiển thị bên cạnh nút, nhưng không phải bên trong.

<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>

Bạn có thể sử dụng thẻ nút thay vì đầu vào

<button type="submit" class="btn btn-primary">
  <i class="icon-user icon-white"></i> Sign in
</button>

Tôi nghĩ bạn có thể sử dụng thẻ nhãn cho mục đích này. Dưới đây là một mẫu của thanh điều hướng HTML bootstrap của twitter:

<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>

Về cơ bản, bạn nhận được một phần tử nhãn cho đầu vào (type = submit) và sau đó bạn ẩn trình gửi đầu vào thực tế. Người dùng có thể nhấp vào thành phần nhãn và vẫn có được thông qua việc gửi biểu mẫu.

Tôi nghĩ bạn nên thử FontAwgie này được thiết kế để sử dụng với Twitter Bootstrap.

<button class="btn btn-primary icon-save">Button With Icon</button>

Bạn có thể thêm <a/> với biểu tượng ở đâu đó và liên kết hành động JavaScrit với biểu tượng đó để gửi biểu mẫu. Nếu cần thiết, tên và giá trị của tên + giá trị của nút gửi ban đầu có thể ở đó trong một thuộc tính ẩn. Thật dễ dàng với jQuery, vui lòng cho phép tôi tránh phiên bản JavaScript thuần túy.

Giả sử rằng đây là hình thức ban đầu:

<form method="post" id="myFavoriteForm>
   ...other fields...
   <input class="btn btn-primary" type="submit" name="login" value="Let me in" />
</form>

Thay đổi nó như thế này:

<form method="post" id="myFavoriteForm">
   ...other fields...
   <a href="#" class="btn btn-primary" id="myFavoriteFormSubmitButton">
      <i class="icon-user icon-white"></i>&nbsp;Let me in
   </a>
</form>

... Và sau đó là jQuery ma thuật:

$("#myFavoriteFormSubmitButton").bind('click', function(event) {
   $("#myFavoriteForm").submit();
});

Hoặc nếu bạn muốn đảm bảo rằng người dùng luôn có thể gửi biểu mẫu - đó là những gì tôi sẽ làm trong giày của bạn--, bạn có thể để nút gửi bình thường trong biểu mẫu và ẩn nó bằng jQuery. Suede (). Nó đảm bảo rằng đăng nhập vẫn hoạt động mà không cần JavaScript và jQuery theo nút gửi thông thường (có những người sử dụng liên kết, w3m và các trình duyệt tương tự), nhưng cung cấp một nút ưa thích với biểu tượng nếu có thể.

Có một cách mới để làm điều này với bootstrap 3:

<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star"></span> Star
</button>

Đó là trên trang glyphicons bootstrap trong phần "cách sử dụng":

Tôi muốn các biểu tượng Twitter Bootstrap chuyển sang dạng Rails cơ bản và tình cờ thấy bài đăng này. Sau khi tìm kiếm xung quanh một chút, tôi đã tìm ra một cách dễ dàng để làm điều đó. Không chắc chắn nếu bạn đang sử dụng Rails, nhưng đây là mã. Chìa khóa là chuyển một khối tới trình trợ giúp xem 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 %>

Trong trường hợp bạn không sử dụng Rails, đây là HTML đầu ra cho các liên kết có biểu tượng (để chỉnh sửa, xóa và các nút gửi mới)

# 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>

Và đây là một liên kết đến ảnh chụp màn hình của kết quả đã hoàn thành: http://grab.by/cVXm

Có một cách, làm thế nào để đưa glyphicons (bootstrap's) vào input type="submit". Sử dụng css3 nhiều nền.

HTML:

<form class="form-search">
   …
   <input type="submit" value="Search">
</form>

và 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 */
}

Nếu nhiều nền được chồng lên nhau, ở trên cùng sẽ là nền đầu tiên tại background:ký hiệu. Vì vậy, ở trên cùng là nền được thụt vào 16pxtừ bên trái ( 16pxlà chiều rộng của glyphicon đơn), ở cấp độ dưới cùng là toàn bộ glyphicons-halflings.pngvà ở cấp độ dưới cùng (bao gồm toàn bộ phần tử) là cùng một độ dốc nền như ở cấp cao nhất.

-48px 0pxlà phần cắt cho biểu tượng tìm kiếm ( icon-search) nhưng thật dễ dàng để hiển thị bất kỳ biểu tượng nào khác.

Nếu ai đó cần một :hoverhiệu ứng, nền phải được gõ lại ở cùng một hình thức.

Tôi đã làm việc này, nhưng có một vài cảnh báo tôi chưa giải quyết được.

Dù sao, đây là cách nó được thực hiện:

Lấy nút đầu vào trung bình của bạn:

<input type="submit" class="btn btn-success" value="Save">

Cắt biểu tượng bạn muốn cho các nút gửi của bạn từ tệp sprite glyphicons, đảm bảo đó là hình ảnh 14x14 px. Vâng, trong những trường hợp lý tưởng, bạn có thể sử dụng lại sprite, và nếu có ai phát hiện ra tôi sẽ rất vui khi nghe cách nó được thực hiện. :-)

Khi bạn đã làm điều đó, bạn có thể viết css cho nút đầu vào của bạn như thế này:

input[type='submit'] {
    background-image: url('../images/submit-icon.png'), #62C462; /* fallback color if gradients are not supported */
    background-image: url('../images/submit-icon.png'), -webkit-linear-gradient(top, #62C462, #51A351);
    background-image: url('../images/submit-icon.png'),    -moz-linear-gradient(top, #62C462, #51A351); /* For Fx 3.6 to Fx 15 */
    background-image: url('../images/submit-icon.png'),     -ms-linear-gradient(top, #62C462, #51A351); /* For IE 10 Platform Previews and Consumer Preview */
    background-image: url('../images/submit-icon.png'),      -o-linear-gradient(top, #62C462, #51A351); /* For Opera 11.1 to 12.0 */
    background-image: url('../images/submit-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('../images/submit-icon.png'), #51A351; /* fallback color if gradients are not supported */
    background-image: url('../images/submit-icon.png'), -webkit-linear-gradient(top, #51A351, #51A351);
    background-image: url('../images/submit-icon.png'),    -moz-linear-gradient(top, #51A351, #51A351); /* For Fx 3.6 to Fx 15 */
    background-image: url('../images/submit-icon.png'),     -ms-linear-gradient(top, #51A351, #51A351); /* For IE 10 Platform Previews and Consumer Preview */
    background-image: url('../images/submit-icon.png'),      -o-linear-gradient(top, #51A351, #51A351); /* For Opera 11.1 to 12.0 */
    background-image: url('../images/submit-icon.png'),         linear-gradient(top, #51A351, #51A351); /* Standard syntax; must be the last statement */
    background-position: 5px 50%, 0cm 0cm;
    padding-left: 25px;
}

Hoạt động trong Firefox 14, Chrome 21

Không hoạt động trong IE 9

tl; dr: Với một chút css, bạn có thể tự động đặt các biểu tượng trên các nút gửi của mình, nhưng bạn cần đặt biểu tượng vào một tệp riêng và nó sẽ không hoạt động trong Internet Explorer.

Tôi nghĩ đó là một giải pháp cho vấn đề của bạn

<input type="text" placeholder="search here" />
<button type="submit"><i class="glyphicon glyphicon-search"></button>

Sử dụng đầu vào-nối với các lớp bổ trợ

<div class="input-append">
  <input class="span2" id="appendedPrependedInput" type="text">
  <span class="add-on">.00</span>
</div>

Tôi đoán cách này tốt hơn, làm việc tốt cho tôi.

<form name="myform">
<!-- form fields -->
   <a href="#" class="btn btn-success" onclick="document.myform.submit();">
     Submit <i class="icon-plus"></i>&nbsp; Icon
   </a>
</form>