logo标签列表

将Bootstrap更新到版本3 - 我需要做什么？

twitter-bootstraptwitter-bootstrap-3
102

我对Bootstrap还不熟悉，现在使用的是老版本2.3.2。

新版本3已经发布，如果我想使用最新版本，我是不是只需要简单地替换CSS和Javascript文件就可以了？

你可能想要了解这些更改并确保它们不会破坏你已经放置的任何内容，但是只需简单地替换文件即可。 - Patsy Issa
是的，我只是想确保我做得正确。我认为Bootstrap是有史以来最好的东西 - 它太棒了。我很想使用下一个版本。我确定我在某个地方看到过可以使用.less来管理更新，但我可能错了。 - Henry
1
可能是编写 Twitter Bootstrap 并考虑升级到 v3的重复问题。 - Bass Jobsen
请注意，即使文档中说3.0中的一切都是“流动的”，它仍然使用容器的固定像素宽度...这有点愚蠢，因为这正好与流体布局相反。 - Cerin
8个回答
阿里云服务器只需要99元/年，新老用户同享，点击查看详情
134

  1. 从http://getbootstrap.com/下载最新版本，或者替换css和js文件为最新版本，也可以使用CDN (http://www.bootstrapcdn.com/)

  2. 迁移您的html，确实需要阅读 http://bootply.com/bootstrap-3-migration-guide。您可以尝试使用 http://twitterbootstrapmigrator.w3masters.nl/ 或http://code.divshot.com/bootstrap3_upgrader/(提供待完成清单)

  3. 删除html5shiv因为TB不再支持IE7和Firefox 3.x ，添加html5shiv.js以在IE8中添加对HTML5元素的支持

  4. 添加respond.js (https://github.com/scottjehl/Respond)以支持IE中的媒体查询。请注意，这不适用于CDN，请参阅：Twitter Bootstrap 3与IE8问题

  • 如果您使用Glyphicons，您需要从http://glyphicons.getbootstrap.com/添加它们（图标已移动到单独的存储库）。自RC2以来，Glyphicons已经回来了（来自Glyphicon Halflings字体格式的180个图标）

  • 如果您使用Javascript Typeahead组件，则必须集成https://github.com/twitter/typeahead.js/（因为typeahead javascript被删除了）请参见：Typeahead problems with Bootstrap 3.0 RC1或使用“旧”插件：https://github.com/bassjobsen/Bootstrap-3-Typeahead，另请参见：https://stackoverflow.com/questions/18615964/ajax-call-in-bootstrap-3-0-typeahead/18620473

  • 切换到最新版本的jQuery 1.x（不要使用2.x版本，因为jQuery 2.x不支持IE8）

  • 如果您使用第三方小部件向您的代码添加或插入html（例如addthis.com、sharethis.com和Google地图），请为box-sizing创建一个包装器，请参见：Right border of the AddThis counter missing with Twitter's Bootstrap 3

    • 其他：

    Bootstrap 3切换到box-sizing: border-box为什么？：https://dev59.com/C2Mk5IYBdhLWcg3w6yHh#18858771

    注意不支持IE7。 https://github.com/coliff/bootstrap-ie7 尝试通过使用一些条件CSS来添加css部分。

    这听起来像是一个巨大的工程。需要多长时间完成呢？一周的工作量？一个月？六个月？ - Curt
    问题在于BS2与BS3不兼容，详情请参见http://bassjobsen.weblogs.fm/its-a-shame-the-newest-version-of-githubs-most-popular-projects-is-not-backward-compatible/。 - Bass Jobsen
    1
    如果我猜的话，我会说升级可能需要几个月时间。真是太残酷了。 - Curt
    @Curt 给我发一封电子邮件。也许我可以帮助你？ - Bass Jobsen
    您可以通过电子邮件联系我，我的邮箱是bassATw3masters.nl。 - Bass Jobsen
    显示剩余2条评论
    22

    更新于2018年

    Bootstrap 3 到 Bootstrap 4

    Bootstrap 4 升级工具（可用于从 Bootstrap 3 迁移到 4）

    Bootstrap 2 到 Bootstrap 3

    Bootstrap 3 RC1 版本已于2013年7月26日星期五发布，但还没有官方的迁移指南。

    Bootstrap 3 有很多重大变化，与 2.x 不兼容，所以不能只是简单地替换文件。不过，您可以在 Bootply 上找到一些有用的指导：

    http://bootply.com/bootstrap-3-migration-guide

    还有一个 Bootstrap 迁移工具正在开发中：https://github.com/iatek/bootstrap-migrate

    Bootstrap 2.x 到 3 的升级工具：http://upgrade-bootstrap.bootply.com/v3

    1
    来自未来的问候！这里是Bootstrap 4工具：http://upgrade-bootstrap.bootply.com - Carol Skelly
    13

    从Bootstrap 2.3迁移到3.0几乎是不可能的。版本间的变化非常巨大。我试图用Bootstrap 3.0更新我的Zend框架2项目，结果就像尝试使用IE 5打开一样混乱。

    我的建议：对于使用Bootstrap 2.X的旧项目，请继续使用Bootstrap 2.X。对于新的起始项目，请使用3.0开始。

    在我看来，这样的版本更改是Bootstrap团队犯下的一个很大的错误。他们应该逐步更新2.4、2.5、2.6等等。

    8
    我不同意“几乎不可能”的说法。迁移是完全可能的，你只需要按照提供的指导进行操作。请参考社区维基帖子中的链接。此外，遵循语义化版本号规则，主版本升级允许打破接口合约。因此，主版本号正确表示了这种可能的变更。 - Jafin
    1
    迁移非常困难。我认为这是很好的建议。虽然不是不可能，但确实很困难-与从早期版本的2.*升级到另一个2.*版本完全不同。 - d-_-b
    如果您可以搜索/替换像span12这样的模式，那么这并不是不可能的，并且会变得更加容易。 - tadman
    3
    我可以向您保证，我已经尽可能地进行了替换，甚至在单独的 CSS 文件中覆盖了 Bootstrap 的默认主题，在代码中也进行了修改，但是效果并不理想。请不要仅仅考虑 span12，而是要考虑所有的 span*、导航条、表格等等，在深度使用 Bootstrap 的情况下进行思考。 - albanx
    Bootstrap（像许多Web框架一样）遵循语义化版本控制，因此从2.*到3的更改引入了不兼容的API更改。 - Jake Berger
    我在手写网站上相当轻松地完成了升级 - 最多只花了3到4个小时。通常只需要将spanX替换为col-sm-X即可。这样做是值得的，因为您将获得诸如更快的移动性能等好处。 - niico
    1
    0

    如果您有一个包含大量文件和自定义的大型应用程序，那么每个单独的工具可能都无法回答您所面临的大多数情况。

    首先，当然，我建议尝试：https://pypi.python.org/pypi/b2tob3/0.4 但这不能满足我的需求，我分叉了这个版本并适应了自己的版本，以便能够一起迁移Bootstrap 2到3和Font Awesome 3到4，一些在b23tob3-v0.4（原始版本）中未处理的情况正在尝试在我的版本中处理。

    阅读我的帖子：http://ask.osify.com/qa/589 在github上找到我的更新：https://github.com/metrey/b2tob3 您也可以在那里找到编译后的Windows应用程序，以便立即使用。

    在使用该工具之前，始终备份您的文件并将所有内容提交到源代码控制中。

    祝你好运并分享你的想法。

    0
    0
    0
    网页内容由stack overflow 提供, 点击上面的
    可以查看英文原文，