認識一下 Material Design Lite 容器組件。

1、單行頁腳/Mini footer
MDL的單行頁腳/Mini footer組件以單行水平方式組織全部的信息：

單行頁腳一樣採用flexbox佈局，將整行分割爲左右兩種區域，並 以空格填充剩餘的行空間：

<footer class="mdl-mini-footer">
    <div class="mdl-mini-footer--left-section">...</div>
    <div class="mdl-mini-footer--right-section">...</div>
</footer>

left-section老是向左邊對齊，而right-section老是向右邊對齊。 單行頁腳內能夠放置多個left-section或right-section。

在每一個區域內，MDL預約義了兩種交互元素：連接和社交按鈕。

連接/link-list樣式應用在列表元素ul上，自動將列表成員水平排列：

<div class="mdl-mini-footer--left-section">
    <ul class="mdl-mini-footer--link-list">
        <li><a href="...">link 1</a></li>
        <li><a href="...">link 2</a></li>
        <li><a href="...">link 3</a></li>
    </ul>
</div>

社交按鈕/social-btn樣式將元素修飾爲36px正方大小的容器，能夠設置其 背景圖片來構造圖標式按鈕。

配置選項

MDL class	說明
mdl-mini-footer	聲明元素爲單行頁腳組件
mdl-mini-footer--left-section	聲明元素爲左區域容器
mdl-mini-footer--right-section	聲明元素爲右區域容器
mdl-logo	聲明元素爲logo區
mdl-mini-footer--link-list	聲明元素爲連接容器
mdl-mini-footer--social-btn	聲明元素爲36px大小的方塊區域

2、多行頁腳/Mega footer

MDL的多行頁腳/Mega footer組件能夠包含多個垂直排列的區域。當咱們須要一個複雜 的頁腳區域來呈現信息及提供交互手段時，能夠使用這個組件：

從上圖容易看出，單行頁腳/Mini footer組件至關於僅適用多行頁腳/Mega footer 組件的bottom-section區域。

當聲明爲mdl-mega-footer--link-list樣式的列表元素出如今drop-down-section 區域時，其列表項是垂直排列的。

配置選項

MDL class	說明
mdl-mega-footer	聲明元素爲多行頁腳組件
mdl-mega-footer--top-section	聲明元素爲頂部區域
mdl-mega-footer--middle-section	聲明元素爲中部區域
mdl-mega-footer--bottom-section	聲明元素爲底部區域
mdl-mega-footer--left-section	聲明元素在容器內居左
mdl-mega-footer--right-section	聲明元素在容器內居右
mdl-mega-footer--drop-down-section	聲明元素爲垂直內容區
mdl-mega-footer--link-list	聲明元素爲連接容器
mdl-mega-footer--heading	聲明元素爲標題
mdl-logo	聲明元素爲logo區
mdl-mega-footer--social-btn	聲明元素爲36px正方大小

3、柵格/Grid

MDL的柵格/Grid組件是響應式的，能夠適應不一樣屏幕分辨率的佈局要求：

柵格/Grid組件根據屏幕尺寸大小，自動地分割行寬：

• 桌面（ > 840px） - 12個單元格

• 平板（ 480px ~ 840px）- 8個單元格

• 手機（ < 480px）- 4個單元格

能夠使用mdl-cell--N-col樣式聲明單元格的寬度：

<div class="mdl-grid">
    <div class="mdl-cell mdl-cell--4-col">...</div>    
    <div class="mdl-cell mdl-cell--4-col">...</div>    
    <div class="mdl-cell mdl-cell--4-col">...</div>    
</div>

在不一樣的分辨率下，示例柵格將呈現以下：

若是咱們但願在任何狀況下，示例柵格老是顯示爲相同的列數，那麼 能夠聲明單元格在不一樣環境下的樣式：

<div class="mdl-grid">
    <div class="mdl-cell mdl-cell--6-col-desktop 
    mdl-cell--4-col-tablet mdl-cell--2-col-phone">...</div>    
    <div class="mdl-cell mdl-cell--6-col-desktop 
    mdl-cell--4-col-tablet mdl-cell--2-col-phone">...</div>    
</div>

在同一行的各單元格，默認狀況下老是拉伸/stretch其高度（採用同一行中最高單元格的高度），能夠使用 mdl-cell--bottom樣式使單元格不拉伸，並將底部對齊：

與之相似，mdl-cell--top使單元格頂部對齊，mdl-cell--middle使單元格居中對齊：

<div class="mdl-grid">
    <!--頂部對齊-->
    <div class="mdl-cell mdl-cell--top">...</div>
    <!--居中對齊-->
    <div class="mdl-cell mdl-cell--middle">...</div>
    <!--底部對齊-->
    <div class="mdl-cell mdl-cell--bottom">...</div>
</div>

配置選項

