About one month ago we found out that the first version of Bootstrap 5 alpha has been officially released with some of the most important changes being removing jQuery as a dependency, dropping support for IE 10 and 11, and generally improving the markup and stylesheets for the most popular CSS framework in the world.
大约一个月前，我们发现Bootstrap 5 alpha的第一个版本已正式发布 ，其中一些最重要的更改是删除jQuery作为依赖项，放弃了对IE 10和11的支持，并总体上改进了该版本的标记和样式表世界上最流行CSS框架。
Although it’s still just an alpha version and using Bootstrap 5 in production may be risky due to unforeseen bugs it might be a good idea to start working around with the new version of the framework and more importantly if you’ve been accustomed to using jQuery this change may make you consider using Vanilla JS by default.
尽管它仍然只是一个Alpha版本，但由于无法预见的错误，在生产中使用Bootstrap 5可能会有风险，但开始使用新版本的框架可能是一个好主意，更重要的是，如果您已经习惯于使用jQuery，更改可能会让您考虑默认使用Vanilla JS。
In this Bootstrap 5 tutorial we will show you how to set up a working environment with Sass and Gulp, create a simple blog page and see how to use the framework using Vanilla JS. Here’s the table of contents:
在这个Bootstrap 5教程中，我们将向您展示如何使用Sass和Gulp设置工作环境，创建一个简单的博客页面，以及如何使用Vanilla JS使用该框架。 这是目录：
- Building tools: set up Bootstrap 5 with Sass, Gulp 4 and BrowserSync 构建工具：使用Sass，Gulp 4和BrowserSync设置Bootstrap 5
- Creating a simple blog page with the new markup 使用新标记创建一个简单的博客页面
- Changing some colors, sizings and fonts in the new Sass variables file 在新的Sass变量文件中更改一些颜色，大小和字体
- Working with Vanilla JS instead of jQuery 使用Vanilla JS而不是jQuery
- Exploring the new Utility API 探索新的Utility API
具有Sass，Gulp 4和BrowserSync的Bootstrap 5 (Bootstrap 5 with Sass, Gulp 4 and BrowserSync)
Although you can quickly get started using Bootstrap 5 by including the stylesheet and scripts via CDN, we recommend using Sass to make use of all of the features of the new version of the CSS framework.
尽管您可以通过CDN包含样式表和脚本来快速开始使用Bootstrap 5，但我们建议您使用Sass来利用CSS框架新版本的所有功能。
About a month ago we wrote a tutorial on how you can set up Bootstrap, Sass, Gulp and BrowerSync, so if you want a more detailed walkthrough of process you can read that guide.
大约一个月前，我们写了一个教程你如何设置引导，萨斯，咕嘟咕嘟和BrowerSync，所以如果你要处理的更详细的演练中，您可以阅读该手册。
Prerequisites:
先决条件：
Node — make sure you have Node.js installed and that it is accessible via the terminal
节点 -确保已安装Node.js ，并且可以通过终端对其进行访问
Gulp — after you have Node successfully installed, make sure you also install Gulp’s CLI.
Gulp-成功安装Node后，请确保还安装Gulp的CLI 。
After you have installed Node on your machine, run the following command in your terminal to globally install the Gulp CLI (command line interface):
在计算机上安装Node之后，在终端中运行以下命令以全局安装Gulp CLI(命令行界面)：
npm install --global gulp-cli
npm install --global gulp-cli
This is how the folder structure will look at the end of this tutorial:
这是本教程结尾处文件夹结构的外观：
.
├── app
│ ├── css
│ │ └── themesberg.css
│ ├── index.html
│ ├── js
│ │ └── themesberg.js
│ └── scss
│ ├── _utilities.scss
│ ├── _variables.scss
│ └── themesberg.scss
├── gulpfile.js
├── package-lock.json
└── package.jsonNote: get the files from the public Github repository.
注意：从公共Github存储库获取文件。
安装NPM依赖项 (Installing NPM dependencies)
We’re going to need to pull in Gulp, BrowserSync, Gulp Sass and Bootstrap 5 Alpha as a dependency through NPM. But first, we need to create a local package.json file by running the following command:
我们将需要通过NPM引入Gulp，BrowserSync，Gulp Sass和Bootstrap 5 Alpha作为依赖项。 但是首先，我们需要通过运行以下命令来创建本地package.json文件：
npm init
npm init
You will be asked to give the project a name, description and so on. Most of the details are optional and you can just “enter your way through”. After you have finished the process a new package.json file will be created.
系统将要求您为项目提供名称，描述等。 大多数细节都是可选的，您可以“直接输入”。 完成此过程后，将创建一个新的package.json文件。
Afterwards you will need to run the following command to actually install the dev dependencies:
之后，您将需要运行以下命令以实际安装dev依赖项：
npm install browser-sync gulp gulp-sass --save-dev
npm install browser-sync gulp gulp-sass --save-dev
Make sure to also run the following command to install the latest version of Bootstrap 5:
确保还运行以下命令来安装最新版本的Bootstrap 5：
npm install bootstrap@next --save
npm install bootstrap@next --save
Note: if the above command does not install Bootstrap 5 anymore (this will happen if it becomes the stable default version) make sure to visit the official NPM versioning page to see how to include it via the package manager system.
注意 ：如果以上命令不再安装Bootstrap 5(如果它成为稳定的默认版本，则会发生)，请确保访问官方的NPM版本控制页面，以了解如何通过软件包管理器系统将其包括在内。
创建一个gulpfile来编译Sass文件，并通过BrowserSync创建本地服务器 (Create a gulpfile to compile Sass files and create a local server via BrowserSync)
First of all you will need to create a local “gulpfile.js” at the root