Önyükleme 4 Düğme
Düğme Stilleri
Bootstrap 4, farklı düğme stilleri sağlar:
Örnek
<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>
Düğme sınıfları <a>, <button>, veya
<input>öğelerinde kullanılabilir:
Örnek
<a href="#" class="btn btn-info" role="button">Link Button</a>
<button type="button" class="btn btn-info">Button</button>
<input type="button" class="btn btn-info" value="Input Button">
<input type="submit" class="btn btn-info" value="Submit Button">
Bağlantının href niteliğine neden # koyuyoruz?
Link verecek sayfamız olmadığı ve "404" mesajı almak istemediğimiz için link olarak # koyuyoruz. Gerçek hayatta elbette "Ara" sayfasının gerçek bir URL'si olmalıdır.
Düğme Anahat
Bootstrap 4, sekiz anahat/kenarlıklı düğme sağlar:
Örnek
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button
type="button" class="btn btn-outline-warning">Warning</button>
<button
type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
<button
type="button" class="btn btn-outline-light text-dark">Light</button>
Düğme Boyutları
.btn-lgBüyük düğmeler için sınıfı veya küçük düğmeler için sınıfı kullanın .btn-sm:
Örnek
<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>
Blok Seviyesi Düğmeleri
.btn-blockAna öğenin tüm genişliğini kapsayan bir blok düzeyinde düğme oluşturmak için sınıf ekleyin .
Örnek
<button type="button" class="btn btn-primary btn-block">Full-Width
Button</button>
Aktif/Devre Dışı Düğmeler
Bir düğme, etkin (basılı gibi görünüyor) veya devre dışı (tıklanamaz) bir duruma ayarlanabilir:
Sınıf .active, bir düğmenin basılı görünmesini sağlar ve disabledöznitelik, bir düğmeyi tıklanamaz hale getirir. <a> öğelerinin devre dışı özniteliği desteklemediğini ve bu nedenle .disabledgörsel olarak devre dışı görünmesi için sınıfı kullanması gerektiğini unutmayın.
Örnek
<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>
Döner Düğmeler
Ayrıca bir düğmeye "döndürücüler" de ekleyebilirsiniz; bu, BS4 Döndürücüler Eğitimimizde hakkında daha fazla bilgi edineceksiniz :
Örnek
<button class="btn btn-primary">
<span class="spinner-border
spinner-border-sm"></span>
</button>
<button class="btn
btn-primary">
<span class="spinner-border
spinner-border-sm"></span>
Loading..
</button>
<button
class="btn btn-primary" disabled>
<span class="spinner-border
spinner-border-sm"></span>
Loading..
</button>
<button class="btn btn-primary" disabled>
<span
class="spinner-grow spinner-grow-sm"></span>
Loading..
</button>