您的位置：首页 > Web前端 > BootStrap

补充：学会Twitter Bootstrap不再难

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

　　

从2.x升级到3.0版本

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-group
sare 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'
，还有很多其它事件名称也是类似。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航