73

0

Flowbite

使用 Tailwind CSS 构建的最受欢迎的交互式 UI 组件库

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

不和谐 总下载量 最新发布的 执照


文档

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

成分

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

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

入门

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

通过 NPM 要求

确保已安装Node.jsTailwind CSS

  1. 通过运行以下命令,使用 NPM 将 Flowbite 安装为依赖项:
npm i flowbite
  1. 需要 Flowbite 作为 tailwind.config.js文件内的插件:
module.exports = {

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

}
  1. 包含主 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>