สิ่งที่คาดหวังจาก Bootstrap 4

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

สถานะของ Bootstrap 4

Bootstrap 4 อยู่ในระหว่างดำเนินการและยังไม่พร้อมที่จะใช้ในการผลิต ขณะนี้อยู่ในรุ่นอัลฟ่า นี่เป็นโอกาสที่ดีในการดูตัวอย่างและทำความคุ้นเคยกับวิธีที่จะช่วยคุณในโครงการในอนาคต

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

สร้างขึ้นสำหรับเบราว์เซอร์ที่ทันสมัย

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

ปรับปรุงการรีเซ็ต

คุณอาจเคยชินกับ Normalize.css ซึ่งเป็นตัวเลือกการรีเซ็ตที่ยอดเยี่ยม มีการรีเซ็ตใหม่และปรับปรุงด้วย Bootstrap ที่เพิ่มเข้าไปที่เรียกว่า reboot.css ลักษณะเฉพาะของ Bootstrap คือสิ่งต่างๆ เช่น การปรับขนาดกล่อง: border, rems เป็นหน่วยวัด, ลักษณะลิงก์ และรูปแบบแบบฟอร์ม เป็นการผสมผสานที่ยอดเยี่ยมระหว่าง Normalize.css และความต้องการ Bootstrap เฉพาะ ดังนั้นคุณจึงมั่นใจได้ว่าจะเริ่มต้นได้ดี

SASS

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

การปรับแต่ง

Bootstrap 4 ทำให้ง่ายต่อการสร้างการออกแบบที่กำหนดเอง ทั้งหมดนี้ทำอย่างเป็นระเบียบ รวมตัวเลือกตัวแปรทั้งหมดไว้ในไฟล์เดียว SASS สามารถคอมไพล์ได้ง่ายและไม่จำเป็นต้องมีสไตล์ชีตแยกต่างหากเหมือนที่เคยเป็นมา

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

โปรดทราบว่าสิ่งเหล่านี้เป็นการปรับแต่งที่ง่ายต่อการตั้งค่าในตอนเริ่มต้น:

• ค่าเริ่มต้นของร่างกาย
• ตัวแปรสี
• กล่องเฟล็กซ์
• ตัวเลือกการออกแบบ CSS3 เช่น การเปลี่ยน มุมโค้งมน เงาตกกระทบ ฯลฯ
• การวัดระยะห่าง
• รูปแบบลิงค์
• เบรกพอยต์กริด
• คอนเทนเนอร์กริด
• คอลัมน์กริด
• ขนาดตัวอักษร
• ส่วนประกอบ
• โต๊ะ
• มากกว่า!

Flexbox ใคร?

Flexbox ได้รับความนิยมเพิ่มขึ้นเรื่อยๆ และเราจะได้เห็นนักออกแบบเว็บไซต์ใช้สิ่งนี้มากขึ้นเรื่อยๆ เป็นเครื่องมือที่ยอดเยี่ยมในการใช้งาน เนื่องจากมีตัวเลือกเลย์เอาต์ที่เรียบง่ายและยืดหยุ่นพร้อมการจัดสไตล์ CSS หากคุณพบว่าตัวเองชอบความง่ายในการจัดแนวเนื้อหาในแนวตั้งภายในองค์ประกอบหลัก การจัดลำดับเนื้อหาใหม่บนอุปกรณ์ต่างๆ และความละเอียดหน้าจอด้วยความช่วยเหลือของข้อความค้นหาสื่อ และชื่นชมวิธีง่ายๆ ในการมีคอลัมน์ที่มีความสูงเท่ากันในตารางของคุณ Flexbox เป็นโซลูชันที่ยอดเยี่ยม .

