Bootstrap button class’larını kullanarak çok kısa sürede sade ve şık butonlar yapabiliriz. Css kodu yazarak da istediğimiz butonları oluşturabiliriz ama zamandan kazanmak adına kesinlikle Bootstrap kullanmanızı tavsiye ederim. Bootstrap button class’larını <a>, <input> veya <button> etiketleri ile kullanıyoruz. Butonları hangi amaç için kullanacaksanız ona göre seçmelisiniz. Örneğin;
- Bir link button oluşturmak istiyorsanız <a> etiketini kullanabilirsiniz.
- Bir submit button oluşturmak istiyorsanız <input> etiketini kullanabilirsiniz.
- Normal button oluşturmak istiyorsanız <button> etiketini kullanabilirsiniz.
⇒ Bootstrap button oluşturmak için yapmamız gerekenler:
- Hangi etiketi kullanacağımıza (<a>, <input>, <button>) karar verip onu yazıyoruz.
- Oluşturduğumuz etiketinin class’ına btn yazıyoruz. Hangi butonu oluşturuyorsanız oluşturun bu class’ı hepsi için yazıyoruz.
- Son olarak butonun hangi renkte olmasını istiyorsak ona uygun renk class’ını yazıyoruz.
Bootstrap button renk class’ları şunlardır:
- btn-success
- btn-info
- btn-warning
- btn-danger
- btn-primary
- btn-secondary
- btn-light
- btn-dark
- btn-link
⇒ Şimdi tüm butonları uygulamalı olarak görelim. Kodlarımız şu şekilde;
|
1 2 3 4 5 6 7 8 9 10 11 |
<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-danger">Danger</button> <button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-light">Light</button> <button type="button" class="btn btn-dark">Dark</button> <button type="button" class="btn btn-link">Link</button> |
Butonların görünümü;
Gördüğünüz gibi oluşturduğumuz Html etiketlerine birkaç class yazarak hızlı bir şekilde çok güzel butonlar oluşturabiliyoruz. Dikkat ederseniz vermiş olduğumuz ikinci class’a göre butonların rengi değişiyor. Sizde hangisini kullanmak istiyorsanız ona uygun class’ı seçmelisiniz.
⇒ Yine aynı şekilde Html etiketlerine bazı class’ları yazarak butonların boyutunu değiştirebiliriz. Örneğin;
- btn-sm class’ını yazarak butonu küçültebiliriz.
- btn-lg class’ını yazarak butonu büyültebiliriz.
- btn-block class’ını yazarak butonun block element olmasını sağlayabiliriz. Yani bulunduğu satırı tamamen kaplar.
Bunları da örnek üzerinde görelim. Kodlarımız şu şekilde;
|
1 2 3 4 5 |
<button type="button" class="btn btn-primary btn-sm">Primary</button> <button type="button" class="btn btn-primary btn-lg">Primary</button> <button type="button" class="btn btn-primary btn-block">Primary</button> |
Butonların görünümü;
⇒ Bootstrap class’ları ile outline butonlarda oluşturabiliyoruz.
Bootstrap outline button renk class’ları şunlardır:
- btn-outline-success
- btn-outline-info
- btn-outline-warning
- btn-outline-danger
- btn-outline-primary
- btn-outline-secondary
- btn-outline-light
- btn-outline-dark
Outline butonları da örnek üzerinde görelim. Kodlarımız şu şekilde;
|
1 2 3 4 5 6 7 8 9 10 |
<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-danger">Danger</button> <button type="button" class="btn btn-outline-warning">Warning</button> <button type="button" class="btn btn-outline-info">Info</button> <button type="button" class="btn btn-outline-light">Light</button> <button type="button" class="btn btn-outline-dark">Dark</button> |
Butonların görünümü;
⇒ Son olarak Bootstrap ile animasyonlu butonları nasıl yapabiliriz ona bakalım.
Hiç Css kodu yazmadan sadece Html ve Bootstrap class’ları ile animasyonlu loading (yükleniyor..) butonu oluşturalım. Kodlarımız şu şekilde;
|
1 2 3 4 5 6 |
<button class="btn btn-primary"> <span class="spinner-border spinner-border-sm"></span> Loading.. </button> |
Animasyonlu loading butonunun görünümü;
Umarım sizin için faydalı bir yazı olmuştur.
Farklı bir yazımda görüşmek üzere.
){kind=link}
Bana çok yardımı oldu sağolun
Rica ederim.