文档章节

6.1、Bootstrap V4自学之路------迁移---升级到v4

Asktao
 Asktao
发布于 2016/03/26 21:14
字数 2168
阅读 340
收藏 10

升级到 v4

Bootstrap 4 几乎是对整个项目进行了重写。其中最显著的变化都概括到了下面的内容,与以前相比,拥有了更多的具体的类以及把一些有关的部分变成了相关的组件。

当心!它在 flux 中工作的时候和在 v4 alphas 进程中工作是一致的。只有当它在不完整的情况下,我们才会推送来帮助它保持在最新的状态。

总结

如下便是从 v3 升级到 v4 的时候你最应该注意的地方。

支持的浏览器

  • v4 现在放弃了对 IE8 以及 iOS 6 的支持,现在仅仅支持 IE9 以上 以及 iOS 7 以上版本的浏览器。如果对于其中需要用到以前的浏览器,那么请使用 v3.

  • 添加了对 Android v5.0 Lollipop 浏览器和 web 视图的官方支持。早期版本的 Android 浏览器和 web 视图仍然只有非官方支持。

全局变化

  • 对于 CSS 文件,从 LESS 切换到了 SCSS.

  • 对于主要的 CSS 单元,从 px 切换到了 rem.

  • 媒体查询现在是在 ems 中而不是 pxs  中。

  • 全局字体大小从 14px 增加到了 16px

  • ~ 480px 及其以下添加了一个新的网格层。

  • 通过 SCSS 变量,可以使用可配置的选项来替换单独的可选主题 (例如,$enable-gradients: true)。

组件

  • 对于该包罗万象的新的组件,丢弃了面板,缩略图以及wells。

  • 丢弃了 Glyphicons 图标字体。

  • 丢弃了 Affix jQuery 插件。相反,我们推荐使用 position: sticky。如果想要查看 HTML5,请点击该这里,查看详细具体的填充代码建议。

  • 重构几乎所有的组件来使用更多的 unnested 的类而不是子选择器。

Misc

  • Bootstrap 不再支持非响应的用法。

  • 丢弃了在线定制器功能,支持更广泛的安装文件以及自定义的工程。

组件上的差别

重启

对于 Bootstrap 4 有一个新的部分——重启,即一个新的样式表,基于标准化的基础上再添加上我们自定义的重置样式。当使用 Element 对象的时候我们才会用到选择器——在这里没有类。它使用更模块化的方法将我们重置的样式和组件样式进行分离。它们包括了一些最重要重置比如一些边框尺寸边界的变化,许多元素从 rem 移动到 em 单元,链接样式,还有许多 element 对象中的变化。

版式

  • 将所有的 .text- utilities 移动到了 _utilities.scss 文件。

  • 完全删除了 .page-header 类。

  • .dl-horizontal 现在需要网格类,增加了列宽的灵活性。

  • 将自定义的<blockquote>样式移动到了类——.blockquote.blockquote-reverse 修饰符中。

表格

  • 几乎所有实例的 > 符号都被删除了,意味着嵌套的表格现在将自动继承他们的父母的样式。这大大简化了我们的选择器和潜在的自定义设置。

  • 响应表不再需要包装元素。相反,仅仅只需要把 .table-responsive 放在 <table> 即可。

  • 考虑一致性,将 .table-condensed 重命名为 .table-sm

  • 添加了一个新的 .table-inverse 选项。

  • 添加了一个新的 .table-reflow 选项。

  • 添加了表头修饰符:.thead-default.thead-inverse

表单

  • 将重置元素移动到了 _reboot.scss 文件夹。

  • 分别将 .input-lg.input-sm 重命名为 .form-control-lg.form-control-sm

  • 为了简单起见,现在删除了 .form-group-* 类,现在使用 .form-control-*  类。

  • 水平表单的检修:

  • 取消了 .form-horizontal 类的要求。

  • .form-group 类现在不再和 .row 混合,所以它现在需要网格布局。

  • 将一个新的 .form-control-label 类添加到了带有 .form-controls 的垂直中心标签中。

网格系统

添加了新的 ~ 480px 网格断点,意味着现在有五个总层。

按钮

  • 完全删除了 .btn-xs 类。

按钮组

  • 完全删除了 .btn-group-xs 类。

Navs

  • 删除了几乎所有的 > 符号,通过使用非嵌套类来实现更简单的样式。

  • 我们现在直接使用单独的  .navs, .nav-items, 和 .nav-links 类而不是像 .nav > li > a 这样的 HTML 特定的符号。