ก่อนที่คุณจะเรียกใช้และแปลงโครงการทั้งหมดของคุณ มีสิ่งสำคัญที่จะกล่าวถึง แม้ว่าการรองรับเบราว์เซอร์จะเพิ่มขึ้นอย่างมาก แต่ Internet Explorer 9 ก็ยังขาดการรองรับ Flexbox ในแง่ของความง่ายในการใช้งาน Bootstrap 4 ทำให้ใช้งาน Flexbox ได้ง่าย หากคุณไม่ต้องการการสนับสนุน IE9 โดยพื้นฐานแล้ว สิ่งที่คุณต้องทำคือค้นหาไฟล์ _variables.scss และเปลี่ยน $enable-flex จาก false เป็น true หากคุณคุ้นเคยกับ SASS นี่คือสิ่งที่ควรทำ

อัปเดตกริด

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

เมื่อแยกจากพิกเซลที่เราคุ้นเคย มาดูตัวอย่างของสิ่งที่พบได้ทั่วไป เช่น . .container และ .row. คอนเทนเนอร์ตอนนี้มีการตั้งค่าความกว้างสูงสุดใน rems แถวมีระยะขอบด้านซ้ายและขวาติดลบเริ่มต้น -.9375rem ในขณะที่คอลัมน์มีช่องว่างภายในเริ่มต้นด้านซ้ายและขวาเป็น 0.9375rem อย่างที่คุณอาจจำได้ ค่าเหล่านี้ก่อนหน้านี้คือ 15px ใน Bootstrap 3 ค่า rem ใหม่เหล่านี้เทียบได้กับค่านั้น

ปรับปรุงการสืบค้นสื่อ

ข้อความค้นหาสื่อใน Bootstrap เวอร์ชันก่อนหน้านั้นค่อนข้างทั่วไปและบางครั้งต้องสร้างข้อความค้นหาที่กำหนดเอง นี่คือสิ่งที่พวกเขาดูเหมือน:

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

ขณะนี้ สามารถใช้แนวทางมือถือมากขึ้นด้วยข้อความค้นหาสื่อที่อัปเดตเหล่านี้:

// Small devices (landscape phones, 34em and up)
@media (min-width: 34em) { ... }

// Medium devices (tablets, 48em and up)
@media (min-width: 48em) { ... }

// Large devices (desktops, 62em and up)
@media (min-width: 62em) { ... }

// Extra large devices (large desktops, 75em and up)
@media (min-width: 75em) { ... }

หากคุณต้องการสิ่งที่แตกต่างออกไป เบรกพอยต์สามารถกำหนดค่าได้ใน SASS หากคุณต้องการเลือกของคุณเอง

การ์ดแทนตัว

คุ้นเคยกับแผง บ่อน้ำ และภาพขนาดย่อหรือไม่ ขณะนี้การ์ดเป็นการ์ดใหม่ล่าสุดและดีที่สุด และมีตัวเลือกการจัดสไตล์ที่ยอดเยี่ยม ตัวอย่างหนึ่งคือกลุ่มบัตร แม้ว่าจำนวนข้อความจะแตกต่างกันไป แต่การ์ดก็มีความสูงเท่ากัน โดยไม่ขึ้นอยู่กับ JavaScript ใช้งานได้กับทั้ง Flexbox และโหมดกริดเริ่มต้น เมื่อใช้ Flexbox การ์ดจะถูกสร้างขึ้นโดยใช้คุณสมบัติ Flexbox ตารางเริ่มต้นใช้เคล็ดลับ CSS เพื่อหลีกเลี่ยงความจำเป็นในการใช้ JavaScript คอนเทนเนอร์ใช้ display: table; และแต่ละ "การ์ด" จะ display: table-cell; ให้คุณสมบัติของตาราง - นี่คือที่มาของความสูงของคอลัมน์ที่เท่ากัน

วิชาการพิมพ์

