กำลังย้ายไปยัง v5

การพึ่งพา

• jQuery ลดลง
• อัปเกรดจาก Popper v1.x เป็น Popper v2.x
• แทนที่ Libsass ด้วย Dart Sass เนื่องจากคอมไพเลอร์ Sass ของเราเนื่องจาก Libsass เลิกใช้แล้ว
• ย้ายจาก Jekyll ไปยัง Hugo เพื่อสร้างเอกสารของเรา

รองรับเบราว์เซอร์

• Internet Explorer 10 และ 11 . ลดลง
• Microsoft Edge ลดลง < 16 (ขอบแบบเดิม)
• Firefox ลดลง < 60
• ทิ้ง Safari < 12
• หลุด iOS Safari < 12
• Chrome ลดลง < 60

---

การเปลี่ยนแปลงเอกสาร

• หน้าแรก เค้าโครงเอกสาร และส่วนท้ายที่ออกแบบใหม่
• เพิ่มคู่มือพัสดุใหม่
• เพิ่มส่วนกำหนดค่าใหม่แทนที่หน้าธีมของ v4ด้วยรายละเอียดใหม่เกี่ยวกับ Sass ตัวเลือกการกำหนดค่าส่วนกลาง โครงร่างสี ตัวแปร CSS และอื่นๆ
• จัดระเบียบเอกสารแบบฟอร์มทั้งหมดใหม่ในส่วนแบบฟอร์มใหม่โดยแยกเนื้อหาออกเป็นหน้าที่เจาะจงมากขึ้น
• ในทำนองเดียวกัน อัปเดตส่วนเลย์เอาต์ เพื่อให้เนื้อหากริดชัดเจนยิ่งขึ้น
• เปลี่ยนชื่อหน้าคอมโพเนนต์ "Navs" เป็น "Navs & Tabs"
• เปลี่ยนชื่อหน้า "ตรวจสอบ" เป็น "ตรวจสอบและวิทยุ"
• ออกแบบแถบนำทางใหม่และเพิ่มการนำทางย่อยใหม่เพื่อให้ใช้งานไซต์และเวอร์ชันเอกสารของเราได้ง่ายขึ้น
• เพิ่มแป้นพิมพ์ลัดใหม่สำหรับช่องค้นหา: Ctrl + /.

ซาส

• เราได้ยกเลิกการรวมแผนที่ Sass เริ่มต้นเพื่อให้ลบค่าที่ซ้ำซ้อนได้ง่ายขึ้น โปรดทราบว่าตอนนี้คุณต้องกำหนดค่าทั้งหมดในแผนที่ Sass $theme-colorsเช่น ดูวิธีจัดการกับแผนที่ Sass

• ทำลายเปลี่ยนชื่อcolor-yiq()ฟังก์ชันและตัวแปรที่เกี่ยวข้องcolor-contrast()เนื่องจากไม่เกี่ยวข้องกับ YIQ colorspace อีกต่อไป ดู #30168

  • $yiq-contrasted-thresholdถูกเปลี่ยนชื่อเป็น$min-contrast-ratio.
  • $yiq-text-darkและ$yiq-text-lightเปลี่ยนชื่อเป็น$color-contrast-darkและ ตาม $color-contrast-lightลำดับ

• ทำลายพารามิเตอร์มิกซ์อินคิวรีสื่อมีการเปลี่ยนแปลงเพื่อให้มีแนวทางที่สมเหตุสมผลมากขึ้น

  • media-breakpoint-down()ใช้เบรกพอยต์เองแทนเบรกพอยต์ถัดไป (เช่นmedia-breakpoint-down(lg)แทนที่จะเป็นmedia-breakpoint-down(md)วิวพอร์ตเป้าหมายที่เล็กกว่าlg)
  • ในทำนองเดียวกัน พารามิเตอร์ที่สองในmedia-breakpoint-between()ยังใช้เบรกพอยต์แทนเบรกพอยต์ถัดไป (เช่นmedia-between(sm, lg)แทนที่จะเป็นmedia-breakpoint-between(sm, md)วิวพอร์ตเป้าหมายระหว่างsmและlg)

• ทำลายนำรูปแบบการพิมพ์และ$enable-print-stylesตัวแปรออก ชั้นเรียนแสดงผลการพิมพ์ยังคงอยู่รอบ ๆ ดู # 28339

