bootstrap 2.3版与3.0版的使用区别

2024-05-02 00:20•linux•阅读 1720

bootstrap已经推出了3.0的新版，看起来2.3.x版本也不会再更新了。那么bootstrap 2.3版与3.0版的区别在哪里呢？下面我们就来介绍一下。

Bootstrap 3.0增加了一些新的特性，对于一些类也进行了调整。不过两个版本在使用的方法上是没什么大的区别的。

bootstrap 2.3版与3.0版重要类的改变对比：

Bootstrap 2.x	Bootstrap 3.0
.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
.visible-phone	.visible-sm
.visible-tablet	.visible-md
.visible-desktop	.visible-lg
.hidden-phone	.hidden-sm
.hidden-tablet	.hidden-md
.hidden-desktop	.hidden-lg
.input-small	.input-sm
.input-large	.input-lg
.checkbox.inline .radio.inline	.checkbox-inline .radio-inline
.input-prepend .input-append	.input-group
.add-on	.input-group-addon
.thumbnail	.img-thumbnail
ul.unstyled	.list-unstyled
ul.inline	.list-inline

bootstrap 3.0版新增的类

Element	Description
Panels	.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
Tiny grid (<768 px)	.col-xs-*
Small grid (>768 px)	.col-sm-*
Medium grid (>992 px)	.col-md-*
Large grid (>1200 px)	.col-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

bootstrap 3.0版删除的类

Element	Removed from 2.x	3.0 Equivalent
Form actions	.form-actions	N/A
Search form	.form-search	N/A
Fluid container	.container-fluid	.container (no more fixed grid)
Fluid row	.row-fluid	.row (no more fixed grid)
Navbar inner	.navbar-inner	N/A
Dropdown submenu	.dropdown-submenu	N/A
Tab alignments	.tabs-left .tabs-right .tabs-below	N/A

还有，常用的图标表示

http://marcoceppi.github.io/bootstrap-glyphicons/

http://bootstrap.ninghao.net/scaffolding.html#global

http://www.runoob.com/bootstrap/bootstrap-v2-icons.html