Pager

  • 分别将 .previous.next 重命名为 .pager-prev.pager-next.

Panels, thumbnails, 和 wells

对于新的 card 组件,他们几乎全部被删除了。

Panels

.panel 改为 .card 将 .panel-default 删除并且不进行替换 .panel-heading 改为 .card-header .panel-title 改为 .card-title .panel-body 改为 .card-block .panel-footer 改为 .card-footer .panel-primary 改为 .card-primary 以及 .card-inverse .panel-success 改为 .card-success 以及 .card-inverse .panel-info 改为 .card-info 以及 .card-inverse .panel-warning 改为 .card-warning 以及 .card-inverse .panel-danger 改为 .card-danger 以及 .card-inverse

轮播(Carousel)

将 .item 更名为 .carousel-item.

文档

我们对文档也进行了升级,如下所示:

  • 我们还是使用 Jekyll,但我们在组合中配置了自定义插件:

  • example.rb 是默认插件 highlight.rb 的拷贝,它允许更容易的处理示例代码。

  • callout.rb  也是该插件类似的拷贝,但是它是为我特殊的文档标注所设计。

  • 为了更加轻松的编辑,所有文档内容都已经在 Markdown (而不是 HTML) 中被重写。

  • 为了让内容更简单,层次结构更清晰,所有页面被进行了重组。

  • 我们从普通的 CSS 改成了 SCSS,为了更好的利用 Bootstrap 的变量,mixins 极其更多内容。

新的部分

我们已经添加了以及改变了一些现有的组件。如下是新的或更新的样式。

组件 描述
Cards 一个新的、 更灵活的组件,它用来来取代 v3 中的的panels, thumbnails, 和 wells。
新导航栏 用一个新的、 更简单的组件替换以前的导航栏。
新进度栏 用现在的 <progress> 元素替换旧的 .progress < div >
新的变形的表 添加 .table-inverse, 表头选项, 用 .table-sm, and .table-reflow 替换 .table-condensed .
新的实用程序类

TODO: 审计了 v3 中不存在的新类。

移除的部分

下述组件在 v4.0.0 中被移除了。

组件 从 3.x.x 中移除 在 4.0.0 中相当于
Panels
Cards
Thumbnails
Cards
Wells
Cards
Justified navs

TODO:  v3 中的审计类在 v4 中不存在。

响应程序

下述已弃用的变量在 V4.0.0 被移除了:

  • @screen-phone@screen-tablet@screen-desktop@screen-lg-desktop。相反的,使用更多抽象的 $screen-{xs、 sm、 md、 lg、 xl}-* 变量。

  • @screen-sm@screen-md@screen-lg.相反,使用更明确地命名的变量 $screen-{xs,sm,md,lg,xl}-min

  • @screen-xs@screen-xs-min。这些额外的小断点有没有下限,因此,这些变量在逻辑上是荒谬的。根据 $screen-xs-max  改写你的表达式。

响应实用程序类也已经进行了彻底翻新。

  • 这些类(.hidden-xs .hidden-sm .hidden-md .hidden-lg .visible-xs-block .visible-xs-inline .visible-xs-inline-block .visible-sm-block .visible-sm-inline .visible-sm-inline-block .visible-md-block .visible-md-inline .visible-md-inline-block .visible-lg-block .visible-lg-inline .visible-lg-inline-block)都被删除了。

  • 它们被 .hidden-xs-up .hidden-xs-down .hidden-sm-up .hidden-sm-down .hidden-md-up .hidden-md-down .hidden-lg-up .hidden-lg-down 进行了替换。

当视区是在给定的断点或更大的范围内 .hidden-*-up 类将隐藏元素 (例如.hidden-md-up 会隐藏中型、 大型,和特大型设备上的元素)。

当视区是在给定的断点或更小的范围内 .hidden-*-down 类将隐藏元素 (例如.hidden-md-down 会隐藏超小尺寸、 中小型,和小型设备上的元素)。

当你想要让一个元素可见,你仅仅需要不把它隐藏在这样的屏幕尺寸下,而不是使用显示的 .visible-* 类。你可以结合一个 .hidden-*-up 类和一个 .hidden-*-down 类来在给定的时间间隔的屏幕尺寸上显示元素(如.hidden-sm-down .hidden-xl-up 仅在中型和大型的设备上显示元素)。

