作为一个业余程序员，平时用来写页面的时候，会用到 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，还是有很多适应性的修改要做。