:::

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. 先安裝最新版 BootStrap,開啟終端機,例如 power shell,先切換到網頁目錄下,並將底下XAMPP預設的檔案及目錄都刪除無妨
  2. 先初始化一個專案(初始化會問一堆問題,基本上都可以按Enter跳過):
    cd C:\您的網頁目錄路徑
    npm init

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

  3. 初始化專案後會產生 package.json 檔,此檔會紀錄我們這個專案會用到哪些前端套件,以及各個套件之間的相依性等資訊。
  4. 接著就可以安裝 BootStrap 套件 ,按 Ctrl+` 開啟終端機,並貼上:
    npm install bootstrap@next

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

  5. 裝好後,會多一個 node_modules 目錄,裡面就有我們要使用的前端套件。

:::

書籍目錄

展開 | 闔起

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

計數器

今天: 4198419841984198
昨天: 5069506950695069
總計: 5134646513464651346465134646513464651346465134646