• ทำลายลดลงcolor(), theme-color(), และgray()ทำหน้าที่แทนตัวแปร ดู # 29083

• ทำลายเปลี่ยนชื่อtheme-color-level()ฟังก์ชันเป็นcolor-level()และตอนนี้ยอมรับสีใดก็ได้ที่คุณต้องการแทนที่จะใช้เฉพาะ$theme-colorสี ดู #29083 ระวัง: color-level()ถูกทิ้งในภายหลังในv5.0.0-alpha3.

• ทำลายเปลี่ยนชื่อ$enable-prefers-reduced-motion-media-queryและ$enable-pointer-cursor-for-buttonsเป็น$enable-reduced-motionและ$enable-button-pointersเพื่อความกระชับ

• ทำลายนำbg-gradient-variant()มิกซ์อินออก ใช้.bg-gradientคลาสเพื่อเพิ่มการไล่ระดับสีให้กับองค์ประกอบแทน.bg-gradient-*คลาส ที่สร้างขึ้น

• ทำลาย นำมิกซ์อินที่เลิกใช้ก่อนหน้านี้ออก:

  • hover, hover-focus, plain-hover-focus, และhover-focus-active
  • float()
  • form-control-mixin()
  • nav-divider()
  • retina-img()
  • text-hide()(ยังลดคลาสยูทิลิตี้ที่เกี่ยวข้อง.text-hide)
  • visibility()
  • form-control-focus()

• ทำลายเปลี่ยนชื่อscale-color()ฟังก์ชันเพื่อshift-color()หลีกเลี่ยงการชนกับฟังก์ชันมาตราส่วนสีของ Sass

• box-shadowตอนนี้มิกซ์อินอนุญาตnullค่าและดรอปnoneจากอาร์กิวเมนต์หลายตัว ดู # 30394

• ตอนborder-radius()นี้มิกซ์อินมีค่าเริ่มต้นแล้ว

ระบบสี

• ระบบสีที่ใช้งาน ได้ color-level()และ$theme-color-intervalถูกลบออกไปเพื่อให้เป็นระบบสีใหม่ ทั้งหมดlighten()และdarken()ฟังก์ชันใน codebase ของเราถูกแทนที่ด้วยtint-color()และshade-color(). ฟังก์ชันเหล่านี้จะผสมสีกับสีขาวหรือสีดำแทนการเปลี่ยนความสว่างด้วยจำนวนคงที่ จะshift-color()แต้มหรือแรเงาสีขึ้นอยู่กับว่าพารามิเตอร์น้ำหนักเป็นค่าบวกหรือค่าลบ ดู #30622สำหรับรายละเอียดเพิ่มเติม

• เพิ่มสีอ่อนและเฉดสีใหม่สำหรับทุกสี โดยให้เก้าสีแยกกันสำหรับสีพื้นฐานแต่ละสี เป็นตัวแปร Sass ใหม่

• ปรับปรุงความคมชัดของสี อัตราคอนทราสต์ของสีแบบกระแทกจาก 3:1 เป็น 4.5:1 และอัปเดตสีน้ำเงิน เขียว ฟ้า และชมพูเพื่อให้แน่ใจว่าคอนทราสต์ WCAG 2.1 AA เปลี่ยนสีคอนทราสต์ของเราจาก$gray-900เป็น$black.

• เพื่อสนับสนุนระบบสีของเรา เราได้เพิ่มกำหนดเองtint-color()และshade-color()ฟังก์ชันใหม่เพื่อผสมสีของเราอย่างเหมาะสม

อัปเดตกริด

• เบรกพอยต์ใหม่! เพิ่มxxlเบรกพอยต์ใหม่สำหรับ1400pxและขึ้น ไม่มีการเปลี่ยนแปลงเบรกพอยต์อื่นๆ ทั้งหมด

• ปรับปรุงรางน้ำ. ขณะนี้รางน้ำถูกตั้งค่าเป็น rem และแคบกว่า v4 ( 1.5remหรือประมาณ24pxลงจาก30px) สิ่งนี้ทำให้รางน้ำของระบบกริดของเราสอดคล้องกับยูทิลิตี้การเว้นวรรคของเรา

  • เพิ่มคลาสรางน้ำ ใหม่ ( .g-*, .gx-*, และ.gy-*) เพื่อควบคุมรางน้ำแนวนอน/แนวตั้ง รางน้ำแนวนอน และรางน้ำแนวตั้ง
  • ทำลายเปลี่ยนชื่อ.no-guttersเพื่อ.g-0ให้ตรงกับยูทิลิตี้รางน้ำใหม่

• ไม่สามารถใช้คอลัมน์ได้อีกต่อposition: relativeไป ดังนั้นคุณอาจต้องเพิ่ม.position-relativeองค์ประกอบบางอย่างเพื่อกู้คืนการทำงานนั้น

• ทำลายดร็อปคลาสหลายๆ.order-*คลาสที่มักจะไม่ได้ใช้ ตอนนี้เราให้บริการเฉพาะ.order-1เมื่อ.order-5แกะกล่องเท่านั้น

• ทำลายลด.mediaส่วนประกอบเนื่องจากสามารถจำลองแบบได้อย่างง่ายดายด้วยยูทิลิตี้ ดู #28265และ หน้ายูทิลิ ตี้flex สำหรับตัวอย่าง

• ทำลาย bootstrap-grid.cssตอนนี้ใช้เฉพาะกับbox-sizing: border-boxคอลัมน์แทนที่จะรีเซ็ตขนาดกล่องทั่วโลก ด้วยวิธีนี้ สไตล์กริดของเราจึงสามารถใช้ได้ในสถานที่ต่างๆ มากขึ้นโดยไม่มีการรบกวน

• $enable-grid-classesไม่ปิดใช้งานการสร้างคลาสคอนเทนเนอร์อีกต่อไป ดู #29146

• อัปเดตmake-colมิกซ์อินเป็นค่าเริ่มต้นเป็นคอลัมน์ที่เท่ากันโดยไม่มีขนาดที่ระบุ

เนื้อหา รีบูต ฯลฯ

• RFSเปิดใช้งานตามค่าเริ่มต้นแล้ว หัวเรื่องที่ใช้font-size()มิกซ์อินจะปรับfont-sizeขนาดตามวิวพอร์ตโดยอัตโนมัติ คุณลักษณะนี้เคยเลือกใช้กับ v4

• ทำลายปรับปรุงรูปแบบการแสดงผลเพื่อแทนที่$display-*ตัวแปรและ$display-font-sizesแผนที่ Sass ลบ$display-*-weightตัวแปรแต่ละตัวสำหรับs เดียว $display-font-weightและที่ปรับ แล้วด้วยfont-size

• เพิ่ม.display-*ขนาดส่วนหัวใหม่ 2 ขนาด.display-5และ.display-6.

• ลิงก์จะถูกขีดเส้นใต้ตามค่าเริ่มต้น (ไม่ใช่เฉพาะเมื่อวางเมาส์เหนือ) เว้นแต่จะเป็นส่วนหนึ่งของส่วนประกอบเฉพาะ

• ตารางที่ออกแบบใหม่เพื่อรีเฟรชสไตล์และสร้างใหม่ด้วยตัวแปร CSS เพื่อการควบคุมสไตล์ที่มากขึ้น

• ทำลายตารางที่ซ้อนกันจะไม่สืบทอดสไตล์อีกต่อไป

• ทำลาย .thead-lightและ.thead-darkลดลงในความโปรดปรานของ.table-*คลาสตัวแปรซึ่งสามารถใช้สำหรับองค์ประกอบตารางทั้งหมด ( thead, tbody, tfoot, tr, thและtd)

• ทำลายมิกซ์table-row-variant()อินถูกเปลี่ยนชื่อเป็นtable-variant()และยอมรับพารามิเตอร์ 2 ตัวเท่านั้น: $color(ชื่อสี) และ$value(รหัสสี) สีเส้นขอบและสีเฉพาะจุดจะคำนวณโดยอัตโนมัติตามตัวแปรปัจจัยตาราง

• แยกตัวแปรการเติมเซลล์ของตารางออกเป็น-yและ-x.

• ทำลายตก.pre-scrollableชั้น. ดู #29135

• ทำลาย .text-*ยูทิลิตี้จะไม่เพิ่มสถานะโฮเวอร์และโฟกัสไปที่ลิงก์อีกต่อไป .link-*สามารถใช้คลาสตัวช่วยแทนได้ ดู #29267

