Bootstrap 3 | Bootstrap 4 |
---|
在 Bootstrap 3 中,CSS 源文件是 LESS(Leaner Style Sheets)。 | 在 Bootstrap 4 中,CSS 源文件是 SCSS (Sassy CSS)。 |
在这里,网格系统有 4 个层级,分别是 xs、sm、md 和 lg。 | 在这里,网格系统有 5 个层级,分别是 xs、sm、md、lg 和 xl。 |
CSS 单位是 px。 | CSS 单位是 rem。 |
下拉结构是在 <ul> 和 <li> 的帮助下创建的。 | 下拉结构是在 <ul> 和 <div> 的帮助下创建的 |
类 .img-responsive 用于创建响应式图像。 | 类 .img-fluid 用于创建响应式图像。 |
对于图标,用户可以使用 Glyphicons。 | Bootstrap 4 中不支持 Glyphicons。 |
有很多类用于媒体对象,例如 .media、.media-body、.media-object、.media-heading 等等。 | 媒体对象只有一个类,即 .media。 |
Bootstrap 3 中不支持深色或反向表 | 用户可以使用 .table-dark 类创建深色或反向表。 |
唯一可用于创建按钮的类是 .btn-default 和 .btn-info | 引入了许多新类,可用于创建按钮,例如 - .btn-light、.btn-secondary、.btn-success、.btn-dark。 此外,.btn-default 类被删除了。 |
可以使用 .btn-xs 类创建一个超小尺寸的按钮。 | 超小尺寸的按钮在 Bootstrap 4 中不再可用。 唯一可用的类是 .btn-sm 和 .btn-lg。 |
复选框或单选框是使用诸如 .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 类来增加或减少。 |
菜单标题可以通过使用 .dropdown-header 类添加到 li 标签来创建。 | 菜单标题是通过使用 .dropdown-header 类与 h1 到 h2 标签一起创建的。 |
为了划分部分,在 li 元素中使用类 .divider。 | 为了划分部分,可以在 div 元素中使用类 .dropdown-divider。 |
页面可以通过 .previous 和 .next 类对齐。 | 此类 .previous 和 .next 在此不受支持。 |
在这里,不能使用 .jumbotron-fluid 类来创建全宽巨型导航栏。 | Bootstrap 4 允许用户使用 .jumbotron-fluid 类来创建全宽巨型导航栏。 |
类 .items 用于创建轮播项目。 | 类 .carousel-items 用于轮播项目。 |
在 Bootstrap 3 中,支持 wells、panels 和缩略图。 | 在 Bootstrap 4 中,不支持 wells、panels 和缩略图。取而代之的是,可以使用卡片。 |