摘自http://v3.bootcss.com/migration/

Bootstrap 3 版本并不向后兼容 v2.x 版本。下面的章节是一份从 v2.x 版本升级到 v3.0 版本的通用指南。如需查看更版本更新信息,请点击 v3.0 新增内容

主要 class 的变更

下表列举了 v2.0x 版本和 v3.0 版本之间的样式差异。

Bootstrap 2.x Bootstrap 3.0
.row-fluid .row
.span* .col-md-*
.offset* .col-md-offset-*
.brand .navbar-brand
.navbar .nav .navbar-nav
.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
.alert .alert .alert-warning
.alert-error .alert-danger
.visible-phone .visible-xs
.visible-tablet .visible-sm
.visible-desktop Split into .visible-md .visible-lg
.hidden-phone .hidden-xs
.hidden-tablet .hidden-sm
.hidden-desktop Split into .hidden-md .hidden-lg
.input-block-level .form-control
.control-group .form-group
.control-group.warning .control-group.error .control-group.success .form-group.has-*
.checkbox.inline .radio.inline .checkbox-inline .radio-inline
.input-prepend .input-append .input-group
.add-on .input-group-addon
.img-polaroid .img-thumbnail
ul.unstyled .list-unstyled
ul.inline .list-inline
.muted .text-muted
.label .label .label-default
.label-important .label-danger
.text-error .text-danger
.table .error .table .danger
.bar .progress-bar
.bar-* .progress-bar-*
.accordion .panel-group
.accordion-group .panel .panel-default
.accordion-heading .panel-heading
.accordion-body .panel-collapse
.accordion-inner .panel-body

新增的内容

我们添加了一些新元素,并且对现有的某些元素就行了修改。下面列出的是新增或修改的样式。

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
Extra small grid (<768px) .col-xs-*
Small grid (≥768px) .col-sm-*
Medium grid (≥992px) .col-md-*
Large grid (≥1200px) .col-lg-*
Responsive utility classes (≥1200px) .visible-lg .hidden-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 height sizes .input-sm .input-lg
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 .info
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

删除的内容

下面列出的元素在 v3.0 版本中被删除或改变了。

Element Removed from 2.x 3.0 Equivalent
Form actions .form-actions N/A
Search form .form-search N/A
Form group with info .control-group.info N/A
Fixed-width input sizes .input-mini .input-small .input-medium .input-large .input-xlarge .input-xxlarge Use .form-control and the grid system instead.
Block level form input .input-block-level No direct equivalent, but forms controls are similar.
Inverse buttons .btn-inverse N/A
Fluid row .row-fluid .row (no more fixed grid)
Controls wrapper .controls N/A
Controls row .controls-row .row or .form-group
Navbar inner .navbar-inner N/A
Navbar vertical dividers .navbar .divider-vertical N/A
Dropdown submenu .dropdown-submenu N/A
Tab alignments .tabs-left .tabs-right .tabs-below N/A
Pill-based tabbable area .pill-content .tab-content
Pill-based tabbable area pane .pill-pane .tab-pane
Nav lists .nav-list .nav-header No direct equivalent, but list groups and .panel-groups are similar.
Inline help for form controls .help-inline No exact equivalent, but .help-block is similar.
Non-bar-level progress colors .progress-info .progress-success .progress-warning .progress-danger Use .progress-bar-* on the .progress-bar instead.

额外注意事项

Other changes in v3.0 are not immediately apparent. Base classes, key styles, and behaviors have been adjusted for flexibility and our mobile first approach. Here's a partial list:

  • By default, text-based form controls now receive only minimal styling. For focus colors and rounded corners, apply the .form-control class on the element to style.
  • Text-based form controls with the .form-control class applied are now 100% wide by default. Wrap inputs inside <div class="col-*"></div> to control input widths.
  • .badge no longer has contextual (-success,-primary,etc..) classes.
  • .btn must also use .btn-default to get the "default" button.
  • .row is now fluid.
  • Images are no longer responsive by default. Use .img-responsive for fluid <img> size.
  • The icons, now .glyphicon, are now font based. Icons also require a base and icon class (e.g. .glyphicon .glyphicon-asterisk).
  • Typeahead has been dropped, in favor of using Twitter Typeahead.
  • Modal markup has changed significantly. The .modal-header, .modal-body, and .modal-footer sections are now wrapped in .modal-content and .modal-dialog for better mobile styling and behavior. Also, you should no longer apply .hide to .modal in your markup.
  • As of v3.1.0, the HTML loaded by the remote modal option is now injected into the .modal-content (from v3.0.0 to v3.0.3, into the .modal) instead of into the .modal-body. This allows you to also easily vary the header and footer of the modal, not just the modal body.
  • The checkbox and radio features of the button.js plugin now both use data-toggle="buttons" instead of data-toggle="buttons-checkbox" or data-toggle="buttons-radio" in their markup.
  • JavaScript events are namespaced. For example, to handle the modal "show" event, use 'show.bs.modal'. For tabs "shown" use 'shown.bs.tab', etc.

