Bootstrap 4 Buttons sınıfları ile <a>, <button> ya da <input> etiketleri için kullanabilecek olduğumuz bootstrap button sınıfları ile güzel görünümlü butonları saniyeler içinde oluşturabiliriz.
<a href="#" class="btn btn-primary" role="button">Link Button</a> <button type="button" class="btn btn-danger">Button</button> <input type="button" class="btn btn-success" value="Input Button"> <input type="submit" class="btn btn-warning" value="Submit Button">
Örnek 1 için tıklayınız.
Bootstrap 4 button oluşturmak için ilk olarak .btn sınıfını ilgili etikete vermeliyiz ardından farklı stildeki butonlar için kullanabilecek olduğumuz button sınıflarından (.btn-primary, .btn-secondary, .btn-success, .btn-danger, .btn-warning, .btn-info, .btn-dark, .btn-light) bir tane seçmeliyiz.
<button type="button" class="btn">Basic</button> <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-secondary">Secondary</button> <button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-danger">Danger</button> <button type="button" class="btn btn-dark">Dark</button> <button type="button" class="btn btn-light">Light</button> <button type="button" class="btn btn-link">Link</button>
Örnek 2 için tıklayınız.
Bootstrap 4 ile outline butonuda oluşturabiliriz.
Örnek 3 için tıklayınız.
Bootstrap 4 ile farklı boyutlarda buton oluşturmak için kullanabileceğimiz .btn-sm, .btn-large ve .btn-block sınıfları vardır.
<button type="button" class="btn btn-primary btn-lg">Large</button> <button type="button" class="btn btn-primary">Default</button> <button type="button" class="btn btn-primary btn-sm">Small</button>
** .btn-sm ile küçük bir buton .btn-large ile büyük bir buton oluşturabiliriz.
Örnek 4 için tıklayınız.
** .btn-block sınıfı ile bir block eleman şeklinde yani satırı olduğu gibi kaplayan bir buton oluşturabiliriz.
<button type="button" class="btn btn-primary btn-block">Full-Width Button</button>
Örnek 5 için tıklayınız.
** .active sınıfı ile butona tıklanmış hissi verebiliriz.
** .disabled sınıfı ile butonu pasif hale getirebiliriz ancak <a> etiketi için .disabled sadece görüntü açısından pasif hissini verir.
<button type="button" class="btn btn-primary active">Active Primary</button> <button type="button" class="btn btn-primary" disabled>Disabled Primary</button> <a href="#" class="btn btn-primary disabled">Disabled Link</a>
Örnek 6 için tıklayınız.