1352

Komple Uygulamalı Web Geliştirme Eğitimi | 2019

Bootstrap Buttons

Bootstrap 4 Button Kullanımı


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.

Paylaş