• ทำลายตก.text-justifyชั้น. ดู #29793

• ทำลาย <hr>ขณะนี้องค์ประกอบใช้heightแทนborderการสนับสนุนsizeแอตทริบิวต์ได้ ดียิ่งขึ้น นอกจากนี้ยังช่วยให้สามารถใช้ยูทิลิตี้การเติมเพื่อสร้างตัวแบ่งที่หนาขึ้น (เช่น<hr class="py-1">)

• รีเซ็ตค่าเริ่มต้นpadding-leftใน แนวนอน <ul>และ<ol>องค์ประกอบจากค่าเริ่มต้นของเบราว์เซอร์40pxเป็น2rem.

• เพิ่ม$enable-smooth-scrollซึ่งมีผลscroll-behavior: smoothทั่วโลก—ยกเว้นสำหรับผู้ใช้ที่ขอลดการเคลื่อนไหวผ่านprefers-reduced-motionการสืบค้นสื่อ ดู #31877

RTL

• ตัวแปรเฉพาะ ยูทิลิตี้ และมิกซ์อินเฉพาะทิศทางแนวนอนทั้งหมดถูกเปลี่ยนชื่อเพื่อใช้คุณสมบัติเชิงตรรกะ เช่นเดียวกับที่พบในเลย์เอา ต์flexbox—เช่นstartและendแทนที่leftandright

แบบฟอร์ม

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

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

  • .custom-checkคือตอน.form-checkนี้
  • .custom-check.custom-switchคือตอน.form-check.form-switchนี้
  • .custom-selectคือตอน.form-selectนี้
  • .custom-fileและ.form-fileถูกแทนที่ด้วยรูปแบบที่กำหนดเองที่ด้านบนของ.form-control.
  • .custom-rangeคือตอน.form-rangeนี้
  • ลดลงพื้นเมือง.form-control-fileและ.form-control-range.

• ทำลายหลุด.input-group-appendและ.input-group-prepend. ขณะนี้คุณสามารถเพิ่มปุ่มและ.input-group-textเป็นลูกโดยตรงของกลุ่มอินพุตได้

• รัศมีเส้นขอบที่หายไป เป็นเวลานานในกลุ่มอินพุตที่มีจุดบกพร่องด้านการตรวจสอบความถูกต้องได้รับการแก้ไขในที่สุดโดยการเพิ่ม.has-validationคลาสเพิ่มเติมให้กับกลุ่มอินพุตที่มีการตรวจสอบความถูกต้อง

• ทำลาย คลาสเลย์เอาต์เฉพาะของฟอร์มที่ลดลงสำหรับระบบกริดของเรา ใช้กริดและยูทิลิตี้ของเราแทน, .form-group, .form-rowหรือ.form-inline

• ทำลายฉลากแบบฟอร์มตอนนี้ต้องการ.form-label.

• ทำลาย .form-textไม่ได้ตั้งค่าอีกต่อไปdisplayทำให้คุณสามารถสร้างอินไลน์หรือบล็อกข้อความช่วยเหลือได้ตามที่คุณต้องการ เพียงแค่เปลี่ยนองค์ประกอบ HTML

• ไอคอนการตรวจสอบจะไม่ถูกนำไปใช้กับ<select>s ด้วยmultiple.

• จัดเรียงไฟล์ Sass ต้นทางใหม่ภายใต้scss/forms/รวมถึงรูปแบบกลุ่มอินพุต

---

ส่วนประกอบ

• ค่า ที่เป็นหนึ่งเดียว paddingสำหรับการแจ้งเตือน เบรดครัมบ์ การ์ด ดรอปดาวน์ กลุ่มรายการ โมดอล ป๊อปโอเวอร์ และคำแนะนำเครื่องมือโดยอิงตาม$spacerตัวแปร ของเรา ดู #30564 .

หีบเพลง

• เพิ่มองค์ประกอบหีบเพลงใหม่

การแจ้งเตือน

• ขณะนี้การแจ้งเตือนมี ตัวอย่าง พร้อมไอคอน

• ลบสไตล์ที่กำหนดเองสำหรับ<hr>s ในแต่ละการแจ้งเตือนเนื่องจากใช้currentColorแล้ว

ป้าย

