ข้ามไปที่เนื้อหาหลัก ข้ามไปที่การนำทางเอกสาร
Check
in English

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

ติดตามและตรวจสอบการเปลี่ยนแปลงของไฟล์ต้นฉบับ เอกสารประกอบ และส่วนประกอบ Bootstrap เพื่อช่วยให้คุณย้ายจาก v4 เป็น v5

ในหน้านี้

v5.2.0

ดีไซน์ใหม่

Bootstrap v5.2.0 มีการอัปเดตการออกแบบที่ละเอียดอ่อนสำหรับส่วนประกอบและคุณสมบัติจำนวนหนึ่งทั่วทั้งโปรเจ็กต์โดยเฉพาะอย่างยิ่งผ่านborder-radiusค่าที่ได้รับการปรับปรุงบนปุ่มและการควบคุมแบบฟอร์ม เอกสารของเรายังได้รับการอัปเดตด้วยหน้าแรกใหม่ เค้าโครงเอกสารที่เรียบง่ายกว่าซึ่งไม่ยุบส่วนต่างๆ ของแถบด้านข้างอีกต่อไป และตัวอย่างที่โดดเด่นของBootstrap Icons

ตัวแปร CSS เพิ่มเติม

เราได้อัปเดตส่วนประกอบทั้งหมดของเราเพื่อใช้ตัวแปร CSS ในขณะที่ Sass ยังคงสนับสนุนทุกอย่าง แต่ละส่วนประกอบได้รับการอัปเดตเพื่อรวมตัวแปร CSS ในคลาสพื้นฐานของส่วนประกอบ (เช่น.btn) ซึ่งช่วยให้ปรับแต่ง Bootstrap แบบเรียลไทม์ได้มากขึ้น ในรุ่นต่อๆ ไป เราจะขยายการใช้ตัวแปร CSS ของเราต่อไปในเลย์เอาต์ แบบฟอร์ม ตัวช่วย และยูทิลิตี้ อ่านเพิ่มเติมเกี่ยวกับตัวแปร CSS ในแต่ละองค์ประกอบในหน้าเอกสารที่เกี่ยวข้อง

การใช้ตัวแปร CSS ของเราจะค่อนข้างไม่สมบูรณ์จนถึง Bootstrap 6 แม้ว่าเราจะชอบที่จะใช้งานสิ่งเหล่านี้อย่างทั่วถึง แต่ก็มีความเสี่ยงที่จะทำให้เกิดการเปลี่ยนแปลงที่แตกหัก ตัวอย่างเช่น การตั้งค่า$alert-border-width: var(--bs-border-width)ในซอร์สโค้ดของเราจะทำให้ Sass เสียหายในโค้ดของคุณเอง หากคุณทำ$alert-border-width * 2ด้วยเหตุผลบางประการ

ดังนั้น หากเป็นไปได้ เราจะยังคงผลักดันตัวแปร CSS ให้มากขึ้นต่อไป แต่โปรดทราบว่าการใช้งานของเราอาจถูกจำกัดเล็กน้อยใน v5

ใหม่_maps.scss

Bootstrap v5.2.0 แนะนำไฟล์ Sass ใหม่ด้วย_maps.scss. ดึงเอาแผนที่ Sass หลายอันออกมา_variables.scssเพื่อแก้ไขปัญหาที่การอัปเดตแผนที่ดั้งเดิมไม่ถูกนำไปใช้กับแผนที่รองที่ขยายออกไป ตัวอย่างเช่น การอัปเดตที่$theme-colorsไม่ถูกนำไปใช้กับแมปธีมอื่นๆ ที่ใช้$theme-colorsซึ่งทำให้เวิร์กโฟลว์การปรับแต่งคีย์เสียหาย กล่าวโดยย่อ Sass มีข้อจำกัดที่เมื่อ ใช้ตัวแปรหรือแผนที่เริ่มต้นแล้ว จะไม่สามารถอัปเดตได้ มีข้อบกพร่องที่คล้ายคลึงกันกับตัวแปร CSS เมื่อใช้เพื่อเขียนตัวแปร CSS อื่นๆ

นี่คือเหตุผลที่การปรับแต่งตัวแปรใน Bootstrap ต้องมาหลัง@import "functions"แต่ก่อนหน้า@import "variables"และส่วนที่เหลือของกองนำเข้าของเรา เช่นเดียวกับแผนที่ Sass คุณต้องแทนที่ค่าเริ่มต้นก่อนที่จะใช้งาน แผนที่ต่อไปนี้ถูกย้ายไปที่ใหม่_maps.scss:

  • $theme-colors-rgb
  • $utilities-colors
  • $utilities-text
  • $utilities-text-colors
  • $utilities-bg
  • $utilities-bg-colors
  • $negative-spacers
  • $gutters

