Bootstrap 3 vs Bootstrap 4 – ภาพรวม

Bootstrap เป็น front-end-framework โอเพ่นซอร์สที่น่าเชื่อถือที่สุดในการพัฒนาเว็บไซต์ที่ตอบสนองและเน้นมือถือเป็นหลัก Bootstrap เป็นเฟรมเวิร์กที่มีชื่อเสียง ทำไม??? เพราะทั้งหมดที่ต้องใช้คือความรู้พื้นฐานเกี่ยวกับ HTML และ CSS และเราสามารถสร้างเว็บไซต์ที่น่าสนใจและใช้งานได้โดยใช้คลาส Bootstrap ที่กำหนดไว้ล่วงหน้าซึ่งดูแลการตอบสนองบนอุปกรณ์ต่างๆ

Bootstrap 3 เปิดตัวในปี 2013 และรุ่นที่เสถียรล่าสุด Bootstrap 3.3.7 วางจำหน่ายในเดือนกรกฎาคม 2559 ในเดือนตุลาคม 2014 Twitter ประกาศว่า Bootstrap 4 อยู่ในระหว่างการพัฒนา Bootstrap 4 รุ่นอัลฟารุ่นแรกเปิดตัวในเดือนสิงหาคม 2558 และตอนนี้ในเดือนสิงหาคม 2560 รุ่น Bootstrap 4.0.0 เบต้าเปิดตัว คุณสามารถดูบทช่วยสอน Bootstrap เชิงลึกนี้ได้ หากคุณต้องการเริ่มเรียนรู้จาก 0

จุดสนใจของโพสต์นี้จะอยู่ที่ความแตกต่าง การเพิ่ม และการลบหลักจากเวอร์ชัน 3 ไปเป็นเวอร์ชัน 4.0.0 เบต้าที่ออกใหม่

สิ่งที่แตกต่างในเวอร์ชัน 4:

ตอนนี้ เราสามารถเริ่มพูดถึงคุณสมบัติใหม่ของ Bootstrap 4 ได้ เนื่องจากเทคโนโลยีมีการพัฒนาอย่างรวดเร็ว ภาษาที่ใหม่กว่าและชาญฉลาดกว่าได้รับการพัฒนาเพื่อทำให้การสร้างเว็บไซต์ที่สะอาดและรวดเร็วนั้นง่ายขึ้นมาก เช่นเดียวกันกับ Bootstrap รุ่นใหม่ล่าสุด ทีมงานกล่าวว่า "เวอร์ชัน 4 นี้เป็นการเขียนซ้ำครั้งใหญ่ของเกือบทั้งโครงการ" เราจะสรุปการเปลี่ยนแปลงที่สำคัญบางประการของการปรับปรุงนี้

การเปลี่ยนแปลงทั่วโลก:

• เปลี่ยนจาก Less เป็น Sass สำหรับไฟล์ CSS ต้นทาง
• เปลี่ยนจาก px rem เป็นหน่วย CSS หลักของ Bootstrap แม้ว่าพิกเซลจะยังคงใช้สำหรับคิวรี่สื่อและพฤติกรรมกริด เนื่องจากวิวพอร์ตของอุปกรณ์ไม่ได้รับผลกระทบจากขนาดประเภท
• ขนาดตัวอักษรทั่วโลกเพิ่มขึ้นจาก 14px เป็น 16px
• เพิ่มระดับกริดใหม่สำหรับ ~480px และต่ำกว่า

ระบบกริด:

ขั้นตอนสำคัญในการปรับปรุง Bootstrap 4 คือการเคลื่อนไหวไปสู่การนำ Flexbox มาใช้ เป็นส่วนหนึ่งของ flexbox รวมการรองรับคลาสการจัดตำแหน่งแนวตั้งและแนวนอน Bootstrap 4 ให้ความสำคัญกับการปรับแต่งเป็นอย่างมาก เป็นระบบกริดเทียร์ใหม่ช่วยให้ Bootstrap 4 มีระดับกริดสูงสุด 5 ระดับ (ตัวอย่าง 5 เทียร์: .col-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xl-4 ) สามารถพูดได้อย่างง่ายดายว่า Bootstrap 4 ให้การเข้าถึงระบบกริดที่ปรับปรุงแล้ว

