Material Design Lite - Chân trang

Thành phần chân trang MDL có hai dạng chính: mega-footer và mini-footer. mega-footer chứa nhiều nội dung phức tạp hơn mini-footer. Chân trang lớn có thể đại diện cho nhiều phần nội dung được phân tách theo quy tắc ngang, trong khi chân trang nhỏ trình bày một phần nội dung duy nhất. Chân trang thường chứa cả nội dung thông tin và nội dung có thể nhấp, chẳng hạn như liên kết.

MDL cung cấp các lớp CSS khác nhau để áp dụng các cải tiến hình ảnh và hành vi khác nhau được xác định trước cho mega-footer và mini-footer. Bảng sau liệt kê các lớp có sẵn và tác dụng của chúng.

Sr.No.	Tên & Mô tả Lớp học
1	mdl-mega-footer Xác định vùng chứa dưới dạng thành phần MDL mega-footer. Bắt buộc đối với phần tử chân trang.
2	mdl-mega-footer__top-section Xác định vùng chứa dưới dạng phần trên cùng của chân trang. Bắt buộc đối với phần tử div "bên ngoài" phần trên cùng.
3	mdl-mega-footer__left-section Xác định vùng chứa là một phần bên trái. Bắt buộc đối với phần tử div "bên trong" phần bên trái.
4	mdl-mega-footer__social-btn Xác định một hình vuông trang trí trong mega-footer. Bắt buộc đối với phần tử nút (nếu được sử dụng).
5	mdl-mega-footer__right-section Xác định vùng chứa là một phần bên phải. Bắt buộc đối với phần tử div "bên trong" bên phải.
6	mdl-mega-footer__middle-section Xác định vùng chứa dưới dạng phần giữa chân trang. Bắt buộc đối với phần tử div "bên ngoài" phần giữa.
7	mdl-mega-footer__drop-down-section Xác định vùng chứa dưới dạng vùng nội dung thả xuống (dọc). Bắt buộc đối với các phần tử div "bên trong" thả xuống.
số 8	mdl-mega-footer__heading Xác định một tiêu đề là một tiêu đề mega-footer. Bắt buộc đối với phần tử h1 bên trong phần thả xuống.
9	mdl-mega-footer__link-list Xác định danh sách không có thứ tự dưới dạng danh sách thả xuống (dọc). Bắt buộc đối với phần tử ul bên trong phần thả xuống.
10	mdl-mega-footer__bottom-section Xác định vùng chứa dưới dạng phần dưới cùng của chân trang. Bắt buộc đối với phần tử div "bên ngoài" phần dưới cùng.
11	mdl-logo Xác định vùng chứa dưới dạng tiêu đề phần được tạo kiểu. Bắt buộc đối với phần tử div "bên trong" trong phần dưới cùng của chân trang lớn hoặc phần bên trái của chân trang nhỏ.
12	mdl-mini-footer Xác định vùng chứa như một thành phần chân trang nhỏ MDL. Bắt buộc đối với phần tử chân trang.
13	mdl-mini-footer__left-section Xác định vùng chứa là một phần bên trái. Bắt buộc đối với phần tử div "bên trong" phần bên trái.
14	mdl-mini-footer__link-list Xác định danh sách không có thứ tự là danh sách nội tuyến (ngang). Bắt buộc đối với phần tử ul đối với phần tử div "mdl-logo".
15	mdl-mini-footer__right-section Xác định vùng chứa là một phần bên phải. Bắt buộc đối với phần tử div "bên trong" bên phải.
16	mdl-mini-footer__social-btn Xác định một hình vuông trang trí trong chân trang nhỏ. Bắt buộc đối với phần tử nút (nếu được sử dụng).

Bây giờ, chúng ta hãy xem một vài ví dụ để hiểu việc sử dụng các lớp chân trang MDL để tạo kiểu cho chân trang.

Mega Footer

Hãy để chúng tôi thảo luận về việc sử dụng mdl-mega-footerlớp để bố trí nội dung trong chân trang. Các lớp MDL sau sẽ được sử dụng trong ví dụ này.

mdl-layout - Xác định một div như một thành phần MDL.
mdl-js-layout - Thêm hành vi MDL cơ bản vào div bên ngoài.
mdl-layout--fixed-header - Làm cho tiêu đề luôn hiển thị, ngay cả trong màn hình nhỏ.
mdl-layout__header-row - Xác định vùng chứa dưới dạng hàng tiêu đề MDL.
mdl-layout-title - Xác định bố cục tiêu đề văn bản.
mdl-layout__content - Xác định div là nội dung bố cục MDL.
mdl-mega-footer - Xác định vùng chứa là một thành phần MDL mega-footer.
mdl-mega-footer__top-section - Xác định vùng chứa như một phần đầu trang.
mdl-mega-footer__left-section - Xác định vùng chứa như một phần bên trái.
mdl-mega-footer__social-btn - Xác định một hình vuông trang trí trong chân trang nhỏ.
mdl-mega-footer__right-section - Xác định container như một phần bên phải.
mdl-mega-footer__middle-section - Xác định vùng chứa như một phần giữa chân trang.
mdl-mega-footer__drop-down-section - Xác định vùng chứa như một vùng nội dung thả xuống (dọc).
mdl-mega-footer__heading - Xác định một tiêu đề là một tiêu đề mega-footer.
mdl-mega-footer__link-list - Xác định danh sách không có thứ tự như một danh sách nội tuyến (ngang).
mdl-mega-footer__bottom-section - Xác định vùng chứa dưới dạng phần dưới cùng của chân trang.
mdl-logo - Xác định vùng chứa dưới dạng tiêu đề phần được tạo kiểu.

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>

Kết quả

Xác minh kết quả.

Chân trang nhỏ

Ví dụ sau sẽ giúp bạn hiểu việc sử dụng mdl-mini-footer lớp để bố trí nội dung trong chân trang.

Các lớp MDL dưới đây sẽ được sử dụng trong ví dụ này.

mdl-layout - Xác định một div như một thành phần MDL.
mdl-js-layout - Thêm hành vi MDL cơ bản vào div bên ngoài.
mdl-layout--fixed-header - Làm cho tiêu đề luôn hiển thị, ngay cả trong màn hình nhỏ.
mdl-layout__header-row - Xác định vùng chứa dưới dạng hàng tiêu đề MDL.
mdl-layout-title - Xác định bố cục tiêu đề văn bản.
mdl-layout__content - Xác định div là nội dung bố cục MDL.
mdl-mini-footer - Xác định vùng chứa như một thành phần chân trang nhỏ MDL.
mdl-mini-footer__left-section - Xác định vùng chứa như một phần bên trái.
mdl-logo - Xác định vùng chứa dưới dạng tiêu đề phần được tạo kiểu.
mdl-mini-footer__link-list - Xác định danh sách không có thứ tự như một danh sách nội tuyến (ngang).
mdl-mini-footer__right-section - Xác định container như một phần bên phải.

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>

Kết quả

Xác minh kết quả.