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

.span* nützlich ist und .col-md-* tatsächlich nützlich ist geändert.

Geänderte Stile in Bootstrap3

Bootstrap 2.x.container-fluid.row-fluid

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.list-group .list-group-item .list-group-item-text.list -group-item-heading.glyphicon

	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中被移除的样式

Extra kleines Raster ( <768px)

页面元素	从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-*
Mittleres Raster (≥992px)

• .col-md-*

  
  

  Großes Raster (≥1200px)

.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🎜🎜🎜Vertikale Trennzeichen der Navigationsleiste🎜 .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!

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn