Material Design Lite - 頁尾

上一頁
下一頁

MDL 頁尾元件主要有兩種形式：大型頁尾和小型頁尾。大型頁尾包含比小型頁尾更復雜的內容。大型頁尾可以表示由水平線分隔的多個內容部分，而小型頁尾則呈現單個內容部分。頁尾通常包含資訊性和可點選的內容，例如連結。

MDL 提供各種 CSS 類來應用各種預定義的視覺和行為增強功能到大型頁尾和小型頁尾。下表列出了可用的類及其效果。

序號 類名及描述
1

mdl-mega-footer

將容器識別為 MDL 大型頁尾元件。頁尾元素需要此類。
2

mdl-mega-footer__top-section

將容器識別為頁尾頂部區域。頂部區域“外部”div 元素需要此類。
3

mdl-mega-footer__left-section

將容器識別為左側區域。左側區域“內部”div 元素需要此類。
4

mdl-mega-footer__social-btn

識別大型頁尾內的裝飾性正方形。按鈕元素（如果使用）需要此類。
5

mdl-mega-footer__right-section

將容器識別為右側區域。右側區域“內部”div 元素需要此類。
6

mdl-mega-footer__middle-section

將容器識別為頁尾中間區域。中間區域“外部”div 元素需要此類。
7

mdl-mega-footer__drop-down-section

將容器識別為下拉（垂直）內容區域。下拉“內部”div 元素需要此類。
8

mdl-mega-footer__heading

將標題識別為大型頁尾標題。下拉區域內的 h1 元素需要此類。
9

mdl-mega-footer__link-list

將無序列表識別為下拉（垂直）列表。下拉區域內的 ul 元素需要此類。
10

mdl-mega-footer__bottom-section

將容器識別為頁尾底部區域。底部區域“外部”div 元素需要此類。
11

mdl-logo

將容器識別為樣式化的部分標題。大型頁尾底部區域或小型頁尾左側區域中的“內部”div 元素需要此類。
12

mdl-mini-footer

將容器識別為 MDL 小型頁尾元件。頁尾元素需要此類。
13

mdl-mini-footer__left-section

將容器識別為左側區域。左側區域“內部”div 元素需要此類。
14

mdl-mini-footer__link-list

將無序列表識別為內聯（水平）列表。“mdl-logo”div 元素的同級 ul 元素需要此類。
15

mdl-mini-footer__right-section

將容器識別為右側區域。右側區域“內部”div 元素需要此類。
16

mdl-mini-footer__social-btn

識別小型頁尾內的裝飾性正方形。按鈕元素（如果使用）需要此類。

現在，讓我們看幾個例子來了解使用 MDL 頁尾類來設定頁尾樣式。

大型頁尾

讓我們討論一下如何使用mdl-mega-footer類在頁尾中佈局內容。以下 MDL 類將在此示例中使用。

  • mdl-layout − 將 div 識別為 MDL 元件。

  • mdl-js-layout − 向外部 div 新增基本的 MDL 行為。

  • mdl-layout--fixed-header − 使標題始終可見，即使在小螢幕上。

  • mdl-layout__header-row − 將容器識別為 MDL 標題行。

  • mdl-layout-title − 識別佈局標題文字。

  • mdl-layout__content − 將 div 識別為 MDL 佈局內容。

  • mdl-mega-footer − 將容器識別為 MDL 大型頁尾元件。

  • mdl-mega-footer__top-section − 將容器識別為頁尾頂部區域。

  • mdl-mega-footer__left-section − 將容器識別為左側區域。

  • mdl-mega-footer__social-btn − 識別小型頁尾內的裝飾性正方形。

  • mdl-mega-footer__right-section − 將容器識別為右側區域。

  • mdl-mega-footer__middle-section − 將容器識別為頁尾中間區域。

  • mdl-mega-footer__drop-down-section − 將容器識別為下拉（垂直）內容區域。

  • mdl-mega-footer__heading − 將標題識別為大型頁尾標題。

  • mdl-mega-footer__link-list − 將無序列表識別為內聯（水平）列表。

  • mdl-mega-footer__bottom-section − 將容器識別為頁尾底部區域。

  • mdl-logo − 將容器識別為樣式化的部分標題。

mdl_megafooter.htm

