Bu makale, Bootstrap rozetlerinin kullanımını göstermek için aşağıdaki perspektifleri kapsayacaktır:
- Ek Bilgi İçin Önyükleme Rozeti Nasıl Kullanılır?
- Bağlamsal Bilgiler İçin Önyükleme Rozeti Nasıl Kullanılır?
- Bootstrap Rozetine Özel Stiller Nasıl Eklenir?
- Bootstrap Rozetine Simgeler Nasıl Eklenir?
- Bootstrap Rozeti Başka Bir Kaynağa Nasıl Bağlanır?
- Rozetler Nasıl Yuvarlak Hale Getirilir?
- Önyükleme Rozeti Sayaç Olarak Nasıl Kullanılır?
Önyükleme Rozetleri nedir?
Rozetler, bir göstergeyi göstermek için kullanılan temel bileşenlerdir. Örneğin, bildirimlerin veya mesajların sayısını göstermek için sayısal bir sayaç olarak kullanılabilirler:
Verilen resimde gösterildiği gibi ek bilgileri görüntülemek için de kullanılabilirler:
Ek Bilgi İçin Önyükleme Rozeti Nasıl Kullanılır?
Önyükleme rozetleri, ek bilgi olarak kullanmak için HTML öğelerinin içine eklenebilir. Gösterim için aşağıda belirtilen örneğe göz atın.
Misal
Ek bilgiler için Bootstrap rozetini kullanmak için öncelikle:
- Eklemek ' ' ve ' ' elementler.
- “
“ ile eleman rozet ' ve ' rozet-* ” sınıfları. 'rozet-*' sınıfı, belirtilen renge sahip rozeti ifade eder:
< h6 > burslar < açıklık sınıf = 'rozet rozeti-ikincil' > Yeni < / açıklık >< / h6 >
İlgili başlıklara iki rozetin eklendiği görülmektedir:
Bağlamsal Bilgiler İçin Önyükleme Rozeti Nasıl Kullanılır?
Önyükleme rozetleri, “ gibi bağlamsal bilgiler sağlamak için de kullanılabilir. rozet tehlikesi ” rozeti kırmızı renkte görüntüler ve iptal, geçersiz veya daha fazlası gibi bazı başarısız mesajları göstermek için kullanılabilir. “ rozet-başarı ”, bir başarı mesajı göstermek istediğimizde kullanılır.
Misal
Tartışılan senaryoyu anlamak için verilen koda bakın:
< açıklık sınıf = 'rozet rozeti tehlikesi' >Hesap doğrulanmadı< / açıklık >< açıklık sınıf = 'rozet rozet bilgisi' >bu rozet< / açıklık >
< açıklık sınıf = 'rozet rozet uyarısı' >Hesap Beklemede için onay< / açıklık >
< açıklık sınıf = 'rozet rozeti-başarı' >Hesap doğrulandı< / açıklık >
Çıktı
Bootstrap Rozetine Özel Stiller Nasıl Eklenir?
Bootstrap rozetlerine bazı benzersiz stiller eklemek için CSS'yi de kullanabilirsiniz. Daha iyi anlaşılması için “ isimli bir sınıf gelenek ' arasına eklenir.
< açıklık sınıf = 'rozet rozet bilgisi özel' >Bu rozet< / açıklık >
< açıklık sınıf = 'rozet rozet uyarısı özel' >Hesap Beklemede için onay< / açıklık >
< açıklık sınıf = 'rozet rozeti-başarı özel' >Hesap doğrulandı< / açıklık >
Stil 'özel' sınıf
.gelenek {yazı Boyutu : 18 piksel ;
yazı tipi ağırlığı : 100 ;
harf boşluğu : 1 piksel ;
dolgu malzemesi : 8 piksel 15 piksel ;
}
“ .gelenek ”, “ öğesine erişmek için kullanılır. gelenek ' sınıf. Aşağıdaki özellikler ona uygulanır:
- “ yazı Boyutu ” yazı tipi boyutunu ayarlar.
- “ yazı tipi ağırlığı ” yazı tipinin kalınlığını belirtir.
- “ harf boşluğu ” harflerin arasına boşluk ekler.
- “ dolgu malzemesi ”, öğenin içeriğinin çevresinde boşluk sağlar.
Çıktı
Bootstrap Rozetine Simgeler Nasıl Eklenir?
Rozetlere farklı simgeler de ekleyebiliriz. Bunu yapmak için, bu amaç için kullanılabilecek birkaç sınıf vardır. Daha fazla bilgi için şu adresi ziyaret edin: Harika Yazı Tipi İnternet sitesi.
Misal
HTML'de bir 'ekleyin
< i sınıf = 'uzak fa-kez-daire' >< / i >
< / açıklık >
< açıklık sınıf = 'rozet rozeti-başarı özel' > Hesap doğrulandı
< i sınıf = 'fas fa-user-check' >< / i >
< / açıklık >
Çıktı
Bootstrap Rozeti Başka Bir Kaynağa Nasıl Bağlanır?
Bootstrap rozetlerini tıklanabilir yapmak için “ rozet 'HTML içindeki sınıflar' ” etiketleyin ve bağlantılı sayfanın referansını “ href ' bağlanmak:
< a href = '#' sınıf = 'rozet rozeti-tehlike özel' >İptal< / a >< a href = '#' sınıf = 'rozet rozet bilgisi özel' >Gönder< / a >
Çıktı
Rozetler Nasıl Yuvarlak Hale Getirilir?
Rozet kenarlarını daha yuvarlak hale getirmek için bir sınıf ekleyin ' rozet hapı ”. Bu sınıf daha büyük bir ' sınır yarıçapı ” ve yatay “ dolgu malzemesi ' özellikler:
< açıklık sınıf = 'rozet-hap rozet-tehlike özel' >Hesap doğrulanmadı < / açıklık >< açıklık sınıf = 'rozet-hap rozet-uyarı özel' >Hesap Beklemede için onay< / açıklık >
< açıklık sınıf = 'rozet-hap rozet-başarı özel' >Hesap doğrulandı < / açıklık >
Çıktı
Önyükleme Rozeti Sayaç Olarak Nasıl Kullanılır?
Sayaçlı bir düğme oluşturmak için bir HTML ekleyin '
Bildirimler < açıklık sınıf = 'rozet rozet ışığı' > 4 < / açıklık >
< / buton >
Çıktı
Bu tamamen Bootstrap rozetleri ve Bootstrap'teki ilgili etiketleriyle ilgiliydi.
Çözüm
Önyükleme “ rozet ” sınıfı web sitesine rozet eklemek için kullanılır. Örneğin, “ gibi sınıflar rozet tehlikesi ”, “ rozet bilgisi ” ve rozetlere etiketleri olarak bağlamsal bilgiler eklemek için daha fazlası kullanılabilir. Rozetlere simgeler eklemek için bazı sınıflar uygulanır, örneğin “ uzak fa-kez-daire ” bir çapraz daire simgesi yerleştirmek için. Bu gönderi, Bootstrap rozetleri ve etiketleri hakkında kapsamlı bir kılavuz sağladı.