Bootstrap4入门教程

LESS

SCSS

px

rem

px

px

14px

16px

Helvetica Neue，Helvetica，Arial，sans-serif

使用“本机字体堆栈”（用户的系统字体），回退到Helvetica Neue，Arial和sans-serif

4层网格系统（xs，sm，md，lg）

5层网格系统（xs，sm，md，lg，xl）。

使用col-*-offset-*类来偏移列。例如，col-md-offset-4。

使用offset-*-*类来偏移列。例如，offset-md-4。

不支持。

在.table-dark课程中添加了暗/逆表。

注意：在Beta 2发布之前，这些都需要.table-inverse该类。此类已.table-dark在Beta 2中替换。

不支持。

使用.thead-light和.thead-dark类添加了表头样式。

注意：在Beta 2发布之前，这些都需要.table-default类和.table-dark类。这些类已被替换.table-light，并.table-dark在Beta 2中。

.table-condensed

.table-sm

Bootstrap 3不.table-为其上下文类使用前缀。

例如，Bootstrap 3使用.active而Bootstrap 4使用.table-active。除此之外，两个版本都使用相同的5个上下文关键字（活动，成功，信息，警告，危险）。

.table-为其上下文类添加了前缀。

.table-responsive必须将该类添加到父div元素。

.table-responsive必须将该类添加到父div元素。

可以添加.table-responsive到实际table元素中。

Beta 2还引入了.table-responsive-*可用于指定特定断点的类。这是.table-responsive-sm，.table-responsive-md，.table-responsive-lg，和.table-responsive-xl。

不支持。

在.table-reflow类中添加了回流表。

现在已经删除了Reflow Tables。

水平表格需要.form-horizontal课程。

.row使用网格时不需要表单（尽管此类仍然是Bootstrap 3网格的一般要求）。

Bootstrap 4放弃了.form-horizontal类 - 不再需要显示水平表单。

表单.row在使用网格时需要使用类，或者.form-row在引导程序4中引入类（这使得表单更紧凑）。

使用.control-label使用网格的形式布局时。

.col-form-label当使用网格进行表单布局时，Bootstrap 4使用*。

*请注意，Bootstrap 4最初使用.form-control-label但是经常将其更改为.col-form-label。

使用.radio，.radio-inline，.checkbox，或.checkbox-inline以显示复选框和单选按钮。

使用.form-check，.form-check-label，.form-check-input，和.form-check-inline。

使用.input-lg和.input-sm增大或减小输入控件的大小。

使用.form-control-lg和.form-control-sm增大或减小输入控件的大小。

没有用于调整表单标签大小的特定类。

Bootstrap 4引入.col-form-label-sm并.col-form-label-lg增加或减少标签的大小以匹配相关表单控件的大小。

使用.help-block该类显示帮助文本。

Bootstrap 4使用.form-text该类来显示帮助文本。

包括表单控件上的错误，警告和成功状态的验证样式（例如，.has-warning）。要使用Bootstrap 3在输入字段上显示图标，请使用glyphicons。

验证样式不适用于Bootstrap 4表单。请改用自定义Bootstrap表单验证消息。

没有用于样式化形式图例的类。

提供使用的选项.col-form-label上legend元素的风格看起来更像一个标签。

用于.form-control-static渲染静态文本而不是控件。

在Bootstrap 4中，.form-control-static已重命名为.form-control-plaintext。

不支持。

Bootstrap 4引入了自定义表单 - 完全自定义表单元素，取代了浏览器默认值。

包括.btn-default和.btn-info类。

该.btn-secondary班是无法在引导3。

介绍了.btn-secondary，.btn-light和.btn-dark类。

放弃了.btn-default课程。

请注意，.btn-info该类最初在Bootstrap 4中被删除，但随后又重新出现。

不支持。

介绍了.btn-outline-*带有轮廓颜色的样式按钮的类。

介绍了.btn-*-outline带有轮廓颜色的样式按钮的类。

（这些.btn-*-outline课程成为.btn-outline-*了Alpha 3）。

该.btn-xs课程可用。

放弃了.btn-xs类（仅限.btn-sm与.btn-lg现已上市）。

Bootstrap 3使用.input-group-addon和.input-group-btn类。

引导4下降.input-group-addon，并.input-group-btn为两个新类：.input-group-prepend和.input-group-append。

Bootstrap 4还.input-group-text为输入组中的文本引入。

使用.img-responsive课程。

使用.img-fluid课程。

使用.pull-right，.pull-left和.center-block辅助类。

使用.m-x-auto而不是.center-block对齐块级图像。

