将 Bootstrap 从 3.3.4 升级到 4.0 [英] Upgrading Bootstrap from 3.3.4 to 4.0

查看：14
本文介绍了将 Bootstrap 从 3.3.4 升级到 4.0的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我的网站曾经使用 Boostrap 3.3.4，自从我转向 Bootstrap 4 后，一切都坏了.

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

的容器

<section class="容器"><div class="jumbotron vertical-center"><div><img src="img/hello.jpg" style="width: 35%" class="img-responsive" title="Hello" alt="World"></div><h2>我的网站！！</h2><div class="panel panel-default"><div class="panel-body"><h4>stackoverflow </h4>

<div class="panel panel-default"><div class="panel-body"><h4><span class="glyphicon glyphicon-education" aria-hidden="true"></span><strong>这真的很酷！

等等.

CSS 很简单

.container {最大宽度:600px；背景:白色；填充:30px 30px；文本对齐:居中；背景:透明；}.jumbotron {背景:白色；}

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

我不知道如何使用 Bootstrap 4 来适应它.

解决方案

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

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

我能给你的最好建议是恢复到 v3.如果您想利用完全开发的产品，请使用最新的 v3.在现实生活中，升级将功能性网站从 Bootstrap v3 切换到 Bootstrap v4 在开发时间和/或投资方面有意义的情况很少.

如果您真的决定这样做(可能是出于教育目的或其他目的)，请考虑使用 v4.0 从头开始​​重建它.如果您确实需要转换旧模板(HTML 标记)，请通过 Bootstrap v3 运行它们v4 标记转换器.

但请记住，即使使用此工具或类似工具，也要考虑架构、布局、JavaScript 插件、表单元素方面的所有更改，从字形切换到超棒的字体，从 LESS 切换到 SASS，重命名变量，更改响应断点以及您(或任何 v3 主题/插件/附加组件)当前可能用于覆盖默认值的任何自定义 CSS，您仍然有很多机会弄乱它，并且您最好(并且拥有出色的最终产品)如果你从头开始重建，恕我直言.

从 v3 迁移到 v4 在以下方面更有意义:我过去使用 v3 开发网站，现在我在新项目中使用 v4"，而不是 ；我将网站从 v3 升级到 v4".
v3 不会过时，也不会持续很多年.
事实上，它是目前比 v4 更适合生产环境的选项.在这方面，快速浏览一下 问题，将确认它(尚未)生产就绪.在广泛使用的设备上，基本功能仍然存在缺陷或至少开发不足.

在您的标记的特殊情况下，应该这样做:

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="样式表"/><link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/><section class="容器"><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="你好" alt="世界">

<h2>我的网站！！</h2><div class="card"><div class="card-body"><h4>堆栈<b>溢出</b>

<div class="card"><div class="card-body"><h4><i class="fa fa-university"></i><strong>这真的很酷！</strong></h4>

</section>

注意我用 fa 替换了 glyphicon，因为 Bootstrap v4 使用字体很棒的图标，并且我还将徽标居中作为提醒 v4 使用 flexbox 居中并均匀分布，如果您需要它(即:将 <h2> 放在 .d-flex 内以与徽标对齐和分布)

I used to have my website with Boostrap 3.3.4, and since I moved to Bootstrap 4 everything is broken.

Essentially the structure of my website was very simple, a container that contained some jumbotrons and some 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>

and so on.

CSS would be simply

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

.jumbotron {
  background: white;
}

Here I would have a suite of centered, responsive nice blocks (with roundede edges) that would NOT take the full width of the screen.

I have no idea how to adapt that with Bootstrap 4.

解决方案

Whenever you switch from one major version to another, with any software, you should expect breaking changes.

In the case of Bootstrap, it's more than breaking-changes. It's almost a completely new library (in fact, it is completely rewritten, for the most part!). In terms of development, think of it as a different library vaguely resembling the old one.

The best advice I could give you is to revert to v3. If you want to take advantage of the fully developed product, use latest v3 available. There are very few real life cases where upgrading switching a functional website from Bootstrap v3 to Bootstrap v4 makes sense in terms of development time and/or investment.

If you are really determined to do this (maybe for educational purposes or whatnot), consider rebuilding it from scratch, using v4. If you do need to convert old templates (HTML markup) run them through the Bootstrap v3 to v4 markup converter.

But keep in mind that even with this tool or similar, considering all changes in terms of architecture, layout, JavaScript plugins, form elements, switch from glyphicons to font awesome, switch from LESS to SASS, renamed variables, changed responsive breakpoints and any custom CSS you (or any v3 theme/plugin/add-on) might currently use for overriding defaults, you still have a lot of chances of messing it up and you're better off (and with a superior end product) if you rebuild from scratch, IMHO.

Moving from v3 to v4 makes a lot more sense in terms of: "I used to develop websites using v3 and now I use v4 in new projects", rather than "I upgraded a website from v3 to v4".
v3 is not obsolete and will not be for a good number of years.
In fact, it is a much more more suitable option for a production environment than v4 at the moment. In this regard, a quick look at questions, will confirm it's not (yet) production ready. Basic functionality is still broken or at least under-developed on widely used devices.

In the particular case of your markup, this should do:

<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>

Note I replaced glyphicon with fa as Bootstrap v4 uses font awesome icons and I also centered the logo as a reminder v4 makes use of flexbox to center and evenly distribute, should you ever need it (i.e.: place <h2> inside .d-flex to align and distribute in line with logo)

这篇关于将 Bootstrap 从 3.3.4 升级到 4.0的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