Bootstrap使用说明-最新最详细教程【学习专用】

Bootstrap.jpeg

Bootstrap 是全球最流行的前端开源工具包,它支持 Sass 变量和 mixins、响应式网格系统、大量的预建组件和强大的 JavaScript 插件,助你快速设计和自定义响应式、移动设备优先的站点。

通过 npm、Composer 或 Meteor 即可安装 Bootstrap 的 Sass 和 JavaScript 源码。

通过这些软件包管理工具安装的 Bootstrap 是不包含文档或完整的构建脚本的。你还可以 使用我们提供的 npm 模板仓库 快速创建 Bootstrap 项目。

下载 Bootstrap


下载 Bootstrap 以获得编译后的 CSS 和 JavaScript 文件、源码,或者通过你所喜欢的软件包管理器,例如 npm、RubyGems 等,将 Bootstrap 添加到你的项目中。

下载 Bootstrap v5.1.3 版本经过编译并立即可用的文件,以便直接用于你的项目。下载的文件包括:

下载 Bootstrap 的 Sass、JavaScript 和文档源码,并使用你自己的电脑进行编译。此方式需要一些额外的工具:

  • Sass 编译器 用于将 Sass 源文件编译为 CSS 文件
  • Autoprefixer 用于为某些 CSS 属性添加特定于厂商的属性前缀

Bootstrap 自带的全套 构建工具 已包含在源码中,它们被用来开发 Bootstrap 及其文档,但很可能不适合用到你自己的项目中。

使用 jsDelivr 免费 CDN


使用 jsDelivr 的话可以跳过下载文件的操作,直接在你的项目中使用 Bootstrap 编译过的 CSS 和 JS 文件。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rTTiRUKnSWaDu2FjhzWFl8/JuUZMlplyWE/djenb2LoKqkgLGfEGfSrL7XDLoB1M" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-Nj1D6pu2WnJojj+67GiU9ZFNwbl7bUWX5Kj5MS22C8bGjllemM9pvQyvj14zJb58" crossorigin="anonymous"></script>

如果你使用的是经过编译的 JavaScript 文件,并且希望单独引入 Popper,那么最好是在 Popper 之后引入 Bootstrap 的 JS 文件。

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.2/dist/umd/popper.min.js" integrity="sha384-q9CRHqZndzlxGLOj+xrdLDJa9ittGte1NksRmgJKeCV9DrM7Kz868XYqsKWPpAmn" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-YSu1vEueMOXZYSSiTgjRD6egOBAdWrKI6AQBdHjTtvftX42GZLCVzwlxm0RJuipa" crossorigin="anonymous"></script>

软件包管理器(NPM)


通过一些常用的软件包管理器可以将 Bootstrap 的 源文件 添加到任何项目中。无论使用的是哪个软件包管理器,Bootstrap 都 依赖 Sass 编译器Autoprefixer 以保证编译出的文件与官方的一致。

在你的 Node.js 项目中安装 Bootstrap 的 npm 软件包

npm install bootstrap

const bootstrap = require('bootstrap')import bootstrap from 'bootstrap' 会将所有 Bootstrap 的插件加载到一个 bootstrap 对象上。 bootstrap 模块本身导出(export)所有插件。Bootstrap 的所有 jQuery 插件都放在软件包顶级目录下的 /js/dist/*.js 中,每个插件都可以独立加载。

Bootstrap 的 package.json 文件中包含以下一些元数据信息:

  • sass - 指向 Bootstrap 的 Sass 入口源码文件路径
  • style - 指向使用默认设置(没有自定义)预编译的 Bootstrap 的非压缩 CSS 文件的路径

利用 npm 和我们提供的模板项目快速上手 Bootstrap! 请前往 twbs/bootstrap-npm-starter 模板仓库,以了解如何如何在你自己的 npm 项目中构建和定制 Bootstrap。包括 Sass 编译器、Autoprefixer、Stylelint、PurgeCSS 以及 Bootstrap 图标库。

yarn

在你的 Node.js 项目中安装 Bootstrap 的 yarn 软件包

yarn add bootstrap

RubyGems

Gemfile 中添加如下代码行,然后利用 Bundler (recommended) 和 RubyGems 在你的 Ruby 项目中安装 Bootstrap:

gem 'bootstrap', '~> 5.1.3'

另外,如果你不使用 Bundler,则可以通过运行以下命令来安装 Bootstrap 的 gem 软件包:

gem install bootstrap -v 5.1.3

Composer

你还可以利用 Composer 来安装并管理 Bootstrap 的 Sass 和 JavaScript 文件:

composer require twbs/bootstrap:5.1.3

NuGet

如果你是 .NET 开发者,你还可以利用 NuGet 来安装并管理 Bootstrap 的 CSSSass 以及 JavaScript 文件。如果是新项目,建议使用 libman 或其它方式,因为 NuGet 并不是为管理前端资源而设计的。

Install-Package bootstrap
Install-Package bootstrap.sass
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容