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 ...
随机推荐
- Ruby(3):基本语法中
字符串分割成数组: 可以使用先scan再join的方法,当然其实有更好的 split方法,专门用来分割字符串 # 在Ruby中,如果不使用inspect,直接使用puts输出数组,那么每个元素会占用一 ...
- iOS傻金币动画
项目要做一个撒金币签到的动画,分享出来 金币.zip,其中有几个做的时候注意的点. 1.金币掉入口袋的过程,有入口袋的效果. 开始做的时候直接把金币添加到底部的View上这样入口袋的时候,口袋里边显示 ...
- js和jQuery获取各种屏幕或文档的高度和宽度
1.jQuery获取文档或屏幕的高度 console.log($(window).height());//浏览器页面当前屏幕可见区域的高度 console.log($(document).height ...
- Java基础(3)——变量
从这篇文章起开始正式进入正题啦,本文将较为简单的介绍一下变量以及常量.变量,顾名思义,就是可以变的量,常量那么久相反了,常常不变的量就叫常量._(¦3」∠) 变量 在 Java 中,任何一个变量都得有 ...
- java加载redis以及基本操作
前言: Redis是一款开源的.高性能的键-值存储(key-value store).它常被称作是一款数据结构服务器(data structure server).Redis的键值可以包括字符串(st ...
- Java 运行时数据区域
1. 整体分类 程序计数器 虚拟机栈 本地方法栈 Java 堆 方法区 运行时常量池 直接内存 2. 程序计数器 每个线程一个计数器,线程的私有内存 指向的是字节码的内存地址? 如果线程执行的是 Ja ...
- 高并发第二弹:并发概念及内存模型(JMM)
高并发第二弹:并发概念及内存模型(JMM) 感谢 : 深入Java内存模型 http://www.importnew.com/10589.html, cpu缓存一致性 https://www.cnbl ...
- HttpServletRequest 各种方法总结(转)
HttpServletRequest对象代表客户端的请求,当客户端通过HTTP协议访问服务器时,HTTP请求头中的所有信息都封装在这个对象中,开发人员通过这个对象的方法,可以获得客户这些信息. 转自: ...
- 原型链继承中的prototype、__proto__和constructor的关系
前不久写了有关原型链中prototype.__proto__和constructor的关系的理解,这篇文章说说在原型链继承中的prototype.__proto__和constructor的关系. 通 ...
- redux、immutablejs和mobx性能对比(二)
三.分析数据 1.前提说明 我对测试出的10个数据摘除最大值与最小值,然后求平均值 根据平均值我绘制了一个曲线图一个柱状图 曲线图用于查看1000-100000的性能趋势 柱状图用于比较在相同条数下r ...