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>

ผลลัพธ์

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