Bootstrap 3 和 4 之间的区别
描述
Bootstrap 是一个强大且流行的移动优先前端框架，用于使用 HTML、CSS 和 JS 框架在 Web 上构建响应式移动优先网站。
下表显示了 Bootstrap 3 和 Bootstrap 4 的差异 -
| 编号 | 成分 | 引导程序3 | 引导程序4 |
|---|---|---|---|
| 1 | CSS 源文件 | 较少的 | 社会保障体系 |
| 2 | 网格系统 | 4 层网格系统（xs、sm、md、lg） | 5 层网格系统（xs、sm、md、lg、xl） |
| 3 | CSS单元 | 像素 | 雷姆 |
| 4 | 字体大小 | 14像素 | 16像素 |
| 5 | 下拉结构 | 使用 <ul> 和 <li> 创建 | 使用 <ul> 或 <div> 创建 |
| 6 | 偏移列 | col-md-偏移-4 | 偏移-md-4 |
| 7 | 图片 | .img 响应类 | .img-流体类 |
| 8 | 表格 | 将.table-responsive类添加到父 <div> 元素 | 将.table-responsive类添加到 <table> 元素 |
| 9 | 字形 | 支持的 | 不支持 |
| 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-fluid类 | 它使用.jumbotron-fluid类来实现全宽 Jumbotron |
| 23 | 轮播项目 | 对轮播项目使用.item类。 | 使用.carousel-item类来表示轮播项目。 |
| 24 | 孔、面板和缩略图 | 支持的 | 不支持。使用卡片代替 |
| 25 | 内联导航 | 它不包括.nav-inline类 | 使用.nav-inline类将导航显示为内联 |