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

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

การเปลี่ยนแปลงที่มั่นคง

การย้ายจากเบต้า 3 ไปเป็นเวอร์ชัน v4.0 ที่เสถียรของเรา ไม่มีการเปลี่ยนแปลงที่แตกหัก แต่มีการเปลี่ยนแปลงที่โดดเด่นบางประการ

การพิมพ์

• แก้ไขยูทิลิตี้การพิมพ์ที่ใช้งานไม่ได้ ก่อนหน้านี้ การใช้ ชั้นเรียนจะมีผลเหนือ ชั้นเรียน.d-print-*อื่นโดยไม่คาดคิด .d-*ตอนนี้มันตรงกับยูทิลิตี้การแสดงผลอื่นๆ ของเราและใช้กับสื่อนั้นเท่านั้น ( @media print)

• ขยายยูทิลิตีการแสดงผลการพิมพ์ที่พร้อมใช้งานเพื่อให้ตรงกับยูทิลิตีอื่นๆ เบต้า 3 และเก่ากว่ามีเพียงblock, inline-block, , inlineและ noneเพิ่มความเสถียร v4 flex, inline-flex, table, , table-rowและtable-cell

• แก้ไขการแสดงตัวอย่างก่อนพิมพ์ในเบราว์เซอร์ด้วยรูปแบบการพิมพ์ใหม่ที่@page sizeระบุ

การเปลี่ยนแปลงเบต้า 3

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

เบ็ดเตล็ด

• ลบ$thumbnail-transitionตัวแปร ที่ไม่ได้ใช้ เราไม่ได้ทำการเปลี่ยนแปลงใดๆ ดังนั้นจึงเป็นเพียงโค้ดเพิ่มเติม
• แพ็คเกจ npm ไม่รวมไฟล์อื่นใดนอกจากไฟล์ต้นทางและไฟล์ dist ของเราอีกต่อไป หากคุณพึ่งพาพวกเขาและเรียกใช้สคริปต์ของเราผ่านnode_modulesโฟลเดอร์ คุณควรปรับเวิร์กโฟลว์ของคุณ

แบบฟอร์ม

• เขียนใหม่ทั้งช่องทำเครื่องหมายและวิทยุที่กำหนดเองและเริ่มต้น ตอนนี้ ทั้งสองมีโครงสร้าง HTML ที่ตรงกัน (ด้านนอก<div>พร้อม brother <input>และ<label>) และรูปแบบเลย์เอาต์เดียวกัน (ค่าเริ่มต้นแบบสแต็ก สอดคล้องกับคลาสตัวแก้ไข) ซึ่งช่วยให้เราจัดรูปแบบป้ายกำกับตามสถานะของอินพุต ทำให้การรองรับdisabledแอตทริบิวต์ง่ายขึ้น (ก่อนหน้านี้ต้องใช้คลาสพาเรนต์) และรองรับการตรวจสอบแบบฟอร์มของเราได้ดียิ่งขึ้น

  ในส่วนนี้ เราได้เปลี่ยน CSS สำหรับการจัดการหลายรายการbackground-imageในช่องกาเครื่องหมายและวิทยุของแบบฟอร์มที่กำหนดเอง ก่อนหน้านี้.custom-control-indicatorองค์ประกอบที่นำออกแล้วจะมีสีพื้นหลัง การไล่ระดับสี และไอคอน SVG การปรับแต่งการไล่ระดับสีพื้นหลังหมายถึงการแทนที่ทุกครั้งที่คุณต้องการเปลี่ยนเพียงครั้งเดียว ตอนนี้ เรามี.custom-control-label::beforeสำหรับการเติมและการไล่ระดับสีและ.custom-control-label::afterจัดการไอคอน

  หากต้องการสร้างการเช็คอินแบบอินไลน์ที่กำหนดเอง ให้เพิ่ม.custom-control-inline.

• อัปเดตตัวเลือกสำหรับกลุ่มปุ่มตามอินพุต แทนที่จะ[data-toggle="buttons"] { }ใช้สไตล์และพฤติกรรม เราใช้dataแอตทริบิวต์สำหรับพฤติกรรม JS เท่านั้นและอาศัย.btn-group-toggleคลาสใหม่สำหรับการจัดสไตล์

• ลบออก.col-form-legendเพื่อการปรับปรุง.col-form-labelเล็กน้อย ด้วยวิธีนี้.col-form-label-smและ.col-form-label-lgสามารถใช้กับ<legend>องค์ประกอบต่างๆ ได้อย่างง่ายดาย

• อินพุตไฟล์ที่กำหนดเองได้รับการเปลี่ยนแปลงใน$custom-file-textตัวแปร Sass มันไม่ใช่แผนที่ Sass ที่ซ้อนกันอีกต่อไป และตอนนี้ให้พลังเพียงสตริงเดียวเท่านั้น— Browseปุ่มดังกล่าวเป็นองค์ประกอบหลอกเพียงองค์ประกอบเดียวที่สร้างขึ้นจาก Sass ของเรา Choose fileข้อความตอนนี้มาจาก.custom-file-label.

กลุ่มอินพุต