• เพิ่มระดับกริด sm ใหม่ที่ต่ำกว่า 768px เพื่อการควบคุมที่ละเอียดยิ่งขึ้น ตอนนี้มี xs, sm, md, lg และ xl นอกจากนี้ยังหมายความว่าทุกระดับถูกเพิ่มระดับขึ้นหนึ่งระดับ (ดังนั้น .col-md-6 ใน v3 จึงเป็น .col-lg-6 ใน v4)
• เปลี่ยนจุดสั่งหยุดการสืบค้นสื่อของระบบกริดและความกว้างของคอนเทนเนอร์เพื่อพิจารณาระดับกริดใหม่ และตรวจสอบให้แน่ใจว่าคอลัมน์หารด้วย 12 เท่ากันที่ความกว้างสูงสุด
• ขณะนี้จุดสั่งหยุดของกริดและความกว้างของคอนเทนเนอร์ได้รับการจัดการผ่านแผนที่ Sass ($grid-breakpoints และ $container-max-widths) แทนที่จะเป็นตัวแปรแยกจำนวนหนึ่ง สิ่งเหล่านี้แทนที่ตัวแปร @screen-* ทั้งหมด และให้คุณปรับแต่งระดับกริดได้อย่างเต็มที่
• ข้อความค้นหาสื่อก็เปลี่ยนไปเช่นกัน แทนที่จะใช้การประกาศคิวรีสื่อซ้ำด้วยค่าเดียวกันในแต่ละครั้ง ขณะนี้มี @include media-breakpoint-up/down/only ตอนนี้ แทนที่จะเขียน @media (min-width: @screen-sm-min) { … } คุณสามารถเขียน @include media-breakpoint-up(sm) { … }

การสนับสนุนเบราว์เซอร์:

• หยุดการสนับสนุน IE8 และ iOS 6 v4 ตอนนี้เป็นเพียง IE9+ และ iOS 7+ สำหรับไซต์ที่ต้องการอย่างใดอย่างหนึ่ง ให้ใช้ v3.

คลาสยูทิลิตี้:

ใน Bootstrap 4 คลาสยูทิลิตี้ใหม่ถูกรวมไว้โดยไม่ขัดขวางการทำงานที่มีอยู่ แต่อย่างใด การเพิ่มเติมที่สำคัญเช่นคลาสการจัดตำแหน่งข้อความที่ตอบสนอง โฟลตที่ตอบสนอง และการฝังแบบตอบสนอง นอกเหนือจากการเสนอทางลัดมากมาย สิ่งเหล่านี้ตามลำดับ ยังอนุญาตให้เปลี่ยนการจัดตำแหน่งข้อความ การลอยขององค์ประกอบ และการปรับอัตราส่วนของอัตราส่วนกว้างยาวของสื่อฝังตัวใดๆ (ตัวอย่าง: .hidden-md-up ซ่อนองค์ประกอบบนวิวพอร์ตขนาดกลาง ขนาดใหญ่ และขนาดใหญ่พิเศษ ตอนนี้ แทนที่จะใช้ . .hidden-md-up ให้ใช้ .d-md-none )

รูปภาพ:

• เปลี่ยนชื่อ . .img-responsive เป็น . .img-fluid
• เปลี่ยนชื่อ . .img-rounded เป็น .rounded
• เปลี่ยนชื่อ . .img-circle เป็น .rounded-circle

ตาราง:

• ตารางที่ปรับเปลี่ยนตามอุปกรณ์ไม่ต้องการองค์ประกอบการห่ออีกต่อไป กล่าวง่ายๆ ใน Bootstrap 3 ควรเพิ่มคลาส . .table-responsive ในพาเรนต์ <div> แต่ใน Bootstrap 4 .table-responsive class จะถูกเพิ่มในองค์ประกอบ <table>
• เพิ่มตัวเลือก . .table-inverse ใหม่
• เพิ่มตัวแก้ไขส่วนหัวของตาราง: .thead-default และ .thead-inverse
• เปลี่ยนชื่อคลาสตามบริบทให้มี . .table- ดังนั้น . .active .success , .warning , .danger และ .table .table-info ถึง . .table-active , .table-success , .table-warning , .table-danger และ .table-info.

