css教學

Google對材料設計精簡版的實用介紹

William Shakespeare

Feb 22, 2025 am 09:01 AM

Google對材料設計精簡版的實用介紹

>在2014年，Google發表了材料設計規範，旨在匯總固體設計原理，跨不同平台和設備的一致用戶體驗以及技術和科學創新。

2015年7月，

看到Google Release Material Design Lite，這是一個前端圖書館，旨在使材料設計外觀和感覺更加容易地添加到網站上。

在本文中，我將重點介紹以下材料設計的基本原理和組成部分，以及如何使用材料設計Lite（MDL）庫來實施它們：

鑰匙要點

Google的材料Design Lite（MDL）是一個前端庫，可簡化材料設計美學的實現，使其更容易在各種平台上保持一致的用戶體驗。可以使用Google的CDN用於CSS和JavaScript文件，也可以通過自己下載和託管文件，並提供適用於Bower和NPM等各種環境的詳細設置說明。

密鑰MDL組件（例如佈局，卡片和選項卡）旨在響應迅速且模塊化，利用Flexbox和BEM方法來促進更結構化和可擴展的CSS體系結構。
演示項目
>本文的演示項目稱為Kaptain Kitty。這是一個HTML模板，旨在說明如何將本文中討論的材料設計概念和MDL組件應用於網頁。
>如果您想將材料設計放在其步伐上，那麼您將需要您喜歡的代碼編輯器和現代最新的瀏覽器。
您可以在Codepen上查看演示項目及其源代碼：

>在Codepen上使用sitepoint（@sitepoint）的材料設計Lite參見筆模板。

讓我們開始。

在您的項目中包括材料設計精簡版

在您的項目中包括MDL時，您有以下選項：>

>使用[Google的CDN]（內容輸送網絡）加載必要的CSS和JavaScript文件。
>下載縮小的CSS和JavaScript文件並將其託管在您的服務器上。 >

如果您使用Bower來管理項目，則可以在Bower_components文件夾中鍵入以下命令以安裝MDL庫文件：Bower install install install seltim inaters-design-lite -save-save-save

如果NPM是您選擇的軟件包管理器，請在Node_modules文件夾中運行以下命令以安裝MDL文件：NPM安裝材料 - design-lite-save-save-save

Google建議使用在其CDN上託管的CSS和JavaScript文件。這是您在本文的“演示”頁面中找到的方法。

> 首先，在HTML文檔的部分中，包括對MDL CSS文件，Google材料設計圖標和該項目的樣式表的參考，您將在其中添加自己的自定義：

接下來，就在關閉標籤之前，向MDL JavaScript文件添加引用：>

材料設計中的版式

<span><span><span><link> rel<span>="stylesheet"</span>
</span></span><span>      <span>href<span>="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css"</span>></span> 
</span><span><span><span><link> rel<span>="stylesheet"</span>
</span></span><span>      <span>href<span>="https://fonts.googleapis.com/icon?family=Material+Icons"</span>></span>
</span><span><span><span><link> rel<span>="stylesheet"</span> href<span>="css/styles.css"</span>></span></span></span></span></span>

材料設計的類型用於英語和類似英語的語言（拉丁語，希臘語和西里爾字符）是Roboto和Noto。

noto還支持諸如中文，日語和韓語等密集的腳本，以及東南亞和中東語言等高個子腳本，例如阿拉伯語，印地語等。 <script> src="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"</script>> >要在項目中包含Roboto Font文件，請在HTML文檔的部分的頂部添加以下標籤：>

對於拉丁語，希臘和西里爾字符，材料設計規范建議的印刷量表為12、14、16、20和34。您可以通過將一組特定類別添加到將MDL添加到標記。

例如，將.mdl-typography-display-2添加到

>>

和.mdl-typography-display-1中，分別添加了45px和34px的字體尺寸值：

> MDL有許多類具有印刷量表，可訪問性和可讀性原則的類。這使得更容易顯示美麗的文本內容，無論使用用於訪問它的設備而言，它都可以讀取愉快的內容。

<span><span><span><link> rel<span>="stylesheet"</span>
</span></span><span>      <span>href<span>="http://fonts.googleapis.com/css?family=Roboto:400,100,500,300italic,500italic,700italic,900,300"</span>></span></span></span>

>有關排版課程的完整列表，請訪問GitHub上的MDL版式組件頁面。

為您的MDL項目選擇顏色

