Bootstrap

Bootstrap

 

（Web框架）

 

Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。 它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言 Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。 国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。

特点

Bootstrap是基于 HTML5 和 CSS3 开发的，它在 jQuery 的基础上进行了更为个性化和人性化的完善，形成一套自己独有的网站风格，并兼容大部分jQuery插件。

class的主要变化

表格中列出了v2.x 和 v3.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
.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-groups are similar.

有些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'，还有很多其它事件名称也是类似。