Bootstrap 4 คุณสมบัติใหม่และยอดเยี่ยมที่คุณจะหลงรัก
การเปิดตัวครั้งใหญ่ครั้งต่อไปของเฟรมเวิร์ก Bootstrap อยู่ใกล้ ๆ เวอร์ชั่นอัลฟ่าสามารถดาวน์โหลดได้จากเว็บไซต์การพัฒนาของ Bootstrap และซอร์สโค้ดยังมีอยู่ใน Github.
Twitter Bootstrap เป็นส่วนหน้าของเฟรมเวิร์กที่ได้รับความนิยมมากที่สุด มันช่วยให้นักพัฒนา สร้างเว็บไซต์บนมือถือและตอบสนองได้อย่างรวดเร็ว. Bootstrap ช่วยให้สามารถใช้ส่วนหน้า HTML5, CSS3 และ Javascript แบบมาตรฐานได้อย่างชาญฉลาด ปัจจุบันมีการใช้งานมากกว่า 6 ล้านเว็บไซต์บนเว็บ.
แม้ว่า Bootstrap 4 ยังอยู่ในช่วงการพัฒนา (ดังนั้นอย่าใช้บนเว็บไซต์จริง) แต่นักพัฒนาก็ทำผลงานได้อย่างยอดเยี่ยม ในโพสต์นี้เราจะมาดูเวอร์ชั่นใหม่ซึ่งรวมถึงคุณสมบัติที่ยอดเยี่ยมมากมายที่จะแน่นอน ปรับปรุงและปรับปรุงเวิร์กโฟลว์การพัฒนาส่วนหน้า.
1. Sass แทนที่จะเป็น LESS
จนถึงตอนนี้ Bootstrap ได้ใช้ LESS เป็นตัวเตรียมการหลักของ CSS แต่สำหรับรุ่นใหญ่ใหม่กฎสไตล์จะถูก refactored ให้กับ Sass ซึ่งเป็นที่นิยมมากในหมู่นักพัฒนาส่วนหน้ามีฐานผู้สนับสนุนจำนวนมากโดยทั่วไปใช้งานง่ายกว่าและมีมากกว่า ความเป็นไปได้ ขอบคุณ Libsass Sass Complier อันทรงพลังที่เขียนใน C / C++ Bootstrap 4 จะรวบรวมเร็วกว่ามาก กว่าก่อน.
2. Grid Tier ใหม่สำหรับหน้าจอที่เล็กลง
Bootstrap มีระบบกริดตอบสนองที่ซับซ้อนที่ช่วยให้นักพัฒนาสามารถกำหนดเป้าหมายอุปกรณ์ด้วยวิวพอร์ตที่แตกต่างกัน Bootstrap 3 ปัจจุบันมี 4 ตารางคลาสสำหรับคอลัมน์, .Col-XS-XX สำหรับโทรศัพท์มือถือ, .Col-SM-XX สำหรับแท็บเล็ต, .Col-MD-XX สำหรับเดสก์ท็อปและ .Col-LG-XX สำหรับเดสก์ท็อปขนาดใหญ่ Bootstrap 4 จะปรับปรุงระบบกริดด้วยหนึ่งในห้าที่จะช่วยให้นักพัฒนา กำหนดเป้าหมายอุปกรณ์ขนาดเล็กลงภายใต้ความกว้างวิวพอร์ต 480px.
คลาสกริดใหม่นั้นใช้ชื่อของอันที่เล็กที่สุดก่อนหน้านี้และผลักดันชื่อปัจจุบันของเทียร์กริดขึ้นไปหนึ่งบาก ใน Bootstrap 4 เดสก์ท็อปขนาดใหญ่จะใช้ .Col-XL-XX ตัวเลือกชั้นเรียน สิ่งสำคัญคือต้องรู้ว่าแม้จะมีชื่อใหม่พวกเขาไม่ได้เพิ่มคลาสใหม่สำหรับหน้าจอขนาดใหญ่พิเศษ แต่สำหรับหน้าจอขนาดเล็กพิเศษ.
3. แนะนำหน่วย CSS เชิงสัมพันธ์
ในที่สุด Bootstrap 4 จะลดการสนับสนุนสำหรับ Internet Explorer 8 นั่นเป็นขั้นตอนที่ชาญฉลาดเพราะช่วยให้พวกเขากำจัด polyfills ที่น่ารำคาญและแปลงเป็นหน่วย CSS ที่เกี่ยวข้อง แทนที่จะปล่อยพิกเซลรุ่นใหญ่ ๆ จะออกมา ใช้ REMs และ EMs ที่ทำให้มันเป็นไปได้ ใช้แบบอักษรตอบสนอง บนเว็บไซต์ Bootstrap สิ่งนี้จะเพิ่มความสามารถในการอ่านและทำให้ผู้ใช้ที่พิการสามารถเข้าถึงเว็บไซต์ได้มากขึ้น.
หากคุณต้องการลองใช้วิธีการทำงานของหน่วยที่เกี่ยวข้องกับ Bootstrap 4 ใหม่ให้ตรวจสอบการสาธิตนี้ใน Codepen.
4. บัตร Bootstrap ใหม่เอี่ยม
ทีมพัฒนาตัดสินใจรวมองค์ประกอบก่อนหน้าบางส่วนของส่วนติดต่อผู้ใช้ของ Bootstrap ดังนั้นพวกเขาจึงตัดสินใจที่จะแนะนำ องค์ประกอบ UI ใหม่ที่เรียกว่าการ์ด. การ์ดจะเข้ามาแทนที่บ่อน้ำภาพขนาดย่อและพาเนลเดิมและจะช่วยให้ผู้ใช้มีเวิร์กโฟลว์ที่คล่องตัวยิ่งขึ้น ไม่ต้องกังวลการ์ดจะเก็บองค์ประกอบที่คุ้นเคยเช่นชื่อเรื่องส่วนหัวและส่วนท้ายของเวลส์รูปขนาดย่อและแผงควบคุม.
เนื่องจากการ์ดจะมีความยืดหยุ่นมากกว่าองค์ประกอบ UI ในปัจจุบันจึงทำให้มีพื้นที่มากขึ้นสำหรับการนำไปใช้ในงานสร้างสรรค์ มีผู้บุกเบิกบางคนที่ทำการทดลอง Codepen ด้วยการ์ด Bootstrap แล้ว คุณสามารถตรวจสอบพวกเขาออกหรือสร้างการ์ดของคุณเอง.
5. โมดูล Reboot ใหม่
โมดูล Reboot ใหม่แทนที่ก่อนหน้านี้ Normalize.css รีเซ็ตไฟล์ มันไม่ได้ทิ้ง ในทางตรงกันข้ามมันสร้างกฎมากกว่านั้น เป้าหมายของการย้ายคือการรวมตัวเลือก CSS ทั่วไปทั้งหมดและรีเซ็ตสไตล์ใน ไฟล์ SCSS เดียวที่ใช้งานง่าย. คุณสามารถดูซอร์สโค้ดที่นี่หากคุณต้องการเข้าใจการทำงานของโมดูลใหม่ให้ดียิ่งขึ้น.
เป็นการดีที่จะทราบว่าสไตล์การรีเซ็ตใหม่จะตั้งค่าคุณสมบัติ CSS แบบปรับขนาดกล่องอย่างฉลาด ชายแดนกล่อง บน องค์ประกอบซึ่งสืบทอดมาจากองค์ประกอบลูกแต่ละรายการในหน้า กฎสไตล์ใหม่ ทำให้เลย์เอาต์ที่ตอบสนองได้ง่ายขึ้น. หากคุณต้องการสัมผัสกับความแตกต่างระหว่างประเภทโครงร่างของกล่องเนื้อหาและเส้นขอบลองดูตัวอย่างที่มีประโยชน์นี้ที่จัดทำโดย CSS-Tricks.com โดยทั่วไปทำงานได้).
6. การเลือกใช้ Flexbox Support
Bootstrap 4 ทำให้สามารถใช้ประโยชน์จาก Flexbox Layout ของ CSS3 ได้ - เนื่องจาก Internet Explorer 9 ไม่รองรับโมดูล flexbox - เป็น Bootstrap 4 รุ่นเริ่มต้นแทน ใช้ประโยชน์จากคุณสมบัติลอยและแสดง CSS เพื่อใช้เค้าโครงเลย์เอาต์.
Flexbox มีเลย์เอาต์ที่ใช้งานง่ายที่สามารถนำมาใช้อย่างยอดเยี่ยมในการออกแบบที่ตอบสนองได้ดีเนื่องจากมีภาชนะบรรจุที่ยืดหยุ่นที่สามารถขยายหรือย่อขนาดเพื่อเติมเต็มพื้นที่ว่างในแบบที่ดีที่สุด ใช้คุณสมบัติการเลือกใช้ flexbox เฉพาะเมื่อคุณ อย่า จำเป็นต้องให้การสนับสนุนสำหรับ IE9.
7. ความคล่องตัวในการปรับแต่งตัวแปร
ตัวแปร Sass ทั้งหมดที่ใช้ใน Bootstrap รีลีสใหม่จะรวมอยู่ในไฟล์เดียวชื่อ _variables.scss ซึ่งจะปรับปรุงกระบวนการพัฒนาอย่างมีนัยสำคัญ คุณไม่ต้องทำอะไรนอกเหนือจากการคัดลอกการตั้งค่าจากไฟล์นี้ไปยังอีกไฟล์หนึ่งที่เรียกว่า _custom.scss เพื่อเปลี่ยนค่าเริ่มต้น.
คุณสามารถ ปรับแต่งสิ่งต่าง ๆ เช่นสีระยะห่างลักษณะลิงก์การพิมพ์ตารางจุดพักเส้นตารางและตู้คอนเทนเนอร์หมายเลขคอลัมน์และความกว้างของรางน้ำและอื่น ๆ อีกมากมาย.
8. คลาสยูทิลิตี้ใหม่สำหรับการเว้นวรรค
Bootstrap 3 มีคลาสยูทิลิตี้ที่ใช้งานได้จริงมากมายเช่นคลาสที่เปลี่ยนการลอยหรือเคลียร์ฟิกซ์ แต่ Bootstrap 4 เพิ่มมากขึ้น คลาสระยะห่างใหม่ อนุญาตให้นักพัฒนาเปลี่ยนการ paddings และระยะขอบบนไซต์ได้อย่างรวดเร็ว.
ไวยากรณ์สำหรับคลาสใหม่นั้นค่อนข้างตรงไปตรงมาเช่นการเพิ่ม .คลาส m-a-0 เชื่อมโยงกฎสไตล์ที่ ตั้งค่าระยะขอบเป็น 0 ในทุกด้านขององค์ประกอบที่กำหนด (margin-all-0). ในขณะที่ระยะขอบใช้ ม.- คำนำหน้า paddings มีสไตล์ด้วย พี- อุปสรรค ในเอกสารการพัฒนาคุณสามารถดูคลาสยูทิลิตี้การเว้นวรรคใหม่ทั้งหมด.
9. คำแนะนำเครื่องมือและ Popovers ขับเคลื่อนโดย Tether
ในคำแนะนำเครื่องมือและป๊อปอัพ Bootstrap 4 ใช้ประโยชน์จากห้องสมุด supercool Tether ซึ่งเป็นเอ็นจิ้นการกำหนดตำแหน่งที่ทำให้สามารถจัดวางองค์ประกอบในตำแหน่งที่แน่นอนถัดจากองค์ประกอบอื่นในหน้าเดียวกัน ซึ่งหมายถึงคำแนะนำเครื่องมือและป๊อปอัป จะถูกวางไว้อย่างถูกต้องโดยอัตโนมัติ บนเว็บไซต์ Bootstrap 4.
อย่าลืมว่าเนื่องจาก Tether เป็นห้องสมุด JavaScript ของบุคคลที่สามคุณจะต้องรวมไว้ใน HTML ก่อนไฟล์ bootstrap.js ของคุณ.
10. ปลั๊กอิน JavaScript ที่ปรับโครงสร้างใหม่
ทีมพัฒนา refactored ปลั๊กอิน JavaScript แต่ละอันสำหรับรีลีสใหม่โดยใช้ EcmaScript 6 ด้วยการใช้ประโยชน์อย่างชาญฉลาดของข้อมูลเฉพาะล่าสุดและการปรับปรุงล่าสุดที่พวกเขาตั้งใจจะปรับปรุงประสบการณ์ส่วนหน้า.
Bootstrap 4 ใหม่ได้ผ่านการปรับปรุง JavaScript อื่น ๆ เช่น การตรวจสอบประเภทตัวเลือก, วิธีการฉีกขาดทั่วไป, และ รองรับ UMD, ทั้งหมดนี้จะทำงานร่วมกันเพื่อทำให้เฟรมเวิร์กส่วนหน้าที่เป็นที่นิยมมากที่สุดทำงานได้ราบรื่นกว่าที่เคยเป็นมา.
ตอนนี้อ่าน: 10 ทางเลือกที่มีน้ำหนักเบาเพื่อ Bootstrap & มูลนิธิ
