ความแตกต่างระหว่าง Bootstrap 3 และ 4

คำอธิบาย

Bootstrap เป็นเฟรมเวิร์กส่วนหน้าแรกสำหรับอุปกรณ์เคลื่อนที่ที่มีประสิทธิภาพและเป็นที่นิยมสำหรับการสร้างไซต์แรกสำหรับอุปกรณ์เคลื่อนที่ที่ตอบสนองบนเว็บโดยใช้เฟรมเวิร์ก HTML, CSS และ JS

ตารางต่อไปนี้แสดงความแตกต่างของ Bootstrap 3 และ Bootstrap 4 -

ส. ส่วนประกอบ Bootstrap 3 Bootstrap 4
1 ไฟล์ต้นฉบับ CSS น้อย วทส
2 ระบบกริด ระบบกริด 4 ชั้น (xs, sm, md, lg) ระบบกริด 5 ชั้น (xs, sm, md, lg, xl)
3 หน่วย CSS px rem
4 ขนาดตัวอักษร 14px 16px
5 โครงสร้างแบบเลื่อนลง สร้างด้วย <ul> และ <li> สร้างด้วย <ul> หรือ <div>
6 การหักล้างคอลัมน์ col-md-offset-4 ชดเชย -md-4
7 รูปภาพ .img-responsiveคลาส .img-fluid คลาส
8 ตาราง เพิ่มคลาส. table-responsiveให้กับองค์ประกอบ <div> พาเรนต์ เพิ่มคลาส. table -responsiveให้กับองค์ประกอบ <table>
9 ไกลฟิคอน ได้รับการสนับสนุน ไม่รองรับ
10 วัตถุสื่อ การเรียนการใช้วัตถุสื่อเช่น.media , .media ร่างกาย , .media วัตถุ , .media หัวข้อ , .media ขวา , .media ซ้าย , .media รายการและ.media ร่างกาย ใช้เพียง.mediaระดับสำหรับวัตถุสื่อ
11 ตารางมืด / ผกผัน ไม่รองรับ ใช้. table-dark class เพื่อสร้างตารางมืด / ผกผัน
12 ช่องทำเครื่องหมายและปุ่มวิทยุ แสดงช่องทำเครื่องหมายและปุ่มวิทยุโดยใช้.radio , .radio-อินไลน์ , .checkboxหรือ.checkbox-อินไลน์ชั้นเรียน แสดงช่องทำเครื่องหมายและปุ่มวิทยุโดยใช้.form ตรวจสอบ , .form เช็คอินฉลาก , .form เช็คอินการป้อนข้อมูลหรือ.form เช็คอินแบบอินไลน์ชั้นเรียน
13 ขนาดควบคุมฟอร์ม เพิ่มหรือลดขนาดของการควบคุมการป้อนข้อมูลโดยใช้.input-LGและ.input-SMชั้นเรียน เพิ่มหรือลดขนาดของการควบคุมการป้อนข้อมูลโดยใช้.form ควบคุม-LGและ.form ควบคุม-SMชั้นเรียน
14 ข้อความช่วยเหลือ แสดงข้อความช่วยเหลือโดยใช้.help บล็อกระดับ แสดงข้อความช่วยเหลือโดยใช้.form ข้อความระดับ
15 รูปแบบ ใช้คลาส. btn-defaultและ. btn-infoบนปุ่ม ใช้คลาส. btn-secondary , .btn-lightและ. btn-darkบนปุ่มและทิ้งคลาส. btn-default
16 ปุ่มเค้าร่าง ไม่รองรับ จัดรูปแบบปุ่มด้วยสีเค้าร่างโดยใช้คลาส. btn-outline- *
17 ขนาดปุ่ม .btn-XSระดับใช้ได้ ใช้ได้เฉพาะ.btn-SMและ.btn-LGชั้นเรียนและการลดลง.btn-XSระดับ
18 ส่วนหัวของเมนู ใช้. dropdown-header class กับแท็กli ใช้. dropdown-header class กับแท็กh1 - h2
19 วงเวียน ใช้คลาส. dividerในองค์ประกอบ li ใช้คลาส. dropdown-dividerในองค์ประกอบ div
20 Navbars คงที่ แก้ไขแถบนำทางไปยังด้านบนหรือด้านล่างโดยใช้.navbar คงที่ด้านบนและ.navbar คงที่ด้านล่างชั้นเรียน แก้ไขแถบนำทางไปยังด้านบนหรือด้านล่างโดยใช้.fixed บนและ.fixed ล่างชั้นเรียน
21 เพจเจอร์ จัดเรียงหน้าโดยใช้คลาส. ก่อนหน้าและ. ถัดไป ไม่รองรับ
22 Jumbotron เต็มความกว้าง ไม่ใช้คลาส. jumbotron-fluidบน jumbotrons แบบเต็มความกว้าง ใช้คลาส. jumbotron-fluidสำหรับ jumbotrons แบบเต็มความกว้าง
23 รายการแบบหมุน ใช้คลาส. itemสำหรับรายการแบบหมุน ใช้คลาส. carousel-itemสำหรับรายการแบบหมุน
24 เวลส์แผงและภาพขนาดย่อ ได้รับการสนับสนุน ไม่รองรับ ใช้การ์ดแทน
25 การนำทางแบบอินไลน์ แต่ไม่รวมถึง.nav-อินไลน์ระดับ แสดงสุทธิต่อหน่วยลงทุนเป็นแบบอินไลน์โดยใช้.nav-อินไลน์ระดับ