Bootstrap 3和Bootstrap 4之间的区别

Introduction

介绍

In the previous article, we have learned what is .Jumbotron and .page-header class and how to use it? Basically, .page-header class is used in Bootstrap 3, not in Bootstrap 4 and .jumbotron class used in both the version; But, the new class .jumbotron-fluid is used in Bootstrap 4 which is currently a new component in Bootstrap 4. Like this, here are some more differences between bootstrap 3 and Bootstrap 4. Bootstrap 4 brought some major changes, adding new component; clashing others. So, in this article, we will discuss these differences. If you have any doubt, feel free to ask in the comment section.

在上一篇文章中，我们了解了什么是.Jumbotron和.page-header类以及如何使用它 ？ 基本上， .page-header类是在Bootstrap 3中使用的，而不是在两个版本中都使用的Bootstrap 4和.jumbotron类中。 但是，新类.jumbotron-fluid用于Bootstrap 4中，Bootstrap 4目前是Bootstrap 4中的新组件。像这样，这是Bootstrap 3和Bootstrap 4之间的更多区别 。 Bootstrap 4进行​​了一些重大更改，增加了新组件； 与其他人发生冲突。 因此，在本文中，我们将讨论这些差异。 如有任何疑问，请随时在评论部分提问。

So, let’s get started to discuss the differences between them.

因此，让我们开始讨论它们之间的区别。

Bootstrap 3和Bootstrap 4之间的区别 (Difference between Bootstrap 3 and Bootstrap 4)

1) Global / default

1)全局/默认

Both Bootstrap 3 and Bootstrap 4 have some global components.

Bootstrap 3和Bootstrap 4都有一些全局组件。

Like:

喜欢：

• Font size: - In bootstrap 3 by default font size is 14px and In Bootstrap 4 by default font size is 16px.

  字体大小： -在bootstrap 3中，默认字体大小为14px ，在Bootstrap 4中，默认字体大小为16px 。

• Primary CSS Unit: - In bootstrap 3 px unit is used and in bootstrap 4 rem unit is used.

  主要CSS单位： -在bootstrap 3 px单位中使用，而在bootstrap 4 rem单位中使用。

• Font: - In bootstrap 3 by default Helvetica, san-serif, Arial font is used and bootstrap 4 uses 'native font stack' (system fonts) including san-serif, Arial, Helvetica Neue.

  字体： -默认情况下，在引导程序3中，Helvetica使用san-serif，Arial字体，而引导程序4使用“本机字体堆栈”(系统字体)，包括san-serif，Arial和Helvetica Neue。

2) Grid System

2)网格系统

We use a Grid system in both Bootstrap 3 and Bootstrap 4 to design a mobile-friendly responsive page.

我们在Bootstrap 3和Bootstrap 4中都使用了Grid系统来设计对移动设备友好的响应页面 。

Like:

喜欢：

• Grid Tier: - Bootstrap 3 grid system has 4 tier xs (for extra small device like phones) , sm (for small device like tablets) , md (for medium device like desktops) , lg (for large device like large desktop) and bootstrap 4 has 5 tier xs, sm, md, lg, xl (for extra large device like LED, LCD).

  网格层： -Bootstrap 3网格系统具有4层xs (用于电话等超小型设备)， sm (用于平板电脑等小型设备)， md (用于桌面等中型设备)， lg (用于大型设备如大型桌面)和引导程序4具有5层xs，sm，md，lg，xl (适用于超大型设备，如LED，LCD)。

• Offset Column: - bootstrap 3 Offset columns uses col-*-offset-* like col-sm-offset-3 and bootstrap 4 (offset-*-*) is used like offset-sm-3.

  偏移列： -bootstrap 3偏移列使用col-*-offset- *，例如col-sm-offset-3，而bootstrap 4( offset-*-* )则使用offset-sm-3 。

3) Tables

3)桌子

For creating a responsive table we use .table classes in bootstrap and here, in bootstrap 4 some more new different classes are used to create better responsive tables.

为了创建响应表，我们在引导程序中使用.table类，在这里，在引导程序4中，使用了更多新的不同类来创建更好的响应表。

Like:

喜欢：

• Table head: Table head uses .thead-light and .thead-dark classes in bootstrap 4; not present in bootstrap 3 (No table head class is supported in bootstrap 3).

  表头：表头在引导程序4中使用.thead-light和.thead-dark类； 引导程序3中不存在(引导程序3中不支持表头类)。

