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.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-desktopSplit into .visible-md .visible-lg.hidden-phone.hidden-xs.hidden-tablet.hidden-sm.hidden-desktopSplit 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-thumbnailul.unstyled.list-unstyledul.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-collapseList groups.list-group .list-group-item .list-group-item-text .list-group-item-headingGlyphicons.glyphiconJumbotron.jumbotronExtra 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-lgOffsets.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-btnForm controls.form-control .form-groupButton group sizes.btn-group-xs .btn-group-sm .btn-group-lgNavbar text.navbar-textNavbar header.navbar-headerJustified tabs / pills.nav-justifiedResponsive images.img-responsiveContextual table rows.success .danger .warning .activeContextual panels.panel-success .panel-danger .panel-warning .panel-infoModal.modal-dialog .modal-contentThumbnail image.img-thumbnailWell sizes.well-sm .well-lgAlert links.alert-link

被移除的class

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

页面元素从2.x版本中去除3.0版本中对应的元素Form actions.form-actionsN/ASearch form.form-searchN/AForm group with info.control-group.infoN/AFluid container.container-fluid.container (no more fixed grid)Fluid row.row-fluid.row (no more fixed grid)Controls wrapper.controlsN/AControls row.controls-row.row or .form-groupNavbar inner.navbar-innerN/ANavbar vertical dividers.navbar .divider-verticalN/ADropdown submenu.dropdown-submenuN/ATab alignments.tabs-left .tabs-right.tabs-belowN/ANav lists.nav-list .nav-headerNo 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'，还有很多其它事件名称也是类似。