• ส่วนเสริมของกลุ่มอินพุตนั้นเฉพาะเจาะจงสำหรับตำแหน่งที่สัมพันธ์กับอินพุต เราได้ลดลง.input-group-addonและ.input-group-btnสำหรับสองคลาสใหม่.input-group-prependและ.input-group-append. คุณต้องใช้ส่วนต่อท้ายหรือส่วนหน้าอย่างชัดเจนในตอนนี้ ซึ่งจะทำให้ CSS ของเราง่ายขึ้นมาก ภายในส่วนต่อท้ายหรือเติมหน้า ให้วางปุ่มของคุณอย่างที่ควรจะเป็นในที่อื่น แต่ตัดข้อความใน.input-group-text.

• ขณะนี้รองรับรูปแบบการตรวจสอบความถูกต้องแล้ว เช่นเดียวกับอินพุตหลายรายการ (แม้ว่าคุณจะตรวจสอบความถูกต้องได้เพียงรายการเดียวต่อกลุ่ม)

• คลาสการปรับขนาดต้องอยู่บนพา เรน .input-groupต์ ไม่ใช่องค์ประกอบของฟอร์มแต่ละรายการ

การเปลี่ยนแปลงเบต้า 2

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

ทำลาย

• ลบ$badge-colorตัวแปรและการใช้งานบน.badge. เราใช้ฟังก์ชันคอนทราสต์ของสีเพื่อเลือก a colorโดยยึดตามbackground-colorดังนั้นตัวแปรจึงไม่จำเป็น
• เปลี่ยนชื่อgrayscale()ฟังก์ชันเพื่อgray()หลีกเลี่ยงการทำลายความขัดแย้งกับgrayscaleตัวกรองเนทีฟ CSS
• เปลี่ยนชื่อ.table-inverse, .thead-inverse, และ.thead-defaultเป็น.*-darkและ.*-lightจับคู่ชุดสีของเราที่ใช้ในที่อื่น
• ขณะนี้ตารางตอบสนองสร้างคลาสสำหรับเบรกพอยต์แต่ละกริด สิ่งนี้แตกจากเบต้า 1 ที่.table-responsiveคุณใช้อยู่เป็น.table-responsive-mdเหมือน ตอนนี้คุณสามารถใช้.table-responsiveหรือ.table-responsive-{sm,md,lg,xl}ตามความจำเป็น
• การสนับสนุน Dropped Bower เนื่องจากตัวจัดการแพ็คเกจถูกเลิกใช้สำหรับทางเลือกอื่น (เช่น Yarn หรือ npm) ดู bower/bower#2298สำหรับรายละเอียด
• Bootstrap ยังคงต้องการ jQuery 1.9.1 หรือสูงกว่า แต่คุณควรใช้เวอร์ชัน 3.x เนื่องจากเบราว์เซอร์ที่สนับสนุนของ v3.x คือ Bootstrap รองรับและ v3.x มีการแก้ไขด้านความปลอดภัยบางอย่าง
• ลบ.form-control-labelคลาส ที่ไม่ได้ใช้ หากคุณใช้ประโยชน์จากคลาสนี้ คลาสนี้จะซ้ำกับ.col-form-labelคลาสที่จัดกึ่งกลาง a ในแนวตั้ง<label>ด้วยอินพุตที่เกี่ยวข้องในเลย์เอาต์ของฟอร์มแนวนอน
• เปลี่ยนcolor-yiqจากมิกซ์อินที่รวมcolorคุณสมบัติเป็นฟังก์ชันที่คืนค่า ช่วยให้คุณใช้สำหรับคุณสมบัติ CSS ใดก็ได้ ตัวอย่างเช่น แทนที่จะcolor-yiq(#000)เขียนcolor: color-yiq(#000);.

ไฮไลท์

• แนะนำpointer-eventsการใช้งานใหม่เกี่ยวกับโมดอล ตัวนอก.modal-dialogผ่านเหตุการณ์ด้วยpointer-events: noneสำหรับการจัดการคลิกแบบกำหนดเอง (ทำให้สามารถฟังการ.modal-backdropคลิกใดๆ ก็ได้) แล้วตอบโต้กับเหตุการณ์ที่เกิดขึ้นจริง.modal-contentด้วยpointer-events: auto.

สรุป

ต่อไปนี้คือรายการตั๋วขนาดใหญ่ที่คุณต้องระวังเมื่อเปลี่ยนจาก v3 เป็น v4

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

• หยุดการสนับสนุน IE8, IE9 และ iOS 6 v4 ตอนนี้เป็นเพียง IE10+ และ iOS 7+ สำหรับไซต์ที่ต้องการอย่างใดอย่างหนึ่ง ให้ใช้ v3.
• เพิ่มการสนับสนุนอย่างเป็นทางการสำหรับเบราว์เซอร์และ WebView ของ Android v5.0 Lollipop เบราว์เซอร์ Android และ WebView เวอร์ชันก่อนหน้ายังคงได้รับการสนับสนุนอย่างไม่เป็นทางการเท่านั้น

การเปลี่ยนแปลงระดับโลก

• Flexbox ถูกเปิดใช้งานโดยค่าเริ่มต้น โดยทั่วไปแล้ว นี่หมายถึงการย้ายออกจากทุ่นลอยและอื่น ๆ ข้ามส่วนประกอบของเรา
• เปลี่ยนจากLessเป็นSassสำหรับไฟล์ CSS ต้นทางของเรา
• เปลี่ยนจากpxเป็นremหน่วย CSS หลักของเราแล้ว แม้ว่าพิกเซลจะยังคงใช้สำหรับคิวรี่สื่อและพฤติกรรมกริด เนื่องจากวิวพอร์ตของอุปกรณ์ไม่ได้รับผลกระทบจากขนาดประเภท
• ขนาดตัวอักษรสากลเพิ่มขึ้นจาก14pxเป็น16px.
• ปรับปรุงระดับกริดเพื่อเพิ่มตัวเลือกที่ห้า (ระบุอุปกรณ์ขนาดเล็กที่576pxด้านล่างและด้านล่าง) และนำส่วน เสริมออก -xsจากคลาสเหล่านั้น ตัวอย่าง: .col-6.col-sm-4.col-md-3.
• แทนที่ธีมทางเลือกที่แยกจากกันด้วยตัวเลือกที่กำหนดค่าได้ผ่านตัวแปร SCSS (เช่น$enable-gradients: true)
• ปรับปรุงระบบบิลด์เพื่อใช้ชุดสคริปต์ npm แทน Grunt ดูpackage.jsonสคริปต์ทั้งหมดหรือโครงการ readme ของเราสำหรับความต้องการในการพัฒนาในท้องถิ่น
• ไม่รองรับการใช้งาน Bootstrap แบบไม่ตอบสนองอีกต่อไป
• เลิกใช้ Customizer ออนไลน์เพื่อสนับสนุนเอกสารการตั้งค่าที่กว้างขวางยิ่งขึ้นและบิลด์ที่กำหนดเอง
• เพิ่ม คลาสยูทิลิตี้ใหม่หลายสิบรายการสำหรับคู่ค่าคุณสมบัติ CSS ทั่วไปและทางลัดระยะขอบ/ช่องว่างภายใน

ระบบกริด

• ย้ายไปที่เฟล็กซ์บ็อกซ์
  • เพิ่มการรองรับ flexbox ในกริดมิกซ์อินและคลาสที่กำหนดไว้ล่วงหน้า
  • เป็นส่วนหนึ่งของ flexbox รวมการรองรับคลาสการจัดตำแหน่งแนวตั้งและแนวนอน
• อัปเดตชื่อคลาสกริดและระดับกริดใหม่
  • เพิ่มsmระดับกริดใหม่ด้านล่าง768pxเพื่อการควบคุมที่ละเอียดยิ่งขึ้น ตอนนี้เรามีxs, sm, md, lg, และxl. นี่ยังหมายความว่าทุกระดับถูกเพิ่มขึ้นหนึ่งระดับ (ดังนั้น.col-md-6ใน v3 ตอนนี้.col-lg-6อยู่ใน v4)
  • xsคลาสกริดได้รับการแก้ไขเพื่อให้ไม่ต้องการ infix เพื่อแสดงว่าพวกเขาเริ่มใช้สไตล์min-width: 0และไม่ใช่ค่าพิกเซลที่ตั้งไว้ แทนที่จะ.col-xs-6เป็นตอน.col-6นี้ ระดับกริดอื่น ๆ ทั้งหมดต้องมีส่วนเสริม (เช่นsm)
• อัปเดตขนาดกริด มิกซ์อิน และตัวแปร
  • ขณะนี้รางน้ำกริดมีแผนที่ Sass เพื่อให้คุณสามารถระบุความกว้างของรางน้ำเฉพาะที่จุดพักแต่ละจุด
  • อัปเดตมิกซ์อินกริดเพื่อใช้make-col-readyมิกซ์อินเตรียมและmake-colเพื่อตั้งค่าflexและmax-widthสำหรับการปรับขนาดคอลัมน์แต่ละคอลัมน์
  • เปลี่ยนจุดสั่งหยุดการสืบค้นสื่อของระบบกริดและความกว้างของคอนเทนเนอร์เพื่อพิจารณาระดับกริดใหม่ และตรวจสอบให้แน่ใจว่าคอลัมน์สามารถหารด้วย12ความกว้างสูงสุดเท่าๆ กัน
  • ขณะนี้มีการจัดการเบรกพอยต์ของกริดและความกว้างของคอนเทนเนอร์ผ่านแผนที่ Sass ( $grid-breakpointsและ$container-max-widths) แทนที่จะใช้ตัวแปรแยกกันจำนวนหนึ่ง สิ่งเหล่านี้แทนที่@screen-*ตัวแปรทั้งหมดและช่วยให้คุณปรับแต่งระดับกริดได้อย่างเต็มที่
  • ข้อความค้นหาสื่อก็เปลี่ยนไปเช่นกัน แทนที่จะใช้การประกาศข้อความค้นหาสื่อของเราซ้ำๆ ด้วยค่าเดียวกันในแต่ละครั้ง ตอนนี้ เรามี@include media-breakpoint-up/down/only. ตอนนี้ แทนที่จะเขียน@media (min-width: @screen-sm-min) { ... }คุณสามารถเขียน@include media-breakpoint-up(sm) { ... }.

ส่วนประกอบ

• แผง ภาพขนาดย่อ และช่องที่ลดลงสำหรับส่วนประกอบใหม่ทั้งหมดการ์ด
• ทิ้งแบบอักษรไอคอน Glyphicons หากคุณต้องการไอคอน บางตัวเลือกมีดังนี้:
  • Glyphiconsเวอร์ชันต้นน้ำ
  • Octicons
  • Font Awesome
  • ดูหน้าขยายสำหรับรายการทางเลือก มีข้อเสนอแนะเพิ่มเติมหรือไม่? กรุณาเปิดประเด็นหรือประชาสัมพันธ์
• ทิ้งปลั๊กอิน Affix jQuery
  • เราแนะนำให้ใช้position: stickyแทน ดูรายการ HTML5 Pleaseสำหรับรายละเอียดและคำแนะนำ polyfill ที่เฉพาะเจาะจง ข้อเสนอแนะหนึ่งคือการใช้@supportsกฎเพื่อนำไปใช้ (เช่น@supports (position: sticky) { ... })/
  • หากคุณใช้ Affix เพื่อใช้รูปแบบเพิ่มเติมที่ไม่ใช่positionรูปแบบ Polyfills อาจไม่รองรับกรณีการใช้งานของคุณ ตัวเลือกหนึ่งสำหรับการใช้งานดังกล่าวคือไลบรารีScrollPos-Styler ของบริษัทอื่น
• ลดองค์ประกอบเพจเจอร์เนื่องจากเป็นปุ่มที่ปรับแต่งเล็กน้อย
• ปรับโครงสร้างองค์ประกอบเกือบทั้งหมดใหม่เพื่อใช้ตัวเลือกคลาสที่ไม่ซ้อนกันมากกว่าตัวเลือกย่อยที่เจาะจงมากเกินไป

ตามส่วนประกอบ

รายการนี้เน้นการเปลี่ยนแปลงที่สำคัญตามองค์ประกอบระหว่าง v3.xx และ v4.0.0

รีบูต

สิ่งใหม่สำหรับ Bootstrap 4 คือRebootซึ่งเป็นสไตล์ชีตใหม่ที่สร้างบน Normalize ด้วยสไตล์การรีเซ็ตที่มีความคิดเห็นส่วนตัว ตัวเลือกที่ปรากฏในไฟล์นี้ใช้เฉพาะองค์ประกอบ ไม่มีคลาสอยู่ที่นี่ สิ่งนี้แยกรูปแบบการรีเซ็ตของเราออกจากรูปแบบส่วนประกอบของเราสำหรับวิธีการแบบแยกส่วนมากขึ้น การรีเซ็ตที่สำคัญที่สุดบางส่วนซึ่งรวมถึงการbox-sizing: border-boxเปลี่ยนแปลง การย้ายจาก องค์ประกอบหนึ่ง emไปยังremอีกหน่วยหนึ่ง สไตล์ลิงก์ และการรีเซ็ตองค์ประกอบแบบฟอร์มจำนวนมาก

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

• ย้าย.text-ยูทิลิตี้ทั้งหมดไปยัง_utilities.scssไฟล์
• ลดลง.page-headerเนื่องจากสามารถใช้สไตล์ผ่านยูทิลิตี้ได้
• .dl-horizontalได้รับการลดลง ให้ใช้.rowon <dl>และใช้คลาสคอลัมน์กริด (หรือมิกซ์อิน) กับคลาสของคอลัมน์<dt>และ<dd>ย่อยแทน
• บล็อกโควตที่ออกแบบใหม่ โดยย้ายสไตล์จาก<blockquote>องค์ประกอบเป็นคลาสเดียว.blockquote. ทิ้ง.blockquote-reverseตัวแก้ไขสำหรับยูทิลิตี้ข้อความ
• .list-inlineตอนนี้ต้องการให้รายการลูกของมันมีการ.list-inline-itemใช้คลาสใหม่กับพวกเขา

รูปภาพ

• เปลี่ยนชื่อ.img-responsiveเป็น.img-fluid.
• เปลี่ยนชื่อ.img-roundedเป็น.rounded
• เปลี่ยนชื่อ.img-circleเป็น.rounded-circle

โต๊ะ

• เกือบทุกอินสแตนซ์ของ>ตัวเลือกถูกลบออก ซึ่งหมายความว่าตารางที่ซ้อนกันจะรับช่วงสไตล์จากผู้ปกครองโดยอัตโนมัติ สิ่งนี้ช่วยลดความยุ่งยากในตัวเลือกและการปรับแต่งที่เป็นไปได้ของเราอย่างมาก
• เปลี่ยนชื่อ.table-condensedเป็นเพื่อความ.table-smสอดคล้อง
• เพิ่ม.table-inverseตัวเลือก ใหม่
• เพิ่มตัวแก้ไขส่วนหัวของตาราง: .thead-defaultและ.thead-inverse.
• เปลี่ยนชื่อคลาสตามบริบทให้มี.table--prefix ดังนั้น.active, .success, .warning, .dangerและ.infoถึง.table-active, .table-success, .table-warning, .table-dangerและ.table-info.

แบบฟอร์ม

• องค์ประกอบที่ย้ายจะรีเซ็ตเป็น_reboot.scssไฟล์
• เปลี่ยนชื่อ.control-labelเป็น.col-form-label.
• เปลี่ยนชื่อ.input-lgและ.input-smเป็น.form-control-lgและ.form-control-smตามลำดับ
• เลิก.form-group-*เรียนเพื่อความเรียบง่าย ใช้.form-control-*คลาสแทนตอนนี้
• ทิ้ง.help-blockและแทนที่ด้วย.form-textข้อความช่วยเหลือระดับบล็อก สำหรับข้อความช่วยเหลือแบบอินไลน์และตัวเลือกที่ยืดหยุ่นอื่นๆ ให้ใช้คลาสยูทิลิตี้ เช่น.text-muted.
• หลุด.radio-inlineและ.checkbox-inline.
• รวม.checkboxและ.radioเข้า.form-checkและ.form-check-*ชั้นเรียน ต่างๆ
• ปรับปรุงรูปแบบแนวนอน:
  • ยกเลิก.form-horizontalข้อกำหนดของชั้นเรียน
  • .form-groupไม่ใช้สไตล์จาก.rowมิกซ์อินผ่านอีกต่อไป ดังนั้นจึง.rowจำเป็นสำหรับการจัดวางตารางแนวนอน (เช่น<div class="form-group row">)
  • เพิ่ม.col-form-labelคลาสใหม่ให้กับป้ายกำกับกึ่งกลางแนวตั้งด้วย.form-controls
  • เพิ่มรูปแบบใหม่.form-rowสำหรับรูปแบบกะทัดรัดด้วยคลาสกริด (สลับ.rowเป็น a .form-rowและ go)
• เพิ่มการสนับสนุนแบบฟอร์มที่กำหนดเอง (สำหรับช่องทำเครื่องหมาย วิทยุ เลือก และอินพุตไฟล์)
• แทนที่.has-error, .has-warning, และ.has-successคลาสด้วยการตรวจสอบความถูกต้องของแบบฟอร์ม HTML5 ผ่าน CSS :invalidและ:validคลาสหลอก
• เปลี่ยนชื่อ.form-control-staticเป็น.form-control-plaintext.

ปุ่ม

• เปลี่ยนชื่อ.btn-defaultเป็น.btn-secondary.
• ลด.btn-xsชั้นเรียนทั้งหมดตาม.btn-smสัดส่วนที่เล็กกว่า v3 มาก
• ฟีเจอร์ปุ่มเก็บ สถานะของ button.jsปลั๊กอิน jQuery ถูกละทิ้ง ซึ่งรวมถึงวิธีการ$().button(string)และ $().button('reset')เราแนะนำให้ใช้ JavaScript แบบกำหนดเองเล็กน้อยแทน ซึ่งจะมีประโยชน์ในการดำเนินการตามที่คุณต้องการ
  • โปรดทราบว่าคุณลักษณะอื่นๆ ของปลั๊กอิน (ช่องทำเครื่องหมายของปุ่ม วิทยุของปุ่ม ปุ่มสลับครั้งเดียว) จะยังคงอยู่ในเวอร์ชัน 4.4.3
• เปลี่ยนปุ่ม[disabled]เป็น:disabledตามที่ IE9+ รองรับ:disabled. อย่างไรก็ตามfieldset[disabled]ยังมีความจำเป็นเนื่องจากชุด ฟิลด์ที่ ปิดใช้งานโดยเนทีฟยังคงมีปัญหาใน IE11

กลุ่มปุ่ม

• เขียนองค์ประกอบใหม่ด้วย flexbox
• นำออก.btn-group-justifiedแล้ว คุณสามารถใช้<div class="btn-group d-flex" role="group"></div>เป็นตัวห่อหุ้มรอบองค์ประกอบด้วย.w-100.
• ดร็อป.btn-group-xsคลาสทั้งหมดเนื่องจากการลบ.btn-xs.
• ลบระยะห่างที่ชัดเจนระหว่างกลุ่มปุ่มในแถบเครื่องมือปุ่ม ใช้ยูทิลิตี้มาร์จิ้นทันที
• ปรับปรุงเอกสารประกอบสำหรับใช้กับส่วนประกอบอื่นๆ

ดรอปดาวน์

• เปลี่ยนจากตัวเลือกพาเรนต์เป็นคลาสเอกพจน์สำหรับส่วนประกอบทั้งหมด ตัวดัดแปลง ฯลฯ
• รูปแบบดรอปดาวน์ที่ง่ายขึ้นเพื่อไม่ให้จัดส่งโดยมีลูกศรชี้ขึ้นหรือลงที่ติดอยู่กับเมนูดรอปดาวน์อีกต่อไป
• ดรอปดาวน์สามารถสร้างได้ด้วย<div>s หรือ<ul>s ตอนนี้
• สร้างรูปแบบดรอปดาวน์และมาร์กอัปใหม่เพื่อให้การสนับสนุน<a>และ<button>รายการดรอปดาวน์ ในตัวที่ใช้งานง่าย
• เปลี่ยนชื่อ.dividerเป็น.dropdown-divider.
• รายการแบบเลื่อนลงตอนนี้.dropdown-itemต้องการ
• การสลับแบบเลื่อนลงไม่จำเป็นต้องมีข้อความชัดเจนอีกต่อ<span class="caret"></span>ไป ขณะนี้มีให้โดยอัตโนมัติผ่าน CSS ::afterใน.dropdown-toggle.

ระบบกริด

• เพิ่ม576pxกริดเบรกพอยต์ใหม่เป็นsmซึ่งหมายความว่าขณะนี้มีทั้งหมดห้าระดับ ( xs, sm, md, lg, และxl)
• เปลี่ยนชื่อคลาสตัวแก้ไขกริดที่ตอบสนองจาก.col-{breakpoint}-{modifier}-{size}เป็น.{modifier}-{breakpoint}-{size}สำหรับคลาสกริดที่ง่ายกว่า
• orderคลาสตัวแก้ไขการผลักและดึงที่ลดลงสำหรับ คลาสที่ขับเคลื่อนด้วย flexbox ใหม่ ตัวอย่างเช่น แทนที่จะใช้.col-8.push-4and คุณ.col-4.pull-8จะใช้.col-8.order-2และ.col-4.order-1
• เพิ่มคลาสยูทิลิตี้ flexbox สำหรับระบบกริดและส่วนประกอบ

รายชื่อกลุ่ม

• เขียนองค์ประกอบใหม่ด้วย flexbox
• แทนที่a.list-group-itemด้วยคลาสที่ชัดเจน.list-group-item-actionสำหรับการกำหนดสไตล์ลิงก์และปุ่มของรายการกลุ่มรายการ
• เพิ่ม.list-group-flushคลาสสำหรับใช้กับการ์ด

โมดอล

• เขียนองค์ประกอบใหม่ด้วย flexbox
• เมื่อย้ายไปที่ flexbox การจัดตำแหน่งของไอคอนยกเลิกในส่วนหัวอาจใช้งานไม่ได้เนื่องจากเราไม่ได้ใช้การลอยอีกต่อไป เนื้อหาแบบลอยต้องมาก่อน แต่ด้วย flexbox จะไม่เป็นเช่นนั้นอีกต่อไป อัปเดตไอคอนปิดของคุณให้อยู่หลังชื่อโมดอลเพื่อแก้ไข
• ตัวremoteเลือก (ซึ่งสามารถใช้เพื่อโหลดและแทรกเนื้อหาภายนอกลงในโมดอลโดยอัตโนมัติ) และloaded.bs.modalเหตุการณ์ที่เกี่ยวข้องถูกลบออก เราขอแนะนำให้ใช้เทมเพลตฝั่งไคลเอ็นต์หรือเฟรมเวิร์กการเชื่อมโยงข้อมูล หรือเรียกjQuery.loadด้วยตนเอง

Navs

• เขียนองค์ประกอบใหม่ด้วย flexbox
• ยกเลิกตัวเลือกเกือบทั้งหมด>สำหรับการจัดสไตล์ที่ง่ายกว่าผ่านคลาสที่ไม่ได้ซ้อนกัน
• แทนที่จะใช้ตัวเลือกเฉพาะ HTML เช่น.nav > li > aเราใช้คลาสแยกสำหรับ.navs, .nav-items และ.nav-links สิ่งนี้ทำให้ HTML ของคุณมีความยืดหยุ่นมากขึ้นในขณะที่เพิ่มความสามารถในการขยาย

แถบนำทาง

แถบนำทางถูกเขียนใหม่ใน flexbox พร้อมการสนับสนุนที่ปรับปรุงสำหรับการจัดตำแหน่ง การตอบสนอง และการปรับแต่ง

• ขณะนี้ลักษณะการทำงานของแถบนำทางที่ตอบสนองได้ถูกนำไปใช้กับ.navbarชั้นเรียนผ่านทางที่จำเป็น .navbar-expand-{breakpoint}ซึ่งคุณสามารถเลือกตำแหน่งที่จะยุบแถบนำทางได้ ก่อนหน้านี้เป็นการปรับเปลี่ยนตัวแปรน้อยและต้องมีการคอมไพล์ใหม่
• .navbar-defaultอยู่ในขณะนี้.navbar-lightแม้ว่าจะ.navbar-darkยังเหมือนเดิม จำเป็นต้องมีอย่างใดอย่างหนึ่งในแถบนำทางแต่ละแถบ อย่างไรก็ตามคลาสเหล่านี้ไม่ได้ตั้งค่าbackground-colors อีกต่อไป แทนที่จะส่งผลกระทบcolorเท่านั้น
• ตอนนี้ Navbars ต้องการการประกาศพื้นหลังบางประเภท เลือกจากยูทิลิตี้พื้นหลังของเรา ( .bg-*) หรือตั้งค่าของคุณเองด้วยคลาส light/inverse ด้านบนสำหรับการปรับแต่งที่บ้าคลั่ง
• กำหนดรูปแบบ flexbox แถบนำทางสามารถใช้ยูทิลิตี้ flexbox สำหรับตัวเลือกการจัดตำแหน่งที่ง่าย
• .navbar-toggleอยู่ในขณะนี้.navbar-togglerและมีสไตล์ที่แตกต่างกันและมาร์กอัปภายใน (ไม่เกินสาม<span>วินาที)
• เลิก.navbar-formเรียนทั้งคณะ ไม่จำเป็นอีกต่อไป เพียงใช้.form-inlineและใช้ยูทิลิตี้มาร์จิ้นแทนตามความจำเป็น
• แถบนำทางจะไม่รวมmargin-bottomหรือborder-radiusตามค่าเริ่มต้นอีกต่อไป ใช้ยูทิลิตี้เท่าที่จำเป็น
• ตัวอย่างทั้งหมดที่มีแถบนำทางได้รับการอัปเดตเพื่อรวมมาร์กอัปใหม่

การแบ่งหน้า

• เขียนองค์ประกอบใหม่ด้วย flexbox
• ตอนนี้จำเป็นต้องมี คลาสที่ชัดเจน ( .page-item, .page-link) กับทายาทของ.paginations
• ลด.pagerองค์ประกอบทั้งหมดลงเนื่องจากเป็นมากกว่าปุ่มเค้าร่างที่ปรับแต่งเองเล็กน้อย

เกล็ดขนมปัง

• ตอนนี้จำเป็นต้อง มีคลาสที่ชัดเจน.breadcrumb-itemสำหรับทายาทของ.breadcrumbs

ฉลากและตราสัญลักษณ์

• รวม.labelและ.badgeแก้ความกำกวมจาก<label>องค์ประกอบและทำให้องค์ประกอบที่เกี่ยวข้องง่ายขึ้น
• เพิ่ม.badge-pillเป็นตัวแก้ไขสำหรับรูปลักษณ์ "ยาเม็ด" ที่โค้งมน
• ป้ายจะไม่ลอยโดยอัตโนมัติในกลุ่มรายการและส่วนประกอบอื่นๆ ตอนนี้จำเป็นต้องมีคลาสยูทิลิตี้สำหรับสิ่งนั้น
• .badge-defaultถูกดร็อปและ.badge-secondaryเพิ่มเข้ากับคลาสตัวปรับแต่งส่วนประกอบที่ใช้ที่อื่น

แผง ภาพขนาดย่อ และหลุม

ลดลงทั้งหมดสำหรับองค์ประกอบการ์ดใหม่

แผง

• .panelถึง.cardตอนนี้สร้างด้วย flexbox
• .panel-defaultถอดแล้วไม่มีเปลี่ยน
• .panel-groupถอดแล้วไม่มีเปลี่ยน .card-groupไม่ใช่สิ่งทดแทน มันต่างกัน
• .panel-headingถึง.card-header
• .panel-titleถึง.card-title. ขึ้นอยู่กับลักษณะที่ต้องการ คุณอาจต้องการใช้องค์ประกอบส่วนหัวหรือคลาส (เช่น<h3>, .h3) หรือองค์ประกอบหรือคลาสตัวหนา (เช่น<strong>, <b>, .font-weight-bold) โปรดทราบว่า.card-titleแม้ว่าจะมีชื่อคล้ายกัน แต่ให้รูปลักษณ์ที่แตกต่างจาก.panel-title.
• .panel-bodyถึง.card-body
• .panel-footerถึง.card-footer
• .panel-primary, .panel-success, .panel-info, .panel-warning, และ.panel-dangerถูกทิ้งสำหรับ.bg-, .text-, และ.borderยูทิลิตี้ที่สร้างจาก$theme-colorsแผนที่ Sass ของเรา

ความคืบหน้า

• แทนที่.progress-bar-*คลาสตามบริบทด้วย.bg-*ยูทิลิตี้ ตัวอย่างเช่นclass="progress-bar progress-bar-danger"กลายเป็นclass="progress-bar bg-danger".
• แทนที่.activeแถบแสดงความคืบหน้าแบบเคลื่อนไหวด้วย.progress-bar-animated.

ม้าหมุน

• ยกเครื่องส่วนประกอบทั้งหมดเพื่อให้การออกแบบและสไตล์ง่ายขึ้น เรามีรูปแบบน้อยลงสำหรับคุณที่จะแทนที่ ตัวบ่งชี้ใหม่ และไอคอนใหม่
• CSS ทั้งหมดได้รับการ un-nested และเปลี่ยนชื่อ เพื่อให้แน่ใจว่าแต่ละ class นำหน้าด้วย.carousel-.
  • สำหรับรายการแบบหมุน , .next, .prev, .left, และ.rightตอนนี้, .carousel-item-next, .carousel-item-prev, .carousel-item-leftและ.carousel-item-right
  • .itemก็คือตอนนี้.carousel-itemด้วย
  • สำหรับการควบคุมก่อนหน้า/ถัดไป.carousel-control.rightและ.carousel-control.leftare now .carousel-control-nextและ.carousel-control-prevหมายความว่าไม่ต้องการคลาสฐานเฉพาะอีกต่อไป
• นำสไตล์ที่ตอบสนองทั้งหมดออก เลื่อนไปที่ยูทิลิตี้ (เช่น การแสดงคำบรรยายบนวิวพอร์ตบางประเภท) และสไตล์ที่กำหนดเองตามต้องการ
• รูปภาพที่ถูกลบจะแทนที่รูปภาพในรายการแบบหมุน โดยเลื่อนไปที่ยูทิลิตี้
• ปรับแต่งตัวอย่าง Carousel เพื่อรวมมาร์กอัปและรูปแบบใหม่

โต๊ะ

• นำการสนับสนุนสำหรับตารางที่ซ้อนกันที่มีสไตล์ออก ขณะนี้ สไตล์ตารางทั้งหมดสืบทอดมาใน v4 สำหรับตัวเลือกที่ง่ายกว่า
• เพิ่มตัวแปรตารางผกผัน

สาธารณูปโภค

• แสดง ซ่อน และอื่นๆ:
  • ทำให้ยูทิลิตีการแสดงผลตอบสนอง (เช่น.d-noneและd-{sm,md,lg,xl}-none)
  • ลดจำนวน.hidden-*ยูทิลิตี้สำหรับยูทิลิตี้การแสดงผลใหม่ ตัวอย่างเช่น แทนที่จะ.hidden-sm-upใช้.d-sm-none. เปลี่ยนชื่อ.hidden-printยูทิลิตีเพื่อใช้รูปแบบการตั้งชื่อยูทิลิตีการแสดงผล ข้อมูลเพิ่มเติมภายใต้ส่วน Responsive Utilities ของหน้านี้
  • เพิ่ม.float-{sm,md,lg,xl}-{left,right,none}คลาสสำหรับ floats ที่ตอบสนองและลบ.pull-leftและ.pull-rightเนื่องจากซ้ำซ้อนกับ.float-leftand .float-right.
• พิมพ์:
  • เพิ่มรูปแบบที่ตอบสนองต่อคลาสการจัดตำแหน่งข้อความของ.text-{sm,md,lg,xl}-{left,center,right}เรา
• การจัดตำแหน่งและระยะห่าง:
  • เพิ่มยูทิลิตี้ระยะขอบและช่องว่างภายในที่ตอบสนอง ใหม่ สำหรับทุกด้าน รวมทั้งชวเลขแนวตั้งและแนวนอน
  • เพิ่มเรือบรรทุกของ ยูทิลิ ตี้flexbox
  • หลุด.center-blockสำหรับ.mx-autoคลาส ใหม่
• อัปเดต Clearfix เพื่อยกเลิกการรองรับเบราว์เซอร์เวอร์ชันเก่า

mixins คำนำหน้าผู้ขาย

มิกซ์อิน คำนำหน้าผู้ขายของ Bootstrap 3 ซึ่งเลิกใช้แล้วใน v3.2.0 ถูกลบใน Bootstrap 4 เนื่องจากเราใช้Autoprefixerจึงไม่มีความจำเป็นอีกต่อไป

ลบมิกซ์อินต่อไปนี้: animation, animation-delay, animation-direction, animation-duration, animation-fill-mode, animation-iteration-count, animation-name, animation-timing-function, backface-visibility, box-sizing, content-columns, hyphens, opacity, perspective, perspective-origin, rotate, rotateX, rotateY, scale, scaleX, scaleY, skew, transform-origin, transition-delay, transition-duration, transition-property, transition-timing-function, transition-transform, translate, translate3d,user-select

เอกสาร

เอกสารของเราได้รับการอัปเกรดทั่วทั้งกระดานเช่นกัน นี่คือจุดต่ำสุด:

• เรายังคงใช้ Jekyll อยู่ แต่เรามีปลั๊กอินในการผสมผสาน:
  • bugify.rbใช้เพื่อแสดงรายการในหน้าบั๊กของเบราว์เซอร์ ของเราอย่างมีประสิทธิภาพ
  • example.rbเป็นส้อมแบบกำหนดเองของhighlight.rbปลั๊กอินเริ่มต้น ซึ่งช่วยให้จัดการโค้ดตัวอย่างได้ง่ายขึ้น
  • callout.rbเป็นส้อมแบบกำหนดเองที่คล้ายกัน แต่ออกแบบมาสำหรับข้อความเสริมของเอกสารพิเศษของเรา
  • jekyll-tocใช้เพื่อสร้างสารบัญของเรา
• เนื้อหาในเอกสารทั้งหมดถูกเขียนใหม่ใน Markdown (แทนที่จะเป็น HTML) เพื่อให้แก้ไขได้ง่ายขึ้น
• หน้าได้รับการจัดระเบียบใหม่สำหรับเนื้อหาที่เรียบง่ายและลำดับชั้นที่เข้าถึงได้ง่ายขึ้น
• เราย้ายจาก CSS ปกติไปเป็น SCSS เพื่อใช้ประโยชน์จากตัวแปร มิกซ์อิน และอื่นๆ ของ Bootstrap

สาธารณูปโภคที่ตอบสนอง

ตัวแปร ทั้งหมด@screen-ถูกลบใน v4.0.0 ใช้ มิกซ์อิน media-breakpoint-up(), media-breakpoint-down(), หรือmedia-breakpoint-only()Sass หรือ$grid-breakpointsแมป Sass แทน

คลาสยูทิลิตี้ที่ตอบสนองของเราส่วนใหญ่ถูกลบออกไปเพื่อสนับสนุนยูทิลิตี้ที่displayชัดเจน

• คลาส.hiddenและ.showถูกลบออกเนื่องจากขัดแย้งกับ jQuery's $(...).hide()และ$(...).show()เมธอด ให้ลองสลับ แอตทริบิวต์หรือใช้รูป แบบ[hidden]อินไลน์ เช่นstyle="display: none;"และstyle="display: block;"
• .hidden-คลาส ทั้งหมด ถูกลบแล้ว บันทึกไว้สำหรับยูทิลิตี้การพิมพ์ที่เปลี่ยนชื่อ
  • นำออกจาก v3:.hidden-xs .hidden-sm .hidden-md .hidden-lg .visible-xs-block .visible-xs-inline .visible-xs-inline-block .visible-sm-block .visible-sm-inline .visible-sm-inline-block .visible-md-block .visible-md-inline .visible-md-inline-block .visible-lg-block .visible-lg-inline .visible-lg-inline-block
  • นำออกจากอัลฟ่า v4:.hidden-xs-up .hidden-xs-down .hidden-sm-up .hidden-sm-down .hidden-md-up .hidden-md-down .hidden-lg-up .hidden-lg-down
• ยูทิลิตี้การพิมพ์ไม่ได้เริ่มต้นด้วย.hidden-หรือ.visible-แต่ด้วย.d-print-.
  • ชื่อเดิม: .visible-print-block, .visible-print-inline, .visible-print-inline-block,.hidden-print
  • คลาสใหม่: .d-print-block, .d-print-inline, .d-print-inline-block,.d-print-none

แทนที่จะใช้.visible-*คลาสที่ชัดเจน คุณทำให้องค์ประกอบมองเห็นได้โดยเพียงแค่ไม่ซ่อนไว้ที่ขนาดหน้าจอนั้น คุณสามารถรวม.d-*-noneคลาสหนึ่งกับ.d-*-blockคลาสหนึ่งเพื่อแสดงองค์ประกอบเฉพาะในช่วงเวลาที่กำหนดของขนาดหน้าจอ (เช่น.d-none.d-md-block.d-xl-noneแสดงองค์ประกอบบนอุปกรณ์ขนาดกลางและขนาดใหญ่เท่านั้น)

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