Μεταφορά από 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
Γλυφικά .glyphicon
Jumbotron .jumbotron
Εξαιρετικά μικρό πλέγμα (<768 px) .col-xs-*
Μικρό πλέγμα (≥768 px) .col-sm-*
Μεσαίο πλέγμα (≥992 px) .col-md-*
Μεγάλο πλέγμα (≥1200 px) .col-lg-*
Αποκριτικές τάξεις βοηθητικού προγράμματος (≥1200 pixel) .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 .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

Τι αφαιρέθηκε

Τα ακόλουθα στοιχεία έχουν απορριφθεί ή αλλάξει στην έκδοση 3.0.

Στοιχείο Καταργήθηκε από το 2.x 3.0 Ισοδύναμο
Σχηματίστε ενέργειες .form-actions N/A
Φόρμα αναζήτησης .form-search N/A
Σχηματίστε ομάδα με πληροφορίες .control-group.info N/A
Μεγέθη εισόδου σταθερού πλάτους .input-mini .input-small .input-medium .input-large .input-xlarge .input-xxlarge Χρησιμοποιήστε .form-controlκαι το σύστημα πλέγματος αντί.
Είσοδος φόρμας επιπέδου μπλοκ .input-block-level Δεν υπάρχει άμεσο ισοδύναμο, αλλά τα στοιχεία ελέγχου φορμών είναι παρόμοια.
Αντίστροφα κουμπιά .btn-inverse N/A
Ρευστή σειρά .row-fluid .row(όχι άλλο σταθερό πλέγμα)
Περιτύλιγμα χειριστηρίων .controls N/A
Σειρά ελέγχου .controls-row .rowή.form-group
Εσωτερική γραμμή πλοήγησης .navbar-inner N/A
Κατακόρυφα διαχωριστικά γραμμής πλοήγησης .navbar .divider-vertical N/A
Αναπτυσσόμενο υπομενού .dropdown-submenu N/A
Στοίχιση καρτελών .tabs-left .tabs-right .tabs-below N/A
Περιοχή ταμπλέτας που βασίζεται σε χάπι .pill-content .tab-content
Παράθυρο περιοχής με ταμπλέτα που βασίζεται σε χάπι .pill-pane .tab-pane
Λίστες πλοήγησης .nav-list .nav-header Δεν υπάρχει άμεσο ισοδύναμο, αλλά οι ομάδες λίστας και .panel-groupτα s είναι παρόμοια.
Ενσωματωμένη βοήθεια για στοιχεία ελέγχου φορμών .help-inline Δεν υπάρχει ακριβές αντίστοιχο, αλλά .help-blockείναι παρόμοιο.
Χρώματα προόδου που δεν είναι σε επίπεδο γραμμής .progress-info .progress-success .progress-warning .progress-danger Χρησιμοποιήστε .progress-bar-*το .progress-barαντί.

Επιπρόσθετες σημειώσεις

Άλλες αλλαγές στην έκδοση 3.0 δεν είναι αμέσως εμφανείς. Οι βασικές τάξεις, τα βασικά στυλ και οι συμπεριφορές έχουν προσαρμοστεί για ευελιξία και την πρώτη μας προσέγγιση για φορητές συσκευές . Εδώ είναι μια μερική λίστα:

  • Από προεπιλογή, τα στοιχεία ελέγχου φόρμας που βασίζονται σε κείμενο λαμβάνουν πλέον μόνο ελάχιστο στυλ. Για χρώματα εστίασης και στρογγυλεμένες γωνίες, εφαρμόστε την .form-controlκατηγορία στο στοιχείο στο στυλ.
  • Τα στοιχεία ελέγχου φόρμας που βασίζονται σε κείμενο με την .form-controlκλάση που εφαρμόζεται έχουν πλέον πλάτος 100% από προεπιλογή. Τυλίξτε τις εισόδους στο εσωτερικό <div class="col-*"></div>για να ελέγξετε τα πλάτη εισόδου.
  • .badgeδεν έχει πλέον τάξεις συμφραζομένων (-επιτυχία,-πρωτοβάθμια κ.λπ..).
  • .btnπρέπει επίσης να χρησιμοποιήσετε .btn-defaultγια να λάβετε το κουμπί "προεπιλογή".
  • .rowείναι πλέον ρευστό.
  • Οι εικόνες δεν ανταποκρίνονται πλέον από προεπιλογή. Χρήση .img-responsiveγια μέγεθος υγρού <img>.
  • Τα εικονίδια, τώρα .glyphicon, βασίζονται πλέον σε γραμματοσειρές. Τα εικονίδια απαιτούν επίσης μια κλάση βάσης και εικονιδίων (π.χ. .glyphicon .glyphicon-asterisk).
  • Το Typeahead έχει απορριφθεί, υπέρ της χρήσης του Twitter Typeahead .
  • Η σήμανση του τρόπου λειτουργίας έχει αλλάξει σημαντικά. Τα τμήματα .modal-header, .modal-body, και .modal-footerείναι πλέον τυλιγμένα .modal-contentκαι .modal-dialogγια καλύτερο στυλ και συμπεριφορά στο κινητό. Επίσης, δεν θα πρέπει πλέον να κάνετε αίτηση .hideστη .modalσήμανση.
  • Από την έκδοση 3.1.0, το HTML που φορτώθηκε από την remoteεπιλογή modal εισάγεται τώρα στο .modal-content(από v3.0.0 έως v3.0.3, στο .modal) αντί στο .modal-body. Αυτό σας επιτρέπει επίσης να μεταβάλλετε εύκολα την κεφαλίδα και το υποσέλιδο του modal, όχι μόνο το σώμα του modal.
  • Το πλαίσιο ελέγχου και οι δυνατότητες ραδιοφώνου της προσθήκης button.js χρησιμοποιούν πλέον και τα δύο data-toggle="buttons"αντί για data-toggle="buttons-checkbox"ή data-toggle="buttons-radio"στη σήμανση.
  • Τα συμβάντα JavaScript έχουν χώρο ονομάτων. Για παράδειγμα, για να χειριστείτε το συμβάν τύπου "show", χρησιμοποιήστε το 'show.bs.modal'. Για καρτέλες "εμφανίζονται" χρησιμοποιήστε 'shown.bs.tab', κ.λπ.

Για περισσότερες πληροφορίες σχετικά με την αναβάθμιση σε έκδοση 3.0 και αποσπάσματα κώδικα από την κοινότητα, ανατρέξτε στο Bootply .