:::

3-1 安裝 BootStrap5 來製作 RWD 自適應網站

一、關於RWD

  1. RWD(自適應設計)是目前網站系統的最基本要求,可以讓各種不同裝置都有最佳的操作體驗
  2. RWD可以自己用CSS設計,亦可使用目前的各種CSS框架,例如使用者最多的 BootStrap 框架。

二、關於 BootStrap

  1. BootStrap 框架可以迅速簡單的將網站設計成自適應網站,且有一致的風格,以及各種常用元件,遑論背後還有成千上萬的各種網路資源供使用,算是初學者入門的好選擇。
  2. BootStrap 官網:https://getbootstrap.com/
  3. BootStrap 中文網站:https://bootstrap5.hexschool.com/
  4. BootStrap 都是用 class 來套用樣式
  5. BootStrap 4 以的網格系統以 flexbox 為基礎(取代 table、floats…),因此可以做到自動等寬等高的欄位 、自動平均欄位、垂直置中等以往很難做的功能。
  6. 對 IE9(以下)不再支援,至少要用IE10才行。

三、用 npm 安裝 BootStrap 5

  1. 打開VSCode,開啟「C:\UniServerZ\www\」資料夾,並設為信任資料夾
  2. Ctrl+` 開啟終端機(亦可開啟終端機,例如 power shell,切換到網頁目錄下再執行指令)
  3. 先初始化一個專案(初始化會問一堆問題,基本上都可以直接按Enter跳過):
    npm init

    只要有裝 node.js,就會自帶npm套件管理工具,一般我們利用它來安裝各種前端套件

  4. 初始化專案後會產生 package.json 檔,此檔會紀錄我們這個專案會用到哪些前端套件,以及各個套件之間的相依性等資訊。
  5. 接著就可以安裝 BootStrap 套件
    npm install bootstrap

    bootstrap@next 表示要裝最新的版本(有可能不是正式版),不加 @next 則會安裝最新的正式版本

  6. 裝好後,會多一個 node_modules 目錄,裡面就有我們要使用的前端套件。
  7. 若欲查詢安裝的版本,可用:
    npm fund
     

:::

書籍目錄

展開 | 闔起

http%3A%2F%2Fcampus-xoops.tn.edu.tw%2Fmodules%2Ftad_book3%2Fpage.php%3Ftbsn%3D52%26tbdsn%3D1772

計數器

今天: 1533153315331533
昨天: 2198219821982198
總計: 7326391732639173263917326391732639173263917326391