引导程序: 如何识别引导程序的版本？

我想更新一个网站的引导程序，但我不知道安装的版本。

如何识别只有 bootstrap.css 和 bootstrap.min.js 文件的 bootstrap 版本？

CSS 文件中没有版本，min.js 文件包含以下注释。

/*!
* Bootstrap.js by @fat & @mdo
* Copyright 2012 Twitter, Inc.
* http://www.apache.org/licenses/LICENSE-2.0.txt
*/
290401 次浏览
小开

Bootstrap 版本将在 CSS 文件的顶部说明。只要打开它，查看文件的顶部。

例如:。

/*!
* Bootstrap v2.3.0
*
* Copyright 2012 Twitter, Inc
* Licensed under the Apache License v2.0
* http://www.apache.org/licenses/LICENSE-2.0
*
* Designed and built with all the love in the world @twitter by @mdo and @fat.
*/
小开

应该在页面的顶部说明。

差不多。

/* =========================================================
* bootstrap-modal.js v1.4.0
* http://twitter.github.com/bootstrap/javascript.html#modal
* =========================================================
* Copyright 2011 Twitter, Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
* ========================================================= */
小开
最佳答案

在 bootstrap.css的顶部，你应该有如下的评论:

/*!
* Bootstrap v2.3.1
*
* Copyright 2012 Twitter, Inc
* Licensed under the Apache License v2.0
* http://www.apache.org/licenses/LICENSE-2.0
*
* Designed and built with all the love in the world @twitter by @mdo and @fat.
*/

如果它们不在那里，那么它们可能已经被删除了。

版本:

您可以查看版本历史记录 给你。如果源代码是 v2.0.0(2012年1月)及以上版本，向下兼容不应该被破坏。如果是在 v2.0.0之前，有关于升级 给你的详细信息。

小开

要检查当前的版本，可以使用-v 作为命令行/控制台终端。

引导器 -V

Https://www.npmjs.com/package/bootstrap-cli

小开

方法1-非常简单

在 Package.json中，您将看到安装了上述版本的引导程序包。

"dependencies": {
// ...
"bootstrap": "x.x.x"
// ...
}

方法2

  1. 打开 node_modules文件夹并在该文件夹下
  2. 搜索并打开 bootstrap文件夹
  3. 现在您可以在以下文件中看到版本号
    • package.json
    • scss/bootstrap.scss或 css/bootstrap.css
    • README.md
小开

该注释看起来像是 Bootstrap v2.3.3的自定义版本，下面是。Css，注意最后一条评论:

/*!
* Bootstrap v2.3.2
*
* Copyright 2013 Twitter, Inc
* Licensed under the Apache License v2.0
* http://www.apache.org/licenses/LICENSE-2.0
*
* Designed and built with all the love in the world by @mdo and @fat.
*/

你到底想干什么？如果它是自定义的，那么您有一组文件可以使用，虽然这似乎是一个坏主意。否则，我建议使用 v4.1.x 的完整版本，因为它是当前版本。

小开

最简单的方法是找到 bootstrap 文件(bootstrap.css 或 bootstrap.min.css)并通读 docblock，您将看到类似的内容

