将 Bootstrap 从 3.3.4 升级到 4.0

Question

我以前的网站是

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" alt="World"></div>
            <h2>my website!!</h2>
            <div class="panel panel-default">
                <div class="panel-body">
                    <h4> stackoverflow </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

。

Answer 1

请注意这个答案是 6 年前提供的。由于显而易见的原因，它已经过时了。不过，其中的某些部分仍然适用于
v4
>
v5
升级。

初步回答：

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

就 Bootstrap 而言，它不仅仅是“重大更改”。它几乎是一个全新的库（事实上，它的大部分都被完全重写！）。在开发方面，将其视为一个不同的库，模糊地类似于旧库。我能给你的最好建议是恢复到 v3。如果您想利用完全开发的产品，请使用最新的 v3。在现实生活中，

升级

将功能网站从 Bootstrap v3 切换到 Bootstrap v4 在开发时间和/或投资方面是有意义的。如果您真的决心这样做（也许是出于教育目的或其他目的），请考虑使用 v4 从头开始重建它。如果您确实需要转换旧模板（HTML 标记），请通过 Bootstrap 运行它们

v3 to v4 markup converter

。但请记住，即使使用此工具或类似工具，也要考虑架构、布局、JavaScript 插件、表单元素方面的所有更改，从字形切换到很棒的字体，从 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/stackoverflow/company/img/logos/so/so-logo.svg?v=2bb144720a66" style="width: 35%" class="img-fluid" title="Hello" alt="World">
    </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 来居中并均匀分布，如果您需要它（即：放置

<h2>

内部

.d-flex

与徽标对齐和分布）

将 Bootstrap 从 3.3.4 升级到 4.0

问题描述投票：0回答：1

1个回答

最新问题

将 Bootstrap 从 3.3.4 升级到 4.0

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1