📅 最后修改于: 2020-10-26 04:32:13 🧑 作者: Mango
描述
Bootstrap是功能强大且流行的移动第一前端框架，用于通过使用HTML，CSS和JS框架在Web上构建响应式移动第一站点。
下表显示了Bootstrap 3和Bootstrap 4的区别-
| S.No. |
Component |
Bootstrap 3 |
Bootstrap 4 |
| 1 |
CSS source files |
LESS |
SCSS |
| 2 |
Grid System |
4 tier grid system (xs, sm, md, lg) |
5 tier grid system (xs, sm, md, lg, xl) |
| 3 |
CSS Unit |
px |
rem |
| 4 |
Font Size |
14px |
16px |
| 5 |
Dropdown Structure |
Created with |
Created with |
| 6 |
Offsetting Columns |
col-md-offset-4 |
offset-md-4 |
| 7 |
Images |
.img-responsive class |
.img-fluid class |
| 8 |
Tables |
Add .table-responsive class to parent element |
Add .table-responsive class to element
| 9 |
Glyphicons |
Supported |
Not Supported |
| 10 |
Media Objects |
Uses classes for media objects, such as .media, .media-body, .media-object, .media-heading, .media-right, .media-left, .media-list and .media-body |
Uses just .media class for media objects. |
| 11 |
Dark/inverse Tables |
Not supported |
Uses .table-dark class to make dark/inverse tables |
| 12 |
Checkboxes and Radio Buttons |
Displays the checkboxes and radio buttons by using .radio, .radio-inline, .checkbox, or .checkbox-inline classes |
Displays the checkboxes and radio buttons by using .form-check, .form-check-label, .form-check-input, or .form-check-inline classes |
| 13 |
Form Control Size |
Increase or decrease size of an input control by using .input-lg and .input-sm classes |
Increase or decrease size of an input control by using .form-control-lg and .form-control-sm classes |
| 14 |
Help Text |
Display the help text by using .help-block class |
Display the help text by using .form-text class |
| 15 |
Styles |
Uses the .btn-default and .btn-info classes on buttons |
Uses the .btn-secondary, .btn-light and .btn-dark classes on buttons and dropped the .btn-default class. |
| 16 |
Outline Buttons |
Not Supported |
Style the buttons with outline color by using .btn-outline-* class |
| 17 |
Button Sizes |
The .btn-xs class is available |
Available only .btn-sm and .btn-lg classes and dropped the .btn-xs class |
| 18 |
Menu Headers |
Use .dropdown-header class to the li tag |
Use .dropdown-header class to h1 – h2 tags |
| 19 |
Dividers |
Use the .divider class in the li element |
Use the .dropdown-divider class in the div element |
| 20 |
Fixed Navbars |
Fix the navbar to top or bottom by using .navbar-fixed-top and .navbar-fixed-bottom classes |
Fix the navbar to top or bottom by using .fixed-top and .fixed-bottom classes |
| 21 |
Pagers |
Align the pages by using .previous and .next classes |
Not supported |
| 22 |
Jumbotron Full Width |
It does not uses .jumbotron-fluid class on full-width jumbotrons |
It uses .jumbotron-fluid class for full-width jumbotrons |
| 23 |
Carousel Item |
Uses .item class for carousel items. |
Uses .carousel-item class for carousel items. |
| 24 |
Wells, Panels and Thumbnails |
Supported |
Not supported. Use cards instead |
| 25 |
Inline Navs |
It doesn’t include .nav-inline class |
Display the navs as inline by using the .nav-inline class |
|