กำลังย้ายจาก 2.x เป็น 3.0

Bootstrap 3 เข้ากันไม่ได้กับ v2.x ใช้ส่วนนี้เป็นแนวทางทั่วไปในการอัปเกรดจาก v2.x เป็น v3.0 สำหรับภาพรวมที่กว้างขึ้น ดูว่ามีอะไรใหม่ในประกาศรุ่น v3.0

การเปลี่ยนแปลงชั้นเรียนที่สำคัญ

ตารางนี้แสดงการเปลี่ยนแปลงรูปแบบระหว่าง v2.x และ v3.0

Bootstrap 2.x Bootstrap 3.0
.row-fluid .row
.span* .col-md-*
.offset* .col-md-offset-*
.brand .navbar-brand
.navbar .nav .navbar-nav
.nav-collapse .navbar-collapse
.nav-toggle .navbar-toggle
.btn-navbar .navbar-btn
.hero-unit .jumbotron
.icon-* .glyphicon .glyphicon-*
.btn .btn .btn-default
.btn-mini .btn-xs
.btn-small .btn-sm
.btn-large .btn-lg
.alert .alert .alert-warning
.alert-error .alert-danger
.visible-phone .visible-xs
.visible-tablet .visible-sm
.visible-desktop แบ่งเป็น.visible-md .visible-lg
.hidden-phone .hidden-xs
.hidden-tablet .hidden-sm
.hidden-desktop แบ่งเป็น.hidden-md .hidden-lg
.input-block-level .form-control
.control-group .form-group
.control-group.warning .control-group.error .control-group.success .form-group.has-*
.checkbox.inline .radio.inline .checkbox-inline .radio-inline
.input-prepend .input-append .input-group
.add-on .input-group-addon
.img-polaroid .img-thumbnail
ul.unstyled .list-unstyled
ul.inline .list-inline
.muted .text-muted
.label .label .label-default
.label-important .label-danger
.text-error .text-danger
.table .error .table .danger
.bar .progress-bar
.bar-* .progress-bar-*
.accordion .panel-group
.accordion-group .panel .panel-default
.accordion-heading .panel-heading
.accordion-body .panel-collapse
.accordion-inner .panel-body

มีอะไรใหม่

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

ธาตุ คำอธิบาย
แผง .panel .panel-default .panel-body .panel-title .panel-heading .panel-footer .panel-collapse
รายชื่อกลุ่ม .list-group .list-group-item .list-group-item-text .list-group-item-heading
Glyphicons .glyphicon
จัมโบตรอน .jumbotron
กริดขนาดเล็กพิเศษ (<768px) .col-xs-*
กริดขนาดเล็ก (≥768px) .col-sm-*
กริดขนาดกลาง (≥992px) .col-md-*
ตารางขนาดใหญ่ (≥1200px) .col-lg-*
คลาสยูทิลิตี้ที่ตอบสนอง (≥1200px) .visible-lg .hidden-lg
ออฟเซ็ต .col-sm-offset-* .col-md-offset-* .col-lg-offset-*
ดัน .col-sm-push-* .col-md-push-* .col-lg-push-*
ดึง .col-sm-pull-* .col-md-pull-* .col-lg-pull-*
ขนาดความสูงของอินพุต .input-sm .input-lg
กลุ่มอินพุต .input-group .input-group-addon .input-group-btn
การควบคุมแบบฟอร์ม .form-control .form-group
ขนาดกลุ่มปุ่ม .btn-group-xs .btn-group-sm .btn-group-lg
ข้อความแถบนำทาง .navbar-text
ส่วนหัวของแถบนำทาง .navbar-header
แท็บที่เหมาะสม / ยา .nav-justified
ภาพที่ตอบสนอง .img-responsive
แถวตารางบริบท .success .danger .warning .active .info
แผงบริบท .panel-success .panel-danger .panel-warning .panel-info
โมดอล .modal-dialog .modal-content
ภาพขนาดย่อ .img-thumbnail
ขนาดกำลังดี .well-sm .well-lg
ลิงค์แจ้งเตือน .alert-link

สิ่งที่ถูกลบออก

องค์ประกอบต่อไปนี้ถูกทิ้งหรือเปลี่ยนแปลงใน v3.0