บิลด์ Bootstrap CSS แบบกำหนดเองของคุณควรมีลักษณะเช่นนี้ด้วยการนำเข้าแผนที่แยกต่างหาก

  // Functions come first
  @import "functions";

  // Optional variable overrides here
+ $custom-color: #df711b;
+ $custom-theme-colors: (
+   "custom": $custom-color
+ );

  // Variables come next
  @import "variables";

+ // Optional Sass map overrides here
+ $theme-colors: map-merge($theme-colors, $custom-theme-colors);
+
+ // Followed by our default maps
+ @import "maps";
+
  // Rest of our imports
  @import "mixins";
  @import "utilities";
  @import "root";
  @import "reboot";
  // etc

สาธารณูปโภคใหม่

การเปลี่ยนแปลงเพิ่มเติม

  • เปิด$enable-container-classesตัวทางเลือก ใหม่ —ตอนนี้เมื่อเลือกใช้โครงร่าง CSS Grid แบบทดลอง.container-*คลาสจะยังคงถูกคอมไพล์ เว้นแต่ตัวเลือกนี้จะตั้งค่าเป็นfalse. คอนเทนเนอร์ยังเก็บค่ารางน้ำไว้ด้วย

  • ตอนนี้คอมโพเนนต์ Offcanvas มีรูปแบบที่ ตอบสนอง คลาส ดั้งเดิม.offcanvasยังคงไม่เปลี่ยนแปลง—ซ่อนเนื้อหาในวิวพอร์ตทั้งหมด หากต้องการให้ตอบสนอง ให้เปลี่ยนชั้นเรียนนั้น.offcanvasเป็นชั้นเรียนใด.offcanvas-{sm|md|lg|xl|xxl}ก็ได้

  • ตอนนี้มีตัวแบ่งตารางที่หนาขึ้นแล้ว —เราได้ลบเส้นขอบที่หนาขึ้นและยากขึ้นระหว่างกลุ่มตารางและย้ายไปยังคลาสเสริมที่คุณสามารถ.table-group-dividerใช้ได้ ดูเอกสารตารางสำหรับตัวอย่าง

  • Scrollspy ถูกเขียนใหม่เพื่อใช้ Intersection Observer APIซึ่งหมายความว่าคุณไม่จำเป็นต้องใช้ wrapper พาเรนต์ที่เกี่ยวข้องอีกต่อไป เลิกใช้offsetconfig และอื่นๆ มองหาการใช้งาน Scrollspy ให้แม่นยำและสม่ำเสมอยิ่งขึ้นในการเน้นการนำทาง

  • ตอนนี้ Popovers และคำแนะนำเครื่องมือใช้ตัวแปร CSS ตัวแปร CSS บางตัวได้รับการอัปเดตจากคู่ของ Sass เพื่อลดจำนวนตัวแปร ด้วยเหตุนี้ ตัวแปรสามตัวจึงถูกเลิกใช้งานในรุ่นนี้: , $popover-arrow-color, $popover-arrow-outer-colorและ$tooltip-arrow-color

  • เพิ่มตัว.text-bg-{color}ช่วย ใหม่ แทนที่จะตั้งค่าแต่ละรายการ.text-*และ.bg-*ยูทิลิตี้ คุณสามารถใช้ตัว.text-bg-*ช่วยเพื่อตั้งค่า a ที่ มีพื้น หน้าbackground-colorตัดกันcolor

  • เพิ่ม.form-check-reverseตัวแก้ไขเพื่อพลิกลำดับของป้ายกำกับและช่องทำเครื่องหมาย/วิทยุที่เกี่ยวข้อง

  • เพิ่ม การสนับสนุน คอลัมน์ลายตารางผ่าน.table-striped-columnsคลาส ใหม่

สำหรับรายการการเปลี่ยนแปลงทั้งหมด โปรดดูที่โปรเจ็ก ต์v5.2.0 บน GitHub

