前言： 作為一個用習慣了bootstrap的前端小菜，今天偶然聽聞material design 這個從未聽聞的前端框架，帶著好奇開始了新的嘗試，并將bootstrap跟material design 進行對比

1、如何使用

bootstrap ? ? ? ? :引入bootstrap.css和bootstrap.js

material design： 引入materialize.css和materialize.js

2、網(wǎng)格系統(tǒng)　

bootstrap ? ? ? ? :col-lg-12 col-md-12 col-sm-12 col-xs-12 偏移： offset col-lg-offset-1?

material design: l12 m12 s12 偏移：offset-s6 pull-5 push-1 ?

3、字體排版

bootstrap ? ? ? ? :左對齊：text-left ??右對齊：text-right ??居中：text-center

material design:?左對齊：left-align ??右對齊：right-align? 居中：center-align ? ?truncate: 超出文字用省略號表示

4、媒體查詢

bootstrap ? ? ? ? :

@media (max-width: @screen-xs-max) { ... } @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... } @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... } @media (min-width: @screen-lg-min) { ... }

material design:

.hide	Hidden for all Devices
.hide-on-small-only	Hidden for Mobile Only
.hide-on-med-only	Hidden for Tablet Only
.hide-on-med-and-down	Hidden for Tablet and Below
.hide-on-med-and-up	Hidden for Tablet and Above
.hide-on-large-only	Hidden for Desktop Only

?

5、響應式圖片

bootstrap ? ? ：

.img-rounded	為圖片添加圓角 (IE8 不支持)	?
.img-circle	將圖片變?yōu)閳A形 (IE8 不支持)	?
.img-thumbnail	縮略圖功能	?
.img-responsive	圖片響應式 (將很好地擴展到父元素)

material design:?responsive-img 如果是圓形圖片，直接添加circle

6、播放視頻

bootstrap ? ： ? ? ?

material design:?

<div class="video-container"> <iframe width="853" height="480" src="//www.youtube.com/embed/Q8TXgCzxEnw?rel=0" frameborder="0" allowfullscreen></iframe> </div>

7、陰影

bootstrap ? ? ? ?:box-shadow:??投影方式?X軸偏移量?Y軸偏移量?陰影模糊半徑?陰影擴展半徑?陰影顏色; ?

material design:

? ? ? ?

8、表格

bootstrap：基本表格： table

　　　　　 ?條紋表格：table-striped

　　　　　 有邊框的表格：table-bordered?

　　　　　 ?鼠標懸停：table-hover

material design:

?　　　　有邊框：bordered

? ? ? ? ? ? 條紋表格: striped

　　　　 鼠標懸停：highlight

　　　　 居中：centerned

　　　　 響應式：responsive-table

9、按鈕

boostrap:?

material design:

?鼠標移上去數(shù)顯子菜單

鼠標點擊出現(xiàn)子菜單：

?8、表單

bootstrap:

? ? ? ?

material design:

輸入框：

輸入域：

下拉框:

單選按鈕：

多選按鈕：

開關：

上傳文件：

范圍：

日歷：

計數(shù)：

自動補全：

0、折疊面板：

bootstrap：

material design:

?

?

?

?

轉(zhuǎn)載于:https://www.cnblogs.com/ryt103114/p/6169255.html

總結(jié)

以上是生活随笔為你收集整理的Material Design学习的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。