将Bootstrap从3.3.4升级到4.0

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

问题描述

我曾经用 Boostrap 3.3.4 来建立自己的网站，并且自从我转移到 Bootstrap 4 打破。

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

 < body> 
< section class =container> 
< div class =jumbotron vertical-center> 
< div>< img src =img / hello.jpgstyle =width：35％class =img-responsivetitle =Helloalt =World>< DIV> 
< h2>我的网站!!< / 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-educationaria-hidden =true>< / span>< strong>这真是太酷了！ < / H4> 
< / div> 
< / div>

等等。

CSS简单地说就是

  .container {
 max-width：600px; 
背景：白色; 
 padding：30px 30px; 
 text-align：center; 
背景：透明; 
} 
 
 .jumbotron {
背景：白色; 
}

在这里，我将拥有一套居中，响应好的块（具有圆形边缘），不会占用整个屏幕的宽度。

我不知道如何使用 Bootstrap 4 来适应这种情况。

在Bootstrap的情况下，它不仅仅是破坏性变化。这几乎是一个全新的图书馆（实际上，它大部分都是完全重写的！）。在发展方面，可以把它看作是一个不同的图书馆，隐约地类似于旧图书馆。

我可以给你的最好的建议是恢复到v3。如果您想充分利用完整开发的产品，请使用最新的v3。很少有真正的案例可以将从Bootstrap v3切换到Bootstrap v4的功能网站从开发时间和/或投资方面进行升级。

如果您真的决定这么做（可能是为了教育目的或者其他），请考虑使用v4从头开始重新构建它。如果您确实需要转换旧模板（HTML标记），请通过Bootstrap 。但请记住，即使使用此工具或类似工具，考虑架构，布局，JavaScript插件，表单元素等方面的所有变化，从字形切换到字体真棒，从LESS切换到SASS，重命名变量，更改响应断点和任何自定义CSS（或任何v3主题/插件/附加组件）可能当前用于覆盖默认值，您仍然有很多机会将其搞乱，如果你从头开始重建，恕我直言，再好一点（并且用最好的最终产品）。

从v3移植到v4使得更具意义：我曾经使用v3开发网站，现在我在新项目中使用v4 / em>，而不是我将网站从v3升级到v4。

v3 没有过时，并且不会有好几年 STRONG>。实际上，此刻它对于生产环境来说比v4更适合。在这方面，快速浏览问题，将确认它尚未（尚未）生产准备就绪。在广泛使用的设备上，基本功能仍然存在问题或者至少尚未开发。

在标记的特定情况下，这应该是：

< link href = https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.cssrel =stylesheet/>< link href =https：//maxcdn.bootstrapcdn。 com /bootstrap/4.0.0/css/bootstrap.min.cssrel =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=2bb144720a66style =width：35％class =img -fluidtitle =Helloalt =World> < / DIV> < h2>我的网站!!< / h2> < div class =card> < div class =card-body> < H4>堆栈< b取代;溢出< / B个< / H4> < / DIV> < / DIV> < div class =card> < div class =card-body> < h4>< i class =fa fa-university>< / i>< strong>这真是太酷了！ < /强>< / H4> < / DIV> < / DIV> < / div>< / section>

glyphicon 与 fa 作为Bootstrap v4使用字体真棒图标，我也将徽标居中作为提醒v4使用flexbox如果您需要它（例如：在 .d-flex 中放置< h2> 按照标识对齐和分配）

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 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 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 bootstrap-4 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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！