v5.1.0

  • เพิ่มการสนับสนุนทดลองสำหรับเค้าโครงCSS Grid —ขณะนี้อยู่ในระหว่างดำเนินการและยังไม่พร้อมสำหรับการใช้งานจริง แต่คุณสามารถเลือกใช้ฟีเจอร์ใหม่ได้ผ่าน Sass หากต้องการเปิดใช้งาน ให้ปิดใช้งานกริดเริ่มต้น โดยการตั้งค่า$enable-grid-classes: falseและเปิดใช้งาน CSS Grid โดยการตั้ง$enable-cssgrid: trueค่า

  • อัปเดตแถบนำทางเพื่อรองรับ offcanvas —เพิ่มลิ้นชัก offcanvas ใน navbar ใด ๆที่มีคลาสที่ตอบสนอง.navbar-expand-*และมาร์กอัป offcanvas บางตัว

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

  • ปลั๊กอินยุบรองรับการยุบในแนวนอนแล้ว —เพิ่ม.collapse-horizontalในของคุณ.collapseเพื่อยุบwidthแทนheight. หลีกเลี่ยงการทาสีเบราว์เซอร์ใหม่โดยการตั้งค่า a min-heightหรือheight.

  • เพิ่มตัวช่วยกฎกองและแนวตั้งใหม่ —ใช้คุณสมบัติ flexbox หลายรายการอย่างรวดเร็วเพื่อสร้างเลย์เอาต์ที่กำหนดเองด้วยสแต็ก เลือกจากกอง แนวนอน ( .hstack) และแนวตั้ง ( ) .vstackเพิ่มตัวแบ่งแนวตั้งที่คล้ายกับ<hr>องค์ประกอบด้วยตัวช่วยใหม่.vr

  • เพิ่ม:rootตัวแปร CSS ทั่วโลกใหม่ —เพิ่มตัวแปร CSS ใหม่หลายตัวใน:rootระดับสำหรับการควบคุม<body>สไตล์ มีงานอีกมากมายที่กำลังดำเนินการอยู่ รวมถึงในยูทิลิตีและส่วนประกอบต่างๆ ของเรา แต่สำหรับตอนนี้ โปรดอ่านตัวแปร CSS ในส่วนปรับแต่ง

  • ปรับปรุงยูทิลิตี้สีและพื้นหลังใหม่เพื่อใช้ตัวแปร CSS และเพิ่มความทึบของข้อความและยูทิลิตี้ความทึบของพื้นหลัง ใหม่ — .text-*และ.bg-*ยูทิลิตี้ถูกสร้างขึ้นด้วยตัวแปร CSS และrgba()ค่าสี ช่วยให้คุณปรับแต่งยูทิลิตี้ได้อย่างง่ายดายด้วยยูทิลิตี้ความทึบใหม่

  • เพิ่มตัวอย่างข้อมูลโค้ดใหม่เพื่อแสดงวิธีปรับแต่งส่วนประกอบของเรา —ดึงส่วนประกอบที่ปรับแต่งให้พร้อมใช้งานและรูปแบบการออกแบบทั่วไปอื่นๆ ด้วยตัวอย่าง Snippetsใหม่ ของเรา รวมถึงส่วนท้าย ดร อปดาวน์กลุ่มรายการและโมดอล

  • นำรูปแบบการวางตำแหน่งที่ไม่ได้ใช้ออกจากป๊อปโอเวอร์และคำแนะนำเครื่องมือเนื่องจาก Popper จัดการเพียงผู้เดียว $tooltip-marginเลิกใช้แล้วและตั้งค่าเป็นnullในกระบวนการ

ต้องการข้อมูลเพิ่มเติม? อ่านบล็อกโพสต์ v5.1.0

สวัสดี! การเปลี่ยนแปลงใน Bootstrap 5 รุ่นหลักรุ่นแรกของเรา v5.0.0 มีการบันทึกไว้ด้านล่าง สิ่งเหล่านี้ไม่ได้สะท้อนถึงการเปลี่ยนแปลงเพิ่มเติมที่แสดงด้านบน

การพึ่งพา

  • 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 อีกต่อไป ดู #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-control.custom-checkboxคือตอน.form-checkนี้
    • .custom-control.custom-custom-radioคือตอน.form-checkนี้
    • .custom-control.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

  • การควบคุมแบบฟอร์มจะไม่ได้รับการแก้ไขheightเมื่อเป็นไปได้อีกต่อไป แต่ให้รอmin-heightเพื่อปรับปรุงการปรับแต่งและความเข้ากันได้กับส่วนประกอบอื่นๆ

  • ไอคอนการตรวจสอบจะไม่ถูกนำไปใช้กับ<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 &times;ใน HTML ทำให้ปรับแต่งได้ง่ายขึ้นโดยไม่จำเป็นต้องแตะมาร์กอัปของคุณ

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

ทรุด

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

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

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

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

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

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

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

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

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

จัมโบตรอน

รายการกลุ่ม

  • เพิ่มnullตัวแปรใหม่สำหรับfont-size, font-weight, color, และ:hover colorใน.nav-linkคลาส
  • ทำลายตอนนี้แถบนำทางต้องการคอนเทนเนอร์ภายใน (เพื่อลดความซับซ้อนของข้อกำหนดการเว้นวรรคและต้องใช้ CSS)
  • ทำลาย.activeคลาสนี้ใช้กับs .nav-itemไม่ได้แล้ว ต้องใช้กับ.nav-links โดยตรง

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-ratiosเปลี่ยนชื่อแผนที่ Sass $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 ที่ถูกต้องเพื่อสร้างอินสแตนซ์ใหม่ของปลั๊กอิน:

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

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

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

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