即時演示 
<html>
   <head>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
   </head>
   
   <body>
      <div class = "mdl-layout mdl-js-layout mdl-layout--fixed-header">
         <header class = "mdl-layout__header">
            <div class = "mdl-layout__header-row">      
               <span class = "mdl-layout-title">Material Design Tabs</span>          
            </div>       
         </header>     
         
         <main class = "mdl-layout__content">    
            <footer class = "mdl-mega-footer">
               <div class = "mdl-mega-footer__top-section">
                  <div class = "mdl-mega-footer__left-section">
                     <button class = "mdl-mega-footer__social-btn">1</button>
                     <button class = "mdl-mega-footer__social-btn">2</button>
                     <button class = "mdl-mega-footer__social-btn">3</button>
                  </div>
                  
                  <div class = "mdl-mega-footer__right-section">
                     <a href = "">Link 1</a>
                     <a href = "">Link 2</a>
                     <a href = "">Link 3</a>
                  </div>
               </div>
               
               <div class = "mdl-mega-footer__middle-section">
                  <div class = "mdl-mega-footer__drop-down-section">
                     <h1 class = "mdl-mega-footer__heading">Heading </h1>
                     <ul class = "mdl-mega-footer__link-list">
                        <li><a href = "">Link A</a></li>
                        <li><a href = "">Link B</a></li>      
                     </ul>
                  </div>  
               
                  <div class = "mdl-mega-footer__drop-down-section">
                     <h1 class = "mdl-mega-footer__heading">Heading </h1>
                     <ul class = "mdl-mega-footer__link-list">
                        <li><a href = "">Link C</a></li>
                        <li><a href = "">Link D</a></li>      
                     </ul>
                  </div>  	
               </div>
            
               <div class = "mdl-mega-footer__bottom-section">
                  <div class = "mdl-logo">
                     Bottom Section
                  </div>
                  <ul class = "mdl-mega-footer__link-list">
                     <li><a href = "">Link A</a></li>
                     <li><a href = "">Link B</a></li>
                  </ul>
               </div>
            
            </footer>
         </main>
      </div>
   </body>
</html>

結果

驗證結果。

小型頁尾

以下示例將幫助您瞭解如何使用mdl-mini-footer類在頁尾中佈局內容。

以下 MDL 類將在此示例中使用。

  • mdl-layout − 將 div 識別為 MDL 元件。

  • mdl-js-layout − 向外部 div 新增基本的 MDL 行為。

  • mdl-layout--fixed-header − 使標題始終可見，即使在小螢幕上。

  • mdl-layout__header-row − 將容器識別為 MDL 標題行。

  • mdl-layout-title − 識別佈局標題文字。

  • mdl-layout__content − 將 div 識別為 MDL 佈局內容。

  • mdl-mini-footer − 將容器識別為 MDL 小型頁尾元件。

  • mdl-mini-footer__left-section − 將容器識別為左側區域。

  • mdl-logo - 將容器識別為樣式化的部分標題。

  • mdl-mini-footer__link-list − 將無序列表識別為內聯（水平）列表。

  • mdl-mini-footer__right-section − 將容器識別為右側區域。

mdl_minifooter.htm

即時演示 
<html>
   <head>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
   </head>
   
   <body>
      <div class = "mdl-layout mdl-js-layout mdl-layout--fixed-header">
         <header class = "mdl-layout__header">
            <div class = "mdl-layout__header-row">      
               <span class = "mdl-layout-title">Material Design Tabs</span>          
            </div>       
         </header>     
         
         <main class = "mdl-layout__content">    
            <footer class = "mdl-mini-footer">
               <div class = "mdl-mini-footer__left-section">
                  <div class = "mdl-logo">
                     Copyright Information
                  </div>
                  <ul class = "mdl-mini-footer__link-list">
                     <li><a href = "#">Help</a></li>
                     <li><a href = "#">Privacy and Terms</a></li>
                     <li><a href = "#">User Agreement</a></li>
                  </ul>
               </div>
               
               <div class = "mdl-mini-footer__right-section">
                  <button class = "mdl-mini-footer__social-btn">1</button>
                  <button class = "mdl-mini-footer__social-btn">2</button>
                  <button class = "mdl-mini-footer__social-btn">3</button>
               </div>
            
            </footer>
         </main>
      </div>
   </body>
</html>

結果

驗證結果。

列印頁面
上一頁
下一頁
廣告

© . All rights reserved.