Bootstrap 3 和 4 的区别

描述

Bootstrap 是一个强大且流行的移动优先前端框架，用于使用 HTML、CSS 和 JS 框架构建响应式移动优先网站。

下表显示了 Bootstrap 3 和 Bootstrap 4 的区别：

序号	组件	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 类	.img-fluid 类
8	表格	向父 <div> 元素添加 .table-responsive 类	向 <table> 元素添加 .table-responsive 类
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、.form-check-label、.form-check-input 或 .form-check-inline 类显示复选框和单选按钮
13	表单控件大小	使用 .input-lg 和 .input-sm 类增加或减少输入控件的大小	使用 .form-control-lg 和 .form-control-sm 类增加或减少输入控件的大小
14	帮助文本	使用 .help-block 类显示帮助文本	使用 .form-text 类显示帮助文本
15	样式	在按钮上使用 .btn-default 和 .btn-info 类	在按钮上使用 .btn-secondary、.btn-light 和 .btn-dark 类，并删除了 .btn-default 类。
16	轮廓按钮	不支持	使用 .btn-outline-* 类为按钮设置轮廓颜色样式
17	按钮大小	提供 .btn-xs 类	仅提供 .btn-sm 和 .btn-lg 类，并删除了 .btn-xs 类
18	菜单标题	将 .dropdown-header 类用于 li 标签	将 .dropdown-header 类用于 h1 - h2 标签
19	分隔符	在 li 元素中使用 .divider 类	在 div 元素中使用 .dropdown-divider 类
20	固定导航栏	使用 .navbar-fixed-top 和 .navbar-fixed-bottom 类将导航栏固定到顶部或底部	使用 .fixed-top 和 .fixed-bottom 类将导航栏固定到顶部或底部
21	分页器	使用 .previous 和 .next 类对齐页面	不支持
22	全宽 Jumbotron	在全宽 Jumbotron 上不使用 .jumbotron-fluid 类	在全宽 Jumbotron 上使用 .jumbotron-fluid 类
23	轮播项目	对轮播项目使用 .item 类。	对轮播项目使用 .carousel-item 类。
24	井、面板和缩略图	支持	不支持。改用卡片。
25	内联导航	不包含 .nav-inline 类	使用 .nav-inline 类将导航显示为内联

打印页面