请注意,在 v4 中对网格断点进行更改意味着你需要让一个断点更大来实现相同的结果 (例如 和 .hidden-md-down 相比 .hidden-lg-downhidden-md 更相似)。在一些不常见情况下,比如在元素的可见性不能表示为一个单一的连续范围的视区大小的时候,新的响应实用程序类不要试图去容纳它;相反的,您需要在这种情况下使用自定义的 CSS。

使用 Misc 来确定优先级

为视网膜显示器媒体查询删除 min--moz-device-pixel-ratio 黑客错误。 删除了 .hidden.show,因为它在 jQuery$(...).hide()拥有接口. 因为 IE 9 + 支持 :disabled,所以将 [disabled] 按钮改成了 :disabled 。然而 fieldset[disabled] 仍然是必要的,因为本机禁用字段在 IE11 中仍然会存在问题

TODO: v3 中的事物审核列表被标记为已弃用。

附加说明

  • 删除了对样式嵌套表格的支持 (当前)


© 著作权归作者所有

Asktao
粉丝 27
博文 100
码字总数 116095
作品 0
丰台
程序员
私信 提问
Bootstrap V4 自学之路 文档目录

PS:将文档中的内容亲手梳理一遍,用自己的话重复一些遍。其中意义与COPY不同。是胜于蓝。 对自己的话! 课程目录 1、Bootstrap V4 自学之路------起步 1.1、Bootstrap V4自学之路------起步...

Asktao
2016/01/25
456
0
1.1、Bootstrap V4自学之路------起步---介绍

如果快速建立bootstrap V4模板 DEMO敬上: <!DOCTYPE html><html lang="en"> <head> <!-- Required meta tags always come first --> <meta charset="utf-8"> <meta name="viewport" conten......

Asktao
2016/01/25
184
0
Bootstrap V4 自学开始!

记在前面!!! 记在前面!!! 记在前面!!! 目标:克服一切困难学习Bootstrap V4文档所有知识,并做出相应效果实例。 结束日期:2016年3月25日 学习地址:http://wiki.jikexueyuan.com/project/b...

Asktao
2016/01/25
160
1
3.3、Bootstrap V4自学之路------内容---图片

以下部分都是在<img>标签中操作 响应式图片 实验失败!已引入holder.js文件。data-src="holder.js/100x64时可以出现占位图。但当holder.js/100%x64时,不显示。 <div style="width:100%;hei......

Asktao
2016/03/22
165
0
Bootstrap 发布了个 v3.4 版本?是不是搞错了?

原文作者:@mdo & team 译者:UC 国际研发 Jothy 写在最前:欢迎你来到“UC国际技术”公众号,我们将为大家提供与客户端、服务端、算法、测试、数据、前端等相关的高质量技术文章,不限于原创...

2018/12/14
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Shell学习记录(持续更新)

一、shell定时备份数据库任务通用脚本 目标:根据定时任务启动脚本,执行数据库备份任务,按照日期进行每日备份,如已经备份则脚本停止,备份任务完成后将结果发送邮件提醒 1.执行数据库备份...

网络小虾米
今天
3
0
PHP计算两个经纬度地点之间的距离

/** * 求两个已知经纬度之间的距离,单位为米 * * @param lng1 $ ,lng2 经度 * @param lat1 $ ,lat2 纬度 * @return float 距离,单位米 * @author www.Alixixi.com */function get...

子枫Eric
今天
14
0
Linux—day 4

ch2 需要掌握的命令 (1)cat -n 1.txt (2)more 1.txt (3)head -n 15 initial-setup-ks.cfg (4)tail -n 17 initial-setup-ks.cfg;tail -f initial-setup-ks.cfg (5)cat -n anaconda-ks.c......

呵呵暖茶
今天
31
0
【Kubernetes社区之路】我的PR被抢了

2019年11月的某天,我无意间发现一个PR作者在自己的PR中抱怨自己的PR没被合入,而另一个比自己提交晚且内容几乎一样的PR则被合入了。 字里行间透露些许伤感外加无奈,原文如下: 作为一名开源...

恋恋美食
今天
40
0
阻塞队列

对于许多线程问题, 可以通过使用一个或多个队列以优雅且安全的方式将其形式化。生产者线程向队列插人元素, 消费者线程则取出它们。 使用队列, 可以安全地从一个线程向另 一个线程传递数据...

ytuan996
今天
48
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部