免费开源 Bootstrap 5 UI 套件

大家好，开发者们👋🏻

今天我想向大家展示一个 Bootstrap 5 UI 套件，我和我的朋友已经开发了大约一年。一年前的第一个版本是基于 Bootstrap 4 的，但现在 Bootstrap 5 已经更新到 Beta 版本，我们觉得是时候再次更新整个套件了。

我们使用 NPM、Gulp 和 Sass 来管理库、编译源文件，并使用 Sass 中的变量和混合更轻松地更改和更新样式。

Pixel Bootstrap 5 UI Kit 包含 80 多个 UI 组件，包括日期选择器、模式、定价卡、个人资料卡、博客卡以及 5 个示例页面。

工作流程

最流行的 CSS 框架 Bootstrap
高效的工作流程工具 Gulp
超棒的 CSS 预处理器 Sass

所以不用多说，让我向您展示如何安装和使用这个基于 Bootstrap 5 的 UI 套件。

快速启动

从Themesberg免费下载或在 Github 上克隆存储库
确保您的机器上安装了 Node 和 NPM
下载 Gulp 命令行界面以便能够在终端中使用 gulp：

npm install gulp-cli -g

安装 Gulp 后，npm install在主目录下的“pixel/”文件夹中运行，下载所有项目依赖项。它们会在该node_modules/文件夹中找到。
在pixel/文件夹中运行gulp，使用BrowserSync提供项目文件。运行gulp将编译主题并/index.html在主浏览器中打开。

gulp 命令运行时，将监视assets/scss/、assets/js/和文件夹中文件的更改。文件夹中的文件将生成注入的 CSS。components/assets/scss/

点击CTRL+C终止 gulp 命令。这将停止本地服务器的运行。

无需 Sass、Gulp 或 Npm 的主题

如果您想要一个不包含 Sass、Gulp 或 Npm 的主题版本，我们也为您提供了帮助。运行以下命令：

gulp build:dev

这将生成一个html&css包含未缩小的 CSS、Html 和 Javascript 的文件夹。

缩小版本

如果您想编译代码并获取 HTML 和 CSS 的最小化版本，只需运行以下 Gulp 命令：

gulp build:dist

这将生成一个dist包含最小化的 CSS、Html 和 Javascript 的文件夹。

文档

Pixel Bootstrap UI Kit 的文档托管在我们的网站上。

文件结构

在下载内容中，您将找到以下目录和文件：

Pixel Bootstrap UI Kit
.
├── LICENSE
├── README.md
├── dist
│   ├── assets
│   ├── css
│   ├── html
│   ├── index.html
│   └── vendor
├── gulpfile.js
├── html&css
│   ├── assets
│   ├── css
│   ├── html
│   ├── index.html
│   └── vendor
├── package-lock.json
├── package.json
└── src
    ├── assets
    ├── html
    ├── index.html
    ├── partials
    └── scss