迁移到 v4
Bootstrap 4 是对整个项目的重大改写。下面总结了最显着的变化,然后是对相关组件的更具体的变化。
稳定的变化
从 Beta 3 迁移到我们稳定的 v4.x 版本,没有重大变化,但有一些值得注意的变化。
印刷
-
修复了损坏的打印实用程序。以前,使用一个
.d-print-*
类会意外地推翻任何其他.d-*
类。现在,它们与我们的其他显示实用程序相匹配,并且仅适用于该媒体 (@media print
)。 -
扩展了可用的打印显示实用程序以匹配其他实用程序。Beta 3 和更早版本只有
block
,inline-block
,inline
和none
. 稳定版 v4 添加了flex
,inline-flex
,table
,table-row
, 和table-cell
. -
使用指定的新打印样式修复了跨浏览器的打印预览呈现
@page
size
。
Beta 3 更改
虽然 Beta 2 在 Beta 阶段看到了我们的大部分重大更改,但我们仍有一些需要在 Beta 3 版本中解决。如果您从 Beta 2 或任何旧版本的 Bootstrap 更新到 Beta 3,这些更改将适用。
各种各样的
- 删除了未使用的
$thumbnail-transition
变量。我们没有转换任何东西,所以它只是额外的代码。 - npm 包不再包含我们的源文件和 dist 文件以外的任何文件;如果您依赖它们并通过
node_modules
文件夹运行我们的脚本,您应该调整您的工作流程。
形式
-
重写了自定义和默认复选框和收音机。现在,两者都具有匹配的 HTML 结构(外部
<div>
与兄弟<input>
和<label>
)和相同的布局样式(堆叠默认,内联与修饰符类)。这使我们可以根据输入的状态设置标签样式,简化对disabled
属性的支持(以前需要父类)并更好地支持我们的表单验证。作为其中的一部分,我们更改了用于管理
background-image
自定义表单复选框和单选框上的多个 s 的 CSS。以前,现在移除的.custom-control-indicator
元素具有背景颜色、渐变和 SVG 图标。自定义背景渐变意味着每次您只需要更改一个时都要替换所有这些。现在,我们有了.custom-control-label::before
填充和渐变并.custom-control-label::after
处理图标。要进行自定义内联检查,请添加
.custom-control-inline
. -
更新了基于输入的按钮组的选择器。我们将属性仅用于 JS 行为,而不是
[data-toggle="buttons"] { }
用于样式和行为,data
并依赖于新.btn-group-toggle
的样式类。 -
去掉
.col-form-legend
有利于稍微改进.col-form-label
。这种方式.col-form-label-sm
可以.col-form-label-lg
轻松用于<legend>
元素。 -
自定义文件输入收到了对其
$custom-file-text
Sass 变量的更改。它不再是嵌套的 Sass 映射,现在只为一个字符串供电——Browse
按钮,因为它现在是我们 Sass 生成的唯一伪元素。文本现在Choose file
来自.custom-file-label
.
输入组
-
输入组插件现在特定于它们相对于输入的位置。我们已经放弃了两个新课程
.input-group-addon
和。您现在必须显式使用附加或前置,简化我们的大部分 CSS。在 append 或 prepend 中,将按钮放置在其他任何地方,但将文本包装在..input-group-btn
.input-group-prepend
.input-group-append
.input-group-text
-
现在支持验证样式,以及多个输入(尽管您只能验证每个组的一个输入)。
-
大小调整类必须在父元素上,
.input-group
而不是在单个表单元素上。
Beta 2 更改
在测试阶段,我们的目标是没有重大变化。然而,事情并不总是按计划进行。以下是从 Beta 1 迁移到 Beta 2 时要牢记的重大变化。
打破
- 删除
$badge-color
了变量及其在.badge
. 我们使用颜色对比函数来color
根据选择一个background-color
,因此该变量是不必要的。 - 重命名
grayscale()
函数以gray()
避免与 CSS 原生grayscale
过滤器发生冲突。 - 重命名
.table-inverse
,.thead-inverse
和.thead-default
to.*-dark
and.*-light
,与我们在其他地方使用的配色方案相匹配。 - 响应表现在为每个网格断点生成类。这与 Beta 1 不同,因为
.table-responsive
您一直在使用的更像.table-responsive-md
. 您现在可以根据需要使用.table-responsive
或。.table-responsive-{sm,md,lg,xl}
- 对于替代方案(例如,Yarn 或 npm),已弃用作为包管理器的 Bower 支持。有关详细信息,请参见 bower/bower#2298。
- Bootstrap 仍然需要 jQuery 1.9.1 或更高版本,但建议您使用 3.x 版本,因为 v3.x 支持的浏览器是 Bootstrap 支持的浏览器,而且 v3.x 有一些安全修复。
- 删除了未使用的
.form-control-label
类。如果您确实使用了这个类,那么它是.col-form-label
垂直居中的类的副本,<label>
它与水平表单布局中的相关输入有关。 color-yiq
将包含该属性的 mixin更改为color
返回值的函数,允许您将其用于任何 CSS 属性。例如color-yiq(#000)
,您应该写而不是color: color-yiq(#000);
.
强调
- 在模态上引入了新的
pointer-events
用法。外部.modal-dialog
通过pointer-events: none
用于自定义点击处理的事件(使得可以只监听.modal-backdrop
任何点击),然后针对实际.modal-content
的 with抵消它pointer-events: auto
。
概括
以下是从 v3 迁移到 v4 时需要注意的重要事项。
浏览器支持
- 放弃对 IE8、IE9 和 iOS 6 的支持。v4 现在只有 IE10+ 和 iOS 7+。对于需要其中任何一个的站点,请使用 v3。
- 添加了对 Android v5.0 Lollipop 的浏览器和 WebView 的官方支持。早期版本的 Android 浏览器和 WebView 仍然只是非官方支持。
全局变化
- Flexbox 默认启用。一般来说,这意味着在我们的组件中远离浮动和更多。
- 为我们的源 CSS 文件从Less切换到Sass 。
- 从
px
to切换rem
为我们的主要 CSS 单元,尽管像素仍用于媒体查询和网格行为,因为设备视口不受类型大小的影响。 - 全局字体大小从
14px
增加到16px
。 - 修改了网格层以添加第五个选项(解决位于
576px
及其下方的较小设备)并-xs
从这些类中删除了中缀。示例:.col-6.col-sm-4.col-md-3
。 $enable-gradients: true
通过 SCSS 变量(例如, )将单独的可选主题替换为可配置的选项。- 大修构建系统以使用一系列 npm 脚本而不是 Grunt。查看
package.json
所有脚本,或我们的项目自述文件以满足本地开发需求。 - 不再支持 Bootstrap 的非响应式使用。
- 放弃了在线定制器,转而使用更广泛的设置文档和定制构建。
- 为常见的 CSS 属性值对和边距/填充间距快捷方式添加了许多新的实用程序类。
网格系统
- 移至弹性盒。
- 在网格混合和预定义类中添加了对 flexbox 的支持。
- 作为 flexbox 的一部分,包括对垂直和水平对齐类的支持。
- 更新了网格类名称和新的网格层。
- 在下方添加了一个新的
sm
网格层768px
以进行更精细的控制。我们现在有xs
,sm
,md
,lg
, 和xl
。这也意味着每一层都提升了一个级别(所以.col-md-6
在 v3 中现在.col-lg-6
在 v4 中)。 xs
网格类已被修改为不需要中缀来更准确地表示它们开始应用样式min-width: 0
而不是设置的像素值。而不是.col-xs-6
,现在是.col-6
。所有其他网格层都需要中缀(例如,sm
)。
- 在下方添加了一个新的
- 更新了网格大小、mixin 和变量。
- 网格排水沟现在有一个 Sass 地图,因此您可以在每个断点指定特定的排水沟宽度。
- 更新了网格 mixin 以利用
make-col-ready
prep mixin 和 amake-col
来设置flex
和max-width
用于单个列的大小。 12
更改了网格系统媒体查询断点和容器宽度,以考虑新的网格层,并确保列在其最大宽度处可均匀整除。- 网格断点和容器宽度现在通过 Sass 映射(
$grid-breakpoints
和$container-max-widths
)而不是少数单独的变量来处理。这些完全替换了@screen-*
变量,并允许您完全自定义网格层。 - 媒体查询也发生了变化。而不是每次都使用相同的值重复我们的媒体查询声明,我们现在有了
@include media-breakpoint-up/down/only
. 现在,@media (min-width: @screen-sm-min) { ... }
你可以写而不是写@include media-breakpoint-up(sm) { ... }
。
成分
- 为新的无所不包的组件卡放置了面板、缩略图和井。
- 删除了 Glyphicons 图标字体。如果您需要图标,一些选项是:
- Glyphicons的上游版本
- 八角形
- 字体真棒
- 请参阅扩展页面以获取替代列表。有其他建议吗?请打开一个问题或 PR。
- 删除了 Affix jQuery 插件。
- 我们建议
position: sticky
改用。有关详细信息和特定的 polyfill 建议,请参阅 HTML5 Please entry。一个建议是使用@supports
规则来实现它(例如,@supports (position: sticky) { ... }
) - 如果您使用 Affix 应用其他非
position
样式,则 polyfill 可能不支持您的用例。此类用途的一种选择是第三方ScrollPos-Styler库。
- 我们建议
- 删除了寻呼机组件,因为它本质上是略微定制的按钮。
- 重构了几乎所有组件以使用更多非嵌套类选择器,而不是过度特定的子选择器。
按组件
此列表突出显示了 v3.xx 和 v4.0.0 之间组件的关键更改。
重启
Bootstrap 4 的新功能是Reboot,这是一个新的样式表,它建立在 Normalize 的基础上,并带有我们自己有些固执的重置样式。出现在这个文件中的选择器只使用元素——这里没有类。这将我们的重置样式与我们的组件样式隔离开来,以实现更加模块化的方法。其中包括的一些最重要的重置是box-sizing: border-box
更改、从许多元素上em
的rem
单元、链接样式和许多表单元素重置。
排版
- 将所有
.text-
实用程序移至该_utilities.scss
文件。 - 删除
.page-header
,因为它的样式可以通过实用程序应用。 .dl-horizontal
已被删除。相反,在其和子项.row
上使用<dl>
和使用网格列类(或 mixins) 。<dt>
<dd>
- 重新设计的块引用,将它们的样式从
<blockquote>
元素移动到单个类,.blockquote
. 删除了.blockquote-reverse
文本实用程序的修饰符。 .list-inline
现在要求其子列表项具有.list-inline-item
应用到它们的新类。
图片
- 重命名
.img-responsive
为.img-fluid
. - 重命名
.img-rounded
为.rounded
- 重命名
.img-circle
为.rounded-circle
表
- 选择器的几乎所有实例
>
都已被删除,这意味着嵌套表现在将自动从其父级继承样式。这极大地简化了我们的选择器和潜在的定制。 - 重命名
.table-condensed
为以.table-sm
保持一致性。 - 添加了一个新
.table-inverse
选项。 - 添加了表头修饰符:
.thead-default
和.thead-inverse
. - 重命名上下文类以具有 -
.table-
前缀。因此.active
,.success
,.warning
,.danger
和.info
,.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
via mixin 的样式,因此.row
现在需要水平网格布局(例如,<div class="form-group row">
)。- 使用 s 将新
.col-form-label
类添加到垂直居中标签.form-control
。 - 为带有网格类的紧凑表单布局添加了新的内容
.form-row
(交换你.row
的 a.form-row
和 go)。
- 放弃了
- 添加了自定义表单支持(用于复选框、单选框、选择和文件输入)。
- 通过 CSS和伪类将
.has-error
、.has-warning
和类替换.has-success
为 HTML5 表单验证。:invalid
:valid
- 重命名
.form-control-static
为.form-control-plaintext
.
纽扣
- 重命名
.btn-default
为.btn-secondary
. - 完全放弃了这个
.btn-xs
类,因为.btn-sm
它的比例比 v3 小得多。 - jQuery 插件的有状态按钮功能已被删除。
button.js
这包括$().button(string)
和$().button('reset')
方法。我们建议改用一点点自定义 JavaScript,这样可以完全按照您想要的方式运行。- 请注意,插件的其他功能(按钮复选框、按钮单选、单切换按钮)已在 v4 中保留。
- 将按钮更改
[disabled]
为:disabled
IE9+ 支持:disabled
的 . 但是fieldset[disabled]
仍然是必要的,因为本机禁用的字段集在 IE11 中仍然存在错误。
按钮组
- 用 flexbox 重写了组件。
- 已删除
.btn-group-justified
。作为替代,您可以<div class="btn-group d-flex" role="group"></div>
使用.w-100
. - 完全放弃了
.btn-group-xs
课程,因为删除了.btn-xs
. - 删除了按钮工具栏中按钮组之间的显式间距;现在使用保证金工具。
- 改进了与其他组件一起使用的文档。
下拉菜单
- 从父选择器切换到所有组件、修饰符等的单一类。
- 简化的下拉样式不再带有附加到下拉菜单的向上或向下箭头。
- 现在可以使用
<div>
s 或<ul>
s 构建下拉列表。 <a>
重建下拉样式和标记,为<button>
下拉项提供简单的内置支持。- 重命名
.divider
为.dropdown-divider
. - 下拉项目现在需要
.dropdown-item
. - 下拉切换不再需要明确的
<span class="caret"></span>
; 这现在是通过 CSS 的::after
on自动提供的.dropdown-toggle
。
网格系统
- 添加了一个新的
576px
网格断点为sm
,这意味着现在总共有五个层(xs
、sm
、md
、lg
和xl
)。 - 将响应式网格修改器类从 重命名
.col-{breakpoint}-{modifier}-{size}
为.{modifier}-{breakpoint}-{size}
更简单的网格类。 - 为新的 flexbox 驱动的类删除了 push 和 pull 修饰符
order
类。例如,您将使用and代替.col-8.push-4
and 。.col-4.pull-8
.col-8.order-2
.col-4.order-1
- 为网格系统和组件添加了 flexbox 实用程序类。
列出组
- 用 flexbox 重写了组件。
- 替换
a.list-group-item
为显式类 ,.list-group-item-action
用于样式化列表组项的链接和按钮版本。 - 添加
.list-group-flush
了用于卡片的类。
模态
- 用 flexbox 重写了组件。
- 鉴于转向 flexbox,由于我们不再使用浮动,因此标题中关闭图标的对齐可能会被破坏。浮动内容首先出现,但对于 flexbox,情况不再如此。更新您的解雇图标,使其出现在要修复的模式标题之后。
- 该
remote
选项(可用于自动加载外部内容并将其注入模式)和相应的loaded.bs.modal
事件已被删除。我们建议改为使用客户端模板或数据绑定框架,或者自己调用jQuery.load。
导航
- 用 flexbox 重写了组件。
>
通过非嵌套类删除了几乎所有选择器以实现更简单的样式。- 我们对s、s 和s
.nav > li > a
使用单独的类,而不是 HTML 特定的选择器,如s。这使您的 HTML 更加灵活,同时带来了更高的可扩展性。.nav
.nav-item
.nav-link
导航栏
导航栏在 flexbox 中完全重写,改进了对对齐、响应和自定义的支持。
- 响应式导航栏行为现在通过您选择在哪里折叠导航栏所需
.navbar
的位置应用于类。以前这是一个较少的变量修改,需要重新编译。.navbar-expand-{breakpoint}
.navbar-default
是现在.navbar-light
,虽然.navbar-dark
保持不变。每个导航栏都需要其中之一。但是,这些类不再设置background-color
s;相反,它们基本上只影响color
.- 导航栏现在需要某种背景声明。从我们的后台实用程序 (
.bg-*
) 中进行选择,或者使用上面的灯光/逆向类进行自定义设置。 - 给定 flexbox 样式,导航栏现在可以使用 flexbox 实用程序来轻松对齐选项。
.navbar-toggle
is now.navbar-toggler
并且具有不同的样式和内部标记(不再是三个<span>
s)。- 完全放弃了
.navbar-form
课程。不再需要了;相反,只需.form-inline
根据需要使用和应用保证金实用程序。 - 导航栏不再包括
margin-bottom
或border-radius
默认情况下。根据需要使用实用程序。 - 所有以导航栏为特色的示例都已更新以包含新的标记。
分页
- 用 flexbox 重写了组件。
- s的后代现在需要显式类 (
.page-item
, ).page-link
.pagination
- 完全放弃了该
.pager
组件,因为它只不过是自定义的大纲按钮。
面包屑
- s
.breadcrumb-item
的后代现在需要一个显式类 ,.breadcrumb
标签和徽章
- 合并
.label
并.badge
从<label>
元素中消除歧义并简化相关组件。 - 添加
.badge-pill
为圆形“药丸”外观的修饰符。 - 徽章不再在列表组和其他组件中自动浮动。现在需要实用程序类。
.badge-default
已被删除并.badge-secondary
添加以匹配其他地方使用的组件修饰符类。
面板、缩略图和孔
完全放弃了新的卡片组件。
面板
.panel
to.card
,现在用 flexbox 构建。.panel-default
删除,没有更换。.panel-group
删除,没有更换。.card-group
不是替代品,是不同的。.panel-heading
至.card-header
.panel-title
到.card-title
. 根据所需的外观,您可能还想使用标题元素或类(例如<h3>
,.h3
)或粗体元素或类(例如<strong>
,<b>
,.font-weight-bold
)。请注意.card-title
,虽然名称相似,但会产生与 不同的外观.panel-title
。.panel-body
至.card-body
.panel-footer
至.card-footer
.panel-primary
,.panel-success
,.panel-info
,.panel-warning
, 和, , , 和从我们的Sass 映射生成的实用程序.panel-danger
已被删除。.bg-
.text-
.border
$theme-colors
进步
- 用实用程序替换了上下文
.progress-bar-*
类。.bg-*
例如,class="progress-bar progress-bar-danger"
变成class="progress-bar bg-danger"
。 - 用替换
.active
动画进度条.progress-bar-animated
。
旋转木马
- 大修整个组件以简化设计和样式。我们有更少的样式供您覆盖、新指标和新图标。
- 所有 CSS 都已取消嵌套并重命名,确保每个类都以
.carousel-
.- 对于轮播项目,
.next
、.prev
、.left
和.right
现在是.carousel-item-next
、.carousel-item-prev
、.carousel-item-left
和.carousel-item-right
。 .item
也是现在.carousel-item
。- 对于 prev/next 控件,
.carousel-control.right
以及.carousel-control.left
now.carousel-control-next
和.carousel-control-prev
,这意味着它们不再需要特定的基类。
- 对于轮播项目,
- 删除了所有响应式样式,根据需要使用实用程序(例如,在某些视口上显示标题)和自定义样式。
- 删除了轮播项目中图像的图像覆盖,遵循实用程序。
- 调整 Carousel 示例以包含新的标记和样式。
表
- 删除了对样式嵌套表的支持。所有表格样式现在都在 v4 中继承,用于更简单的选择器。
- 添加了逆表变体。
实用程序
- 显示、隐藏等:
- 使显示实用程序响应(例如,
.d-none
和d-{sm,md,lg,xl}-none
)。 .hidden-*
为新的显示实用程序删除了大部分实用程序。例如,.hidden-sm-up
使用代替.d-sm-none
。重命名.hidden-print
实用程序以使用显示实用程序命名方案。此页面的响应实用程序部分下的更多信息。- 为响应式浮动添加
.float-{sm,md,lg,xl}-{left,right,none}
了类并删除了.pull-left
,.pull-right
因为它们对于 和 是多余.float-left
的.float-right
。
- 使显示实用程序响应(例如,
- 类型:
- 为我们的文本对齐类添加了响应式变体
.text-{sm,md,lg,xl}-{left,center,right}
。
- 为我们的文本对齐类添加了响应式变体
- 对齐和间距:
- 为所有边添加了新的响应式边距和填充实用程序,以及垂直和水平速记。
- 添加了大量的flexbox 实用程序。
- 放弃
.center-block
了新.mx-auto
课程。
- Clearfix 更新以放弃对旧浏览器版本的支持。
供应商前缀混合
Bootstrap 3 的供应商前缀mixin 在 v3.2.0 中已弃用,在 Bootstrap 4 中已被删除。由于我们使用Autoprefixer,它们不再是必需的。
删除了以下混合:animation
, animation-delay
, animation-direction
, animation-duration
, animation-fill-mode
, animation-iteration-count
, animation-name
, animation-timing-function
, backface-visibility
, box-sizing
, content-columns
, hyphens
, opacity
, perspective
, perspective-origin
, rotate
, rotateX
, rotateY
, scale
, scaleX
, scaleY
, skew
, transform-origin
, transition-delay
, transition-duration
, transition-property
, transition-timing-function
, transition-transform
, translate
, translate3d
,user-select
文档
我们的文档也得到了全面升级。这是低点:
- 我们仍在使用 Jekyll,但我们有一些插件:
bugify.rb
用于有效地列出我们浏览器错误页面上的条目。example.rb
是默认highlight.rb
插件的自定义分支,允许更轻松的示例代码处理。callout.rb
是一个类似的自定义分支,但专为我们的特殊文档标注而设计。- jekyll-toc用于生成我们的目录。
- 所有文档内容都已用 Markdown(而不是 HTML)重写,以便于编辑。
- 页面已重新组织,以提供更简单的内容和更平易近人的层次结构。
- 我们从常规 CSS 迁移到 SCSS,以充分利用 Bootstrap 的变量、mixin 等。
响应式实用程序
@screen-
v4.0.0 中删除了所有变量。请改用media-breakpoint-up()
、media-breakpoint-down()
或media-breakpoint-only()
Sass 混合程序或$grid-breakpoints
Sass 映射。
我们的响应式实用程序类已在很大程度上被删除,以支持显式display
实用程序。
- 和类已被删除,因为它们与 jQuery 的
.hidden
和方法冲突。相反,请尝试切换属性或使用内联样式,例如and 。.show
$(...).hide()
$(...).show()
[hidden]
style="display: none;"
style="display: block;"
- 除已重命名的打印实用程序外,所有
.hidden-
类均已删除。- 从 v3 中删除:
.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
- 从 v4 alpha 中删除:
.hidden-xs-up
.hidden-xs-down
.hidden-sm-up
.hidden-sm-down
.hidden-md-up
.hidden-md-down
.hidden-lg-up
.hidden-lg-down
- 从 v3 中删除:
- 打印实用程序不再以
.hidden-
或开头.visible-
,而是以.d-print-
.- 旧名称:
.visible-print-block
,.visible-print-inline
,.visible-print-inline-block
,.hidden-print
- 新课程:
.d-print-block
,.d-print-inline
,.d-print-inline-block
,.d-print-none
- 旧名称:
您无需使用显式类,而是.visible-*
通过简单地不以该屏幕尺寸隐藏元素来使元素可见。您可以将一.d-*-none
类与一.d-*-block
类结合起来,以仅在给定的屏幕尺寸间隔上.d-none.d-md-block.d-xl-none
显示元素(例如,仅在中型和大型设备上显示元素)。
请注意,v4 中对网格断点的更改意味着您需要增加一个断点才能获得相同的结果。新的响应式实用程序类不会尝试适应不太常见的情况,即元素的可见性不能表示为单个连续的视口大小范围;在这种情况下,您将需要使用自定义 CSS。