Flowbite

在 Tailwind CSS 之上使用组件更快地构建网站

文档

如需完整文档，请访问flowbite.com。

成分

Flowbite 是使用 Tailwind CSS 中的实用程序类构建的 UI 组件的开源集合，您可以在编写用户界面和网站时将其用作起点。

警报	徽章	面包屑
纽扣	按钮组	牌
落下	形式	列表组
排版	模态	标签
导航栏	分页	时间线
进度条	表	吐司
工具提示	日期选择器	微调器
页脚	手风琴	侧边栏
旋转木马	阿凡达	评分
输入字段	文件输入	搜索输入
选择	文本区域	复选框
收音机	切换	范围滑块
浮动标签	超级菜单	骨骼
KBD（键盘）	抽屉（画布）	弹出框
视频	标题	段落
块引用	图片	列表
关联	文本	水平线 (HR)

入门

Flowbite 可以作为插件包含在现有的 Tailwind CSS 项目中，它应该通过使用 Tailwind CSS 的实用程序类构建的一组 Web 组件来帮助您更快地构建网站。

通过 NPM 要求

确保已安装Node.js和Tailwind CSS。

1. 通过运行以下命令，使用 NPM 将 Flowbite 安装为依赖项：

npm i flowbite

2. 需要 Flowbite 作为 tailwind.config.js文件内的插件：

module.exports = {

    plugins: [
        require('flowbite/plugin')
    ]

}

3. 包含主 JavaScript 文件以使交互元素工作：

<script src="../path/to/flowbite/dist/flowbite.js"></script>

如果你使用 Webpack 或其他打包工具，你也可以像这样导入它：

import 'flowbite';

通过 CDN 包含

开始使用 FlowBite 的最快方法是通过 CDN 将 CSS 和 JavaScript 简单地包含到您的项目中。

head在标签内需要以下缩小的样式表：

<link rel="stylesheet" href="https://unpkg.com/flowbite@latest/dist/flowbite.min.css" />

并在 body元素末尾包含以下 javascript 文件：

<script src="https://unpkg.com/flowbite@latest/dist/flowbite.js"></script>