• Dark and Inverse table: In bootstrap 3 .table-dark class is not supported but, can be used in bootstrap 4.

  暗表和逆表：在引导程序3中，不支持.table-dark类，但可以在引导程序4中使用。

  Note: Prior to the bootstrap beta-2 version .table-inverse class is used. This .table-inverse class has been replaced with .table-dark class in bootstrap 4.

  注意：在引导程序beta-2版本之前，使用.table-inverse类。 这个.table-inverse类在引导程序4中已被.table-dark类替换。

• Condensed table: .table-condensed class is used in bootstrap 3 and in bootstrap 4 .table-sm class is used.

  冷凝的表：。 表稠类是在自举3和自举。表4-SM类使用时使用。

• Contextual table: In bootstrap 3 .active, .info, .warning, .success, .danger classes are used. But, in bootstrap 4 .table-* is used like .table-info, .table-warning, .table-success, .table-danger, .table-active.

  上下文表：在引导程序3中，使用.active ， .info ， .warning ， .success和.danger类。 但是，在引导程序4中， .table- *的用法类似于.table-info ， .table-warning ， .table-success ， .table-danger和.table-active 。

• Responsive table: In bootstrap 3 .table-responsive class is used but, bootstrap 4 can be used to specify a particular breakpoints; which means in bootstrap 4 .table-responsive-* class is used ( Astric (*) xs, ms, md, lg, xl).

  响应表：在引导程序3中，使用了.table-sensitive类，但是，引导程序4可用于指定特定的断点； 这意味着在引导程序4中使用.table-sensitive- *类(Astric(*) xs，ms，md，lg，xl )。

4) Forms

4)表格

We used multiple classes to create responsive forms in bootstrap.

我们使用多个类在引导程序中创建响应式表单。

Like:

喜欢：

• Horizontal Form: In bootstrap 3 .form-horizontal is required. This is no longer needed to display a horizontal form in Bootstrap 4. So, the .form-horizontal class is dropped in Bootstrap 4.

  水平形式：在bootstrap 3中，需要水平形式 。 在Bootstrap 4中不再需要显示水平表单。因此，在Bootstrap 4中删除了.form-horizo​​ntal类。

  Note:

  注意：

  1. .row class does not require in forms when using grid but; in bootstrap 4 forms required either .row class or .form-row class when using the grid.
  2. .row类在使用网格时不需要形式，但是； 在Bootstrap 4表格中，使用网格时需要.row类或.form-row类。
  3. The .control-label class is used in bootstrap 3 and .col-form-label is used in bootstrap 4 for form layout when using the grid.
  4. 使用网格时， .control-label类用于引导3，而.col-form-label用于引导4用于表单布局。
  5. Bootstrap 4 initially used .form-control-label but successively changed this to .col-form-label.
  6. Bootstrap 4最初使用.form-control-label，但随后将其更改为.col-form-label 。

• Checkboxes and radio buttons: Use .radio, .radio-inline, .checkbox and .checkbox-inline class in bootstrap 3 and use .form-check-input, .check, .check-label and .form-check-inline class in bootstrap 4

  复选框和单选按钮：在引导程序3中使用.radio ， .radio-inline ， .checkbox和.checkbox-inline类，并在引导程序3中使用.form-check-input ， .check ， .check-label和.form-check-inline类引导程序4

• Form control size: Use .input-sm and .input-lg to increase and decrease the size of an input; and In bootstrap 4 .form-control-lg and .form-control-sm is used.

  窗体控件的大小：使用.input-sm和.input-lg增大和减小输入的大小； 在引导程序4中，使用.form-control-lg和.form-control-sm 。

• Form label size: In bootstrap 3 no specific class is available for form label. .col-form-label-sm and .col-form-label-lg class is used in bootstrap 4 to form label.

  表单标签的大小：在引导程序3中，没有特定的类别可用于表单标签。 .col-form-label-sm和.col-form-label-lg类在引导程序4中用于形成标签。

• Help text: .help-block is used in bootstrap 3 and .form-text class is used in bootstrap 4 to display help text.

  帮助文本：在引导程序3中使用.help-block ，在引导程序4中使用.form-text类来显示帮助文本。

