머티리얼 디자인 라이트-바닥 글

MDL 바닥 글 구성 요소는 두 가지 기본 형식으로 제공됩니다. mega-footer 과 mini-footer. 메가 바닥 글에는 미니 바닥 글보다 더 복잡한 콘텐츠가 포함됩니다. 메가 바닥 글은 수평 규칙으로 구분 된 여러 콘텐츠 섹션을 나타낼 수있는 반면 미니 바닥 글은 단일 콘텐츠 섹션을 나타냅니다. 바닥 글에는 일반적으로 정보 및 링크와 같은 클릭 가능한 콘텐츠가 모두 포함됩니다.

MDL은 미리 정의 된 다양한 시각적 및 동작 향상을 메가 푸터 및 미니 푸터에 적용하기 위해 다양한 CSS 클래스를 제공합니다. 다음 표에는 사용 가능한 클래스와 그 효과가 나열되어 있습니다.

Sr. 아니. 클래스 이름 및 설명
1

mdl-mega-footer

컨테이너를 MDL 메가 푸터 구성 요소로 식별합니다. 바닥 글 요소에 필요합니다.
2

mdl-mega-footer__top-section

컨테이너를 바닥 글 상단 섹션으로 식별합니다. 상단 섹션 "외부"div 요소에 필요합니다.
삼

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>

결과

결과를 확인하십시오.

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved