极客教程Bootstrap 3和Bootstrap 4之间的区别
Bootstrap： Bootstrap是由Mark Otto和Jacob Thorton于2011年8月在Twitter开发的。它是一个开源框架，用于更快和更容易地设计响应式网站。它是最受欢迎的开源框架，包括HTML、CSS和JavaScript。它可以用任何服务器端技术如Java、PHP等创建网络应用，其响应式设计允许任何平台如电脑平板和手机。
我们使用Bootstrap的原因有很多，其中有。
- Responsive design
- Browser support
- 移动优先风格
- 易于学习
不同版本的Bootstrap：
- 2.0版支持响应式网页设计
- 3.0版支持移动优先的设计
- 4.0版引入了SASS和Flexbox支持
Bootstrap 3和Bootstrap 4之间的区别：
| Basis off | Bootstrap 3 | Bootstrap 4 |
|---|---|---|
| Grid System | 它基于4层网格系统(xs, sm, md, lg)。 | 它基于5层网格系统(xs, sm, md, lg, xl)。 |
| CSS File | LESS | SASS |
| Button Size | 支持.btn-xs类。 | 其中只有.btn-sm和.btn-lg可用。 |
| Horizontal Form | .row类在使用grid时不是必需的。 | .row类在表单中使用grid时是必需的。 |
| Inverse Table | 不支持的。 | 其中，我们可以在.table-inverse类的帮助下添加反转表。 |
| Primary Unit | px | rem |
| Font Size | 14px | 16px |
| Responsive Table | 在Bootstrap 3中，.responsive-table类添加到<div>元素中。 |
在bootstrap 4中，使用<table>元素添加了.responsive-table类。 |
| Condensed Table | 它支持.table-condensed。 | 它支持.table-sm。 |
| Responsive Image | 使用.img-responsive类。 | 使用.img-fluid类。 |
| Image Alignment | 使用.pull-right和.pull-left类。 | 你可以使用.pull-right、.pull-left和其他各种类，如.text-left和.text-center。 |
| Structure | 对于应用下拉列表，我们使用<ul>，<li>。 |
对于应用.dropdown-item，我们使用<a>，<button>。 |
| Color | 有限的颜色是可用的，它支持反转导航条，但不支持其他类。 | 有很多颜色可以选择。bg-dass或.navbar-light, .navbar-dark类。 |
| Jumbotron | .jumbotron-fluid类在全幅上是不需要的。 | .jumbotron-fluid类用于全宽的jumbotron。 |
| Label Pill | .label-pill是不可用的。 | .label-pill类，用于制作圆角。 |
| Pager | 它使用.next或.previous。 | 其中，我们使用.pager-next或.pager-previous。 |
| Class | 使用.breadcrumb类对抗<ul>标签。 |
使用.breadcrumb类对抗<li>标签。 |
| Afflix | Yes | No |
| Flexbox | No | Yes |
| Carousel Item | 它使用.item类。 | 它使用.carousel-item类。 |
| Dividers | 将.divider类应用于<li>元素。 |
将.dropdown-divider类应用于<div>元素。 |
| Table header | 不支持表头。 | 支持.thread-default和.thread-inverse。 |
| Media objects | 支持.media、.media-body、.media-heading等。 | 只支持.media。 |
| CSS unit | Bootstrap 3支持Px作为CSS单位 | Bootstrap 4支持rem作为CSS单元 |