請注意MDL庫樣式表文件名：。名稱指向樣式表中實現的材料設計調色板。默認調色板使用靛藍作為原色，粉紅色作為重音顏色。但是您不會被這些。以下是Material Design關於如何制定自定義調色板以及如何使用MDL實施的建議。

材料設計顏色原理

材料設計喜歡結合大膽和柔和的色彩，陰影和亮點：

顏色應該是出乎意料且充滿活力的。

Google材料設計規範

但是，這並不等於在網頁上濺起隨機顏色。相反。

材料設計提供了各種美麗的調色板，可以和諧地一起使用。為了使選擇顏色更容易，調色板中的每種顏色都有一個數字標籤以及十六進制的顏色值來識別它。材料設計指南表示500種顏色是原色。其他顏色最好用作強調顏色。

>為網站制定自定義顏色選擇時，材料設計建議您從主要調色板中挑選三種色調，並從次要調色板中挑選一種口音顏色。這是一個示例：

>將重點顏色的使用限制為鏈接，主操作按鈕以及某些組件（例如開關和滑塊）。避免使用重音顏色進行身體文本： Google對材料設計精簡版的實用介紹

>此外，材料設計指南會使用頁面大面積和應用程序欄中的重音顏色來勸阻。尤其重要的是不要在浮動動作按鈕和背景下使用相同的顏色：> Google對材料設計精簡版的實用介紹

>現在您對材料設計顏色指南有了深入的了解，現在該為您的MDL項目做出了很棒的顏色選擇了。這是如何。

Google對材料設計精簡版的實用介紹 >自定義材料設計中的默認調色板

>您可以以以下兩種方式從默認的indigo-pink調色板切換到自己的自定義調色板。

如果您使用的是Google的CDN，就像我在本文中的演示中所做的那樣，請按照以下步驟：：

>在HTML頁面的部分中的標籤的HREF屬性內找到MDL樣式表文件的URL

>替換

indigo

用您選擇的原色和

>帶有您喜歡的口音顏色。
例如，假設您從材料設計調色板中選擇的顏色是藍綠色，則是琥珀色的口音。以下是Google CDN上託管的MDL樣式表的URL。
```
<link> rel="stylesheet"
 href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css"> 
<link> rel="stylesheet"
 href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link> rel="stylesheet" href="css/styles.css">
```
你完成了！

>如果您希望在服務器上託管編譯和縮小的MDL文件，則MDL網站已涵蓋您。在這裡，您可以找到自定義和預覽工具，該工具使您可以從交互式色輪中選擇一個主要的和強調的調色板。然後，您可以為所選主題下載CSS，然後將其直接插入您的項目：>

>本文的HTML演示使用默認的indigo-Pink調色板，但是您可以使用上面概述的任何一種方法自由嘗試嘗試不同的顏色選擇。
>
> MDL佈局組件
MDL提供許多常用的Web組件，包括佈局，按鈕，卡片，開關等。開始使用材料Design Design Lite的佈局組件開始構建HTML模板的結構。

mdl將整個佈局包含在容器元素中，並帶有.mdl-layout .mdl-js-layout。
首先在您的HTML文檔的開頭標籤之後添加以下代碼片段：

MDL使用CSS Flexbox進行佈局。 .mdl-layout元素是一個彈性容器，並將flex方向屬性設置為列。
佈局組件包括以下四個子組件：>
```
<script> src="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"</script>>
>
```
導航佈局

網格

選項卡
- >頁腳
- >
透明標頭

固定抽屜，沒有標題

固定標頭
- 固定的標頭和抽屜
- 滾動標頭
- 瀑布標頭 - 在頁面滾動上收縮的標頭。
- 對於本文隨附的HTML演示，我選擇了使用選項卡組件的標籤導航。選項卡的優點在於，儘管內容分為相互排斥的屏幕，但所有部分均在同一頁面上。這意味著，當用戶單擊選項卡式導航鏈接時，他們無需等待服務器在瀏覽器中加載新頁面。所有內容都可以立即獲得，從而為現場訪問者創造了愉快的體驗。
- >快速構建標籤標題佈局，請按照以下步驟：：
請注意MDL如何使用名稱bem類組織CSS。如果您不熟悉BEM方法論，請大規模與BEM合作 - Patrick Catanzariti的頂級開發人員的建議提供了一項出色的概述。

接下來，代碼部分如下：
>