• ทำลายยกเลิกคลาสสีทั้งหมด.badge-*สำหรับยูทิลิตี้พื้นหลัง (เช่น use .bg-primaryแทน.badge-primary)

• ทำลายดร.badge-pillอป — ใช้.rounded-pillยูทิลิตี้แทน

• ทำลายนำรูปแบบโฮเวอร์และโฟกัสสำหรับ<a>และ<button>องค์ประกอบออก

• เพิ่มช่องว่างภายในเริ่มต้นสำหรับตราสัญลักษณ์จาก.25em/ .5emเป็น.35em/.65em

เกล็ดขนมปัง

• ทำให้การแสดงเบรดครัมบ์ง่ายขึ้นโดยลบ, padding, background-colorและborder-radius

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

ปุ่ม

• ทำลาย สลับปุ่มพร้อมช่องทำเครื่องหมายหรือตัวเลือก ไม่ต้องใช้ JavaScript อีกต่อไปและมีมาร์กอัปใหม่ เราไม่ต้องการองค์ประกอบการห่ออีกต่อไป เพิ่ม.btn-checkไปยัง<input>และจับคู่กับ.btnคลาสใดๆ บน<label>. ดู # 30650 เอกสารสำหรับสิ่งนี้ได้ย้ายจากหน้าปุ่มของเราไปยังส่วนแบบฟอร์มใหม่

• ทำลาย ลดลง.btn-blockสำหรับสาธารณูปโภค แทนที่จะใช้.btn-blockปุ่ม.btnให้ห่อปุ่ม.d-gridและ.gap-*ยูทิลิตี้เพื่อเพิ่มพื้นที่ตามต้องการ เปลี่ยนไปใช้คลาสที่ตอบสนองเพื่อการควบคุมที่ดียิ่งขึ้น อ่านเอกสารสำหรับตัวอย่างบางส่วน

• อัปเดตbutton-variant()และbutton-outline-variant()มิกซ์อินของเราเพื่อรองรับพารามิเตอร์เพิ่มเติม

• อัปเดตปุ่มเพื่อเพิ่มคอนทราสต์ในสถานะโฮเวอร์และสถานะใช้งาน

• ปุ่มปิดการใช้งานในขณะนี้มีpointer-events: none;.

การ์ด

• ทำลายลดลง.card-deckในความโปรดปรานของกริดของเรา ห่อไพ่ของคุณในคลาสคอลัมน์และเพิ่ม.row-cols-*คอนเทนเนอร์หลักเพื่อสร้างสำรับไพ่ใหม่ (แต่สามารถควบคุมการจัดแนวที่ตอบสนองได้มากกว่า)

• ทำลายลดลง.card-columnsในความโปรดปรานของก่ออิฐ ดู # 28922

• ทำลายเปลี่ยน.cardaccordion พื้นฐานด้วยส่วนประกอบ Accordionใหม่

ม้าหมุน

• เพิ่ม.carousel-darkตัวแปร ใหม่ สำหรับข้อความสีเข้ม ตัวควบคุม และตัวระบุ (เหมาะสำหรับพื้นหลังสีอ่อน)

• แทนที่ไอคอนรูปตัววีสำหรับการควบคุมแบบหมุนด้วย SVG ใหม่จากBootstrap Icons

ปุ่มปิด

• ทำลายเปลี่ยนชื่อ.closeเป็น.btn-closeชื่อสามัญน้อยกว่า

• ตอนนี้ปุ่มปิดใช้background-image(SVG แบบฝัง) แทน a ×ใน HTML ทำให้ปรับแต่งได้ง่ายขึ้นโดยไม่จำเป็นต้องแตะมาร์กอัปของคุณ

• เพิ่ม.btn-close-whiteรูปแบบใหม่ที่ใช้filter: invert(1)เพื่อเปิดใช้งานไอคอนยกเลิกคอนทราสต์ที่สูงขึ้นกับพื้นหลังที่มืดกว่า

ทรุด

• นำการยึดสโครลสำหรับหีบเพลงออก

ดรอปดาวน์

• เพิ่มตัวแปรใหม่.dropdown-menu-darkและตัวแปรที่เกี่ยวข้องสำหรับดรอปดาวน์แบบมืดตามความต้องการ

• เพิ่มตัวแปรใหม่สำหรับ$dropdown-padding-x.

