7 ฟีเจอร์ใหม่ที่น่าจับตามองใน Bootstrap 5

7 ฟีเจอร์ใหม่ที่น่าจับตามองใน Bootstrap 5

Bootstrap 5 มาพร้อมกับการเปลี่ยนแปลงที่สำคัญ รวมถึงการลดลงสำหรับการสนับสนุน Internet Explorer (IE) และการพึ่งพา jQuery Bootstrap พัฒนาโดย Twitter เป็นเฟรมเวิร์ก CSS ที่ได้รับความนิยมมากที่สุดในโลก กรอบงานส่วนต่อประสานผู้ใช้แบบโอเพนซอร์สกำลังมองหาการวางตำแหน่งตัวเองสำหรับอนาคต และสิ่งนี้ทำให้เห็นการเปลี่ยนแปลงครั้งสำคัญใน v5





Bootstrap ลดลงสำหรับ IE ทำให้เป็นเครื่องมือพัฒนาเว็บเครื่องแรกในการทำเช่นนี้ ความเคลื่อนไหวดังกล่าวเกิดขึ้นในขณะที่ส่วนแบ่งการตลาดของ Internet Explorer ยังคงลดลงอย่างต่อเนื่อง โดยคิดเป็นสัดส่วนไม่ถึง 3% ของเว็บเบราว์เซอร์ทั้งหมด



อ่านต่อไปเพื่อดูว่ามีการปรับปรุงใดบ้างใน Bootstrap และผลกระทบต่อคุณอย่างไร





1. รองรับ jQuery

Bootstrap จะไม่ใช้ไลบรารี jQuery อีกต่อไป ทีมพัฒนาได้ปรับปรุงไลบรารี JavaScript แทนเพื่อให้มีผลการเปลี่ยนแปลงนี้ การพึ่งพา jQuery ไม่จำเป็นต้องเป็นสิ่งที่ไม่ดีใน Bootstrap

อันที่จริง การแนะนำ jQuery ได้เปลี่ยนวิธีการใช้ JavaScript อย่างสิ้นเชิง มันทำให้งานเขียนใน JavaScript ง่ายขึ้นซึ่งอาจต้องใช้โค้ดหลายบรรทัด



ที่เกี่ยวข้อง: เรียนรู้วิธีสร้างองค์ประกอบใน jQuery

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



ขนาดไฟล์ต้นฉบับมีขนาดเล็กลง 85KB ของ JavaScript ที่ย่อเล็กสุด และนี่เป็นสิ่งสำคัญเนื่องจาก Google ถือว่าเวลาในการโหลดหน้าเว็บสำหรับไซต์บนมือถือเป็นปัจจัยในการจัดอันดับ

ตราบใดที่ไม่จำเป็นต้องใช้ jQuery ใน Bootstrap 5 อีกต่อไป คุณยังสามารถใช้งานได้หากต้องการ นอกจากนี้ยังเป็นที่น่าสังเกตว่าปลั๊กอิน JavaScript ทั้งหมดยังคงใช้งานได้



2. คุณสมบัติที่กำหนดเอง CSS

การลดการสนับสนุน Internet Explorer ทำให้สามารถใช้คุณสมบัติ CSS ที่กำหนดเอง (ตัวแปร) ได้ IE ไม่รองรับคุณสมบัติที่กำหนดเอง เป็นเพียงเหตุผลเดียวที่ทำให้นักพัฒนาเว็บต้องชะงักงันมาเป็นเวลานาน

คุณสมบัติที่กำหนดเองของ CSS ทำให้ CSS มีความยืดหยุ่นและตั้งโปรแกรมได้มากขึ้น ตัวแปร CSS นำหน้าด้วย -bs เพื่อป้องกันความขัดแย้งกับ CSS บุคคลที่สาม

มีตัวแปรสองประเภท: ตัวแปรรูทและตัวแปรองค์ประกอบ

ตัวแปรรูทสามารถเข้าถึงได้ทุกที่ที่โหลด Bootstrap CSS ตัวแปรเหล่านี้อยู่ใน _root.scss ไฟล์และเป็นส่วนหนึ่งของไฟล์ dist ที่คอมไพล์แล้ว

ตัวแปรส่วนประกอบถูกใช้เป็นตัวแปรท้องถิ่นในส่วนประกอบเฉพาะ สิ่งเหล่านี้มีประโยชน์ในการหลีกเลี่ยงการสืบทอดสไตล์โดยไม่ได้ตั้งใจในส่วนประกอบ เช่น ตารางที่ซ้อนกัน

3. ปรับปรุงระบบกริด

เนื่องจากมีปัญหาบางอย่างในการอัพเกรดจากเวอร์ชัน 3 เป็น 4 ดังนั้น Bootstrap 5 จึงยังคงรักษาระบบไว้เป็นจำนวนมาก คราวนี้จึงสร้างขึ้นจากระบบที่มีอยู่แทนที่จะเปลี่ยนทั้งหมด การเปลี่ยนแปลงบางอย่างคือ:

  • ชั้นรางน้ำ ( .boys ) ถูกแทนที่เป็นยูทิลิตี้ ( .NS* ) เหมือนระยะขอบและช่องว่างภายใน
  • รวมถึงคลาสการเว้นวรรคแนวตั้งด้วย
  • คอลัมน์จะไม่ถูกตั้งค่าเริ่มต้นเป็น .อีกต่อไป ตำแหน่ง:ญาติ

4. ปรับปรุงเอกสาร

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