还可以使用各种.pull-*-right和.pull-*-left响应的辅助类，还有.text-*-left，.text-*-center和 .text-*-right对图像的父辅助类。

可以使用各种.pull-*-none类来禁用浮动。

包括媒体对象很多不同的类，其中包括.media，.media-body .media-object，.media-heading，.media-right，.media-left，和.media-list和.media-body。

仅使用.media课程。可以使用spacer实用程序来应用边距。Media对象在Bootstrap 4中启用了flexbox，因此也可以应用各种flexbox类（例如重新排序等）。

将下拉列表应用于列表（即使用ul和li）。

下拉列表可以使用ul或divs 构建。

应用.dropdown-itema a或button元素并将它们全部包含在应用了类的div（或ul）中.dropdown-menu。

适用.dropdown-header于li标签。

适用.dropdown-header于h1- h2标签（如引导不再使用li标签来建立下拉菜单）。

将.divider类应用于li元素（因为它使用列表来构建下拉列表）。

应用.dropdown-divider到div元素。

将.disabled类应用于li元素。

将.disabled类应用于a元素。

支持合理的按钮组（通过.btn-group-justified类）。

不支持。

支持额外的小按钮组（通过.btn-group-xs课程）。

不支持（放弃.btn-group-xs课程）。

没有.nav-inline课。

可以使用.nav-inline该类明确指定要内联显示的导航。

有限（预设）颜色选项。支持反向导航栏，但不支持其他类。

新的（预设）颜色选项。引入了类.navbar-light和.navbar-dark类，并允许.bg-*类在导航栏上使用。

使用.navbar-right，.navbar-left对齐导航栏中的组件。

使用各种.pull-*-right和.pull-*-left响应的辅助类。

也可以使用各种.pull-*-none类来禁用浮动。

可以使用间距实用程序，例如.mr-auto，或任何flexbox对齐实用程序。

将.navbar-form类添加到导航栏中的表单。

Bootstrap 4放弃了这个.navbar-form课程。它不再是必要的。

使用.navbar-fixed-top并将.navbar-fixed-bottom导航栏固定到顶部或底部。

用途.fixed-top和.fixed-bottom。

只需要.pagination添加（ul表示页面列表的元素）。

还必须添加.page-item到每个li元素和.page-link每个 a元素。

使用.previous和.next对齐寻呼机。

寻呼机已被丢弃在Bootstrap 4（Alpha 3）中。

使用.pager-prev和.pager-next对齐寻呼机。

该.label-pill课程不可用。但是，Bootstrap 3确实有徽章（它实现了类似的视觉效果）。

标签已被替换徽章在引导4。

徽章可以.badge-pill用于圆角。

没有。

“标签”在Bootstrap 3中称为“标签”（即他们使用.label该类）。

是。

的.tag类是在自举4（阿尔法3）推出，取代.label类。

这样做是为了消除label元素的歧义。

标签现在已重命名为“徽章”。这些替换Bootstrap 3中的标签。

该.jumbotron-fluid班是不是需要在全角jumbotrons。

介绍了.jumbotron-fluid全宽jumbotrons的课程。

不使用progressfor进度条。而是将进度条类应用于嵌套div元素。

使用progress进度条时使用HTML5 元素。

progress在Alpha 6中放弃使用该元素.Bootstrap 4现在div再次使用该元素。

支持的。

不支持。

blockquote默认情况下，引导样式应用于元素。

引入了.blockquote用于样式化blockquote元素的类（即样式化元素现在可以选择加入）。

使用.blockquote-reverse对齐块引用的权利。

使用文本实用程序来对齐blockquotes（.text-center和.text-right）。

该.page-header课程受到支持。

该.page-header课程不受支持。

该.dl-horizontal班是用来宣告水平列表。

现在.row，使用dl标记上的类声明水平列表，然后将任何网格系统的预定义类声明为dt和dd标记。

支持的。您可以指定布局无响应。

不支持。

适用.list-group-item于a元素。

适用.list-group-item-action于a元素。

用于.in在页面加载时扩展内容。

用于.show在页面加载时扩展内容。

不支持。

在Bootstrap 4中引入。卡替换以前由面板，wells和缩略图提供的功能。

支持的。

不支持。请改用卡片。

支持的。

不支持。请改用卡片。

支持的。

不支持。请改用卡片。

将该.breadcrumb类用于ul标记。

还需要.breadcrumb-item对li构成面包屑的所有元素应用。

面包屑也可以在列表之外使用。例如，.breadcrumb-item可以应用于包含在a元素中的一堆.breadcrumb元素。

使用.item课程。

使用.carousel-item课程。

是。

没有。