XOOPS輕鬆架 - 線上書籍

:::

PHP8入門
======

### 一、關於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\`」資料夾，並設為信任資料夾 
 ![](https://campus-xoops.tn.edu.tw/uploads/tad_book3/image/52/Code_ZpjR7kDMSp.png)
2. 按 <kbd>Ctrl</kbd>+<kbd>`</kbd> 開啟終端機（亦可開啟終端機，例如 power shell，切換到網頁目錄下再執行指令）
3. 先初始化一個專案（初始化會問一堆問題，基本上都可以直接按Enter跳過）： 
 ```bash
 npm init
 ```
 
 只要有裝 `node.js`，就會自帶npm套件管理工具，一般我們利用它來安裝各種前端套件
4. 初始化專案後會產生 `package.json` 檔，此檔會紀錄我們這個專案會用到哪些前端套件，以及各個套件之間的相依性等資訊。
5. 接著就可以安裝 BootStrap 套件 
 ```bash
 npm install bootstrap
 ```
 
 `bootstrap@next` 表示要裝最新的版本（有可能不是正式版），不加 `@next `則會安裝最新的正式版本
6. 裝好後，會多一個 `node_modules` 目錄，裡面就有我們要使用的前端套件。
7. 若欲查詢安裝的版本，可用： 
 ```bash
 npm fund
 ```

:::

書籍目錄

展開 | 闔起

快速登入

進階搜尋

https%3A%2F%2Fcampus-xoops.tn.edu.tw%2Fmodules%2Ftad_book3%2Fmarkdown.php%3Ftbdsn%3D1772

計數器

今天：
昨天：
總計：

MarkDown

書籍目錄

快速登入

計數器