For more information on upgrading to v3.0, and code snippets from the community, see Bootply.

从 Bootstrap 2.x 版本升级到 3.0 版本的更多相关文章

  1. bootstrap 2.3版与3.0版的使用区别

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

  2. [转载]bootstrap 2.3版与3.0版的使用区别

    http://www.weste.net/2013/8-20/93261.html bootstrap已经推出了3.0的新版,看起来2.3.x版本也不会再更新了.那么bootstrap 2.3版与3. ...

  3. 【AngularJS】 2.0 版本发布

    [AngularJS] 2.0 版本发布 w5cValidator[AngularJS] 2.0 版本发布   w5cValidator 插件基于angular原有的表单验证,在原有的基础上扩展了一些 ...

  4. ICG_System之全自动代码生成器V2.0版本

    大家好! 早在2014年本人就已经利用业余时间开发自己的ICG之代码生成器系统.依靠bootstrap的崛起本人也在不断完善此应用.目的是为了减少开发人员的工作量. 减少不必要的复制粘贴操作,该系统已 ...

  5. ES 03 - 初探Elasticsearch的主要配置文件(以6.6.0版本为例)

    目录 1 elasticsearch.yml(ES服务配置) 1.1 Cluster集群配置 1.2 Node节点配置 1.3 Paths路径配置 1.4 Memory内存配置 1.5 Network ...

  6. Node.js开源应用OSN发布初始V1.0版本-见面版本

    Nodejs开源应用OSN初始版本V1.0发布,请参考本操作说明文档,有任何问题请留言 Nodejs开源应用OSN发布V1.0版本: OSChina收录地址: OSC收录地址:http://www.o ...

  7. 二进制搭建Kubernetes集群(最新v1.16.0版本)

    目录 1.生产环境k8s平台架构 2.官方提供三种部署方式 3.服务器规划 4.系统初始化 5.Etcd集群部署 5.1.安装cfssl工具 5.2.生成etcd证书 5.2.1 创建用来生成 CA ...

  8. JEECG 4.0 版本发布,JAVA快速开发平台

    JEECG 4.0 版本发布,系统全面优化升级,更快,更稳定!         导读                               ⊙平台性能优化,系统更稳定,速度闪电般提升      ...

  9. 探索 Redux4.0 版本迭代 论基础谈展望(对比 React context)

    Redux 在几天前(2018.04.18)发布了新版本,6 commits 被合入 master.从诞生起,到如今 4.0 版本,Redux 保持了使用层面的平滑过渡.同时前不久, React 也从 ...

随机推荐

  1. android mvvm

    android studio 需要gradle 1.5.0以上才支持 dependencies { classpath 'com.android.tools.build:gradle:1.5.0'} ...

  2. 解决在国内更新android sdk时连不到服务器的问题

    修改hosts文件 Windows下:打开C:\Windows\System32\drivers\etc\hosts Linux下:vi /etc/hosts 在文件尾加入如下两行: 74.125.2 ...

  3. 如何替换掉.net toolStrip控件溢出按钮背景图

    在使用.net toolStrip控件的时候,  toolStrip里面的item宽度超过本身宽度时,会出现一个溢出按钮:OverflowButton,这个按钮是控件的一个属性,其实也是继承自Tool ...

  4. Client默认用户及登录密码(转)

    Client默认用户及登录密码 SAP系统(如ERP.CRM等)安装完成,初始化状态下有若干个客户端(Client).如果是生产系统,一般只有000.001.066等三个Client:如果是IDES系 ...

  5. C#之属性

    在C#类中有属性这个成员,C#属性用来读写类的字段.实际上是通过get和set访问器实现的.

  6. HBase with MapReduce (Only Read)

    最近在学习HBase,在看到了如何使用Mapreduce来操作Hbase,下面将几种情况介绍一下,具体的都可以参照官网上的文档说明.官网文档连接:http://hbase.apache.org/boo ...

  7. quartz.net 使用(一)-执行定时计划任务

    一.使用nuget安装所需要的包 Install-Package Quartz 二.实现自己的job继承IJob public class FirstJob : IJob { public void ...

  8. c++语法随身记

    1.memset是计算机中C/C++语言函数.将s所指向的某一块内存中的前n个 字节的内容全部设置为ch指定的ASCII值, 第一个值为指定的内存地址,块的大小由第三个参数指定,这个函数通常为新申请的 ...

  9. Using python to process Big Data

    Pandas is a great lib to process BIg Data. 1) pandas.pivot_table(data,values=None,columns=None,aggfu ...

  10. C++中 destory() 和deallocate()以及delete函数的相关性和区别性

    这里非常的绕口  需要仔细的来看看: destory(): 显示调用一个对象的析构函数 相当于释放一个对象需要释放的一些动态内存 为下次真正释放对象做准备 deallocate():真正的释放一个内存 ...