Bu yazı, Bootstrap modalının nasıl stillendirileceğini açıklayacaktır.
Bootstrap modalına nasıl Stil Verilir?
Bootstrap kipine nasıl stil verileceğini öğrenmek için aşağıdaki adımları izleyin.
1. Adım: Bir HTML Dosyası Oluşturun
İlk olarak, aşağıda verilen talimatları izleyerek bir model oluşturun:
- Oluşturmak ' 'konteyner ve ona bir sınıf atayın' main-modal-container ”.
- Ardından, kalıcı pencereyi tetikleyecek bir düğme ekleyin. “ btn ”, “ btn-birincil ', Ve ' gösteri kipli ” sınıfları. Veri özniteliklerini ayarlayın ' veri değiştirme 'değeri ile' modal ' ve ' veri hedefi ' ile ' #myModal ' değer. Bu kimlik, modal pencerenin kimliğine işaret ediyor.
- Ardından, kalıcı pencereyi oluşturun. Bunu yapmak için bir “
” öğe ve ata ' modal ' Ve ' solmak ” sınıfları ve kimliği ayarlayın.- Ekle '
modalın iletişim kutusu için ” ve ona “ atayın modal diyalog ' sınıf.- Ardından, kipin içeriğini bir '
' içinde belirtin ve ona '' sınıfını atayın. modal içerik ”.- ' sınıfıyla bir kapat düğmesi yapın. kapalı ”. “ veri reddi ” özniteliği, modal pencereyi kapatmak için kullanılır.
- Ardından, modal gövdeyi sınıflarla belirtin ' modal gövde ' Ve ' sıra ”. İçinde, görüntü için 6 ızgara ve içerik için 6 sütun alın.
- Görüntü, “ kullanılarak gömülür.
' etiket.
- Ardından, “içinde
“ ile eleman içerik ” sınıfı, başlığı, alt başlığı ve açıklamayı ekleyin.- Bundan sonra, Bootstrap ile bir düğme yerleştirin ' btn ”, “ btn-tehlike ', Ve ' p-2 ” sınıfları:
< div sınıf = 'ana modal kapsayıcı' >
< düğme sınıf = 'btn btn-birincil gösteri kipli' veri değiştirme = 'kip' veri- hedef = '#benimKipim' > modeli görüntüle < / düğme >
< div sınıf = 'Kipsel solma' İD = 'benim Modum' >
< div sınıf = 'modsal diyalog' >
< div sınıf = 'modsal içerik' >
< düğme sınıf = 'kapalı' veri reddi = 'kip' >
< açıklık > × < / açıklık >< / düğme >
< div sınıf = 'modal gövde sırası' >
< div sınıf = 'col-sm-6 modal görüntü' >< img kaynak = '/img/kıyafetler.jpg' >< / div >
< div sınıf = 'içerik col-sm-6' >
< h3 sınıf = 'başlık' > Özel teklif < / h3 >
< açıklık sınıf = 'alt yazı' > Paket servis ve teslimatta %20 indirim < / açıklık >
< P sınıf = 'Tanım' > En kaliteli gömlekler. Her beden mevcuttur. Kolayca yıkanabilir. < / P >
< düğme sınıf = 'btn btn-tehlike p-2' > DAHA FAZLA GÖSTER < / düğme >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >Adım 2: “main-modal-container” Sınıfı Stili
Konteynerin tamamı CSS ile biçimlendirilmiştir ' font ailesi ' mülk:
.main-modal-konteyner {
font ailesi : 'Poppinler' , sans Serif ;
}3. Adım: “Show-modal” Sınıfı Stili
“ gösteri kipli ” sınıfı aşağıdaki özelliklerle bildirilir:
.main-modal-konteyner .show-modal {
renk : #ffff ;
arka plan rengi : #3a97c9 ;
metin dönüşümü : büyük harfle yazmak ;
dolgu malzemesi : 10 piksel 15 piksel ;
marj : 80 piksel Oto 0 ;
görüntülemek : engellemek ;
}Burada:
- “ renk ” yazı tipi rengini ayarlar.
- “ arka plan rengi ” öğesinin arka plan rengini ayarlar.
- “ metin dönüşümü ” metni büyük harfle yazar.
- “ dolgu malzemesi ”, öğenin içeriğinin etrafındaki boşluğu ayarlar.
- “ marj ” öğesinin etrafında boşluk oluşturur.
- “ görüntülemek 'değeri ile' engellemek ” öğesinin genişliğini %100 olarak ayarlar.
Adım 4: Fade'de 'modal-dialog' Sınıfı Stili
.modal .solmak .modal-diyalog {
dönüştürmek : ölçek ( 0 ) ;
geçiş : Tümü 450ms kübik beziyer ( .47 , 1.64 , .41 , .8 ) ;
}Modal kaybolduğunda, aşağıdaki CSS özellikleri “ modal diyalog ' sınıf:
- “ dönüştürmek ' özelliği ile ' ölçek() ” değeri, öğenin boyutunu dikey veya yatay olarak artırır veya azaltır.
- “ geçiş ” öğeyi kademeli olarak hareket ettirir. “ kübik-bezier() ” işlevi kübik bezier eğrisini uygular. Dört nokta ile belirlenir.
Adım 5: Gösteride 'modal-dialog' Sınıfı Stili
.modal .göstermek .modal-diyalog {
dönüştürmek : ölçek ( 1 ) ;
}CSS “ dönüştürmek ' değeri olan özellik ' ölçek(1) ” iletişim kutusunun boyutunu büyütür.
Adım 6: 'Kipsel içerik' Sınıfı Stili
.main-modal-konteyner .modal-diyalog .modal içerik {
sınır yarıçapı : 30 piksel ;
sınır : hiçbiri ;
taşma : gizlenmiş ;
}“ modal içerik ” aşağıdaki özelliklerle dekore edilmiştir:
- “ sınır yarıçapı ”, öğenin kenarlarını yuvarlar.
- “ sınır 'değeri ile' hiçbiri ” sınırı gizler.
- “ taşma ” içeriğin akışını kontrol eder.
7. Adım: 'Kapat' Sınıfı Stili
.main-modal-konteyner .modal-diyalog .modal içerik .kapalı {
renk : #747474 ;
arka plan rengi : rgba ( 255 , 255 , 255 , 0,5 ) ;
yükseklik : 27 piksel ;
Genişlik : 27 piksel ;
dolgu malzemesi : 0 ;
opaklık : 1 ;
taşma : gizlenmiş ;
konum : mutlak ;
Sağ : 15 piksel ;
tepe : 15 piksel ;
z-endeksi : 2 ;
}Burada:
- “ opaklık ”, öğenin şeffaflık seviyesini tanımlar.
- “ konum 'değeri ile' mutlak ”, öğenin konumunu üst konumuna göre ayarlar.
- “ Sağ ' Ve ' tepe ” Kapat düğmesinin sağında ve üstünde boşluk ayarlayın.
- “ z-endeksi ”, öğenin yığın sırasını belirtir. Daha büyük yığın sırası, öğeyi öne getirir.
8. Adım: 'Modal-body' Sınıfı Stili
.main-modal-konteyner .modal-diyalog .modal içerik .modal-body {
dolgu malzemesi : 0 !önemli ;
}Modal gövdenin tamamı etrafındaki boşluk, CSS ile ayarlanır ' dolgu malzemesi ' mülk. Ayrıca, “ !önemli ” anahtar sözcüğü, öğenin önemini belirlemek için kullanılır.
9. Adım: “img” Öğesine Stil Ver
.main-modal-konteyner .modal-diyalog .modal içerik .modal-body .modal resim img {
yükseklik : 100% ;
Genişlik : 100% ;
}10. Adım: 'İçerik' Sınıfının Stilini Belirleyin
.main-modal-konteyner .modal-diyalog .modal içerik .modal-body .içerik {
dolgu malzemesi : 35 piksel 30 piksel ;
}“ kullanarak dolgu malzemesi ” özelliği, “ öğesinin etrafına boşluk eklenir içerik ” sınıfının içeriği.
Adım 11: Stil 'başlık' Sınıfı
.main-modal-konteyner .modal-diyalog .modal içerik .modal-body .başlık {
renk : #fb3640 ;
font ailesi : 'Sacramento' , el yazısı ;
yazı Boyutu : 35 piksel ;
}Burada:
- “ font ailesi ” yazı tipinin stilini tanımlar.
- “ yazı Boyutu ” yazı tipinin boyutunu ayarlar.
Adım 12: “Alt Başlık” Sınıfına Stil Verin
.main-modal-konteyner .modal-diyalog .modal içerik .modal-body .alt yazı {
yazı tipi ağırlığı : 600 ;
metin dönüşümü : büyük harf ;
marj : 0 0 20 piksel ;
görüntülemek : engellemek ;
}Verilen kod parçacığına göre:
- “ yazı tipi ağırlığı ” yazı tipinin kalınlığını ayarlar.
- “ metin dönüşümü ” yazı tipi durumunu ayarlar.
Çıktı
Bootstrap kipini bu şekilde şekillendirebilirsiniz.
Çözüm
Bootstrap modal penceresini biçimlendirmek için önce kipi tetikleyecek düğmeyi ekleyin. Ardından, HTML öğelerini kullanarak kalıcı pencereyi oluşturun. Bundan sonra, ' dahil olmak üzere birkaç CSS özelliği ekleyin. dolgu malzemesi ”, “ marj ”, “ renk ”, “ geçiş ” ve kalıcı pencereyi biçimlendirmek için daha pek çok şey. Daha spesifik olarak, “ kübik-bezier ” fonksiyonu, modal pencerede dört noktalı bir eğride geçiş efekti uygulamak için kullanılır. Bu gönderi, Bootstrap kipini biçimlendirme prosedürünü açıkladı.