Heim >Web-Frontend >Bootstrap-Tutorial >Was ist der Unterschied zwischen Bootstrap2 und 3?
Unterschiede: 1. Bootstrap3 unterstützt Mobile-First, Bootstrap jedoch nicht. 2. Bootstrap2 verwendet den Gradient-Bump-Stil, während Bootstrap3 den Flat-Design-Stil verwendet.
Empfohlene verwandte Tutorials: „Bootstrap-Tutorial“
Bei der Durchführung von Projekten verweisen wir manchmal auf die Exzellenz anderer Fälle. Bei der Verwendung von Bootstrap habe ich festgestellt, dass in der Layoutklasse
Geänderte Stile in Bootstrap3
Bootstrap 3.x | |
---|---|
Behälter code><code>.container-fluid |
.container |
.row-fluid |
.row |
.span* |
.col-md-* |
.offset* |
.col-md-offset-* |
.brand |
.navbar-brand |
.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-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-small |
.input-sm |
.input-large |
.input-lg |
.control-group |
.form-group |
.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 |
.row
🎜🎜🎜🎜.span*
🎜🎜 md-*
🎜🎜🎜🎜.offset*
🎜🎜.col-md-offset-*
🎜🎜🎜🎜.brand🎜🎜<code>.navbar-brand
🎜🎜🎜🎜.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🎜🎜<code>.btn-lg
🎜🎜🎜🎜.alert-error
🎜🎜.alert-danger
🎜🎜🎜🎜 .visible-phone
🎜🎜.visible-xs
🎜🎜🎜🎜.visible-tablet
🎜🎜.visible-sm
code>🎜🎜🎜🎜.visible-desktop
🎜🎜 ist unterteilt in .visible-md .visible-lg
🎜🎜🎜🎜.hidden-phone Code >🎜🎜<code>.hidden-xs
🎜🎜🎜🎜.hidden-tablet
🎜🎜.hidden-sm
🎜🎜🎜🎜 .hidden-desktop
🎜🎜 ist unterteilt in .hidden-md .hidden-lg
🎜🎜🎜🎜.input-small
🎜🎜.input -sm
🎜🎜🎜🎜.input-large
🎜🎜.input-lg
🎜🎜🎜🎜.control-group
🎜 🎜.form-group
🎜🎜🎜🎜.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 code> 🎜🎜<code>.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
🎜🎜🎜 🎜Bootstrap3.x .panel-default .panel-body
.panel-title
.panel-heading
.panel-footer
.panel-collapse
Gruppen auflisten
Glyphicons | |
---|---|
Jumbotron |
.jumbotron .panel .panel-default .panel-body .panel-title .panel-heading .panel-footer .panel-collapse
|
List groups |
.list-group .list-group-item .list-group-item-text .list-group-item-heading
|
Glyphicons | .glyphicon |
Jumbotron | .jumbotron |
Extra small grid (<768px) | .col-xs-* |
Small grid (≥768px) | .col-sm-* |
Medium grid (≥992px) | .col-md-* |
Large grid (≥1200px) | .col-lg-* |
Responsive utility classes (≥1200px) |
.visible-lg .hidden-lg
|
Offsets |
.col-sm-offset-* .col-md-offset-* .col-lg-offset-*
|
Push |
.col-sm-push-* .col-md-push-* .col-lg-push-*
|
Pull |
.col-sm-pull-* .col-md-pull-* .col-lg-pull-*
|
Input groups |
.input-group .input-group-addon .input-group-btn
|
Form controls |
.form-control .form-group
|
Button group sizes |
.btn-group-xs .btn-group-sm .btn-group-lg
|
Navbar text | .navbar-text |
Navbar header | .navbar-header |
Justified tabs / pills | .nav-justified |
Responsive images | .img-responsive |
Contextual table rows |
.success .danger .warning .active
|
Contextual panels |
.panel-success .panel-danger .panel-warning .panel-info
|
Modal |
.modal-dialog .modal-content
|
Thumbnail image | .img-thumbnail |
Well sizes |
.well-sm .well-lg
|
Alert links | .alert-link |
Bootstrap3.x中被移除的样式
页面元素 | 从2.x版本中去除 | 3.x版本中对应的元素 |
---|---|---|
Form actions | .form-actions |
N/A |
Search form | .form-search |
N/A |
Form group with info | .control-group.info |
N/A |
Fluid container | .container-fluid |
.container (不再进行固定) |
Fluid row | .row-fluid |
.row (不再进行固定) |
Controls wrapper | .controls |
N/A |
Controls row | .controls-row |
.row 或者.form-group
|
Navbar inner | .navbar-inner |
N/A |
Navbar vertical dividers | .navbar .divider-vertical |
N/A |
Dropdown submenu | .dropdown-submenu |
N/A |
Tab alignments |
.tabs-left .tabs-right .tabs-below
|
N/A |
Nav lists |
.nav-list .nav-header
|
没有直接对等的样式t, 但是和List groups 和 .panel-groups
|
.col-xs-*
Kleines Raster (≥768px)
.col-sm-*
.col-md-*
.col-lg-*
🎜🎜🎜🎜Reaktives Dienstprogramm Klassen (≥1200px)🎜🎜.visible-lg
.hidden-lg
🎜🎜🎜🎜Offsets🎜🎜.col-sm-offset-*
.col-md-offset-*
.col-lg-offset-*
🎜🎜🎜🎜Push🎜🎜.col-sm-push-* <code>.col-md-push-*
.col-lg-push-*
🎜🎜🎜🎜Pull🎜🎜.col-sm-pull- *
.col-md-pull-*
.col-lg-pull-*
🎜🎜🎜🎜Eingabegruppen🎜🎜.input-group
.input-group-addon
.input-group-btn
🎜🎜🎜🎜Formularsteuerelemente🎜🎜.form-control
.form-group🎜🎜🎜🎜Button-Gruppengrößen🎜🎜.btn-group-xs
.btn-group-sm
.btn -group-lg
🎜🎜🎜🎜Navbar-Text🎜🎜.navbar-text
🎜🎜🎜🎜Navbar-Header🎜🎜.navbar-header
🎜🎜🎜🎜 Blocksatz-Tabs/Pillen🎜🎜.nav-justified
🎜🎜🎜🎜Responsive Bilder🎜🎜.img-responsive
🎜🎜🎜🎜Kontextuelle Tabellenzeilen🎜🎜.success
.danger
.warning
.active
🎜🎜🎜🎜Kontextbezogene Panels🎜🎜.panel-success
.panel-danger
.panel-warning
.panel-info
🎜🎜🎜🎜Modal🎜🎜.modal-dialog
.modal-content
🎜🎜🎜🎜Thumbnail image🎜🎜.img-thumbnail
🎜🎜🎜🎜Well-Größen🎜🎜.well-sm
.well-lg
🎜🎜🎜🎜Alert-Links🎜🎜.alert-link
🎜🎜🎜🎜🎜🎜Bootstrap3.x中被移除的样式🎜🎜🎜🎜🎜 2.x s🎜🎜N/A🎜🎜 🎜🎜Suchformular🎜🎜.form-search
🎜🎜N/A🎜🎜🎜🎜Formulargruppe mit Informationen🎜🎜.control-group.info
🎜🎜N/A 🎜🎜🎜🎜Flüssigkeitsbehälter🎜🎜.container-fluid
🎜🎜.container
(不再进行固定)🎜🎜🎜🎜Flüssigkeitsreihe🎜🎜.row- fluid
🎜🎜.row
(不再进行固定)🎜🎜🎜🎜Controls-Wrapper🎜🎜.controls
🎜🎜N/A🎜🎜🎜🎜Controls-Zeile 🎜🎜.controls-row
🎜🎜.row
或者.form-group
🎜🎜🎜🎜Navbar inner🎜🎜.navbar- innen
🎜🎜N/A🎜🎜🎜 .navbar .divider-vertikal
🎜🎜N/A🎜🎜🎜🎜 🎜🎜 🎜🎜 🎜🎜🎜🎜Dropdown-Untermenü🎜🎜.dropdown-submenu
🎜🎜N/A🎜 🎜🎜 🎜Tab-Ausrichtungen🎜🎜.tabs-left
.tabs-right
.tabs-below
🎜🎜N/A🎜🎜🎜🎜Navigationslisten🎜 🎜.nav-list
.nav-header
🎜🎜没有直接对等的样式t, 但是和List groups und .panel-groups
相似🎜🎜🎜🎜🎜且🎜🎜🎜🎜自Bootstrap3起,框架包含了贯穿于整个库的移动设备优先的样式.🎜 🎜🎜🎜Bootstrap2 ist die neueste Version, Bootstrap3 ist die neueste Version von Bootstrap3浏览器兼容性方面比Bootstrap2好🎜🎜如果你需要兼容IE8甚至是IE7和IE6,那么只能选择Bootstrap2,虽然它自身在IE6的效果也并不完美.🎜🎜🎜🎜Das obige ist der detaillierte Inhalt vonWas ist der Unterschied zwischen Bootstrap2 und 3?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!