BOOTSTRAP 4 – (BUTONLAR)

[Fauda]

Metin2 EP, Valorant VP dahil tüm oyun ürünlerini en uygun fiyatlarla bulabilir, Item ve Karakterlerinizi hızlıca satabilirsiniz. HEMEN TIKLA!

BOOTSTRAP 4 – BUTTONS (BUTONLAR)​

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;

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.
• tn-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;

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;

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