Boostrap 下载
下载Bootstrap以获取编译的CSS和JavaScript、源代码,或将其与包管理器(如npm、RubyGems等)一起使用。
编译的CSS和JS
下载 Bootstrap v5.3.3 的现成编译代码,以便轻松放入项目,其中包括:
这并不包括文档、源文件或任何可选的JavaScript依赖,如Popper。
源码文件
通过下载我们的源Sass、JavaScript和文档文件,使用您自己的资源编译Bootstrap。此选项需要一些工具:
- Sass 编译器 把Sass源文件编译成css文件
- Autoprefixer 为css增加兼容前缀
如果您需要我们的构建工具,它们可以用于开发Bootstrap及其文档,但它们可能不适合您自己的用途。
示例
果你想获在我们的全部 examples,可以点击这里下载 :
通过CDN jsDelivr
不用下载,以CDN引用方式将Bootstrap编译的CSS和JS的缓存版本交付给您的项目。
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Y3IQOsa3niuvpqakr8NIT3EETRv0G6tFumi3detLTSYuXBc6XxbPEt9sOg6OcLgO" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-r5kRSTMtRNVfwqCvIzNkemSRRqsQB3BJN5m7GjomHUT+81f70U37lfRUk9tJSSQO" crossorigin="anonymous"></script>
如果您正在使用我们编译的JavaScript,并且希望单独包含Popper,请在JS之前添加Popper,最好通过CDN。
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" integrity="sha384-BRzTbsDillcZ9cJS3keZSZIggjuMr6yO0NydiQOk5xguSoFlRpj4FALnfgmFMjai" crossorigin="anonymous"></script>
其他 CDN
我们推荐 jsDelivr,并在我们的文档中使用了它。不过,在某些情况下,比如在某些特定国家或环境中,您可能需要使用其他 CDN 提供商,如 cdnjs 或 unpkg。
请注意,您应该比较相同长度的哈希值,例如 sha384
和 sha384
,否则它们可能会不同。因此,您可以使用 SRI Hash Generator 等在线工具来确保给定文件的哈希值相同。或者,假设你已经安装了 OpenSSL,也可以通过 CLI 实现同样的功能:
openssl dgst -sha384 -binary bootstrap.min.js | openssl base64 -A
包管理器
将 Bootstrap 的源文件导入到几乎所有使用最流行的软件包管理器的项目中。无论使用哪种软件包管理器,Bootstrap 都需要使用 Sass 编译器 和 Autoprefixer,以便与我们的官方编译版本相匹配。
npm
使用 npm 软件包 在 Node.js 支持的应用程序中安装 Bootstrap:
npm install bootstrap@5.3.3
const bootstrap = require('bootstrap')
或 import bootstrap from 'bootstrap'
将把 Bootstrap 的所有插件加载到 bootstrap 对象中。Bootstrap 模块本身导出了我们所有的插件。您可以通过加载软件包顶层目录下的 /js/dist/*.js
文件来手动加载 Bootstrap 的各个插件。
Bootstrap 的 package.json
包含以下一些附加元数据:
sass
- Bootstrap主 Sass 源文件的路径style
- 指向使用默认设置编译的 Bootstrap 非最小化 CSS 的路径(无自定义设置)
yarn
使用yarn 包在Node.js应用中安装Bootstrap:
yarn add bootstrap@5.3.3
RubyGems
使用Bundler(推荐)和 RubyGems 在Ruby应用程序中安装Bootstrap,方法是在Gemfile
中添加以下行:
gem 'bootstrap', '~> 5.3.3'
另外,如果不使用 Bundler,也可以运行此命令安装 gem:
gem install bootstrap -v 5.3.3
Composer
您还可以使用 Composer 安装和管理 Bootstrap 的 Sass 和 JavaScript:
composer require twbs/bootstrap:5.3.3
NuGet
如果使用 .NET Framework 开发,还可以使用 NuGet 安装和管理 Bootstrap 的CSS 或 Sass 和 JavaScript。较新的项目应使用 libman 或其他方法,因为 NuGet 是为编译代码而不是前端资产设计的。
Install-Package bootstrap
Install-Package bootstrap.sass