最後，您需要添加相應的內容面板：
>
```
<link> rel="stylesheet"
 href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css"> 
<link> rel="stylesheet"
 href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link> rel="stylesheet" href="css/styles.css">
```
帶有.is-Active類的面板，默認情況下將顯示。
> 在抽屜組件中放置額外內容

演示還使用抽屜部分。抽屜是一個側面面板，您可以單擊按鈕隱藏和顯示。您也可以選擇保持抽屜打開和修復，以使其內容始終保持在全視圖中。
>

>抽屜非常適合添加小部件，共享按鈕和額外的導航鏈接到網頁，而無需混亂設計。

使用您之前添加的代碼段，就在
部分之後，寫下代碼以在佈局中添加抽屜組件：
>

在行動中查看這些片段或檢查演示項目的源代碼以完整實現標籤導航和抽屜組件。
```
<script> src="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"</script>>
>
```
材料設計Lite Grid

材料設計Lite使用12列網格進行桌面屏幕，平板電腦的8列網格（最高800px）和4列網格，用於移動屏幕尺寸（高達500px）。
>您將網格列包裹在一個帶有.mdl網格的容器元素內：

默認情況下，網格列容器元素跨越屏幕的整個寬度。如果這不是您想要的，那取決於您在樣式表中定義其寬度。
例如，本文的演示項目同時實現了全屏和居中的盒子：
```
<link> rel="stylesheet"
 href="http://fonts.googleapis.com/css?family=Roboto:400,100,500,300italic,500italic,700italic,900,300">
```
通過將每個部分包裝在不同的.mdl-Grid元素中，並為盒裝部分提供一個額外的自定義類，以CSS最大寬度為960px。
html：

和CSS：

>另外，如果您想在網格列之間沒有邊距，則MDL有一個方便的類，您可以將其添加到網格列容器元素- .mdl-grid-no-spacing：
```
<h1 id="class-span-mdl-typography-display-span-gt"> class="mdl-typography--display-2"></h1>Title>
 class="mdl-typography--display-1">
 Sub-title
>
```
>

這將為您提供類似的東西：
```
<link> rel="stylesheet"
 href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.teal-amber.min.css">
```
```
<div> class="mdl-layout mdl-js-layout">
 

</div>>
```
接下來，您通過在.mdl-cell類中添加
元素來構建.mdl-Grid元素內部的列。這是3列網格的代碼：
>
如果您想覆蓋默認列大小，則需要添加一個.mdl-cell - {number} -col類，數字為1到12。這是2列網格的代碼：

>在Codepen上查看實時演示。
```
<div> class="mdl-layout
 mdl-js-layout mdl-layout--fixed-header
 mdl-layout--fixed-tabs">

</div>>
```
如果您的設計需要它，則MDL提供方便的實用程序類，以在特定的屏幕尺寸上隱藏列：
- .mdl-cell--hide-desktop隱藏了桌面屏幕尺寸（大於840px）
- .mdl-cell-擋板圖將列的列在平板電腦屏幕尺寸（大於480px）上
- > .mdl-cell-隱藏電話隱藏了移動屏幕大小（小於480px）
要查看此操作，請在不同的屏幕大小上查看演示項目的歡迎部分。您很快會注意到，列表旁邊物品旁邊的裝飾性粉紅色圓圈在小屏幕上不可見：>

材料設計Lite卡組件

> Card UI模式已經越來越流行了一段時間，尤其是由於Pinterest等網站。

這是材料設計定義卡組件的方式：

卡是一張材料，可作為更詳細信息的切入點。一張卡可以包含有關單個主題的照片，文字和鏈接。
材料設計規範

>您可以將不同類型的內容添加到一張卡中，但請確保與核心主題有關。另外，避免在卡中放置過多的信息或太多鏈接和按鈕。相反，將用戶指向專用頁面，在該頁面上，您將有關該主題的更多詳細信息。

這是您可以使用MDL卡組件將簡單卡添加到頁面上的方法：
```
<link> rel="stylesheet"
 href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css"> 
<link> rel="stylesheet"
 href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link> rel="stylesheet" href="css/styles.css">
```
>您將卡內容包裝在容器元素中，其中包括.mdl-card類。 .mdl-shadow- {number} dp類讓您可以控制落下陰影的深度：在此類中添加3、4、6、8或16，將導致更深的落下陰影。

接下來，您為以下卡部分添加一個容器：
>

卡標題，使用.mdl-card__title類

卡媒體，使用.mdl-card__media類
使用.mdl-card__supporting-text類
card文本內容
如果您的卡包含一個操作按鈕或類似元素，則使用.mdl-Card__actions類使用卡的卡操作。
>