• ทำให้ตัวแบ่งดรอปดาวน์มืดลงเพื่อเพิ่มคอนทราสต์

• ทำลายเหตุการณ์ทั้งหมดสำหรับรายการแบบเลื่อนลงจะถูกทริกเกอร์บนปุ่มสลับแบบเลื่อนลง จากนั้นจึงเพิ่มเป็นองค์ประกอบหลัก

• ขณะนี้เมนูแบบเลื่อนลงมีการdata-bs-popper="static"ตั้งค่าแอตทริบิวต์เมื่อการวางตำแหน่งของเมนูแบบเลื่อนลงเป็นแบบคงที่และdata-bs-popper="none"เมื่อเมนูแบบเลื่อนลงอยู่ในแถบนำทาง สิ่งนี้ถูกเพิ่มโดย JavaScript ของเราและช่วยให้เราใช้รูปแบบตำแหน่งที่กำหนดเองโดยไม่รบกวนการวางตำแหน่งของ Popper

• ทำลายตัวเลือกที่ ลดลงflipสำหรับปลั๊กอินแบบเลื่อนลงเพื่อสนับสนุนการกำหนดค่า Popper ดั้งเดิม ตอนนี้คุณสามารถปิดการใช้งานลักษณะการพลิกโดยส่งอาร์เรย์ว่างสำหรับfallbackPlacementsตัวเลือกในตัวแก้ไขพลิก

• ขณะนี้เมนูแบบเลื่อนลงสามารถคลิกได้ด้วยautoCloseตัวเลือกใหม่เพื่อจัดการกับพฤติกรรมการปิดอัตโนมัติ คุณสามารถใช้ตัวเลือกนี้เพื่อยอมรับการคลิกภายในหรือภายนอกเมนูแบบเลื่อนลงเพื่อทำให้เป็นแบบโต้ตอบ

• ดรอปดาวน์รองรับการ.dropdown-itemห่อด้วย<li>s.

จัมโบตรอน

• ทำลายลดส่วนประกอบ jumbotron เนื่องจากสามารถจำลองแบบด้วยยูทิลิตี้ได้ ดูตัวอย่าง Jumbotron ใหม่ของเราสำหรับการสาธิต

รายการกลุ่ม

• เพิ่ม.list-group-numberedตัวแก้ไข ใหม่ ในกลุ่มรายการ

การนำทางและแท็บ

• เพิ่มnullตัวแปรใหม่สำหรับfont-size, font-weight, color, และ:hover colorใน.nav-linkคลาส

แถบนำทาง

• ทำลายตอนนี้แถบนำทางต้องการคอนเทนเนอร์ภายใน (เพื่อลดความซับซ้อนของข้อกำหนดการเว้นวรรคและต้องใช้ CSS)

ออฟแคนวาส

• เพิ่มองค์ประกอบ offcanvasใหม่

การแบ่งหน้า

• ลิงก์การแบ่งหน้าตอนนี้สามารถปรับแต่งได้margin-leftซึ่งจะถูกปัดเศษแบบไดนามิกในทุกมุมเมื่อแยกออกจากกัน

• เพิ่มtransitionลิงก์การแบ่งหน้าแล้ว

ป๊อปโอเวอร์

• ทำลายเปลี่ยนชื่อ.arrowเป็น.popover-arrowในเทมเพลตป๊อปโอเวอร์เริ่มต้นของเรา

• เปลี่ยนชื่อwhiteListตัวเลือกเป็นallowList.

สปินเนอร์

• นักปั่นจะได้รับเกียรติprefers-reduced-motion: reduceจากการทำให้แอนิเมชั่นช้าลง ดู # 31882

• ปรับปรุงการจัดตำแหน่งแนวตั้งของสปินเนอร์

ขนมปังปิ้ง

• ขณะนี้สามารถวาง ขนมปังปิ้ง ใน a .toast-containerด้วยความช่วยเหลือของยูทิลิตี้การ จัดตำแหน่ง

• เปลี่ยนระยะเวลาเริ่มต้นของขนมปังปิ้งเป็น 5 วินาที

• นำออกoverflow: hiddenจากขนมปังปิ้งและแทนที่ด้วยborder-radiusฟังก์ชันcalc()ที่เหมาะสม

เคล็ดลับเครื่องมือ

