Bu makale size şunları öğretecektir:
- Bootstrap'te Düğmeler Nasıl Yapılır?
- Bootstrap'te Anahat Düğmeleri Nasıl Oluşturulur?
- Önyükleme Düğme Boyutları Nasıl Ayarlanır?
- Bootstrap'te Blok Düzeyinde Düğme Nasıl Yapılır?
- Bootstrap'te Aktif Durum Düğmeleri Nasıl Oluşturulur?
- Bootstrap'te Engelli Durum Düğmeleri Nasıl Oluşturulur?
Bootstrap'te Düğmeler Nasıl Yapılır?
Önyükleme “ btn ” sınıfı buton oluşturmak için kullanılır. Stil düğmeleri eklemek için “ btn ' gibi renk sınıfına sahip sınıf btn-başarı ” yeşil bir düğme oluşturmak için.
HTML'de '
Net bir konsept için aşağıdaki örneğe bakın.
Misal
HTML dosyasında, farklı etiketler kullanarak düğmeler oluşturmak için aşağıdaki adımları izleyin:
- Eklemek '
' ve ' ” öğeler ve onları atayın ' btn ' ve ' btn-birincil ” sınıfları. - Ardından, bir “
' türüyle etiketleyin ' buton ”. “ btn ' ve ' btn-başarı ” ilk iki düğmeyi mavi, üçüncüyü yeşil olarak biçimlendirmek için:
< a sınıf = 'btn btn-birincil' href = '#' > Açık < / a >
< giriş tip = 'buton' sınıf = 'btn btn-başarı' değer = 'Arama' >
Çıktı
Bootstrap'te Anahat Düğmeleri Nasıl Oluşturulur?
Düğme ana hatlarını eklemek için Bootstrap ' btn-anahat-* ” sınıfı kullanılır. Söz diziminde,“ * ” burada anahat rengini temsil eder. Örneğin, ' btn-anahat-tehlike ” kırmızı konturu yerleştirir, “ btn-anahat-birincil ” mavi dış çizgiyi ve daha fazlasını ayarlar.
Aşağıda verilen kodu analiz edin:
< buton tip = 'buton' sınıf = 'btn btn-anahat-birincil' >İleri< / buton >< buton tip = 'buton' sınıf = 'btn btn-anahat-tehlike' >İptal< / buton >
< buton tip = 'buton' sınıf = 'btn btn-anahat-başarı' >başarı< / buton >
gözlemlenebilir ki, “ Sonraki ” düğmesinin dış çizgisi mavidir, “ İptal kırmızı çerçeveli ” düğmesi ve “ Başarı ” düğmesi yeşil bir dış hatla biçimlendirildi:
Önyükleme Düğme Boyutları Nasıl Ayarlanır?
Düğme boyutlarını ayarlamak için bazı Bootstrap sınıfları uygulanır, örneğin:
- “ btn-lg ” sınıfı, büyük bir düğme oluşturmak için uygulanır. Bu sınıf, yazı tipi boyutunu ve dolguyu artırabilir.
- “ btn-md ” orta büyüklükte bir düğme oluşturur.
- “ btn-sm ” küçük bir düğme oluşturur.
Misal
Şimdi, farklı boyutlara ve açıklayıcı adlara sahip üç düğme oluşturacağız:
< buton tip = 'buton' sınıf = 'btn btn-ikincil btn-lg' >Büyük< / buton >< buton tip = 'buton' sınıf = 'btn btn-uyarı btn-md' >orta< / buton >
< buton tip = 'buton' sınıf = 'btn btn-tehlike btn-sm' >Küçük< / buton >
Çıktı
Bootstrap'te Blok Düzeyinde Düğme Nasıl Yapılır?
Blok düzeyindeki düğmeler, tam genişlikte boyutu tutan düğmelerdir. Blok seviyesi düğmeleri oluşturmak için, “ btn-blok ” sınıfı şu şekilde kullanılır
< buton tip = 'buton' sınıf = 'btn btn-uyarı btn-blok' > düğme< / buton >< buton tip = 'buton' sınıf = 'btn btn-ikincil btn-blok' >düğme< / buton >
Çıktı
Bootstrap'te Aktif Durum Düğmeleri Nasıl Oluşturulur?
Etkin durum düğmeleri, o anda etkin olan düğmeleri ifade eder. Bu düğmeler normalden biraz daha koyu. Bu tür düğmeleri oluşturmak için Bootstrap ' aktif ” sınıfı kullanılmaktadır.
Misal
Aşağıdaki kod iki düğme oluşturur. Birincisi normal durumda iken diğeri “ ile uygulanmaktadır. aktif ' sınıf:
< buton tip = 'buton' sınıf = 'btn btn-başarılı' >başarı< / buton >< buton tip = 'buton' sınıf = 'btn btn-başarı aktif' >başarı< / buton >
Çıktı
Bootstrap'te Engelli Durum Düğmeleri Nasıl Oluşturulur?
Devre dışı durum düğmeleri, tıklanamaz ve kullanılamaz olan düğmeleri ifade eder. Bootstrap'ta ' engelli ” sınıfı, devre dışı bırakılmış bir durum düğmesi oluşturmak için kullanılır. “ engelli ” niteliği de bu amaçla kullanılabilir.
Misal
Aşağıda verilen örneği inceleyin:
- İlk düğme devre dışı durumda değil.
- İkincisi “ engelli Devre dışı bırakılmış bir durum düğmesi oluşturmak için ” sınıfı.
- Üçüncüsü “ engelli ' bağlanmak:
< buton tip = 'buton' sınıf = 'btn btn-success devre dışı bırakıldı' >başarı< / buton >
< buton tip = 'buton' sınıf = 'btn btn-başarılı' devre dışı>Başarı< / buton >
Çıktı
Bootstrap düğmeleri ve CSS'deki stilleri ile ilgili farklı yönleri ele aldık.
Çözüm
“ btn ” sınıfı, basit bir tasarıma sahip Bootstrap düğmeleri oluşturmak için kullanılır. Renkli ve ana hatlı düğmeler oluşturmak için, “ btn-* ' ve ' btn-anahat-* ” sınıfları, “ * ” herhangi bir renk sınıfını sembolize eder. Örneğin, ' btn-uyarı ” sarı bir düğme oluşturur, “ btn-anahat-uyarı ”, sarı çerçeveli bir düğme ve daha fazlasını oluşturur. Butonları aktif veya pasif yapmak için sırasıyla “aktif” ve “devre dışı” sınıfları uygulanır. Bu gönderi, Önyükleme düğmeleri hakkında kapsamlı bir kılavuz sağladı.