ขณะนี้มีความยืดหยุ่นมากขึ้นในการปรับแต่งธีมของคุณ เพื่อไม่ให้ทุกไซต์หรือแอปมีความคล้ายคลึงกัน หน้าชุดรูปแบบ v4 ได้รับการขยายด้วยเนื้อหาและข้อมูลโค้ดเพิ่มเติมสำหรับการสร้างไฟล์ Sass (ตัวประมวลผลล่วงหน้า CSS ยอดนิยม) คุณยังสามารถค้นหาโปรเจ็กต์ starter npm บนแพลตฟอร์ม GitHub ซึ่งมีให้ใช้งานเป็นที่เก็บเทมเพลต

นอกจากนี้ จานสียังได้รับการขยายในเวอร์ชัน 5 ระบบสีในตัวแบบขยายหมายความว่าคุณสามารถจัดรูปแบบการระบายสีของคุณได้อย่างง่ายดายโดยไม่ต้องออกจากฐานโค้ดของคุณ มีการทำงานมากขึ้นเพื่อปรับปรุงคอนทราสต์ของสี รวมถึงการเพิ่มเมตริกคอนทราสต์ของสีในเอกสารสี Bootstrap

5. ปรับปรุงการควบคุมฟอร์ม

Bootstrap ได้ปรับปรุงการควบคุมฟอร์ม กลุ่มอินพุต และอื่นๆ

ในเวอร์ชัน 4 Bootstrap ใช้การควบคุมแบบฟอร์มที่กำหนดเองนอกเหนือจากค่าเริ่มต้นที่แต่ละเบราว์เซอร์ให้มา ใน v5 ทั้งหมดนี้ได้รับการปรับแต่งแล้ว ปุ่มตัวเลือก ช่องทำเครื่องหมาย ไฟล์ ช่วง และอื่นๆ ทั้งหมดเพื่อให้มีลักษณะและการทำงานเหมือนกันในเบราว์เซอร์ต่างๆ

ตัวควบคุมรูปแบบใหม่ไม่มีมาร์กอัปที่มีสีสันที่ไม่จำเป็นอีกต่อไป แต่ให้เน้นที่คุณสมบัติการออกแบบมาตรฐานและตรรกะ

6. Bootstrap 5 เพิ่มยูทิลิตี้ API

การติดตามไลบรารี CSS ใหม่ เช่น Tailwind CSS ตอนนี้ Bootstrap กำลังเพิ่มไลบรารียูทิลิตี้ด้วย ทีมบูตสแตรปกล่าวว่าพวกเขามีความสุขที่ได้เห็นว่านักพัฒนารายอื่นกำลังท้าทายวิธีที่เราสร้างบนเว็บในช่วงทศวรรษที่ผ่านมา

ยูทิลิตี้กำลังได้รับแรงผลักดันในชุมชนการพัฒนาและทีมบูตสแตรปได้รับทราบแล้ว ก่อนหน้านี้ทีมได้เพิ่มข้อกำหนดสำหรับยูทิลิตี้ใน v4 โดยใช้ global $เปิดใช้งาน-* ชั้นเรียน ในเวอร์ชัน 5 พวกเขาได้เปลี่ยนเป็นแนวทาง API และภาษาและไวยากรณ์ใหม่ใน Sass สิ่งนี้จะให้พลังแก่คุณในการสร้างยูทิลิตี้ใหม่ในขณะที่ยังสามารถลบหรือแก้ไขค่าเริ่มต้นที่กำหนดได้

เพื่อให้องค์กรดีขึ้น ยูทิลิตี้บางอย่างที่อยู่ใน v4 ได้ถูกย้ายไปยังส่วน Helpers

7. ไลบรารีไอคอน Bootstrap ใหม่

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

เนื่องจากเป็นอิมเมจ SVG จึงสามารถปรับขนาดได้อย่างรวดเร็วและนำไปใช้ได้หลายวิธี และยังจัดรูปแบบด้วย CSS

คุณสามารถติดตั้งไอคอนโดยใช้ เหนือระดับน้ำทะเล:

$ npm i bootstrap-icons

ติดตั้ง Bootstrap 5

คุณสามารถไปที่ Bootstrap 5 หน้าดาวน์โหลดอย่างเป็นทางการ หากคุณต้องการติดตั้ง หากคุณต้องการติดตามการพัฒนาล่าสุด คุณสามารถใช้ เหนือระดับน้ำทะเล ดึงมัน:

$ npm i bootstrap@next

ในขณะที่เขียนนี้ เฟรมเวิร์กอยู่ในเวอร์ชันเบต้า 3 ซึ่งหมายความว่าซอฟต์แวร์นั้นปลอดภัยต่อการใช้งาน แต่ยังอยู่ระหว่างการพัฒนา รู้สึกอิสระที่จะให้ข้อเสนอแนะกับทีมและให้ความช่วยเหลือที่จำเป็น

แบ่งปัน แบ่งปัน ทวีต อีเมล ข้อมูลเบื้องต้นเกี่ยวกับส่วนประกอบเว็บและสถาปัตยกรรมตามส่วนประกอบ

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

อ่านต่อไป หัวข้อที่เกี่ยวข้อง
  • การเขียนโปรแกรม
  • การพัฒนาเว็บ
  • JavaScript
  • CSS
เกี่ยวกับผู้เขียน เจอโรม เดวิดสัน(ตีพิมพ์บทความ 22 บทความ)

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

เพิ่มเติมจาก Jerome Davidson

สมัครรับจดหมายข่าวของเรา

เข้าร่วมจดหมายข่าวของเราสำหรับเคล็ดลับทางเทคนิค บทวิจารณ์ eBook ฟรี และดีลพิเศษ!

แผงควบคุม nvidia เทียบกับประสบการณ์ geforce
คลิกที่นี่เพื่อสมัครสมาชิก