Material Design Lite - ท้ายกระดาษ

ส่วนประกอบส่วนท้ายของ MDL มีสองรูปแบบหลัก: mega-footer และ mini-footer. mega-footer มีเนื้อหาที่ซับซ้อนกว่า mini-footer mega-footer สามารถแสดงเนื้อหาได้หลายส่วนซึ่งคั่นด้วยกฎแนวนอนในขณะที่ส่วนท้ายสั้นจะแสดงเนื้อหาส่วนเดียว โดยทั่วไปส่วนท้ายจะมีทั้งเนื้อหาที่ให้ข้อมูลและคลิกได้เช่นลิงก์

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

ระบุรายการที่ไม่เรียงลำดับเป็นรายการแบบอินไลน์ (แนวนอน) จำเป็นสำหรับองค์ประกอบ ul ที่เป็นพี่น้องกับองค์ประกอบ div "mdl-logo"

15

mdl-mini-footer__right-section

ระบุคอนเทนเนอร์เป็นส่วนที่ถูกต้อง จำเป็นสำหรับองค์ประกอบ div ส่วน "ด้านใน" ด้านขวา

16

mdl-mini-footer__social-btn

ระบุสี่เหลี่ยมตกแต่งภายในส่วนท้ายสั้น จำเป็นสำหรับองค์ประกอบปุ่ม (ถ้าใช้)

ตอนนี้ให้เราดูตัวอย่างเพื่อทำความเข้าใจการใช้คลาสส่วนท้ายของ MDL เพื่อจัดรูปแบบส่วนท้าย

Mega Footer

ให้เราพูดคุยเกี่ยวกับการใช้ไฟล์ mdl-mega-footerคลาสเพื่อจัดวางเนื้อหาในส่วนท้าย จะใช้คลาส MDL ต่อไปนี้ในตัวอย่างนี้

  • mdl-layout - ระบุ div เป็นส่วนประกอบ MDL

  • mdl-js-layout - เพิ่มพฤติกรรม MDL พื้นฐานให้กับ div ภายนอก

  • 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 - เพิ่มพฤติกรรม MDL พื้นฐานให้กับ div ภายนอก

  • 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>

ผลลัพธ์

ตรวจสอบผลลัพธ์