将 Bootstrap 从 3.3.4 升级到 4.0

Posted 2023-03-05

技术标签:

【中文标题】将 Bootstrap 从 3.3.4 升级到 4.0【英文标题】：Upgrading Bootstrap from 3.3.4 to 4.0 【发布时间】：2018-08-11 23:25:10 【问题描述】：

我以前的网站是 Boostrap 3.3.4，但自从我搬到 Bootstrap 4 后，一切都坏了。

基本上我的网站结构非常简单，一个包含一些jumbotrons和一些panels的容器

<body>
    <section class="container">
        <div class="jumbotron vertical-center">
            <div><img src="img/hello.jpg" style="width: 35%" class="img-responsive" title="Hello" ></div>
            <h2>my website!!</h2>
            <div class="panel panel-default">
                <div class="panel-body">
                    <h4> *** </h4>

                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-body">
                    <h4><span class="glyphicon glyphicon-education" aria-hidden="true"></span><strong> This is reall cool! </h4>
                </div>
            </div>

等等。

CSS 很简单

.container 
  max-width: 600px;
  background:white;
  padding: 30px 30px;
  text-align: center;
  background: transparent;


.jumbotron 
  background: white;

在这里，我会有一套居中、响应式漂亮的块（带有圆形边缘），不会占据屏幕的整个宽度。

我不知道如何适应 Bootstrap 4。

【问题讨论】：

为什么投反对票？这是一个有趣的问题，答案很好我也很想知道人们为什么投反对票。从我的角度来看，从 v3 升级到 v4 的意图是正常的，尤其是当人们对 Bootstrap 不太了解时。因此，这个问题有可能对未来的用户有用。我同意 :) 【参考方案1】：

每当您使用任何软件从一个主要版本切换到另一个主要版本时，您都应该期待重大更改。

就 Bootstrap 而言，它不仅仅是重大更改。它几乎是一个全新的库（事实上，它大部分都被完全重写了！）。在开发方面，将其视为与旧库模糊不同的库。

我能给你的最好建议是恢复到 v3。如果您想利用完全开发的产品，请使用可用的最新 v3。在开发时间和/或投资方面，升级将功能性网站从 Bootstrap v3 切换到 Bootstrap v4 的实际案例很少。

如果您真的决心这样做（可能出于教育目的或其他目的），请考虑使用 v4.0 从头开始重建它。如果您确实需要转换旧模板（html 标记），请通过 Bootstrap v3 to v4 markup converter 运行它们。

但请记住，即使使用此工具或类似工具，考虑到架构、布局、javascript 插件、表单元素方面的所有变化，从 glyphicons 切换到 font awesome，从 LESS 切换到 SASS，重命名变量，更改响应断点以及您（或任何 v3 主题/插件/附加组件）当前可能用于覆盖默认值的任何自定义 CSS，您仍然有很多机会搞砸它，如果你从头开始重建，恕我直言。

从 v3 迁移到 v4 更有意义：“我以前使用 v3 开发网站，现在我在新项目中使用 v4”，而不是 “我升级了一个从 v3 到 v4 的网站”。v3 不会过时，而且不会过时。事实上，目前它比 v4 更适合生产环境。在这方面，快速查看bootstrap-4 问题，将确认它（尚未）准备好生产。在广泛使用的设备上，基本功能仍然被破坏或至少开发不足。

在您的标记的特定情况下，应该这样做：

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<section class="container">
  <div class="jumbotron vertical-center">
    <div class="d-flex justify-content-around  align-items-center">
      <img src="https://cdn.sstatic.net/Sites/***/company/img/logos/so/so-logo.svg?v=2bb144720a66" style="width: 35%" class="img-fluid" title="Hello" >
    </div>
    <h2>my website!!</h2>
    <div class="card">
      <div class="card-body">
        <h4> stack<b>overflow</b> </h4>
      </div>
    </div>
    <div class="card">
      <div class="card-body">
        <h4><i class="fa fa-university"></i><strong> This is reall cool! </strong></h4>
      </div>
    </div>
  </div>
</section>

请注意，我将 glyphicon 替换为 fa，因为 Bootstrap v4 使用了很棒的字体图标，并且我还将徽标居中作为提醒 v4 使用 flexbox 居中并均匀分布，如果您需要它（即：放置 @ 987654327@ 内.d-flex 对齐和分布符合标志）

【讨论】：

这真的很重要，正如您在其他地方的评论中所说，从 v3 到 v4 几乎没有意义，对于网站的外观和运作良好，我会坚持与 v3。写得非常好，我可能会添加 Andrei，而且信息量很大。 @Funk，我可能只是添加 v4 现在已准备好生产。它仍然受到缺少插件的困扰，但它获得了很大的吸引力，因为大多数现代框架（React、Angular）都集成了它，而且很酷的主题已经被抢购一空。一个新项目？转到 v4。将恐龙从 v3 切换到它？嗯…… @AndreiGheorghiu 是的，我肯定会在任何新项目中使用 v4。哦，我喜欢恐龙。至少我不知道对他们有什么期望，嘿！；一路走好！ "v3 并没有过时，也不会过时很多年。" - 好吧，那不是很好！ :) Bootstrap v3 已于 2019 年 7 月过时，不应再使用。它不仅包含安全漏洞，因此不能在实时网站上使用。

以上是关于将 Bootstrap 从 3.3.4 升级到 4.0的主要内容，如果未能解决你的问题，请参考以下文章

如何将引导程序 4 升级到引导程序 5？ - 纱线

从 Angular 4 升级到 7 导致问题

Grails 从 2.4.5 升级到 3.3.2：关系“xxx”不存在

引导 4 升级后 jquery 滑块不显示

jquery.inputmask 3.3.4 的日期时间格式错误？

从 Angular 5 升级到 Angular 6，Bootstrap 按钮样式没有间距