• ทำลายเปลี่ยนชื่อ.arrowเป็น.tooltip-arrowเทมเพลตคำแนะนำเครื่องมือเริ่มต้นของเรา

• ทำลายค่าเริ่มต้นสำหรับ the fallbackPlacementsถูกเปลี่ยนเป็น['top', 'right', 'bottom', 'left']สำหรับการจัดวางองค์ประกอบ popper ที่ดีขึ้น

• ทำลายเปลี่ยนชื่อwhiteListตัวเลือกเป็นallowList.

สาธารณูปโภค

• ทำลายเปลี่ยนชื่อยูทิลิตีหลายรายการเพื่อใช้ชื่อคุณสมบัติโลจิคัลแทนชื่อทิศทางด้วยการเพิ่มการสนับสนุน RTL:

  • เปลี่ยนชื่อ.left-*และ.right-*เป็น.start-*และ.end-*.
  • เปลี่ยนชื่อ.float-leftและ.float-rightเป็น.float-startและ.float-end.
  • เปลี่ยนชื่อ.border-leftและ.border-rightเป็น.border-startและ.border-end.
  • เปลี่ยนชื่อ.rounded-leftและ.rounded-rightเป็น.rounded-startและ.rounded-end.
  • เปลี่ยนชื่อ.ml-*และ.mr-*เป็น.ms-*และ.me-*.
  • เปลี่ยนชื่อ.pl-*และ.pr-*เป็น.ps-*และ.pe-*.
  • เปลี่ยนชื่อ.text-leftและ.text-rightเป็น.text-startและ.text-end.

• ทำลายปิดการใช้งานระยะขอบติดลบโดยค่าเริ่มต้น

• เพิ่ม.bg-bodyคลาสใหม่สำหรับการตั้งค่า<body>พื้นหลังเป็นองค์ประกอบเพิ่มเติมอย่างรวดเร็ว

• เพิ่มยูทิลิตี้ตำแหน่ง ใหม่ สำหรับtop, right, , bottomและ leftค่ารวมถึง0, 50%, และ100%สำหรับแต่ละคุณสมบัติ

• เพิ่ม.translate-middle-x& .translate-middle-yยูทิลิตี้ใหม่ให้กับองค์ประกอบตำแหน่งที่แน่นอน / คงที่ตรงกลางแนวนอนหรือแนวตั้ง

• เพิ่มborder-widthยูทิลิตี้ใหม่

• ทำลายเปลี่ยนชื่อ.text-monospaceเป็น.font-monospace.

• ทำลายนำออก.text-hideเนื่องจากเป็นวิธีซ่อนข้อความแบบโบราณที่ไม่ควรใช้อีกต่อไป

• เพิ่ม.fs-*ยูทิลิตี้สำหรับfont-sizeยูทิลิตี้ (โดยเปิดใช้งาน RFS) สิ่งเหล่านี้ใช้มาตราส่วนเดียวกันกับส่วนหัวเริ่มต้นของ HTML (1-6 ใหญ่ไปเล็ก) และสามารถแก้ไขได้ผ่านแผนที่ Sass

• ทำลายเปลี่ยนชื่อ.font-weight-*ยูทิลิตี้.fw-*เพื่อความกระชับและความสม่ำเสมอ

• ทำลายเปลี่ยนชื่อ.font-style-*ยูทิลิตี้.fst-*เพื่อความกระชับและความสม่ำเสมอ

• เพิ่ม.d-gridเพื่อแสดงยูทิลิตี้และยูทิgapลิตี้ใหม่ ( .gap) สำหรับ CSS Grid และเลย์เอาต์ flexbox

• ทำลายลบออก.rounded-smและrounded-lgและแนะนำคลาสใหม่.rounded-0ให้กับ.rounded-3. ดู # 31687

• เพิ่มline-heightยูทิลิตี้ใหม่: .lh-1, .lh-sm, .lh-baseและ.lh-lg. ดูที่นี่ .

• ย้าย.d-noneยูทิลิตีใน CSS ของเราเพื่อให้มีน้ำหนักมากกว่ายูทิลิตีการแสดงผลอื่นๆ

• ขยายเวลาตัว.visually-hidden-focusableช่วยทำงานบนคอนเทนเนอร์ด้วย โดยใช้:focus-within.

ผู้ช่วย

