ความแตกต่างระหว่าง 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-อินไลน์ระดับ