עובר ל-v3.x
הדרכה כיצד לשדרג מ-Bootstrap v2.x ל-v3.x עם דגש על שינויים גדולים, מה חדש ומה הוסר.
הדרכה כיצד לשדרג מ-Bootstrap v2.x ל-v3.x עם דגש על שינויים גדולים, מה חדש ומה הוסר.
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 |
רשת קטנה במיוחד (<768 פיקסלים) | .col-xs-* |
רשת קטנה (≥768px) | .col-sm-* |
רשת בינונית (≥992 פיקסלים) | .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 | .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 |
לא |
טופס חיפוש | .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 פנימי | .navbar-inner |
לא |
מחיצות אנכיות של Navbar | .navbar .divider-vertical |
לא |
תפריט משנה נפתח | .dropdown-submenu |
לא |
יישור כרטיסיות | .tabs-left .tabs-right .tabs-below |
לא |
אזור טבליות מבוסס גלולות | .pill-content |
.tab-content |
חלונית אזור טבלית מבוססת גלולות | .pill-pane |
.tab-pane |
רשימות Nav | .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
)..modal-header
, .modal-body
ועטופים .modal-footer
כעת .modal-content
ובשביל .modal-dialog
עיצוב והתנהגות ניידים טובים יותר. כמו כן, אינך צריך עוד להגיש בקשה .hide
לסימון .modal
שלך.remote
האפשרות המודאלית מוזרק כעת ל- .modal-content
(מ-v3.0.0 ל-v3.0.3, ל- .modal
) במקום ל- .modal-body
. זה מאפשר לך גם לשנות בקלות את הכותרת העליונה והתחתונה של המודאלי, לא רק את הגוף המודאלי.data-toggle="buttons"
במקום data-toggle="buttons-checkbox"
או data-toggle="buttons-radio"
בסימון שלהם.'show.bs.modal'
. עבור כרטיסיות "מוצגות" השתמש ב- 'shown.bs.tab'
וכו'.למידע נוסף על שדרוג לגרסה 3.0 וקטעי קוד מהקהילה, ראה Bootply .