Bootstrap v4 正式版发布了

作为一个业余程序员，平时用来写页面的时候，会用到 Bootstrap 作为前端 UI。之前还一直用的是 Bootstrap v3，最近，大概一周前，4.0的正式版发布了。让我来看看同旧版有啥大的变化。

概述

浏览器支持

放弃了对于 IE8，IE9，以及 iOS 6的支持，v4支持从 IE10+ 和 iOS7+。 增加了Android v5.0 Lollipop的浏览器和 WebView 官方支持。

全局改变

默认启用 Flexbox。 对于源CSS文件，从 Less 改成了 Sass。 主要的CSS单位，从 px 切换成了 rem。 全局字体大小从14px增加到了16px。 网格系统增加了第五个系列，用于 576px 宽度以下，并且去掉了 -xs 这个中缀。 用 Scss变量作为可配置选项来代替单独的选项。比如 $enable-gradients: true 系统构建使用 npm scripts 而不再使用 Grunt。 不再支持非响应式使用。 放弃了在线定制 Bootstrap 组件和变量，生成定制文件的功能。 新增超过一打的 utility classes 给常用的 CSS 属性值，和 margin/padding 间隙。

网格系统

换用 flexbox。 更新了网格类名和新的网格系列。 跟新了网格尺寸，mixins和变量。

组件

用一个全新的 cards 组件，放弃了 panels，thumbnails 和 wells 这三个。 不再使用 Glyphicons 图标字体。 放弃了 Affix jQuery 插件。 放弃 pager 组件。 重构了几乎所有的组件。更多的使用非嵌套类。

组件的差别

Reboot

对于Bootstrap 4来说 Reboot，重启时新的部分。就是用一个新的样式表，基于规范化的要求，用自定的可选重置样式来重启。

版式

将所有的 .text- utilities 移动到了 _utilities.scss文件。 放弃了 .page-header 。 放弃了 .dl-horizontal，代替它的是在 dl 标签内用 .row 加上在 dt 和 dd 子标签中使用网格。 自定义的 blockquote 标签样式， 被移动到了类- .blockquote 和 .blockquote-reverse。 .list-inline 需要它的子项目都有新增的 .list-inline-item 类。

图片

把 .img-responsive 改名为 .img-fluid。 把 .img-rounded 改名为 .rouded。 把 .img-circle 改名为 .rounded-circle。

表格

现在嵌套的表格会自动的继承其父表格的样式。 响应式表格不在需要一个包装元素，而只需放入 .table-responsive 即可。 基于一致性，把 .table-condensed 改名为 .table-sm。 增加一个新的 .table-inverse 选项。 增加了新的表头变化选项 .thead-default 和 .thead-inverse。 重命名了语义类，都有了 .table- 前缀，就成为这样了， .table-active, .table-success, .table-warning, .table-danger 和 .table-info。

表单

把元素重置放到了 _reboot.scss 文件内。 重命名 .control-label 为 .col-form-label。 重命名 .input-lg 和 .input-sm 为 .form-control-lg 和 .form-control-sm。 不再使用 .form-group-* 系列类，用 .form-control-* 系列代替。 租在使用 .help-block，代之以 .form-text 用于块级帮助文本，行内帮助文本可以用 .text-muted。 放弃了 .radio-inline 和 checkbox-inline。 把 。checkbox 和 .radio 用 .form-check 代替，以及其变形 .form-check-*。 水平表单部分 取消了 .form-horizontal 类的要求。 .form-group 不在同 .row 作用于样式，所以要用水平网格布局。 增加新的 .col-form-label 类用于垂直居中。 增加了新的 .form-row 用于紧凑表单布局。 增加了定制表单支持。 用 HTML5 表单验证方式， 用 :invalid 和 :valid 伪类替换了 .has-error， .has-warning 和 .has-success。 把 .form-control-static 改名为 .form-control-plaintext。

按钮

.btn-default 改名为 .btn-secondary。 取消了 .btn-xs 类。因为 .btn-sm 已经够小了。 stateful 按钮功能取消了。

按钮组

按 flexbox 重写了组件。 删除了 .btn-group-justified。 放弃了 .btn-group-xs 类。

下拉菜单

这个部分有不少的改变。

网格系统

大部分同之前概述部分相同 放弃了 网格推和拉的修饰，而是用 order 类来代替，比如 .col-4 .order-1。

列表组

不用 a.list-group-item 而是使用 .list-group-item-action，用于装饰链接和按钮。 增加了 .list-group-flush 用于 cards。

导航条

.navbar-default 被换成 .navbar-light。 .navbar-toggle 被改成 .navbar-toggler， 有略微的不同。 放弃 .navbar-form 类。直接使用 .form-inline 就可。 导航条不再有 margin-bottom 和 border-radius，必要的话自己使用 utilities.

分页

在 .pagination 内，必须用 .page-item， .page-link 。 不再使用 .pager 组件。

面包屑

在 .breadcrumb 内使用 .breadcrumb-itme 类。

Labels 和 badges

用作标签或者标志。

.label 改名做 .badge，以区别于 label 元素。 放弃原来的 .badge 组件，因为其几乎同 lable 相同。使用 .badge-pill 修饰标签组件。 .badge-default 被改为 .badge-secondary。

Panels

.panel 改成了 .card，用 flexbox。 .panel-default 完全弃用。 .panel-group 完全弃用， .card-group 是完全不同的，并不是替换。 .panel-heading 被改成 .card-header。 .panel-title 被改成 .card-title。 .panel-body 被改名 .card-body 。 .panel-footer 被改名成 .card-footer。 .panel-primary, .panel-success, .panel-info, .panel-warning 和 .panel-danger 被弃用。

进度条

原进度条的语义化类 .progress-bar-* 被替换为 .bg-* 。 动画进度条中，替换原来的 .active 为 .progress-bar-animated。

轮播

大幅修改以简化设计和样式。 所有的 CSS 都不是非嵌套的，并被重命名，加上了前缀 .carousel-。

总结

在大致的学习之后，可以看到这次的 v4 的发布，变化还是很大的，如果原来使用 v3 设计编写的网页，如果要升级使用 v4 版本的 Bootstrap，还是有很多适应性的修改要做。

获取最新的 Bootstrap v4

Bootstrap v4 完整文档

把网站放在Dreamhost，通过LinkWorth获取广告收益，每个链接高达$40。
G2links Web Directories

延伸阅读

Joomla 3性能优化要点 Minify Javascript，以提高页面载入速度 使用外部JavaScript和CSS，以提高页面载入速度 Gzip压缩内容，以提高页面载入速度 MovableType 7 的 Beta 版发布了 把script放到页面的最后，以提高页面载入速度 合理使用css，以提高页面载入速度 优化WordPress的利器，W3 Total Cache 使用Google Page Speed来分析改进页面的载入时间 SixApart发布了MovableType4.261