Bootstrap v3.3.6 (http://getbootstrap.com)

小开

打开 package.json 并在依赖项下查看，应该会看到:

  "dependencies": {
...
"bootstrap-less": "^3.8.8"
...
}

角度5及以上

小开

无需搜索文件或文件夹就可以做到这一点的一个简单方法是:

  • 在浏览器上打开你的网页
  • 按 ctrl + U
  • 搜索 bootstrap.min.js 或 bootstrap.min.css，然后单击它(它会打开源文件)
  • 在第一行(注释) ，您应该看到 Bootstrap 版本
小开

您也可以通过浏览器中的 javascript 控制台检查引导版本:

看起来这个解决方案在引导4/5上运行得更好。

bootstrap.Tooltip.VERSION // => '5.2.0'

来源: https://stackoverflow.com/a/66194641/1608226(一定要投赞成票)。

这个版本最适合 Bootstrap 3。它也可以适用于 Bootstrap 4，但可能不适用于 Bootstrap 5。

$.fn.tooltip.Constructor.VERSION // => "3.3.7"

来源: https://stackoverflow.com/a/43233731/1608226(一定要投赞成票)。

在这里发帖是因为当我忘记在搜索中包含 JavaScript 时，总是会遇到这个问题，最终会出现在这个问题上，而不是上面的那个。如果这对你有帮助的话，也一定要给这个答案投赞成票。

注意: 对于旧版本的 Bootstrap (少于3个左右) ，您可能需要在页面的 JavaScript 或 CSS 文件中搜索引导程序版本。刚刚在一个使用 bootstrap 2.3.2的应用程序中发现了这个。在这种情况下，(当前)最上面的答案很可能是正确的，您需要搜索引导程序的源代码以找到它使用的版本。(增加了2020年9月18日，但自2020年8月13日以来一直在评论中)

编辑9/2/2022: 增加了适用于 Bootstrap 4/5的解决方案。

小开

详述 @ Vrian 的回答

要在浏览器中查看网站的引导程序版本，请执行以下操作:

第一种方法 :

  • 在你最喜欢的浏览器上打开网站
  • 按 Ctrl + 美国查看网页源代码
  • 查看一个名为 boostrap.min.js或 boostrap.min.css的文件的头部分
  • 然后单击它打开源文件
  • 这将显示引导版本的网站。它应该看起来像这样: Bootstrap v4.4.1 (https://getbootstrap.com/)

第二种方法 :

  • 在你最喜欢的浏览器上打开网站
  • 按 Ctrl + 换挡 + 我检查网页元素
  • 在检查控制台中，单击 样式编辑器选项卡
  • 然后点击 boostrap.min.css
  • 这将显示引导版本的网站。它应该看起来像这样: Bootstrap v4.4.1 (https://getbootstrap.com/)

Bootstrap version in console

仅此而已

希望这个能帮上忙

小开

您将在顶部的“ bootstrap.min.css/bootstrap.css”文件中看到当前的引导版本

小开

你可以在 bootstrap.min.css的博士区找到它，在顶部。

小开

您可以找到帮助您确定已成功导入的版本和少量信息，请执行以下操作:

  1. 打开浏览器。
  2. Ctrl + Shift + l 或 F12
  3. 继续搜索资源，然后在顶部，你会发现你的网址像 Http://localhost:4200下面是 styles.css。
小开

这是一个古老的问题，这些年来 Bootstrap 发生了一些变化。当我不知道我使用的是哪个版本的 Bootstrap 时，我遇到的最常见的问题之一是文件中缺少头注释/docblock。

这个答案是在5.1.3和4.6.1发布之后写的。如果您更新它，请更新这些版本号码！

下面是我发现的(感谢 https://getbootstrap.com/docs/versions/和 https://github.com/twbs/bootstrap/releases)使用特性嗅探找出您正在使用的版本的方法。注意，这个列表只包含 CSS 部分！

V5

V5.1-添加了 .placeholder和 .placeholder-glow类
删除了 .media并添加了 xxl断点(.col-xxl-12)

V4

V4.6-增加 .navbar-nav-scroll类
增加了 .user-select-none，.user-select-auto和 .user-select-none类
4.4-增加了 .row-cols-*类
增加了 .stretched-link和 .text-break类
增加了 .font-weight-lighter和 .font-weight-bolder类
增加了 .table-borderless和 .text-monospace类
删除了 .img-responsive。增加了 .img-fluid

第三版

V3.4-增加 .row-no-gutters类
增加了 .media-left和 .media-right类
V3.2-增加 .sr-only-focusable类
增加了 .text-justify、 .modal-sm和 .modal-lg类
删除了 .span#类，增加了 .col-X-#类

  • # 是一个从1到12的数字
  • X 是 xs、 sm、 md或 lg中的一个

V2

增加了 .text-left、 .text-center和 .text-right类
V2.2-增加 .media类
V2.1-增加了 .uneditable-input和 .uneditable-textarea类
V2.0-增加了 .table和 .table-*类

V1

增加了 .condensed-table类
增加了 .thumbnail类
增加了 .one-third .two-thirds类

据我所知，之前的一切都不可靠。


提交答案