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 |