Bootstrap 3 ve 4 Arasındaki Farklar

Açıklama

Bootstrap, HTML, CSS ve JS çerçevesini kullanarak web üzerinde duyarlı mobil ilk siteler oluşturmak için güçlü ve popüler bir mobil ilk ön uç çerçevedir.

Aşağıdaki tablo Bootstrap 3 ve Bootstrap 4'teki farklılıkları göstermektedir -

S.No. Bileşen Önyükleme 3 Önyükleme 4
1 CSS kaynak dosyaları AZ SCSS
2 Izgara Sistemi 4 katmanlı ızgara sistemi (xs, sm, md, lg) 5 katmanlı ızgara sistemi (xs, sm, md, lg, xl)
3 CSS Birimi pks rem
4 Yazı Boyutu 14px 16px
5 Açılır Yapısı <ul> ve <li> ile oluşturulmuştur <ul> veya <div> ile oluşturuldu
6 Ofset Sütunları col-md-ofset-4 ofset-md-4
7 Görüntüler .img-duyarlı sınıf .img-Fluid sınıfı
8 Tablolar .Table-responsive sınıfı üst <div> öğesine ekleyin <table> öğesine .table-duyarlı sınıfı ekleyin
9 Glifikonlar Destekleniyor Desteklenmiyor
10 Medya Nesneleri .Media , .media-body , .media-object , .media-heading , .media-right , .media-left , .media-list ve .media-body gibi medya nesneleri için sınıfları kullanır Medya nesneleri için sadece .media sınıfını kullanır .
11 Koyu / ters Tablolar Desteklenmiyor Karanlık / ters tablolar yapmak için .table-dark sınıfını kullanır
12 Onay Kutuları ve Radyo Düğmeleri .Radio , .radio-inline , .checkbox veya .checkbox-inline sınıflarını kullanarak onay kutularını ve radyo düğmelerini görüntüler .Form-check , .form-check-label , .form-check-input veya .form-check-inline sınıflarını kullanarak onay kutularını ve radyo düğmelerini görüntüler
13 Form Kontrol Boyutu .İnput-lg ve .input-sm sınıflarını kullanarak bir girdi denetiminin boyutunu artırın veya azaltın .Form-control-lg ve .form-control-sm sınıflarını kullanarak bir giriş denetiminin boyutunu artırın veya azaltın
14 Yardım Metni .Help-block sınıfını kullanarak yardım metnini görüntüleyin .Form-text sınıfını kullanarak yardım metnini görüntüleyin
15 Stilleri Düğmelerde .btn-default ve .btn-info sınıflarını kullanır Kullanımları .btn-ikincil , .btn ışık ve .btn-karanlık düğmeleri sınıflar ve düştü .btn varsayılan sınıfı.
16 Anahat Düğmeleri Desteklenmiyor .Btn-anahat- * sınıfını kullanarak düğmeleri anahat rengiyle biçimlendirin
17 Düğme Boyutları .Btn-xs sınıf mevcuttur Yalnızca .btn-sm ve .btn-lg sınıfları mevcuttur ve .btn-xs sınıfını kaldırmıştır
18 Menü Başlıkları Kullanım .dropdown-başlık için sınıf li etiketi Kullanım -header .dropdown için sınıf h1 - h2 etiketleri
19 Bölücüler Li öğesinde .divider sınıfını kullanın Div öğesinde .dropdown-divider sınıfını kullanın
20 Sabit Navbarlar .Navbar-fixed-top ve .navbar-fixed-bottom sınıflarını kullanarak navbar'ı yukarı veya aşağı sabitleyin .Fixed-top ve .fixed-bottom sınıflarını kullanarak navbar'ı yukarı veya aşağı sabitleyin
21 Çağrı cihazları .Previous ve .next sınıflarını kullanarak sayfaları hizalayın Desteklenmiyor
22 Jumbotron Tam Genişlik O kullanır gelmez .jumbotron-sıvı tam genişlikli jumbotron üzerinde sınıf Tam genişlikli jumbotronlar için .jumbotron-sıvı sınıfını kullanır
23 Atlı Karınca Öğesi Atlıkarınca öğeleri için .item sınıfını kullanır . Atlıkarınca öğeleri için .carousel-item sınıfını kullanır .
24 Kuyular, Paneller ve Küçük Resimler Destekleniyor Desteklenmiyor. Bunun yerine kartları kullanın
25 Satır İçi Gezinmeler .Nav-inline sınıfını içermez .Nav-inline sınıfını kullanarak nav'leri satır içi olarak görüntüleyin