描述
Bootstrap是一个功能强大且流行的移动优先前端框架，用于使用HTML，CSS和JS框架在Web上构建响应式移动优先站点.
下表显示了Bootstrap 3和Bootstrap 4 的差异:
| S.No. | Component | Bootstrap 3 | Bootstrap 4 |
|---|---|---|---|
| 1 | CSS源文件 | LESS | SCSS |
| 2 | 网格系统 | 4层网格系统(xs，sm，md，lg) | 5层网格系统(xs，sm，md，lg，xl) |
| 3 | CSS单位 | px | rem |
| 4 | 字体大小 | 14px | 16px |
| 5 | 下拉结构 | 使用< ul>创建和< li> | 使用< ul>创建或< div> |
| 6 | 抵销列 | col-md-offset-4 | offset-md-4 |
| 7 | 图片 | .img-responsive class | .img-fluid class |
| 8 | 表 | 将 .table-responsive 类添加到父级< div> element | 将 .table-responsive 类添加到< table>元素 |
| 9 | Glyphicons | 支持 | 不支持 |
| 10 | 媒体对象 | 使用媒体对象的类，例如 .media ， .media- body ， .media-object ， .media-heading ， .media-right ， .media-left ， .media-list 和 .media-body | 仅使用 .media 类对于媒体对象. |
| 11 | 暗/逆表 | 不支持 | 使用 .table-dark 类制作深色/反向表 |
| 12 | 复选框和单选按钮 | 使用 .radio ， .radio-inline ， .checkbox 或 .checkbox-inline显示复选框和单选按钮类 | 使用 .form-check |
| 13 | 表单控件大小 | 使用 .input-lg 和 .input-sm 类增加或减少输入控件的大小 | 增加或者通过使用 .form-control-lg 和 .form-control-sm 类来减小输入控件的大小 |
| 14 | 帮助文本 | 使用 | 使用 .form-text 类显示帮助文本 |
| 15 | 样式 | 使用按钮上的.btn-default 和 .btn-info 类 | 使用 .btn-secondary ， |
| 16 | Outlin e按钮 | 不支持 | 使用 .btn-outline - * 类来设置带轮廓颜色的按钮的样式 |
| 17 | 按钮大小 | .btn-xs 类可用 | 仅限 .btn-sm 和 .btn- lg 类并删除 .btn-xs 类 |
| 18 | 菜单标题 | 将 .dropdown-header 类用于 li tag | 使用 .dropdown-header 类来 h1 - h2 标签 |
| 19 | 分隔符 | 使用li元素中的 .divider 类 | 在div元素中使用 .dropdown-divider 类 |
| 20 | 固定导航栏 | 使用 .navbar-fixed-top 和 .navbar-fixed-bottom 类将导航栏固定到顶部或底部 | |
| 21 | Pagers | 使用 .previous对齐页面和 .next 类 | 不支持 |
| 22 | Jumbotron Full Width | 它不使用 .jumbotron-fluid 全宽jumbotrons课程 | 它使用 .jumbotron-fluid 类来获得全宽jumbotrons |
| 23 | Carousel Item | 使用 .item 旋转木马项目类. | 使用 .carousel-item 类来获取旋转木马项目. |
| 24 | 井，面板和缩略图 | 支持 | 不支持.改为使用卡 |
| 25 | 内联导航 | 它不包括 .nav-inline 类 | 使用 .nav将导航显示为内联-inline class |