Twitter bootstrap 2 düğmesine göndermek için simge ekle

Form girişi gönderme düğmelerimde twitter bootstrap simgelerini kullanmak istiyorum.

Http://twitter.github.com/bootstrap/base-css.html#icons'taki örnekler ağırlıklı olarak stilli köprüleri gösterir.

Geldiğim en yakın simge, düğmenin yanında görüntülenen simgeyi almak, ancak içeride değil.

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

Giriş yerine bir düğme etiketi kullanabilirsiniz

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

Bu amaçla etiket etiketlerini kullanabileceğinizi düşünüyorum. İşte twitter bootstrap HTML navbar örneği:

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

Temel olarak girdi için bir etiket öğesi alırsınız (type = Submit) ve ardından gerçek girdi sunumunu gizlersiniz. Kullanıcılar etiket öğesini tıklayabilir ve yine de form gönderme işlemini gerçekleştirebilir.

Twitter Bootstrap ile kullanılmak üzere tasarlanmış bu FontAwesome'i denemeniz gerektiğini düşünüyorum .

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

Simgeyi bir yere bir <a/> ekleyebilir ve ona form gönderen bir JavaScrit eylemi ekleyebilirsiniz. Gerekirse, orijinal gönderme düğmesinin adı + değerinin adı ve değeri gizli bir öznitelikte bulunabilir. JQuery ile kolay, lütfen saf JavaScript sürümünden kaçınmama izin verin.

Bunun orijinal form olduğunu varsayalım:

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

Bu şekilde değiştirin:

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

... ve sonra büyülü jQuery:

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

Veya kullanıcının formu her zaman gönderebildiğinden emin olmak istiyorsanız - bu, ayakkabılarınızda yapacağım şeydir - normal gönderme düğmesini formda bırakabilir ve jQuery .hide () ile gizleyebilirsiniz. Girişin normal gönderme düğmesine göre JavaScript ve jQuery olmadan da çalışmasını sağlar (bağlantıları, w3m ve benzeri tarayıcıları kullanan kişiler vardır), ancak mümkünse simgesiyle süslü bir düğme sağlar.

Bootstrap 3 ile bunu yapmanın yeni bir yolu var:

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

Başladı önyükleme glyphicons "nasıl kullanmak" altında sayfanın:

Twitter Bootstrap simgelerini temel bir Rails formuna istedim ve bu yazıyla karşılaştım. Biraz araştırdıktan sonra bunu yapmanın kolay bir yolunu buldum. Rails kullandığınızdan emin değilsiniz, ancak işte kod. Anahtar, link_to görünüm yardımcısına bir blok geçirmekti:

<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 kullanmıyorsanız, simgelere sahip bağlantılar için bir düzenleme HTML'si (düzenleme, silme ve yeni gönderme düğmeleri için)

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

Ve işte biten sonucun ekran görüntüsüne bir bağlantı: http://grab.by/cVXm

Glifikonları (bootstrap) glifonlarına nasıl sokmanın bir yolu vardır input type="submit". Css3 çoklu arka plan kullanma.

HTML:

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

ve 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 */
}

Birden çok arka plan çakışıyorsa, üst kısımda background:gösterimin ilk arka planı olacaktır . Bu yüzden üstte 16pxsol taraftan girintili arka plan ( 16pxtek glifik genişliğidir), alt seviyede bütün glyphicons-halflings.pngve alt seviyede (tüm elemanı kapsar) üst seviyedeki ile aynı arka plan gradyanıdır.

-48px 0pxarama simgesi ( icon-search) için kesmedir, ancak başka herhangi bir simgeyi göstermek kolaydır.

Birisi bir :hoveretkiye ihtiyaç duyarsa, arka plan tekrar aynı biçimde yazılmalıdır.

Bu işe yaradı, ama henüz çözemediğim birkaç uyarı var.

Her neyse, işte böyle yapılır:

Ortalama giriş düğmenizi alın:

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

Gönderme düğmeleriniz için istediğiniz simgeyi glifonlar hareketli grafik dosyasından kesin, 14x14 piksel boyutunda bir resim olduğundan emin olun. Evet, ideal koşullarda sprite'ı tekrar kullanabilirsiniz ve eğer birisi bunu anlarsa, nasıl yapıldığını duymaktan mutluluk duyarım. :-)

Bunu yaptıktan sonra, giriş düğmeniz için şu şekilde css yazabilirsiniz:

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

Firefox 14, Chrome 21'de çalışır

IE 9'da çalışmıyor

tl; dr: Biraz css ile gönderme düğmelerinize otomatik olarak simgeler koyabilirsiniz, ancak simgeyi ayrı bir dosyaya koymanız gerekir ve Internet Explorer'da çalışmaz.

Bence bu senin sorunun için bir çözüm

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

Eklenti sınıflarıyla girdi ekleme ekle

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

Sanırım bu daha iyi bir yol, benim için iyi çalışıyor.

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