npm 包 @ngstarter/bootswatch-extension 使用教程

阅读时长 6 分钟读完

前言

在前端开发过程中,引用 CSS 框架可以大大减少重复工作的量,同时提升开发效率。Bootswatch 是一个基于 Bootstrap 的免费开源 CSS 框架。@ngstarter/bootswatch-extension 是一个可以让 Angular 应用使用 Bootswatch 的 Angular 包。

本文将介绍如何安装和使用 @ngstarter/bootswatch-extension 这个 npm 包,让 Angular 应用也能享受 Bootswatch 带来的好处。

安装

npm 包 @ngstarter/bootswatch-extension 可以通过 npm 安装。

使用

在 Angular 应用中,通过以下步骤引入 @ngstarter/bootswatch-extension。

  1. 在 app.module.ts 中引入样式
-- -------------------- ---- -------
------ - ------------------------- - ---- ----------------------------------
------ - -------- - ---- ----------------

-----------
  -------- -
    -- ----
    ------------------------------------
  --
--
------ ----- --------- --
  1. 在 styles.scss 中引入 Bootswatch 样式

$theme 是主题颜色变量,值是从 Bootswatch 中 theme-colors 文件中获取的颜色。

  1. 引入样式后,就可以在 HTML 中使用标准的 Bootstrap 和 Bootswatch 类。
-- -------------------- ---- -------
---- ------------------
  ---- ------------
    ---- ------------- ----------
      ----------- -- ---------------
      ---
        ---------- -- - ---------- -- ---- ------ --- --------- -- ----- ---
        --- -- ---------------- -------- --- ---- ----------- --- ------- ---
        ------ -----
      ----
    ------
    ---- ------------- ----------
      ---- -------------
        ---- ------------------ ---------- ------------
          -------
        ------
        ---- ------------------
          ---
            ----- ----- ----- --- ----- ----------- ---------- ----- -------
            ------ ------ ---- --- ---- ------------
          ----
        ------
      ------
    ------
  ------
------

示例代码

-- -------------------- ---- -------
------ - --------- - ---- ----------------

------------
  --------- -----------
  --------- -
    ---- ------------- ---------------- ----------- ------------
      -- -------------------- -----------------------------
      -------
        ----------------------
        -------------
        ----------------------
        ----------------------------
        -----------------------------
        ---------------------
        ------------------ -----------
      -
        ----- -----------------------------------
      ---------

      ---- --------------- ---------------- -------------------
        --- ----------------- ---------
          --- -----------------
            -- ---------------- ------------------
              ----- ----- -----------------------------------
            -
          -----
          --- -----------------
            -- ---------------- -----------------------------
          -----
          --- -----------------
            -- ---------------- --------------------
          -----
        -----
        ----- ------------------ ---- ---------
          ------
            ------------------- --------
            -----------
            --------------------
          --
          ------- ---------- ------------- ---- -------- --------------
            ------
          ---------
        -------
      ------
    ------
    ---- ------------------
      -------------------------------
    ------
  --
--
------ ----- ------------ -
  ----- - ----------------------------
-

结语

@ngstarter/bootswatch-extension 这个 npm 包让 Angular 应用可以轻松地引入 Bootswatch 样式,使得前端开发过程更加地高效。希望读者们能够阅读本教程并尝试使用 @ngstarter/bootswatch-extension。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/60066bcc967216659e24489d

纠错
反馈