• ทำลาย ตัว ช่วยฝังที่ตอบสนองได้รับการเปลี่ยนชื่อเป็นผู้ช่วยเหลืออัตราส่วนด้วยชื่อคลาสใหม่และพฤติกรรมที่ปรับปรุงแล้ว เช่นเดียวกับตัวแปร CSS ที่เป็นประโยชน์

  • คลาสได้รับการเปลี่ยนชื่อเพื่อเปลี่ยนbyเป็นxอัตราส่วนกว้างยาว ตัวอย่างเช่น.ratio-16by9ตอนนี้.ratio-16x9.
  • เราได้ลด.embed-responsive-itemตัวเลือกกลุ่มและองค์ประกอบเพื่อให้มี.ratio > *ตัวเลือก ที่ง่ายกว่า ไม่จำเป็นต้องใช้คลาสอีกต่อไป และตัวช่วยอัตราส่วนสามารถทำงานร่วมกับองค์ประกอบ HTML ใดๆ ก็ได้
  • แผนที่$embed-responsive-aspect-ratiosSass ถูกเปลี่ยนชื่อเป็น$aspect-ratiosและค่าของมันได้ถูกทำให้ง่ายขึ้นเพื่อรวมชื่อคลาสและเปอร์เซ็นต์เป็นkey: valueคู่
  • ขณะนี้มีการสร้างตัวแปร CSS และรวมไว้สำหรับแต่ละค่าในแผนที่ Sass แก้ไข--bs-aspect-ratioตัวแปรบน.ratioเพื่อสร้างอัตราส่วนกว้างยาวที่กำหนดเอง

• ทำลาย คลาส "โปรแกรมอ่านหน้าจอ" เปลี่ยนเป็นคลาส"ซ่อนด้วยภาพ"แล้ว

  • เปลี่ยนไฟล์ Sass จากscss/helpers/_screenreaders.scssเป็นscss/helpers/_visually-hidden.scss
  • เปลี่ยนชื่อ.sr-onlyและ.sr-only-focusableเป็น.visually-hiddenและ.visually-hidden-focusable
  • เปลี่ยนชื่อsr-only()และsr-only-focusable()มิกซ์อินเป็นvisually-hidden()และvisually-hidden-focusable().

• bootstrap-utilities.cssตอนนี้ยังรวมถึงผู้ช่วยของเราด้วย ไม่จำเป็นต้องนำเข้าผู้ช่วยในบิลด์ที่กำหนดเองอีกต่อไป

JavaScript

• ลดการพึ่งพา jQueryและเขียนปลั๊กอินใหม่เพื่อให้อยู่ใน JavaScript ปกติ

• ทำลายแอตทริบิวต์ข้อมูลสำหรับปลั๊กอิน JavaScript ทั้งหมดได้รับการเนมสเปซเพื่อช่วยแยกแยะฟังก์ชันการทำงานของ Bootstrap จากบุคคลที่สามและโค้ดของคุณเอง เช่น เราใช้data-bs-toggleแทนdata-toggle.

• ปลั๊กอินทั้งหมดสามารถยอมรับตัวเลือก CSS เป็นอาร์กิวเมนต์แรกได้แล้ว คุณสามารถส่งองค์ประกอบ DOM หรือตัวเลือก CSS ที่ถูกต้องเพื่อสร้างอินสแตนซ์ใหม่ของปลั๊กอิน:

  สำเนา

  var modal = new bootstrap.Modal('#myModal')
  var dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
  

• popperConfigสามารถส่งผ่านเป็นฟังก์ชันที่ยอมรับการกำหนดค่า Popper เริ่มต้นของ Bootstrap เป็นอาร์กิวเมนต์ เพื่อให้คุณสามารถผสานการกำหนดค่าเริ่มต้นนี้ในแบบของคุณ ใช้กับดรอปดาวน์ ป๊อปโอเวอร์ และคำแนะนำเครื่องมือ

• ค่าเริ่มต้นสำหรับ the fallbackPlacementsถูกเปลี่ยนเป็น['top', 'right', 'bottom', 'left']สำหรับการจัดวางองค์ประกอบ Popper ที่ดีขึ้น ใช้กับดรอปดาวน์ ป๊อปโอเวอร์ และคำแนะนำเครื่องมือ

• ลบขีดล่างออกจากวิธีสแตติกสาธารณะเช่น_getInstance()→getInstance()