การนำทาง:

ใน Bootstrap 4 องค์ประกอบการนำทางได้รับการลดความซับซ้อนในระดับที่ดี จำเป็นต้องมีหนึ่งรายการเพื่อสร้างรายการองค์ประกอบใหม่โดยใช้คลาสพื้นฐานการนำทางล่าสุด มีการเพิ่มเติมล่าสุดบางอย่างเช่นคลาส nav-link, คลาส nav-item และสไตล์แถบนำทางด้วย

• เขียนองค์ประกอบใหม่ด้วย flexbox
• .navbar-default ตอนนี้ .navbar-light แม้ว่า .navbar-dark จะยังคงเหมือนเดิม อย่างไรก็ตาม คลาสเหล่านี้ไม่ได้ตั้งค่า background-color s อีกต่อไป แต่จะมีผลกับ color เท่านั้น
• .navbar-toggle ตอนนี้เป็น .navbar-toggler และมีสไตล์ที่แตกต่างกันและมาร์กอัปภายใน (ไม่มี <span> อีกสามรายการ)
• ดร็อปคลาส . .navbar-form ทั้งหมด ไม่จำเป็นอีกต่อไป เพียงใช้ .form-inline และใช้ยูทิลิตี้ระยะขอบแทนตามความจำเป็น
• แถบนำทางไม่รวม margin-bottom หรือ border-radius ตามค่าเริ่มต้นอีกต่อไป

ตารางเปรียบเทียบ Bootstrap เวอร์ชัน 3 และเวอร์ชัน 4

อย่างที่เราบอกไปแล้วว่าทีม Bootstrap ได้เขียนกรอบงานใหม่ ดังนั้นการเปลี่ยนแปลงข้างต้นจึงเป็นเพียงการเปลี่ยนแปลงที่สำคัญที่เราได้เขียนไว้ที่นี่ หากต้องการอ่านเชิงลึกโปรดไปที่ลิงก์ Bootstrap 4

เราควรย้ายไป Bootstrap 4 หรืออยู่ใน Bootstrap 3

เราได้พูดคุยเกี่ยวกับคุณสมบัติที่ Bootstrap 4 นำเสนอ เราสามารถเห็นได้ว่ามีการทำงานมากมายในการปรับให้เหมาะสมและทำความสะอาดองค์ประกอบและคลาสที่ไม่จำเป็นตลอดเฟรมเวิร์กทั้งหมด Bootstrap 4 สัญญาว่าจะรวดเร็วและคล่องตัวมากขึ้นเพื่อความยืดหยุ่นและความสะดวกที่มากขึ้นเมื่อสร้างเว็บไซต์ที่เหมาะกับมือถือที่ยอดเยี่ยม

Bootstrap 4 ย้ายไปที่ flexbox นี่ถือได้ว่าเป็นหนึ่งในความสำเร็จที่ยิ่งใหญ่ที่สุดและสำคัญ สิ่งนี้จะให้ประโยชน์ดังต่อไปนี้:

• ตารางตาม Flexbox
• ระดับกริด XLl ใหม่
• ตารางเค้าโครงอัตโนมัติล่าสุด
• ตัวเลือกการปรับแต่งแถบนำทาง
• ยูทิลิตี้การเว้นวรรคใหม่
• การกำหนดค่า Sans Glyphicons (เขตปลอดบวม)
• ขนาดตอบสนอง
• ลอยตัวตอบสนอง
• ระยะขอบอัตโนมัติ
• การจัดกึ่งกลางแนวตั้ง

บทสรุป

Bootstrap ช่วยให้ชีวิตของนักพัฒนาง่ายขึ้นเสมอ และด้วยการอัปเดตในเวอร์ชัน ตอนนี้ bootstrap มีคุณสมบัติและตัวเลือกใหม่ ๆ มากมายเพื่อสร้างสิ่งต่าง ๆ ให้ง่ายขึ้นสำหรับนักพัฒนา และนั่นคือสาเหตุที่ผู้คนย้ายจาก Bootstrap 3 ไปเป็น Bootstrap 4 เนื่องจากสะดวกและเข้าถึงได้ง่ายกว่ารุ่นก่อนๆ