จำได้ไหมว่ากริดใช้ rems อย่างไร? ก็สมเหตุสมผลแล้วที่วิชาการพิมพ์ก็จะทำเช่นนั้นเช่นกัน! เมื่อคิดถึงสิ่งนี้ จำไว้ว่าขนาดฟอนต์ทั้งหมดสัมพันธ์กับองค์ประกอบรูท แท็ก HTML เมื่อคุณเปลี่ยนขนาดฟอนต์ (หรือสไตล์อื่นๆ) บนแท็ก HTML คุณสามารถจัดสไตล์และปรับขนาดสไตล์ทั่วทั้งโปรเจ็กต์ของคุณได้อย่างง่ายดาย

สมมติว่าองค์ประกอบ HTML ของคุณกำหนดรูปแบบด้วย font-size: 16px สมมติว่าคุณต้องการให้แท็ก h5 ของคุณเป็นขนาดนั้น คุณจะต้องประกาศขนาดฟอนต์เป็น 1rem

h5 {
font-size: 1rem;
}

ตอนนี้ อาจมีคณิตศาสตร์ที่เกี่ยวข้องกับการก้าวไปข้างหน้า หากคุณต้องการให้แท็ก h1 ของคุณมีขนาด 40px ต่อไปนี้เป็นวิธีคิดออก:

h1 {
font-size: 2.5rem; /* 16 * 2.5 = 40px */
}

ยังไม่รู้สึก rems เลย? คุณยังสามารถใช้พิกเซลและ ems เพื่อปรับขนาดได้หากต้องการ

รูปแบบส่วนหัวเพิ่มเติม

หัวเรื่องเหมาะสำหรับการสร้างลำดับชั้น แต่ถ้าคุณต้องการสิ่งที่โดดเด่นกว่า h1, h2, h3 และอื่น ๆ ล่ะ? ข่าวดีก็คือ คุณสามารถเพิ่มคลาสของการแสดงผลที่มุ่งหน้าไปยังหัวข้อมาตรฐานที่ทำให้มันใหญ่ขึ้นได้ มันจะมีลักษณะดังนี้:

<h1 class="display-4">Heading Display 4</h1>

display-4 มีขนาดใหญ่กว่า display-2

ขนาดไฟล์เล็กลง

Bootstrap 4 มีรอยเท้าที่เล็กกว่า อันที่จริงแล้วมันเล็กกว่า Bootstrap 3 รุ่นล่าสุดประมาณ 30% ก่อนหน้านี้อยู่ที่ประมาณ ~123kb และตอนนี้คือ ~88kb มันยอดเยี่ยมมากที่มันเล็กลงและยังคงมีคุณสมบัติที่ยอดเยี่ยมเหมือนเดิม

โปรดทราบว่ามีตัวเลือกให้ใช้เฉพาะส่วนต่างๆ ของ Bootstrap ที่คุณต้องการ ซึ่งจะทำให้ขนาดไฟล์มีขนาดเล็กลง

ไม่มี Glyphicons อีกต่อไป?

Glyphicons ถูกใช้อย่างแพร่หลายใน Bootstrap เวอร์ชันก่อนหน้า ดังนั้นจึงเป็นเรื่องน่าเศร้าที่เห็นพวกมันหายไป ไม่ต้องกังวล นี่ไม่ใช่จุดสิ้นสุดของไอคอนเว็บ แทนที่ FontAwesome ควรให้บริการคุณเช่นกัน คุณยังสามารถตรวจสอบ Octigons ของ Github เพื่อดูตัวเลือกไอคอนที่ยอดเยี่ยม

ย้ายไปที่ Bootstrap 4

แม้ว่าปัจจุบันจะเป็นเวอร์ชันอัลฟ่า แต่ก็ไม่มีเหตุผลที่คุณไม่สามารถใช้งานได้ในสภาพแวดล้อมการทดสอบ ซอร์สโค้ดมีอยู่ในสาขา v4-dev บน GitHub ในขณะที่คุณทดลองและเห็นทุกสิ่งที่ต้องการความสนใจ มีคำขอดึงการพัฒนาและการติดตามที่มีหมายเหตุเกี่ยวกับการเปลี่ยนแปลงและการปรับปรุงใหม่อื่นๆ

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

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