如何在Bootstrap 4中实现Bootstrap 3的外观？附w3schools相关模板代码

我拥有一个来自w3schools的Bootstrap 3模板，代码如下：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <title>Bootstrap Example</title> 
  <meta charset="utf-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<!-- 模板其余内容 -->
</html>

请问如何在Bootstrap 4中实现Bootstrap 3的外观效果？

其实要在Bootstrap 4里还原Bootstrap 3的视觉风格，核心是处理两者在组件类名、排版、间距、颜色系统上的差异，我整理了几个实用的方案和步骤：

1. 借助兼容工具快速过渡 #

Bootstrap社区有不少维护的兼容层工具，能帮你快速对齐Bootstrap 3的外观：

• 先替换原Bootstrap 3的资源为Bootstrap 4的核心CSS和JS；
• 再引入专门的兼容样式文件（比如社区维护的bootstrap-3-reboot类资源），它会自动覆盖Bootstrap 4的默认样式，将按钮、表单、网格等组件的视觉风格重置为Bootstrap 3的样子，省去大量手动调整的工作。

2. 手动调整核心组件的类名与样式 #

如果不想依赖第三方工具，也可以针对性修改关键组件：

• 网格系统：把Bootstrap 3的col-xs-*替换为Bootstrap 4的col-*；若要还原3的紧凑间距，给容器或行添加no-gutters类，或者自定义CSS调整网格的内边距：

  .row {
    margin-right: -15px;
    margin-left: -15px;
  }
  [class^="col-"] {
    padding-right: 15px;
    padding-left: 15px;
  }
  

• 按钮与表单：Bootstrap 3的按钮圆角更小、表单控件阴影风格不同，用自定义CSS覆盖：

  .btn {
    border-radius: 4px;
    box-shadow: none;
  }
  .form-control {
    border-radius: 4px;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
  }
  

• 导航栏：Bootstrap 4默认用flex布局，要还原3的传统布局，可移除navbar-expand-*类，或者自定义CSS调整导航项的排列方式。

3. 统一排版与颜色系统 #

• 排版：Bootstrap 4默认字体大小是16px，还原3的14px基础字体：

  body {
    font-size: 14px;
    line-height: 1.42857143;
  }
  

• 颜色：Bootstrap 4的主题色命名有变化（比如btn-default对应btn-secondary），可以通过自定义CSS把btn-secondary等组件的颜色重置为Bootstrap 3的默认值，或者直接保留原3的类名（兼容层会自动映射）。

4. 适配JavaScript组件 #

Bootstrap 4的JS组件（模态框、下拉菜单等）大部分基础用法和3兼容，但部分事件和细节有调整：

• 比如data-toggle="dropdown"、$('#myModal').modal('show')这类基础调用依然可用；
• 若有复杂的JS逻辑，需要检查组件的事件名（比如hidden.bs.modal依然存在，但部分内部API有变化），针对性微调即可。

总的来说，优先用兼容工具能快速实现外观还原，之后再逐步替换类名完成彻底迁移，这样效率更高。

内容的提问来源于stack exchange，提问作者user9644880