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

Bootstrap3.0和bootstrap2.x的区别的更多相关文章

  1. Byte,TBytes,array of Byte, array[0..9] of byte的区别

    Byte前面已经说是存放bit的单元,是电脑内存的基本单位,byte表示0-255中的256个数字 下面为Byte的用法: var B: Byte; // 表示0-255的数字 begin B := ...

  2. andorid 控件 Bootstrap3.0风格的控件 精美UI控件库

    Bootstrap是Twitter推出的一个开源的用于前端开发的工具包.它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架.Bootstra ...

  3. Bootstrap3.0(进度条、媒体对象、列表组、面板)

    Bootstrap3.0学习第十六轮(进度条.媒体对象.列表组.面板) 前言 阅读之前您也可以到Bootstrap3.0入门学习系列导航中进行查看http://www.cnblogs.com/aehy ...

  4. Bootstrap3.0学习14

    Bootstrap3.0学习第十四轮(分页.徽章)   前言 阅读之前您也可以到Bootstrap3.0入门学习系列导航中进行查看http://www.cnblogs.com/aehyok/p/340 ...

  5. Bootstrap3.0学习第八轮

    Bootstrap3.0学习第八轮(工具Class)   前言 阅读之前您也可以到Bootstrap3.0入门学习系列导航中进行查看http://www.cnblogs.com/aehyok/p/34 ...

  6. Bootstrap3.0学习第六轮(表单)

    Bootstrap3.0学习第六轮(表单) 前言 阅读之前您也可以到Bootstrap3.0入门学习系列导航中进行查看http://www.cnblogs.com/aehyok/p/3404867.h ...

  7. Bootstrap3.0学习第三轮(栅格系统案例)

    Bootstrap3.0学习第三轮(栅格系统案例) 前言 在前面的一篇文章当中http://www.cnblogs.com/aehyok/p/3400499.html主要学习了栅格系统的基本原理,以及 ...

  8. Bootstrap3.0入门学习系列

    Bootstrap3.0入门学习系列规划[持续更新]   前言 首先在此多谢博友们在前几篇博文当中给与的支持和鼓励,以及在回复中提出的问题.意见和看法. 在此先声明一下,之前在下小菜所有的随笔文章中, ...

  9. Bootstrap3.0入门学习系列教程

    可视化布局:http://www.runoob.com/try/bootstrap/layoutit/ 1.浏览器兼容性:你可以去看看大牛的一篇文章http://www.cnblogs.com/lhb ...

随机推荐

  1. WP的万能小应用时钟表

    哎,只能说现在是越来越不行了,已经近一年没写C#的代码了,我居然隐隐有看不懂自己代码的趋势了,真伤! 我突然想起当年寒假里面为了,准备微软创新杯大赛所做的一些小应用,哈哈,于是我就拿出来显摆一下喽! ...

  2. CentOS6.X 系统安装后的基础优化

    特别说明:克隆之后的网卡修改 1 编辑eth0的配置文件:vi /etc/sysconfig/network-scripts/ifcfg-eth0, 删除HWADDR地址那一行及UUID的行如下: H ...

  3. [转] sqlserver 中查看trigger的disabled/enabled情况

    本文转自:http://blog.csdn.net/miqi770/article/details/48708199 SELECT t.name AS TableName, tr.name AS Tr ...

  4. angular环境搭建时的坑

    安装angular环境踩过一些坑,最终还是把工程跑起来了,这里描述一下我的步骤,不排除有些步骤是多余的,希望能对遇到同样问题的小伙伴有帮助. 下载最新版node.js. 安装node,安装过程一路点下 ...

  5. 使用 Flask 框架写用户登录功能的Demo时碰到的各种坑(一)——创建应用

    使用 Flask 框架写用户登录功能的Demo时碰到的各种坑(一)——创建应用 使用 Flask 框架写用户登录功能的Demo时碰到的各种坑(二)——使用蓝图功能进行模块化 使用 Flask 框架写用 ...

  6. SQL Serever学习17——数据库的分析和设计

    数据库的分析和设计 设计数据库确定一个合适的数据模型,满足3个要求: 符合用户需求,包含用户所需的所有数据 能被数据库管理系统实现,如sqlserver,oracle,db2 具有比较高质量,容易理解 ...

  7. SQL SERVER学习2——数据库设计

    数据库设计是数据库知识中比较重要的部分,我们需要了解数据库设计的基本步骤,E-R图的画法. 数据库设计的基本概述 检验一个数据库设计好坏的标准就是,看他是否能够方便的执行各种数据检索和处理操作,并且有 ...

  8. <深入理解JavaScript>学习笔记(3)_全面解析Module模式

    简介 Module模式是JavaScript编程中一个非常通用的模式,一般情况下,大家都知道基本用法,本文尝试着给大家更多该模式的高级使用方式. 首先我们来看看Module模式的基本特征: 模块化,可 ...

  9. 如鹏网学习笔记(六)ADO.Net基础

    ADO.Net基础 一.ADO.Net简介 1,程序要通过SQL语句自动化的操作数据库,必须要用一个类库, 类库要提供execute("insert into ...")/exec ...

  10. java中的奇葩 “:”

    一.经常使用java的人有没有发现java也可以将汉字作为标识符出现呢? 在Java语言中,标识符是以字母.下划线(_)或美元符($)开头,由字母.数字.下划线(_)或美元符($)组成的字符串 真的输 ...