补充:学会Twitter Bootstrap不再难

  博客园的兄弟姐妹们很给力,自从这篇文章写出后,有人可能会对2.x版本升级到3.x版本的区别有些好奇和模糊。现在将官方给出的说明贴上去:

  

Bootstrap 3并不向后兼容Bootstrap v2.x。下面章节列出的内容可以作为从v2.x升级到v3.0的通用指南。如果需要更多信息,可以查看更新记录这篇官方博文。

class的主要变化

表格中列出了v2.x 和 v3.0之间样式表的变更。

Bootstrap 2.xBootstrap 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
.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-small .input-sm
.input-large .input-lg
.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

新增class

我们新增了一些页面元素,同时也对一些原有的元素进行了修改。下面列出了新增或更新之后的样式表。

页面元素描述
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 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

被移除的class

以下列出的页面元素已经在v3.0版本中被去除或修改。

页面元素从2.x版本中去除3.0版本中对应的元素
Form actions .form-actions N/A
Search form .form-search N/A
Form group with info .control-group.info N/A
Fluid container .container-fluid .container (no more fixed grid)
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
Nav lists .nav-list .nav-header No direct equivalent, but List groups and .panel-groupsare similar.

额外注意

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:

有些v3.0中的多修改并不能从表面直接看到。我们对基本class、关键样式和行为都进行了调整,使其更灵活并且适应移动设备优先这一目标。下面是一个部分列表:

  • 默认情况下,文本类型的表单控件只被赋予了最少的样式。将.form-control class赋予这些控件可以使其具有高亮(在获得焦点时)和圆角样式。
  • 添加了.form-control class的文本表单控件默认预设为100%宽度。用<div class="col-*"></div>包裹输入框(input)即可控制其宽度。
  • .badge不再保留状态相关的class(-success、-primary等)。
  • .btn必须和 .btn-default一起使用才能获得“默认”样式的按钮。
  • .container.row目前是基于百分比定义的宽度。
  • 默认情况下,图片不具有由响应式特性,需要使用.img-responsive才能让<img>实现响应式可变大小。
  • 图标,.glyphicon,演变为字体图标。每个图标都需要一个基本class和一个代表特定图标的class(例如,.glyphicon .glyphicon-asterisk
  • 与输入组件被移除,建议使用Twitter Typeahead组件。
  • 模态框组件的HTML结构发生了很大的改变。.modal-header.modal-body.modal-footer部分目前包含在了.modal-content.modal-dialog中,为的是增强移动设备上的样式和行为特性。
  • The HTML loaded by the remote modal option is now injected 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.
  • JavaScript事件目前全部都应用了命名空间。例如,模态框的"show"事件的名称为'show.bs.modal'。标签页组件的"shown"事件名称为'shown.bs.tab',还有很多其它事件名称也是类似。
原文地址:https://www.cnblogs.com/niuox/p/3583650.html