MDL class	說明
mdl-grid	將元素聲明爲grid組件
mdl-cell	將元素聲明爲grid組件的單元格cell
mdl-cell--N-col	設置單元格寬爲N（1-12），默認爲4。可選
mdl-cell--N-col-desktop	在桌面環境下設置單元格寬爲N（1-12）。可選
mdl-cell--N-col-tablet	在平板環境下設置單元格寬爲N（1-8）。可選
mdl-cell--N-col-phone	在手機環境下設置單元格寬爲N（1-4）。可選
mdl-cell--hide-desktop	在桌面環境下隱藏該單元格 。可選
mdl-cell--hide-tablet	在平板環境下隱藏該單元格。可選
mdl-cell--hide-phone	在手機環境下隱藏該單元格。可選
mdl-cell--stretch	在垂直方向拉伸單元格以充滿父元素。 這是單元格的默認值
mdl-cell--top	在垂直方向單元格頂部對齊。可選
mdl-cell--middle	在垂直方向單元格居中對齊。可選
mdl-cell--bottom	在垂直方向單元格底部對齊。可選

4、選項卡/Tabs

MDL的選項卡/Tabs組件用來在多個內容間進行切換：

選項卡/Tabs組件具備固定的HTML結構，由選項欄、選項面板等元素構成：

<!--1. 聲明組件-->
<div class="mdl-tabs mdl-js-tabs">
    <!--2. 聲明選項欄-->
    <div class="mdl-tabs__tab-bar">
        <!--2.1 聲明選項，使用href屬性指向選項面板，爲要激活的選項應用is-active樣式-->
        <a class="mdl-tabs__tab is-active" href="#panel-1">tab-1</a>
        <a class="mdl-tabs__tab" href="#panel-2">tab-2</a>
    </div>
    <!--3. 聲明選項面板，使用id屬性聲明錨點 , 爲要顯示的面板應用is-active樣式-->
    <div class="mdl-tabs__panel is-active" id="panel-1">...</div>
    <div class="mdl-tabs__panel" id="panel-2">...</div>
</div>

能夠爲組件元素應用mdl-js-ripple-effect樣式，使點擊時具備水紋動效。

配置選項

MDL class	說明
mdl-tabs	將元素聲明爲tabs組件
mdl-js-tabs	實現tabs組件的基本邏輯
mdl-tabs__tab-bar	將元素聲明爲tabs組件的導航條容器
mdl-tabs__tab	將連接元素聲明爲tabs組件的tab頁觸發器
mdl-tabs__panel	將元素聲明爲tabs組件的tab頁內容面板
is-active	將tab頁內容面板或tab頁觸發器設置爲活動狀態
mdl-js-ripple-effect	爲tab頁觸發器增長點擊時水紋效果。可選

5、卡片/Cards

MDL的卡片/Card組件很是適合顯示覆雜的、包含多種類型信息的內容：

卡片一般具備固定的寬度，而高度則根據場景不一樣，能夠固定，也能夠變化。 卡片是一種新型的界面元素，它爲用戶提供了經過單一訪問點訪問複雜信息 的手段。

使用mdl-card樣式類將外層元素聲明爲卡片組件，使用mdl-card__title 等樣式類將內層元素聲明爲標題、媒體、動做等容器：

<any class="mdl-card">
    <any class="mdl-card__title">...</any>
    <any class="mdl-card__media">...</any>
    <any class="mdl-card__supporting-text">...</any>
    <any class="mdl-card__actions">...</any>
    <any class="mdl-card__menu">...</any>
</any>

卡片組件默認爲330px寬，最小200px高，是一個主軸爲豎向的flex容器。能夠顯式地 設置其寬度和高度。

title、media、supporting-text和actions做爲flex容器成員在垂直方向 上依次排列，其高度是由內容決定，或者被顯式地設定。例如，不少時候，咱們但願給 title區域增長背景圖片以加強感染力，那麼將照片設置爲title區域的背景以後，還須要 設置title區域的高度：

<div class="mdl-card">
    <div class="mdl-card__title" style="background:url(
    /course/55adae643ad79a1b05dcbf77/img/bg.jpg) 
    no-repeat;backgroud-size:cover;height:150px;">
        ...
    </div>
</div>

menu塊被設置爲絕對定位，老是居於卡片組件的右上角。

配置選項

MDL class	說明
mdl-card	應用在外層容器，聲明元素爲卡片
mdl-card--border	爲區域增長頂部邊框，應用於actions區域和title區域
mdl-shadow--Ndp	爲卡片添加N(2~8)dp的陰影，應用在外層容器
mdl-card__title	聲明容器爲卡片標題區域，應用在內層容器
mdl-card__title-text	爲卡片標題設置合適的樣式，應用在卡片標題區域的h1~h6
mdl-card__subtitle-text	爲卡片子標題設置合適的樣式
mdl-card__media	聲明容器爲卡片媒體區域，應用在內層容器
mdl-card__supporting-text	聲明容器爲卡片正文區域，應用在內層容器
mdl-card__actions	聲明容器爲卡片正文區域，應用在內層容器
mdl-card__menu	聲明元素爲卡片菜單按鈕區
mdl-card--expand	聲明區域的flex-grow爲1，使區域自動增加以填充卡片剩餘空間

直觀的在線小練習和示例能夠訪問：http://www.hubwiz.com/course/55adae643ad79a1b05dcbf77