• Legends: No legend classes is used in bootstrap 3 but, bootstrap 4 provide .col-form-label class inside the <legend> element to style it like a label.

  图例：引导程序3中未使用图例类，但是引导程序4在<legend>元素内提供.col-form-label类，以将其样式化为标签。

• Static text: Bootstrap 3 uses .form-control-static class and bootstrap 4 uses .form-control-plaintext class.

  静态文本：引导程序3使用.form-control-static类，而引导程序4使用.form-control-plaintext类。

5) Buttons

5)按钮

Different types of button classes are also available in bootstrap.

引导程序中还提供了不同类型的按钮类。

Like:

喜欢：

• Style: We can use contextual classes to provide a style to the buttons; .btn-secondary class is not available in bootstrap 3. But, in bootstrap 4 all the contextual classes (.info, .primary, .secondary, .danger, .warning, .success) are available for stylizing the buttons.

  样式：我们可以使用上下文类为按钮提供样式。 .btn-secondary类在引导程序3中不可用。但是，在引导程序4中，所有上下文类( .info ， .primary ， .secondary ， .danger ， .warning和.success )都可用于样式化按钮。

• Outline buttons: Not supported in bootstrap 3; In bootstrap 4 .btn-outline-* class is used.

  大纲按钮：引导程序3不支持； 在引导程序4中，使用.btn-outline- *类。

• Button size: .btn-xs class is available only in bootstrap 3 and in bootstrap 4 .btn-lg and .btn-sm class is available.

  按钮大小： .btn-xs类仅在引导程序3和引导程序4中可用。btn-lg和.btn-sm类可用。

6) Images

6)图片

Image classes in bootstrap.

引导程序中的图像类。

Like:

喜欢：

• Responsive image: Use .img-responsive class is used in bootstrap 3 and .img-fluid class is used in bootstrap 4.

  响应式图像：在引导程序3中使用.img响应类，在引导程序4中使用.img-fluid类。

• Image alignment: .pull-right, .pull-left and .center-block class is used in bootstrap 3 and in bootstrap 4 .pull-*-right, .pull-*-left, .text-*-right, .text-*-left and .text-*-center are used.

  图像对齐：在引导程序3和引导程序4中使用.pull-right ， .pull-left和.center-block类.pull-*-right ， .pull-*-left ， .text-*-right ， .text使用-*-left和.text-*-center 。

7) Media Object

7)媒体对象

Bootstrap media queries has some different media object classes.

Bootstrap媒体查询具有一些不同的媒体对象类。

Like:

喜欢：

• Classes: In bootstrap 3 .media, .media-object, .media-body, .media-heading, .media-right, .media-left, .media-list and .media-body are used. Bootstrap 4 uses .media class in which margins can be applied using spacer utilities. Some flexboxes are uses in bootstrap 4 like reordering.

  类：在引导程序3中，使用.media ， .media-object ， .media-body ， .media-heading ， .media-right ， .media-left ， .media-list和.media-body 。 Bootstrap 4使用.media类，其中可以使用spacer实用程序应用边距。 一些flexbox用于引导程序4，例如重新排序。

8) Dropdowns

8)下拉菜单

Difference between bootstrap 3 and bootstrap 4 dropdowns.

引导程序3和引导程序4下拉菜单之间的区别。

Like:

喜欢：

• Structure: In bootstrap 3, dropdowns to the lists using <ul> and <li>. In bootstrap 4 dropdown can be built with <ul> and <div>. We can apply dropdown by using .dropdown-item to a <a> or <button> element wrap them all in a <div> or <ul> using .dropdown-menu.

  结构：在引导程序3中，使用<ul>和<li>下拉列表。 在bootstrap 4中，可以使用<ul>和<div>构建下拉列表。 我们可以通过使用.dropdown-item将下拉菜单应用于<a>或<button>元素，并使用.dropdown-menu将它们全部包装在<div>或<ul>中 。

• Menu header: In bootstrap 3 .dropdown-header to the <li> tag and in bootstrap 4 in place of <li> tag, use <h1> and <h2> tag to .dropdown-header.

  菜单标题：在引导3的<li>标记的标题中 ，以及在引导4的<li>标记的地方，将<h1>和<h2>标记用于.dropdown-header 。

• Divider: For Bootstrap 3, Apply .divider class to the <li> element (It is used with lists to build dropdowns) and in bootstrap 4 apply .dropdown-divider to the <div> element.

  分隔线 ：对于Bootstrap 3，将.divider类应用于<li>元素(与列表一起使用以构建下拉列表)，并在引导程序4 中将.dropdown-divider应用于<div>元素。

• Disabled Menu Item: Apply the .disabled class to the <li> element and in bootstrap 4 .disabled class is used in <a> tag.

  禁用菜单项：将.disabled类应用于<li>元素，并在引导4中，在<a>标记中使用.disabled类。

9) Buttons group:

9)按钮组：

btn-group-justified and .btn-group-xs class is used in bootstrap 3 but not in bootstrap 4.

btn-group-justified和.btn-group-xs类在引导程序3中使用，但在引导程序4中不使用。

10) Navs

10)海军

.nav-inline class is not supported in bootstrap 4 anymore.

引导4不再支持.nav-inline类。

11) Navbars:

11)导航栏：

.navbar-light, .navbar-dark and .bg-* class is available in bootstrap 4 but, in bootstrap 3 only limited color options only supported viz. .navbar-inverse. For navbar forms, .navbar-form class is used in bootstrap 3 , not in bootstrap 4. For fixed navbar .navbar-fixed-top, .navbar-fixed-bottom class is used in bootstrap 3, but in bootstrap 4 .fixed-top, .fixed-bottom class is used.

.navbar-light ， .navbar-dark和.bg- *类在引导程序4中可用，但是在引导程序3中，仅支持有限的颜色选项，即仅支持。 .navbar-inverse 。 对于navbar表单， .navbar-form类在引导程序3中使用，而不是在引导程序4中使用。对于固定的navbar .navbar-fixed-top ， .navbar-fixed-bottom类在引导程序3中使用，但是在引导程序4中。 top ，使用.fixed-bottom类。

12) Pagination

12)分页

In pager .previous and .next class is used in bootstrap 3 but not support in bootstrap 4.

在寻呼机中， .bootvious和.next类在引导程序3中使用，但在引导程序4中不支持。

13) Labels

13)标签

In bootstrap 3 .label-pill is not used but, in bootstrap 4 label is replaced with badge. So, here .badge-pill class is used for rounded corner.

在引导程序3中，不使用.label-pill，但是在引导程序4中，label被替换为badge。 因此，这里.badge-pill类用于圆角。

14) Progress Bar

14)进度栏

<progress> is used for animated progress in bootstrap. .progress, .progress-bar, .progress-bar-info, .progress-bar-striped, .progress-bar-active, .progress-bar-danger, .progress-bar-warning, .progress-bar-success classes is used in bootstrap 3. In bootstrap 4 .progress, .progress-bar, .progress-bar-striped, .progress-bar-animated class is used.

<progress>用于引导中的动画进度。 .progress ， .progress-bar ， .progress-bar-info ， .progress-bar-striped ， .progress-bar-active ， .progress-bar-danger ， .progress-bar-warning ， .progress-bar-success类在引导程序3中使用。在引导程序4中，使用.progress ， .progress-bar ， .progress-bar-striped ， .progress-bar-animated类。

15) Glyph icons

15)字形图标

Glyph icons are used in bootstrap 3, but not available in bootstrap 4.

字形图标在引导程序3中使用，但在引导程序4中不可用。

16) Panel, Well, Affix, Thumbnails

16)面板，好的，词缀，缩略图

Supported in bootstrap 3 but, not supported in bootstrap 4.

引导程序3支持，但引导程序4不支持。

17) Carousel

17)轮播

.carousel-item class is used in bootstrap 4 and .item is used inside the carousel in bootstrap 3.

.carousel-item类在引导程序4中使用， .item在引导程序3的旋转木马中使用。

Conclusion:

结论：

In this article, we have case studied the differences between bootstrap 3 and Bootstrap 4. After reading this article, you can correlate the differences between them and have a better grasp over other articles mentioned in different articles. Stay tuned for the next article. We will dig deeper and discover more about Bootstrap.

在本文中，我们案例研究了bootstrap 3和Bootstrap 4之间的区别 。 阅读本文之后，您可以关联它们之间的差异，并比其他文章中提到的其他文章有更好的了解。 请继续关注下一篇文章。 我们将更深入地探索并发现更多有关Bootstrap的信息。

翻译自: https://www.includehelp.com/html/difference-between-bootstrap-3-and-bootstrap-4.aspx