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-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 完整文档