>最後，您用適當的內容充實了這個結構
這是codepen上的實時摘要：

>請參閱codepen上的sitepoint（@sitepoint）的筆材料設計Lite卡。

>您還可以通過將適當的.mdl-card類添加到帶有.mdl-cell類的元素中，將網格單元格變成卡組件

>您可以在隨附的演示項目中找到這種方法。這是實現響應式瓷磚佈局的好方法：

<script> src="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"</script>> >

結論

本文全部旨在探索Google的材料設計Lite庫，並將其付諸實踐，以真實的HTML Web模板。 MDL不是一個全面的框架，例如Bootstrap。它沒有您的應用程序最可能需要的所有組件和样式。因此，期望自己編寫某些功能。
> 但是，圖書館仍在不斷發展，這可能會在以後的發行版中給我們一些新的東西感到驚訝。此外，網絡為設計師和開發人員提供了豐富的材料設計生態系統，其中大多數是免費的。
>您可以將本文的HTML模板與MDL網站上的模板一起使用，作為開始嘗試MDL並構建您自己的出色材料設計項目的另一種資源。
>查看我們最好的材料UI主題指南。
>
什麼是材料設計精簡版（MDL），它與材料設計有何不同？
材料設計精簡版（MDL）是Google開發的設計理念，旨在為所有設備提供統一的用戶體驗和平台。它是材料設計的較輕版本，這是一種綜合設計系統，結合了製作數字體驗的理論，資源和工具。儘管材料設計是一種完整的設計語言，其中包括大量工具，準則和組件，但MDL是該系統的子集，提供了更簡單，更輕巧的框架，易於實現。這對於想要創建現代，時尚的用戶界面而沒有完整材料設計系統的複雜性的開發人員特別有用。
>
>我如何開始使用材料設計Lite？使用材料設計精簡版，您需要在項目中包含MDL CSS和JavaScript文件。這些文件可以從官方MDL網站下載，也可以直接從內容交付網絡（CDN）下載。包含這些文件後，您可以開始使用HTML代碼中的MDL組件。 MDL網站提供了全面的文檔和示例，以幫助您了解如何使用每個組件。
>材料設計精簡版的關鍵組成部分是什麼？
材料設計Lite Lite包含您的各種組件可以用來構建用戶界面。這些包括按鈕，複選框，文本字段，滑塊等。每個組件旨在提供一致，現代的外觀和感覺，並且可以自定義以滿足您的特定需求。 MDL網站為每個組件提供詳細的文檔，包括代碼示例和使用指南。
我可以將材料設計精簡版用於商業項目嗎？它是根據Apache許可證2.0許可的，只要您遵守許可證的條款。
材料設計Lite是一個輕巧，易於使用的框架，可提供現代，時尚的外觀和感覺。它旨在使用簡單，直接的API和全面的文檔易於實現。與其他設計框架相比，MDL不那麼全面，但也不那麼複雜，這對於那些想要一個沒有完整框架的開銷的開發人員來說，它是一個不錯的選擇。

是材料設計精簡版。與所有瀏覽器兼容？

材料設計Lite的設計旨在與所有現代瀏覽器兼容，包括Chrome，Firefox，Safari和Edge。但是，在較舊的瀏覽器或不完全支持現代網絡標準的瀏覽器中，它可能無法正常工作。

我可以自定義材料設計精簡版以適合我的品牌嗎？高度可定制。您可以更改顏色，字體和其他設計元素，以匹配品牌的視覺標識。 MDL網站提供了有關如何自定義框架以滿足您需求的詳細指南。
>
>材料設計精簡版支持響應式設計嗎？
是的，材料設計Lite Lite Lite支持響應式設計。它包括一個響應式網格系統，該系統允許您創建適合不同屏幕尺寸和方向的佈局。這使得創建在台式機和移動設備上看起來都很好的網站和應用程序變得容易。
我如何為材料設計精簡版做出貢獻？歡迎社區的貢獻。您可以通過報告錯誤，建議新功能或提交代碼更改來做出貢獻。所有貢獻都應遵循該項目的貢獻指南，該指南可在MDL網站上找到。
>
>我在哪裡可以找到更多資源來了解材料設計精簡版？開始。它為所有MDL組件提供了全面的文檔，代碼示例和使用指南。此外，還有許多在線教程，文章和視頻可以幫助您更多地了解MDL以及如何在項目中有效使用它。