Bootstrap v4 正式版发布了

  • Posted on | Updated on
  • by
  • in

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

bootstrapv4.jpg

概述

浏览器支持

  • 放弃了对于 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 完整文档


作者: David Yin
原载: SEO 网站优化推广
版权所有。转载时必须以链接形式注明作者和及本声明。