Bootstrap3.0和bootstrap2.x的区别

时间:2024-11-11 12:05:38

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