CSS 框架

重要度:⭐⭐⭐⭐難度:⭐⭐

框架

透過使用現成的CSS框架你可以使用現成的 CSS 內容，使用框架將大幅加快設計與開發的速度，有客製化需求時，只要稍微修改即可。

目前常見CSS框架:

1. Bootstrap 優點:使用者社群龐大 品質良好的中文文檔 缺點:多數網站風格雷同。

2. Materialize 優點: 簡單 內建功能多 品質良好的中文文檔 缺點:JavaScript元件較複雜

3. Semantic UI 優點: 元素名稱語意化易懂 分類詳細 缺點: 中文文檔翻譯緩慢

4. Foundation 優點:自定義自由度高 缺點:複雜 上手難度高

本章節範例均採用對新手較友善的Materialize。

不少框架官網會提供預製模板，新手可透過自行修改模板的方式，進行學習與實驗。

語法各個框架各有不同，請依照該框架文檔規範為主。

你可以透過 CDN 引入 CSS 框架。

內容傳遞網路（英語：Content Delivery Network或Content Distribution Network，縮寫：CDN）是指一種透過網際網路互相連接的電腦網路系統，利用最靠近每位使用者的伺服器，更快、更可靠地將音樂、圖片、影片、應用程式及其他檔案傳送給使用者，來提供高效能、可擴展性及低成本的網路內容傳遞給使用者。

在〈HTML、CSS 與 JavaScript 〉我們便提到引入順序是很非常重要的，你必須基於依賴性或效能考量來調整引入順序，例如:你必須在 materialize.js 與 bootstrap.js 之前引入 jQuery，因為其js插件依賴 jQuery，有時錯誤的引入順序將導致框架無法適用或是產生較長的延遲。

有興趣可以在 CSS的優先順位 與 谈谈 <script> 标签以及其加载顺序问题，包含 defer & async 找到更多資訊。

你看到在這裡我又談到 <script> ，因為這三者密不可分，大致上他們引入的邏輯是一樣的，有依賴性的在被依賴者引入後引入。

網格

幾乎所有CSS框架都有網格功能，其將整體頁面分為12列，你可以透過推、拉與偏移來分配格子。

我會時常透過 7:5 或 6:6(1:1)的網格來設置圖片與文字說明。

我們可以針對特定大小的螢幕來創建布局

分別對應下列格式。

<div class="col s12 m4 l3"></div>

s12 : 12-columns-wide on small screens

m4 : 4-columns-wide on medium screens

l3 : 3-columns-wide on large screens

為南湖校刊社設計的介紹版面

在此範例中，我使用了 row 類別來讓圖片與文章在畫面小於一定大小時上下排列。

<div class="container" id="about_us">
	<div class="col m12" align="center">
		<div class="block_line">&nbsp;</div> <!-- 此處block_line類別 CSS 代碼可嘗試自行撰寫 -->
			<h3 id="title_2" class="wow animate__ animate__fadeInLeft animated" style="visibility: visible; animation-name: fadeInLeft;">關於我們</h3>
		</div>
		<div class="row">
			<div class="col m6 s12"> 
				<article>
					南湖校刊社至今已發行17期校刊，內容豐富多元，至18期開始為切合時尚潮流改以圖文並茂的雜誌風格為主。
					至成立以來便已「橘」然不同作為座右銘，以製作出獨樹一幟的校刊為目標到現在。
				</article>
		</div>
		<div class="col m6 s12">
			<img class="responsive-img" src="image/op2.png">
		</div>
	</div>
</div>

container 容器

容器將內容置中並將寬度大致設為頁面的70%。

組合元件

你可以藉由組合元件，來完成更複雜的設計。

簡單的卡片與icon搭配就可以達到很好的效果