通过 100+ 个技巧学习 Nuxt!

use-bootstrap
usebootstrap

该模块是基于 Nuxt3 和 Bootstrap5 的前端框架的封装。

欢迎使用 use-bootstrap!👋😁

main1

文档 📗

我们建议您浏览官方网站 这里。官方网站提供了实际可用的 文档示例

ja: こちらの公式サイトを閲覧する事をオススメします。公式サイトでは実際に動作するドキュメントや実装例を掲載しています。(日本語対応してます ✨)

安装 🔧

安装 Bootstrap5 和 use-bootstrap NPM 包

npx nuxi@latest module add usebootstrap

在您的 nuxt.config 中添加 usebootstrap 部分。

export default defineNuxtConfig({
  modules: [
    'usebootstrap'
    ],
})

概念 🎤

use-bootstrap 是基于 Nuxt3 和 Bootstrap5 的前端框架。

  • 扩展的 Bootstrap5 SCSS
  • 纯 Vue.js 脚本
  • 支持 UnoCSS,nuxt-link,nuxt-image,nuxt-icon 等...
  • UI 和数据的无缝集成
  • 统一的颜色管理
  • Static_Fragment_Generator

组件

  • 手风琴
  • 警告框
  • 徽章
  • 面包屑
  • 按钮
  • 按钮组
  • 卡片
  • 轮播图
  • 关闭按钮
  • 折叠
  • 下拉菜单
  • 列表组
  • 模态框
  • 导航栏
  • 导航和标签页
  • 侧边抽屉
  • 分页
  • 占位符
  • 弹出框
  • 进度条
  • 滚动监听
  • 加载指示器
  • 提示框
  • 工具提示
  • 范围

模块

  • VueUse
  • 图标
  • 字体
  • Animate.css
  • 站点地图
  • Robots
  • UnoCSS
  • Leaflet 地图
  • Markdown

扩展组件

  • 网格模板
  • 颜色模式
  • 本地化
  • 侧边栏
  • 目录 (Toc)
  • 代码高亮
  • 介绍
  • Typed
  • Swiper
  • 分割线
  • 状态指示器
  • 图标框
  • 头像
  • 交叉动画
  • 返回顶部
  • 响应式分割线
  • Json 视图
  • 密码强度
  • Tiptap 编辑器
  • 可排序

集成组件

  • 视图状态
  • 动作状态

有关详细说明,请单击这里

许可 📄

代码在 MIT 许可证下发布。

成员 👾