透過 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)
  • 程式碼高亮
  • 介紹
  • 打字效果
  • Swiper
  • 分隔線
  • 狀態指示器
  • 圖示框
  • 頭像
  • 交叉動畫
  • 回到頂部
  • 響應式分隔線
  • Json 視圖
  • 密碼強度
  • Tiptap 編輯器
  • 可排序

整合元件

  • ViewState
  • ActionState

如需詳細說明,請點擊這裡

授權 📄

程式碼以 MIT 授權釋出。

成員 👾