Bootstrap3.0和bootstrap2.x的区别
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的区别的更多相关文章
- Byte,TBytes,array of Byte, array[0..9] of byte的区别
Byte前面已经说是存放bit的单元,是电脑内存的基本单位,byte表示0-255中的256个数字 下面为Byte的用法: var B: Byte; // 表示0-255的数字 begin B := ...
- andorid 控件 Bootstrap3.0风格的控件 精美UI控件库
Bootstrap是Twitter推出的一个开源的用于前端开发的工具包.它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架.Bootstra ...
- Bootstrap3.0(进度条、媒体对象、列表组、面板)
Bootstrap3.0学习第十六轮(进度条.媒体对象.列表组.面板) 前言 阅读之前您也可以到Bootstrap3.0入门学习系列导航中进行查看http://www.cnblogs.com/aehy ...
- Bootstrap3.0学习14
Bootstrap3.0学习第十四轮(分页.徽章) 前言 阅读之前您也可以到Bootstrap3.0入门学习系列导航中进行查看http://www.cnblogs.com/aehyok/p/340 ...
- Bootstrap3.0学习第八轮
Bootstrap3.0学习第八轮(工具Class) 前言 阅读之前您也可以到Bootstrap3.0入门学习系列导航中进行查看http://www.cnblogs.com/aehyok/p/34 ...
- Bootstrap3.0学习第六轮(表单)
Bootstrap3.0学习第六轮(表单) 前言 阅读之前您也可以到Bootstrap3.0入门学习系列导航中进行查看http://www.cnblogs.com/aehyok/p/3404867.h ...
- Bootstrap3.0学习第三轮(栅格系统案例)
Bootstrap3.0学习第三轮(栅格系统案例) 前言 在前面的一篇文章当中http://www.cnblogs.com/aehyok/p/3400499.html主要学习了栅格系统的基本原理,以及 ...
- Bootstrap3.0入门学习系列
Bootstrap3.0入门学习系列规划[持续更新] 前言 首先在此多谢博友们在前几篇博文当中给与的支持和鼓励,以及在回复中提出的问题.意见和看法. 在此先声明一下,之前在下小菜所有的随笔文章中, ...
- Bootstrap3.0入门学习系列教程
可视化布局:http://www.runoob.com/try/bootstrap/layoutit/ 1.浏览器兼容性:你可以去看看大牛的一篇文章http://www.cnblogs.com/lhb ...
随机推荐
- Oracle中的自连接(self join)-当表中的某一个字段与这个表中另外字段的相关时,我们可能用到自连接。
http://blog.163.com/wkyuyang_001/blog/static/10802122820091751049479/ 当表中的某一个字段与这个表中另外字段的相关时,我们可能用到自 ...
- vs2015 点击cshtml 后提示 "无效指针" 的解决办法
1. 关闭vs 2. 删除 %LocalAppData%\Microsoft\VisualStudio\14.0\ComponentModelCache 3. 打开vs OK 解决
- JavaScript的柯里化函数
柯里化,或者说部分应用,是一种函数式编程的技术,对于熟悉以传统方式编写 JavaScript 代码的人来说可能会很费解.但如果使用得当,它可以使你的 JavaScript 函数更具可读性. 更具可读性 ...
- 三、curator recipes之共享的可重入读写锁
简介 curator实现了跨JVM的可重入读写互斥锁.它使用zookeeper去进行加锁,所以指定相同路径的处理线程将会基于“公平锁”的机制去竞争锁资源. 读写锁包含了读锁.写锁两个,它们的互斥关系如 ...
- linux服务器上部署jdk+tomcat+rocketmq+redis-cluster
通常我们拿到一组干净的linux服务器,需要初始化安装一些基础软件,这里一站式介绍部署jdk+tomcat+rocketmq+redis-cluster 前言:如果要在多台服务器上安装,在一台服务器上 ...
- 使用fastjson 获取json字符串中的数组,再转化为java集合对象
最近,使用layui做一个导出功能,尽管有插件提供导出,但是呢,由于数据中有状态是数字,例如1显示是已支付,但是导出时也希望这样显示,但是导出的还是1: lz没有找到改下这个插件的办法,只能利用服务端 ...
- plSql读取Oracle数据库中文乱码
新建环境变量,设置变量名:NLS_LANG,变量值:SIMPLIFIED CHINESE_CHINA.ZHS16GBK,确定即可
- luogu P2801 教主的魔法
题目描述 教主最近学会了一种神奇的魔法,能够使人长高.于是他准备演示给XMYZ信息组每个英雄看.于是N个英雄们又一次聚集在了一起,这次他们排成了一列,被编号为1.2.…….N. 每个人的身高一开始都是 ...
- 判断数组内是否有几个元素之和等于m
#include<iostream> using namespace std; ]; int f(int n,int m) { ||m-a[n]==); &&m-a[n]! ...
- Myeclipse下集成SVN插件
一.下载SVN插件subclipse 下载地址:http://subclipse.tigris.org/servlets/ProjectDocumentList?folderID=2240 在 ...