ธาตุ นำออกจาก 2.x 3.0 เทียบเท่า
การดำเนินการแบบฟอร์ม .form-actions ไม่มี
แบบฟอร์มการค้นหา .form-search ไม่มี
แบบฟอร์มกลุ่มพร้อมข้อมูล .control-group.info ไม่มี
ขนาดอินพุตความกว้างคงที่ .input-mini .input-small .input-medium .input-large .input-xlarge .input-xxlarge ใช้.form-controlและระบบกริดแทน
อินพุตแบบฟอร์มระดับบล็อก .input-block-level ไม่มีการเทียบเท่าโดยตรง แต่การควบคุมแบบฟอร์มจะคล้ายกัน
ปุ่มผกผัน .btn-inverse ไม่มี
แถวของเหลว .row-fluid .row(ไม่มีกริดแบบตายตัวอีกต่อไป)
เสื้อคลุมควบคุม .controls ไม่มี
แถวควบคุม .controls-row .rowหรือ.form-group
แถบนำทางด้านใน .navbar-inner ไม่มี
Navbar วงเวียนแนวตั้ง .navbar .divider-vertical ไม่มี
เมนูย่อยแบบเลื่อนลง .dropdown-submenu ไม่มี
การจัดตำแหน่งแท็บ .tabs-left .tabs-right .tabs-below ไม่มี
พื้นที่ tabbable ตามยา .pill-content .tab-content
บานหน้าต่างพื้นที่แท็บตามยาเม็ด .pill-pane .tab-pane
รายการนำทาง .nav-list .nav-header ไม่มีการเทียบเท่าโดยตรง แต่กลุ่มรายการและ.panel-groupsจะคล้ายกัน
ความช่วยเหลือแบบอินไลน์สำหรับการควบคุมแบบฟอร์ม .help-inline ไม่มีความเท่าเทียมกันแต่.help-blockมีความคล้ายคลึงกัน
สีความคืบหน้าที่ไม่ใช่ระดับแถบ .progress-info .progress-success .progress-warning .progress-danger ใช้.progress-bar-*แทน.progress-bar.

หมายเหตุเพิ่มเติม

การเปลี่ยนแปลงอื่นๆ ใน v3.0 จะไม่ปรากฏให้เห็นในทันที คลาสพื้นฐาน สไตล์หลัก และพฤติกรรมได้รับการปรับปรุงเพื่อความยืดหยุ่นและแนวทางแรกสำหรับอุปกรณ์เคลื่อนที่ ของเรา นี่คือรายการบางส่วน:

  • ตามค่าเริ่มต้น ตัวควบคุมฟอร์มแบบข้อความจะได้รับการจัดรูปแบบเพียงเล็กน้อยเท่านั้น สำหรับสีโฟกัสและมุมโค้งมน ให้ปรับใช้.form-controlคลาสกับองค์ประกอบเพื่อจัดรูปแบบ
  • ตัวควบคุมฟอร์มแบบข้อความที่.form-controlใช้คลาสตอนนี้กว้าง 100% ตามค่าเริ่มต้น ล้อมอินพุตไว้ด้านใน<div class="col-*"></div>เพื่อควบคุมความกว้างของอินพุต
  • .badgeไม่มีคลาสตามบริบท (-success,-primary,etc..) อีกต่อไป
  • .btnต้องใช้.btn-defaultเพื่อรับปุ่ม "เริ่มต้น" ด้วย
  • .rowตอนนี้เป็นของเหลว
  • รูปภาพไม่ตอบสนองตามค่าเริ่มต้นอีกต่อไป ใช้ สำหรับ ขนาด.img-responsiveของเหลว<img>
  • ตอนนี้ ไอคอนต่างๆ.glyphiconเป็นแบบฟอนต์แล้ว ไอคอนยังต้องมีคลาสฐานและไอคอน (เช่น.glyphicon .glyphicon-asterisk)
  • Typeahead ถูกทิ้ง เพื่อสนับสนุนการใช้Twitter Typeahead
  • Modal markup เปลี่ยนไปอย่างมาก ตอน.modal-headerนี้ , .modal-body, และ.modal-footerส่วนต่างๆ ถูกรวมเข้าด้วยกัน.modal-contentและ.modal-dialogเพื่อการจัดรูปแบบและการทำงานของอุปกรณ์เคลื่อนที่ที่ดีขึ้น นอกจากนี้ คุณไม่ควรนำไปใช้.hideกับ.modalมาร์กอัปของคุณ อีกต่อไป
  • ตั้งแต่ v3.1.0, HTML ที่โหลดโดยremoteตัวเลือก modal จะถูกฉีดเข้าไปใน.modal-content(จาก v3.0.0 ถึง v3.0.3, ลงใน.modal) แทนที่จะเป็น.modal-body. สิ่งนี้ช่วยให้คุณเปลี่ยนส่วนหัวและส่วนท้ายของโมดอลได้อย่างง่ายดาย ไม่ใช่แค่เนื้อหาโมดอล
  • ช่องทำเครื่องหมายและคุณลักษณะวิทยุของปลั๊กอิน button.js ตอนนี้ใช้data-toggle="buttons"แทนdata-toggle="buttons-checkbox"หรือdata-toggle="buttons-radio"ในมาร์กอัป
  • เหตุการณ์ JavaScript มีเนมสเปซ ตัวอย่างเช่น ในการจัดการเหตุการณ์ "แสดง" เป็นกิริยาช่วย ให้ใช้'show.bs.modal'. สำหรับแท็บ "แสดง" ใช้'shown.bs.tab'ฯลฯ

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการอัปเกรดเป็น v3.0 และข้อมูลโค้ดจากชุมชน โปรดดูที่Bootply