Materialise-퀵 가이드

Materialise는 CSS, JavaScript, HTML로 생성 된 UI 컴포넌트 라이브러리입니다. Materialise 재사용 가능한 UI 구성 요소는 브라우저 이식성, 장치 독립성 및 정상적인 성능 저하와 같은 최신 웹 디자인 원칙을 준수하면서 매력적이고 일관 적이며 기능적인 웹 페이지 및 웹 앱을 구성하는 데 도움이됩니다.

그 두드러진 특징 중 일부는 다음과 같습니다.

  • 내장 반응 형 디자인.

  • 최소한의 공간을 차지하는 표준 CSS.

  • 머티리얼 디자인 개념을 따르도록 조정 된 버튼, 체크 박스 및 텍스트 필드와 같은 공통 사용자 인터페이스 컨트롤의 새로운 버전.

  • 카드, 탭, 내비게이션 바, 토스트 등과 같은 강화되고 특화된 기능.

  • 무료로 사용할 수 있으며 제대로 작동하려면 jQuery JavaScript 라이브러리가 필요합니다.

  • 브라우저 간이며 재사용 가능한 웹 구성 요소를 만드는 데 사용할 수 있습니다.

반응 형 디자인

Materialise는 반응 형 디자인이 내장되어 있으므로 Materialise를 사용하여 만든 웹 사이트는 장치 크기에 따라 자체적으로 재 설계됩니다. Materialise 클래스는 웹 사이트가 모든 화면 크기에 맞도록 만들어집니다.

Materialise를 사용하여 만든 웹 사이트는 PC, 태블릿 및 모바일 장치와 완벽하게 호환됩니다.

확장 가능

Materialise는 설계 상 매우 최소화되고 평평합니다. 기존 CSS 규칙을 덮어 쓰는 것보다 새 CSS 규칙을 추가하는 것이 훨씬 쉽다는 점을 고려하여 설계되었습니다. 그림자와 대담한 색상을 지원합니다. 색상과 음영은 다양한 플랫폼과 장치에서 균일하게 유지됩니다.

그리고 무엇보다 가장 중요한 것은 완전히 무료입니다.

이 장에서는 Materialise에 적합한 환경을 설정하는 다양한 측면에 대해 설명합니다.

옵션 온라인 시도

Materialise 프로그래밍 환경을 온라인으로 설정하여 사용 가능한 모든 예제를 온라인으로 컴파일하고 실행할 수 있습니다. 읽고있는 내용에 대한 확신을주고 다양한 옵션으로 프로그램을 확인할 수 있습니다. 모든 예제를 자유롭게 수정하고 온라인에서 실행하십시오.

CodingGround 에서 제공되는 온라인 컴파일러를 사용하여 다음 예제를 시도해보십시오.

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">      
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>           
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script>             
   </head>
   
   <body>
      <div class = "card-panel teal lighten-2"><h3>Hello World!</h3></div>
   </body>
</html>

이 튜토리얼에서 제공하는 대부분의 예제에 대해 온라인 컴파일러로 이동하는 오른쪽 상단의 웹 사이트 코드 섹션에서 Try it 옵션을 찾을 수 있습니다. 그러니 그것을 활용하고 학습을 즐기십시오.

Materialise를 사용하는 방법?

Materialise를 사용하는 두 가지 방법이 있습니다-

Local Installation − 당신은 materialize.min.cssmaterialize.min.js 로컬 컴퓨터에 파일을 저장하고 HTML 코드에 포함합니다.

CDN Based Version − 다음을 포함 할 수 있습니다. materialize.min.cssmaterialize.min.js CDN (Content Delivery Network)에서 직접 HTML 코드로 파일을 가져옵니다.

로컬 설치

  • 이동 http://materializecss.com/getting-started.html 사용 가능한 최신 버전을 다운로드하십시오.

  • 그런 다음 다운로드 한 materialize.min.js 웹 사이트의 디렉토리에있는 파일 (예 : / js 및 materialize.min.css / css에서.

포함 cssjs 다음과 같이 HTML 파일의 파일.

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">      
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet" href = "/materialize/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>           
      <script src = "/materialize/materialize.min.js"></script>             
   </head>
  
   <body>
      <div class = "card-panel teal lighten-2"><h3>Hello World!</h3></div>
   </body>
</html>

다음 결과가 생성됩니다.

CDN 기반 버전

다음을 포함 할 수 있습니다. materialize.min.jsmaterialize.min.css CDN (Content Delivery Network)에서 직접 HTML 코드로 파일을 가져옵니다. cdnjs.cloudflare.com 최신 버전의 콘텐츠를 제공합니다.

이 자습서에서는 cdnjs.cloudflare.com CDN 버전의 라이브러리를 사용하고 있습니다.

위의 예를 다음을 사용하여 다시 작성하십시오. materialize.min.cssmaterialize.min.js cdnjs.cloudflare.com CDN에서.

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">      
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript" src = "https://code.jquery.com/jquery-2.1.1.min.js">
      </script>           
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script>             
   </head>
   
   <body>
      <div class = "card-panel teal lighten-2"><h3>Hello World!</h3></div>
   </body>
</html>

다음 결과가 생성됩니다-

Materialise는 다양한 색상 클래스 세트를 지원합니다. 이러한 색상 클래스는 마케팅, 도로 표지판 및 스티커 메모에 사용되는 색상을 고려하여 영감을 얻고 개발되었습니다.

  • red
  • pink
  • purple
  • deep-purple
  • indigo
  • blue
  • light-blue
  • cyan
  • teal
  • green
  • light-green
  • lime
  • yellow
  • amber
  • orange
  • deep-orange
  • brown
  • grey
  • blue-grey
  • black
  • white
  • transparent

용법

다음은 적용된 색상을 변경하는 데 사용할 수있는 밝기 / 어둡기 클래스 목록입니다.

  • lighten-1
  • lighten-2
  • lighten-3
  • lighten-4
  • lighten-5
  • darken-1
  • darken-2
  • darken-3
  • darken-4
  • accent-1
  • accent-2
  • accent-3
  • accent-4

다음 예제는 위의 클래스를 사용하여 배경을 렌더링하거나 텍스트 색상을 변경하는 방법을 보여줍니다. 배경의 경우 클래스를 추가하고 텍스트의 경우 색상 클래스에 접미사 '-text'를 추가하고 번개 클래스에 접두사 'text-'를 추가합니다.

materialize_colors.htm

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Colors Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">      
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>           
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script>             
   </head>
   
   <body>
      <h2>Color Theme Demo</h2>
      <hr/>
      <div class = "card-panel">	        
         <div class = "card-panel red lighten-2">		 
            <h1>Red Colored Theme</h1>
         </div>
         
         <span class = "red-text text-darken-2">
            <h2>Red Colored Text</h2>
         </span>
         
         <ul>          
            <li class = "red lighten-5"><p>Using red lighten-5</p></li>
            <li class = "red lighten-4"><p>Using red lighten-4</p></li>
            <li class = "red lighten-3"><p>Using red lighten-3</p></li>
            <li class = "red lighten-2"><p>Using red lighten-2</p></li>
            <li class = "red lighten-1"><p>Using red lighten-1</p></li>
            <li class = "red"><p>Using red</p></li>
            <li class = "red darken-1"><p>Using red darken-1</p></li>
            <li class = "red darken-2"><p>Using red darken-2</p></li>
            <li class = "red darken-3"><p>Using red darken-3</p></li>
            <li class = "red darken-4"><p>Using red darken-4</p></li>
            <li class = "red accent-1"><p>Using red accent-1</p></li>
            <li class = "red accent-2"><p>Using red accent-2</p></li>
            <li class = "red accent-3"><p>Using red accent-3</p></li>
            <li class = "red accent-4"><p>Using red accent-4</p></li>
         </ul>
      </div>
   </body>
</html>

결과

결과를 확인하십시오.

Materialise는 12 개 컬럼 유체 응답 그리드를 제공합니다.

행 및 열 스타일 클래스를 사용하여 각각 행과 열을 정의합니다.

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

row

반응 형 열에 사용할 패딩이없는 컨테이너를 지정합니다. 이 클래스는 반응 형 클래스가 완전히 반응하려면 필수입니다.

2

col

하위 클래스가있는 열을 지정합니다.

col 다양한 화면 유형을위한 여러 하위 클래스가 있습니다.

소형 화면 장치 용 컬럼

다음은 작은 화면 장치 (일반적으로 스마트 폰)에 대한 열 수준 스타일 목록입니다.

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

s1

너비가 08.33 % 인 열 12 개 중 1 개를 정의합니다.

2

s2

너비가 16.66 % 인 열 12 개 중 2 개를 정의합니다.

s3

너비가 25.00 % 인 열 12 개 중 3 개를 정의합니다.

4

s4

너비가 33.33 % 인 열 12 개 중 4 개를 정의합니다.

s5 - s11
12

s12

너비가 100 % 인 열 12 개 중 12 개를 정의합니다. 소형 화면 전화기의 기본 클래스입니다.

중형 화면 장치 용 컬럼

다음은 중간 화면 장치 (일반적으로 태블릿)의 열 수준 스타일 목록입니다.

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

m1

너비가 08.33 % 인 열 12 개 중 1 개를 정의합니다.

2

m2

너비가 16.66 % 인 열 12 개 중 2 개를 정의합니다.

m3

너비가 25.00 % 인 열 12 개 중 3 개를 정의합니다.

4

m4

너비가 33.33 % 인 열 12 개 중 4 개를 정의합니다.

m5 - m11
12

m12

너비가 100 % 인 열 12 개 중 12 개를 정의합니다. 중형 화면 전화기의 기본 클래스입니다.

대형 화면 장치 용 컬럼

다음은 일반적으로 랩톱과 같은 대형 화면 장치의 열 수준 스타일 목록입니다.

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

l1

너비가 08.33 % 인 열 12 개 중 1 개를 정의합니다.

2

l2

너비가 16.66 % 인 열 12 개 중 2 개를 정의합니다.

l3

너비가 25.00 % 인 열 12 개 중 3 개를 정의합니다.

4

l4

너비가 33.33 % 인 열 12 개 중 4 개를 정의합니다.

l5 - l11
12

l12

너비가 100 % 인 열 12 개 중 12 개를 정의합니다. 대형 화면 장치의 기본 클래스입니다.

용법

각 하위 클래스는 장치 유형에 따라 사용할 그리드의 열 수를 결정합니다. 다음 HTML 스 니펫을 고려하십시오.

<div class = "row">
   <div class = "col s2 m4 l3">
      <p>This text will use 2 columns on a small screen, 4 on a medium screen, and 3 on
      a large screen.</p>
   </div>
</div>

HTML 요소의 클래스 속성에 하위 클래스가 언급되지 않은 경우 사용할 기본 열은 장치에서 12 개입니다.

materialize_grids.htm

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Grids Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">      
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>           
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script>             
   </head>
   
   <body>
      <div class = "teal">
         <h2>Mobile First Design Demo</h2>
         <p>Resize the window to see the effect!</p>
      </div>
      
      <hr/> 
      <div class = "row">
         <div class = "col m1 grey center">1</div>
         <div class = "col m1 center">2</div>
         <div class = "col m1 grey center">3</div>
         <div class = "col m1 center">4</div>
         <div class = "col m1 grey center">5</div>
         <div class = "col m1 center">6</div>
         <div class = "col m1 center grey">7</div>
         <div class = "col m1 center">8</div>
         <div class = "col m1 center grey">9</div>
         <div class = "col m1 center">10</div>
         <div class = "col m1 center grey">11</div>
         <div class = "col m1 center">12</div>
      </div>
      
      <div class = "row">
         <div class = "col m4 l3 yellow">
            <p>This text will use 12 columns on a small screen, 4 on a medium screen (m4),
               and 3 on a large screen (l3).</p>
         </div>
         
         <div class = "col s4 m8 l9 grey">  
            <p>This text will use 4 columns on a small screen (s4), 8 on a medium screen
               (m8), and 9 on a large screen (l9).</p>
         </div>
      </div>
   </body>
</html>

결과

결과를 확인하십시오.

Materialise에는 일상적인 설계 요구에 유용한 여러 유틸리티 클래스가 있습니다.

  • Color utility classes − 예 : .red, .green, .grey 등

  • Alignment utility classes − 예 : .valign-wrapper, .left-align, .rightalign, .center-align, .left, .right

  • Hiding Content utility classes as per device size − 예 : .hide, .hideon-small-only, .hide-on-med-only, .hide-on-med-and-down, .hide-on-med-and-up 및 .hide-on- 대형 전용

  • Formatting utility classes − 예 : truncate, hoverable

materialize_utilities.htm

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">      
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family = Material+Icons">
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript" src = "https://code.jquery.com/jquery-2.1.1.min.js">
      </script>           
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script>             
   </head>
   
   <body class = "container"> 
      <h2>Materialize Utilities</h2>
      
      <hr/>
      <h3>Color Utilities Demo</h3>
      <div class = "red">
         <p>The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera 
            all support many HTML5 features and Internet Explorer 9.0 will also have
            support for some HTML5 functionality.</p>
      </div>
         
      <div class = "green">
         <p>The mobile web browsers that come pre-installed on iPhones, iPads, and Android
            phones all have excellent support for HTML5.</p>
      </div>
         
      <h3>Alignment Utilities Demo</h3>
      <div class = "card-panel valign-wrapper">
         <p class = "valign">Vertically Aligned Text</p>
      </div>
         
      <div class = "card-panel">
         <div><p class = "left-align">Left Aligned Text</p></div>
         <div><p class = "right-align">Right Aligned Text</p></div>
         <div><p class = "center-align">Center Aligned Text</p></div>
      </div>
         
      <h3>Hide Utilities Demo</h3>
      <div class = "hide">
         <p>Hidden on all devices</p>
      </div>
         
      <div class = "hide-on-small-only">
         <p>Hidden on mobile devices</p>
      </div>
         
      <h3>Formatting Utilities Demo</h3>
      <div class = "card-panel">
         <p class = "truncate">The latest versions of Apple Safari, Google Chrome,
            Mozilla Firefox, and Opera all support many HTML5 features and Internet
            Explorer 9.0 will also have support for some HTML5 functionality.</p>
      </div>
         
      <div class = "card-panel hoverable">
         <p>The mobile web browsers that come pre-installed on iPhones, iPads, and
            Android phones all have excellent support for HTML5.</p>
      </div>
         
      <h3>Center Utility Demo</h3>
      <div class = "card-panel center">
         <img src = "/html5/images/html5-mini-logo.jpg" alt = "html5">           
      </div>
   </body>
</html>

결과

결과를 확인하십시오.

Materialise에는 다양한 크기에 반응하는 이미지와 비디오를 만드는 몇 가지 클래스가 있습니다.

  • responsive-img − 화면 크기에 따라 이미지 크기가 자동 조정됩니다.

  • video-container − 동영상이 포함 된 반응 형 컨테이너 용.

  • responsive-video − HTML5 비디오를 반응 형으로 만듭니다.

materialize_media.htm

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">      
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>           
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script>             
   </head>
   
   <body class = "container"> 
      <h2>Materialize Media Examples</h2>
      
      <hr/>
      <h3>Images Demo</h3>
      <div class = "card-panel">
         <img src = "/html5/images/html5-mini-logo.jpg" alt = "" class = "responsive-img">		
      </div>
      
      <div class = "card-panel">
         <img src = "/html5/images/html5-mini-logo.jpg" alt = "" class = "circle responsive-img">		 
      </div>

      <h3>Responsive Embeded Video Demo</h3>
      <div class = "video-container">
         <iframe width = "540" height = "200"
            src = "https://www.youtube.com/embed/Q8TXgCzxEnw?rel=0"
            frameborder = "0" allowfullscreen></iframe>
      </div>
      
      <div class = "video-container">
         <video  width = "300" height = "200" controls autoplay>
            <source src = "http://www.tutorialspoint.com/html5/foo.ogg" type = "video/ogg" />
            <source src = "http://www.tutorialspoint.com/html5/foo.mp4" type = "video/mp4" />
            Your browser does not support the video element.
         </video>
      </div>
   </body>
</html>

결과

결과를 확인하십시오.

Materialise에는 그림자가있는 종이와 같은 카드로 컨테이너를 표시하는 몇 가지 특수 클래스가 있습니다.

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

z-depth-0

기본적으로 z 깊이가있는 요소의 그림자를 제거합니다.

2

z-depth-1

테두리가 1px 인 그림자가있는 모든 HTML 콘텐츠의 컨테이너 스타일을 지정합니다. z 깊이 1을 추가합니다.

z-depth-2

2px 테두리가있는 그림자로 모든 HTML 콘텐츠에 대한 컨테이너 스타일을 지정합니다. z 깊이 2를 추가합니다.

4

z-depth-3

3px 테두리가있는 그림자로 모든 HTML 콘텐츠에 대한 컨테이너 스타일을 지정합니다. z 깊이 3을 추가합니다.

5

z-depth-4

4px 테두리가있는 그림자로 모든 HTML 콘텐츠에 대한 컨테이너 스타일을 지정합니다. z 깊이 4를 추가합니다.

6

z-depth-5

5px 테두리가있는 그림자로 모든 HTML 콘텐츠의 컨테이너 스타일을 지정합니다. z 깊이 5를 추가합니다.

materialize_shadows.htm

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">      
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>           
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script>             
      
      <style>
         div {
            width : 200px;	
            height : 200px;				
         } 
      </style>
   </head>
   
   <body class = "container"> 
      <h2>Materialize Shadow Examples</h2>
      
      <hr/>
      <div class = "card-panel">
         <p><b>TODO:</b> Learn HTML5</p>
      </div>
      
      <div class = "z-depth-1">
         <p><b>TODO:</b> Learn HTML5</p>
      </div>
      
      <div class = "z-depth-2">
         <p><b>TODO:</b> Learn HTML5</p>
      </div>
      
      <div class = "z-depth-3">
         <p><b>TODO:</b> Learn HTML5</p>
      </div>
      
      <div class = "z-depth-4">
         <p><b>TODO:</b> Learn HTML5</p>
      </div>
      
      <div class = "z-depth-5">
         <p><b>TODO:</b> Learn HTML5</p>
      </div>	  
   </body>
</html>

결과

결과를 확인하십시오.

Materialise는 테이블에 대한 다양한 스타일을 사용하여 다양한 유형의 테이블을 표시하는 데 사용할 수 있습니다.

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

None

테두리가없는 기본 테이블을 나타냅니다.

2

stripped

제거 된 테이블을 표시합니다.

bordered

행에 테두리가있는 표를 그립니다.

4

highlight

강조 표시된 표를 그립니다.

5

centered

모든 텍스트 중심이 테이블에 정렬 된 테이블을 그립니다.

6

responsive-table

화면이 너무 작아 콘텐츠를 표시 할 수없는 경우 가로 스크롤 막대를 표시하는 반응 형 표를 그립니다.

materialize_tables.htm

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">      
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>           
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script>             
      
      <style>
         div {
            width : 200px;	
            height : 200px;				
         } 
      </style>
   </head>
   
   <body class = "container"> 
      <h2>Tables Demo</h2>
      
      <hr/>
      <h3>Simple Table</h3>
      <table>
         <thead>
            <tr>
               <th>Student</th>
               <th>Class</th>
               <th>Grade</th>
            </tr>
         </thead>
      
         <tbody>
            <tr>
               <td>Mahesh Parashar</td>
               <td>VI</td>
               <td>A</td>
            </tr>

            <tr>
               <td>Rahul Sharma</td>
               <td>VI</td>
               <td>B</td>
            </tr>
         
            <tr>
               <td>Mohan Sood</td>
               <td>VI</td>
               <td>A</td>
            </tr>
         </tbody>
      </table>
      
      <h3>Stripped Table with borders</h3>
      <table class = "striped bordered">
         <thead>
            <tr>
               <th>Student</th>
               <th>Class</th>
               <th>Grade</th>
            </tr>
         </thead>
         
         <tbody>
            <tr>
               <td>Mahesh Parashar</td>
               <td>VI</td>
               <td>A</td>
            </tr>
            
            <tr>
               <td>Rahul Sharma</td>
               <td>VI</td>
               <td>B</td>
            </tr>
            
            <tr>
               <td>Mohan Sood</td>
               <td>VI</td>
               <td>A</td>
            </tr>
         </tbody>
      </table>
      
      <hr/>
      <h3>Centered Table</h3>
      <table class = "centered">
         <thead>
            <tr><th>Student</th>
               <th>Class</th>
               <th>Grade</th>
            </tr>
         </thead>
         
         <tbody>
            <tr>
               <td>Mahesh Parashar</td>
               <td>VI</td>
               <td>A</td>
            </tr>
            
            <tr>
               <td>Rahul Sharma</td>
               <td>VI</td>
               <td>B</td>
            </tr>
            
            <tr>
               <td>Mohan Sood</td>
               <td>VI</td>
               <td>A</td>
            </tr>
         </tbody>
      </table>
      
      <h3>Responsive table</h3>
      <table class = "responsive-table">
         <thead>
            <tr>
               <th>Student</th>
               <th>Class</th>
               <th>Data #1</th>
               <th>Data #2</th>
               <th>Data #3</th>
               <th>Data #4</th>
               <th>Data #5</th>
               <th>Data #6</th>
               <th>Data #7</th>
               <th>Data #8</th>
               <th>Data #9</th>
               <th>Data #10</th>
            </tr>
         </thead>
         <tbody>
            <tr>
               <td>Mahesh Parashar</td>
               <td>VI</td>
               <td>10</td>
               <td>11</td>
               <td>12</td>
               <td>13</td>
               <td>14</td>
               <td>15</td>
               <td>16</td>
               <td>17</td>
               <td>19</td>
               <td>20</td>
            </tr>
            
            <tr>
               <td>Rahul Sharma</td>
               <td>VI</td>
               <td>10</td>
               <td>11</td>
               <td>12</td>
               <td>13</td>
               <td>14</td>
               <td>15</td>
               <td>16</td>
               <td>17</td>
               <td>19</td>
               <td>20</td>
            </tr>
            
            <tr>
               <td>Mohan Sood</td>
               <td>VI</td>
               <td>10</td>
               <td>11</td>
               <td>12</td>
               <td>13</td>
               <td>14</td>
               <td>15</td>
               <td>16</td>
               <td>17</td>
               <td>19</td>
               <td>20</td>
            </tr>
          </tbody>
       </table>
   </body>
</html>

결과

결과를 확인하십시오.

용도 구체화 Roboto 2.0표준 글꼴로. 다음 CSS 스타일을 사용하여 재정의 할 수 있습니다.

html {
   font-family: GillSans, Calibri, Trebuchet, sans-serif;
}

다음은 제목, 인용구 및 자유 흐름이지만 반응이 빠른 텍스트의 예입니다.

materialize_typography.htm

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Typography Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">      
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>           
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script> 
   </head>
   
   <body class = "container"> 
      <h2>Typography Demo</h2>
      <hr/>
      
      <h3>Headings</h3>
      <div class = "card-panel">
         <h1>Heading 1</h1>
         <h2>Heading 2</h2>
         <h3>Heading 3</h3>
         <h4>Heading 4</h4>
         <h5>Heading 5</h5>
         <h6>Heading 6</h6>
      </div>
      
      <h3>Block Quotes</h3>
      <div class = "card-panel">
         <blockquote>
            The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera
            all support many HTML5 features and Internet Explorer 9.0 will also have
            support for some HTML5 functionality.
         </blockquote>
      </div>
      
      <h3>Responsive free-flow text</h3>
      <div class = "card-panel">
         <p class = "flow-text">
            The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera
            all support many HTML5 features and Internet Explorer 9.0 will also have
            support for some HTML5 functionality.
         </p>
      </div>		  
   </body>
</html>

결과

결과를 확인하십시오.

Materialise 배지 구성 요소는 화면 알림이며 숫자 또는 아이콘 일 수 있습니다. 일반적으로 항목 수를 강조하는 데 사용됩니다.

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

badge

요소를 MDL 배지 구성 요소로 식별합니다. 스팬 요소에 필요합니다.

2

new

배지 구성 요소에 "새"클래스를 추가하면 배경이 제공됩니다.

다음은 다양한 방법으로 배지를 사용하는 예입니다.

materialize_badges.htm

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Badges Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">      
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>           
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script> 
   </head>
   
   <body class = "container"> 
      <h2>Badges Demo</h2>
      <hr/>
      
      <h3>Badges in List</h3>
      <div class = "collection">
         <a href = "#" class = "collection-item">Inbox<span class = "badge">12</span></a>
         <a href = "#" class = "collection-item">Unread<span class = "new badge">4</span></a>
         <a href = "#" class = "collection-item">Sent</a>
         <a href = "#" class = "collection-item">Outbox<span class = "badge">14</span></a>
      </div>
      
      <h3>Badges in dropdowns</h3>
      <ul id = "dropdown" class = "dropdown-content">
         <li><a href = "#">Inbox<span class = "badge">12</span></a></li>
         <li><a href = "#!">Unread<span class = "new badge">4</span></a></li>
         <li><a href = "#">Sent</a></li>
         <li><a href = "#">Outbox<span class = "badge">14</span></a></li>
      </ul>
      
      <a class = "btn dropdown-button" href = "#" data-activates = "dropdown">
         Dropdown<i class = "mdi-navigation-arrow-drop-down right"></i></a>
      <h3>Badges in Navigation</h3>
      <nav>
         <div class = "nav-wrapper">
            <a href = "" class = "brand-logo">TutorialsPoint</a>
            <ul id = "nav-mobile" class = "right hide-on-med-and-down">
               <li><a href = "">Inbox</a></li>
               <li><a href = "">Unread<span class = "new badge">4</span></a></li>
               <li><a href = "#">Sent</a></li>
               <li><a href = "#">Outbox</a></li>
            </ul>
         </div>
      </nav>
   </body>
</html>

결과

결과를 확인하십시오.

Materialise는 다양한 CSS 클래스를 제공하여 미리 정의 된 다양한 시각적 및 동작 향상을 버튼에 적용합니다. 다음 표에는 사용 가능한 클래스와 그 효과가 나와 있습니다.

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

btn

버튼 또는 앵커를 구체화 버튼으로 설정합니다 (필수). 버튼에 제기 된 표시 효과를 설정합니다.

2

btn-floating

원형 버튼을 만듭니다.

btn-flat

평면 디스플레이 효과를 버튼으로 설정합니다 (기본값).

4

btn-large

큰 버튼을 만듭니다.

5

disabled

비활성화 된 버튼을 생성합니다.

6

type = "submit"

앵커 또는 버튼을 기본 버튼으로 나타냅니다.

7

waves-effect

잔물결 클릭 효과를 설정하고 다른 클래스와 함께 사용할 수 있습니다.

다음 예제는 mdl-button 클래스를 사용하여 다양한 유형의 버튼을 표시하는 방법을 보여줍니다.

materialize_buttons.htm

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Buttons Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">      
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>           
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script> 
   </head>
   
   <body class = "container"> 
      <div class = "card-panel">
         <h5>Raised Buttons</h5>
         <button class = "btn waves-effect waves-teal">Add</button></td>
         <button class = "btn waves-effect waves-teal">
            <i class = "material-icons left">add</i>Add</button></td>
         <button class = "btn waves-effect waves-teal">
            <i class = "material-icons right">add</i>Add</button></td>
         <button class = "btn waves-effect waves-teal disabled">Add</button></td>
      </div>
      
      <div class = "card-panel">
         <h5>Flat Buttons</h5>
         <button class = "btn-flat waves-effect waves-teal">Add</button></td>
         <button class = "btn-flat waves-effect waves-teal disabled" >
            <i class = "material-icons left">add</i>Add</button></td>
      </div>
      
      <div class = "card-panel">
         <h5>Floating Buttons</h5>
         <a class = "btn-floating waves-effect waves-light red">
            <i class = "material-icons">add</i></a>
         <a class = "btn-floating waves-effect waves-light red disabled" >
            <i class = "material-icons">add</i></a>
      </div>
      
      <div class = "card-panel">
         <h5>Primary Buttons</h5>
         <button class = "btn waves-effect waves-light red" type = "submit">Send
            <i class = "material-icons right">send</i></button>
         <button class = "btn waves-effect waves-light red disabled" type = "submit" >Cancel
            <i class = "material-icons right">cancel</i></button>
      </div>
      
      <div class = "card-panel">
         <h5>Large Buttons</h5>
         <a class = "btn-floating btn-large waves-effect waves-light red">
            <i class = "material-icons">add</i></a>
         <a class = "btn-floating btn-large waves-effect waves-light red disabled">
            <i class = "material-icons">add</i></a>
      </div>
   </body>   
</html>

결과

결과를 확인하십시오.

Materialise는 다양한 CSS 클래스를 제공하여 쉬운 방법으로 멋진 이동 경로를 만듭니다. 다음 표에는 사용 가능한 클래스와 그 효과가 나와 있습니다.

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

nav-wrapper

탐색 구성 요소를 탐색 경로 / 탐색 막대 래퍼로 설정합니다.

2

breadcrumb

앵커 요소를 이동 경로로 설정합니다. 마지막 앵커 요소는 활성화되고 나머지는 회색으로 표시됩니다.

다음 예제는 탐색 표시 줄을 표시하기 위해 이동 경로 클래스를 사용하는 방법을 보여줍니다.

materialize_breadcrumb.htm

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize BreadCrumb Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">      
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>           
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script> 
   </head>
   
   <body class = "container"> 
      <nav>
         <div class = "nav-wrapper">
            <div class = "col s12">
               <a href = "#" class = "breadcrumb">Home</a>
               <a href = "#" class = "breadcrumb">Technology</a>
               <a href = "#" class = "breadcrumb">HTML5</a>
            </div>
         </div>
      </nav>
   </body>   
</html>

결과

결과를 확인하십시오.

Materialise는 다양한 유형의 카드를 표시하기 위해 미리 정의 된 다양한 시각적 및 동작 향상을 적용하기 위해 다양한 CSS 클래스를 제공합니다. 다음 표에는 사용 가능한 클래스와 그 효과가 나와 있습니다.

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

card

div 요소를 Materialise 카드 컨테이너로 식별합니다. "외부"div에 필요합니다.

2

card-content

div를 카드 콘텐츠 컨테이너로 식별하며 "내부"div에 필요합니다.

card-title

div를 카드 제목 컨테이너로 식별하고 "내부"제목 div에 필요합니다.

4

card-action

div를 카드 작업 컨테이너로 식별하고 작업 텍스트에 적절한 텍스트 특성을 할당합니다. "내부"작업 div에 필요합니다. 콘텐츠는 중간 컨테이너없이 div 내부로 직접 이동합니다.

5

card-image

div를 카드 이미지 컨테이너로 식별하고 "내부"div에 필요합니다.

6

card-reveal

div를 공개 된 텍스트 컨테이너로 식별합니다.

7

activator

div를 공개 된 텍스트 컨테이너 및 공개 할 이미지로 식별합니다. 이미지와 관련된 상황 정보를 표시하는 데 사용됩니다.

8

card-panel

div를 그림자와 패딩이있는 간단한 카드로 식별합니다.

9

card-small

div를 작은 크기의 카드로 식별합니다. 높이 : 300px;

10

card-medium

div를 중간 크기 카드로 식별합니다. 높이 : 400px;

11

card-large

div를 대형 카드로 식별합니다. 높이 : 500px;

다음 예제는 다양한 유형의 카드를 보여주기위한 카드 클래스 사용을 보여줍니다.

materialize_cards.htm

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Cards Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">      
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>           
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script> 
   </head>
   
   <body class = "container"> 
      <div class = "row">
         <div class = "col s12 m6">
            <div class = "card blue-grey lighten-4">
               <div class = "card-content">
                  <span class = "card-title"><h3>Learn HTML5</h3></span>
                  <p>HTML5 is the next major revision of the HTML standard superseding
                     HTML 4.01, XHTML 1.0, and XHTML 1.1. HTML5 is a standard for
                     structuring and presenting content on the World Wide Web.</p>
               </div>
               
               <div class = "card-action">
                  <button class = "btn waves-effect waves-light blue-grey">
                     <i class = "material-icons">share</i></button>
                  <a class = "right blue-grey-text" href = "http://www.tutorialspoint.com">
                     www.tutorialspoint.com</a>
               </div>
            </div>
         </div>
         
         <div class = "col s12 m6">
            <div class = "card blue-grey lighten-4">
               <div class = "card-image">
                  <img src = "html5-mini-logo.jpg">                
               </div>
               
               <div class = "card-content">                  
                  <p>HTML5 is the next major revision of the HTML standard superseding
                     HTML 4.01, XHTML 1.0, and XHTML 1.1. HTML5 is a standard for
                     structuring and presenting content on the World Wide Web.</p>
               </div>
               
               <div class = "card-action">
                  <button class = "btn waves-effect waves-light blue-grey">
                     <i class = "material-icons">share</i></button>
                  <a class = "right blue-grey-text" href = "http://www.tutorialspoint.com">
                     www.tutorialspoint.com</a>
               </div>
            </div>
         </div>
      </div>
      
      <div class = "row">
         <div class = "col s12 m6">
            <div class = "card blue-grey lighten-4">
               <div class = "card-image waves-effect waves-block waves-light">
                  <img class = "activator" src = "html5-mini-logo.jpg">                
               </div>
               
               <div class = "card-content activator">                  
                  <p>Click the image to reveal more information.</p>
               </div>
               
               <div class = "card-reveal">
                  <span class = "card-title grey-text text-darken-4">HTML5
                     <i class = "material-icons right">close</i></span>
                  <p>HTML5 is the next major revision of the HTML standard superseding
                     HTML 4.01, XHTML 1.0, and XHTML 1.1. HTML5 is a standard for
                     structuring and presenting content on the World Wide Web.</p>
               </div>
               
               <div class = "card-action">
                  <button class = "btn waves-effect waves-light blue-grey">
                     <i class = "material-icons">share</i></button>
                  <a class = "right blue-grey-text" href = "http://www.tutorialspoint.com">
                     www.tutorialspoint.com</a>
               </div>
            </div>
         </div>
      </div>
      
      <div class = "row">
         <div class = "col s12 m3">
            <div class = "card-panel teal">
               <span class = "white-text">Simple Card</span>
            </div>
         </div>
         
         <div class = "col s12 m3">
            <div class = "card small teal">
               <span class = "white-text">Small Card</span>
            </div>
         </div>
         
         <div class = "col s12 m3">
            <div class = "card medium teal">
               <span class = "white-text">Medium Card</span>
            </div>
         </div>
         
         <div class = "col s12 m3">
            <div class = "card large teal">
               <span class = "white-text">Large Card</span>
            </div>
         </div>
      </div>     	  
   </body>   
</html>

결과

결과를 확인하십시오.

Materialise는 작은 정보 집합을 표현하는 데 사용할 수있는 Chip이라는 특수 구성 요소를 제공합니다. 예 : 연락처, 태그 등

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

chip

div 컨테이너를 칩으로 설정합니다.

다음 예제는 다양한 유형의 태그 생성을 보여주기 위해 칩 클래스를 사용하는 방법을 보여줍니다.

materialize_chips.htm

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Chips Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">      
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>           
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script> 
   </head>
   
   <body class = "container">       
      <div class = "chip">           
         <img alt = "HTML5" src = "/html5/images/html5-mini-logo.jpg">HTML 5            
      </div>
   
      <div class = "chip">           
         HTML 5<i class = "material-icons">close</i>
      </div>		 
   </body>   
</html>

결과

결과를 확인하십시오.

Materialise는 다양한 유형의 컬렉션을 나타내는 특수 클래스를 제공합니다. 여기서 컬렉션은 관련 정보 항목 그룹을 나타냅니다.

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

collection

div 또는 ul 컨테이너를 컬렉션으로 설정합니다.

2

collection-item

a 또는 li 항목을 컬렉션 항목으로 설정합니다.

active

a 또는 li 항목을 활성 컬렉션 항목으로 표시합니다.

4

with-header

컬렉션에 헤더를 표시합니다.

5

collection-header

a 또는 li 항목을 컬렉션 헤더로 설정합니다.

6

avatar

a 또는 li 항목을 아바타 항목으로 설정합니다.

7

dismissible

컬렉션 항목을 스 와이프 할 수 있습니다. 터치 스크린 장치에서만 작동합니다.

다음 예제는 컬렉션 클래스를 사용하여 다양한 유형의 컬렉션 생성을 보여줍니다.

materialize_collections.htm

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Collections Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">      
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>           
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script> 
   </head>
   
   <body class = "container">       
      <h3>Simple Collection</h3><hr/>
      <ul class = "collection">
         <li class = "collection-item">HTML 5</li>
         <li class = "collection-item">JQuery</li>
         <li class = "collection-item">JavaScript</li>
         <li class = "collection-item">CSS</li>
      </ul>
      
      <h3>Collection of Links</h3><hr/>
      <div class = "collection">
         <a href = "#" class = "collection-item">HTML 5</a>
         <a href = "#!" class = "collection-item active">JQuery</a>
         <a href = "#!" class = "collection-item">JavaScript</a>
         <a href = "#!" class = "collection-item">CSS</a>
      </div>
      
      <h3>Collection with Header</h3><hr/>
      <ul class = "collection with-header">
         <li class = "collection-header"><h3>Front End Technologies</h3></li>
         <li class = "collection-item">HTML 5</li>
         <li class = "collection-item">JQuery</li>
         <li class = "collection-item">JavaScript</li>
         <li class = "collection-item">CSS</li>
      </ul>
      
      <h3>Collection with Secondary Content</h3><hr/>
      <ul class = "collection">         
         <li class = "collection-item">
            <div>HTML 5<a href = "#!" class = "secondary-content">
               <i class = "material-icons">cloud</i></a></div></li>
         <li class = "collection-item">
            <div>JQuery<a href = "#!" class = "secondary-content">
               <i class = "material-icons">cloud</i></a></div></li>
         <li class = "collection-item">
            <div>JavaScript<a href = "#!" class = "secondary-content">
               <i class = "material-icons">cloud</i></a></div></li>
         <li class = "collection-item">
            <div>CSS<a href = "#!" class = "secondary-content">
               <i class = "material-icons">cloud</i></a></div></li>
      </ul>
      
      <h3>Collection with Avatar</h3><hr/>
      <ul class = "collection">         
         <li class = "collection-item avatar">
            <img alt = "HTML5" src = "/html5/images/html5-mini-logo.jpg" class = "circle">
            <span class = "title">HTML5</span>
            <p>HTML5 is the next major revision of the HTML standard superseding
               HTML 4.01, XHTML 1.0, and XHTML 1.1.<br/> HTML5 is a standard for
               structuring and presenting content on the World Wide Web.</p>
            <a href = "#!" class = "secondary-content"><i class = "material-icons">
               grade</i></a>
         </li>
         
         <li class = "collection-item avatar">
            <i class = "material-icons circle green">insert_chart</i>
            <span class = "title">HighCharts</span>
            <p></p>
            <a href = "#!" class = "secondary-content"><i class = "material-icons">
               grade</i></a>
         </li>
      </ul>
      
      <h3>Collection with dismissible content</h3><hr/>
      <ul class = "collection">
         <li class = "collection-item dismissable">HTML 5</li>
         <li class = "collection-item dismissable">JQuery</li>
         <li class = "collection-item dismissable">JavaScript</li>
         <li class = "collection-item dismissable">CSS</li>
      </ul>
   </body>   
</html>

결과

결과를 확인하십시오.

Materialise는 컬렉션이 관련 정보 항목 그룹을 나타내는 다양한 유형의 컬렉션을 나타내는 특수 클래스를 제공합니다.

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

page-footer

div 컨테이너를 바닥 글로 설정합니다.

2

footer-copyright

div 컨테이너를 바닥 글-저작권 컨테이너로 설정합니다.

다음 예제는 바닥 글 클래스를 사용하여 샘플 바닥 글을 표시하는 방법을 보여줍니다.

materialize_footer.htm

<html>
   <head>
      <title>The Materialize Collections Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">      
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>           
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script> 
   </head>
   
   <body class = "container">       
      <footer class = "page-footer">
         <div class = "row">
            <div class = "col s12 m6 l6">
               <h5 class = "white-text">Footer Content</h5>
            </div>
            
            <div class = "col">
               <ul>
                  <li><a href = "#" class = "grey-text text-lighten-4 right">
                     Help</a></li>
                  <li><a href = "#" class = "grey-text text-lighten-4 right">
                     Privacy and Terms</a></li>
                  <li><a href = "#" class = "grey-text text-lighten-4 right">
                     User Agreement</a></li>
               </ul>
            </div>
         </div>
         
         <div class = "footer-copyright">
            <div class = "container">
               © 2016 Copyright Information
               <a class = "grey-text text-lighten-4 right" href = "#!">Links</a>
            </div>
         </div>         
       </footer>
   </body>   
</html>

결과

결과를 확인하십시오.

Materialise는 양식 디자인을위한 매우 아름답고 반응이 빠른 CSS를 가지고 있습니다. 다음 CSS가 사용됩니다-

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

input-field

div 컨테이너를 입력 필드 컨테이너로 설정합니다. 필수입니다.

2

validate

입력 필드에 유효성 검사 스타일을 추가합니다.

active

활성 스타일로 입력을 표시합니다.

4

materialize-textarea

텍스트 영역의 스타일을 지정하는 데 사용됩니다. 텍스트 영역은 내부 텍스트에 맞게 자동으로 크기가 조정됩니다.

5

filled-in

채워진 상자 스타일로 확인란을 표시합니다.

다음 예제는 샘플 양식을 보여주기 위해 입력 클래스를 사용하는 방법을 보여줍니다.

materialize_forms.htm

<html>
   <head>
      <title>The Materialize Form Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">      
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>           
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script> 
   </head>
   
   <body class = "container">   
      <div class = "row">
         <form class = "col s12">
            <div class = "row">
               <div class = "input-field col s6">
                  <i class = "material-icons prefix">account_circle</i>
                  <input placeholder = "Username" value = "Mahesh" id = "name"
                     type = "text" class = "active validate" required />
                  <label for = "name">Username</label>
               </div>
               
               <div class = "input-field col s6">      
                  <label for = "password">Password</label>
                  <input id = "password" type = "password" placeholder = "Password"
                     class = "validate" required />          
               </div>
            </div>
            
            <div class = "row">
               <div class = "input-field col s12">
                  <input placeholder = "Email" id = "email" type = "email"
                     class = "validate">
                  <label for = "email">Email</label>
               </div>
            </div>
            
            <div class = "row">
               <div class = "input-field col s12">
                  <i class = "material-icons prefix">mode_edit</i>
                  <textarea id = "address" class = "materialize-textarea"></textarea>
                  <label for = "address">Address</label>
               </div>
            </div>
            
            <div class = "row">
               <div class = "input-field col s12">
                  <input placeholder = "Comments (Disabled)" id = "comments"
                     type = "text" disabled />
                  <label for = "comments">Comments</label>
               </div>
            </div>
            
            <div class = "row">
               <div class = "input-field col s12">
                  <p>
                     <input id = "married" type = "checkbox" checked = "checked" />
                     <label for = "married">Married</label>
                  </p>
                  
                  <p>
                     <input id = "single" type = "checkbox" class = "filled-in" />
                     <label for = "single">Single</label>
                  </p>
                  
                  <p>
                     <input id = "dontknow" type = "checkbox" disabled = "disabled" />              
                     <label for = "dontknow">Don't know (Disabled)</label>
                  </p>
               </div>
            </div>
            
            <div class = "row">
               <div class = "input-field col s12">
                   <p>
                     <input id = "male" type = "radio" name = "gender"
                        value = "male" checked />
                     <label for = "male">Male</label>
                  </p>
                  
                  <p>
                     <input id = "female" type = "radio" name = "gender"
                        value = "female" checked />
                     <label for = "female">Female</label>
                  </p>
                  
                  <p>
                     <input id = "dontknow1" type = "radio" name = "gender"
                        value = "female" disabled />
                     <label for = "dontknow1">Don't know (Disabled)</label>
                  </p>
               </div>
            </div>           
         </form>       
      </div>
   </body>   
</html>

결과

결과를 확인하십시오.

중요한 입력 컨트롤

Materialise는 다양한 유형의 입력 컨트롤을위한 CSS를 제공합니다. 다음 표는 동일합니다.

Sr. 아니. 입력 유형 이름 및 설명
1 고르다

다양한 유형의 선택 입력

2 스위치

다양한 유형의 스위치

파일

다양한 유형의 파일 입력

4 범위

다양한 유형의 범위 입력

5 날짜 선택기

날짜 선택기

6 캐릭터 카운터

캐릭터 카운터

Materialise는 다음과 같은 인기있는 아이콘 라이브러리를 지원합니다.

  • 글꼴 굉장 아이콘
  • Google Material 아이콘
  • 부트 스트랩 아이콘

용법

아이콘을 사용하려면 HTML <i> 요소의 클래스에 아이콘 이름을 넣으십시오. 아이콘의 크기를 제어하려면 다음 클래스를 사용할 수 있습니다.

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

tiny

매우 작은 크기의 아이콘을 그립니다. 1rem.

2

small

작은 크기의 아이콘을 그립니다. 2rem.

medium

중간 크기의 아이콘을 그립니다. 4rem.

4

large

큰 아이콘을 그립니다. 6rem.

materialize_icons.htm

<html>
   <head>
      <title>The Materialize Icons Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">      
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>           
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script> 
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
      <link rel = "stylesheet"
         href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
   </head>
   
   <body class = "container"> 
      <h2>Icons Demo</h2>
      <hr/>
      
      <h3>Font Awesome Icon Demo</h3>
      <i class = "fa fa-cloud tiny"></i>
      <i class = "fa fa-cloud"></i>	  
      <i class = "fa fa-cloud small"></i>
      <i class = "fa fa-cloud medium"></i>
      <i class = "fa fa-cloud large"></i>     
      
      <h3>Google Material Design Icon Demo</h3>	  
      <i class = "material-icons tiny">cloud</i>
      <i class = "material-icons small">cloud</i>
      <i class = "material-icons">cloud</i>
      <i class = "material-icons medium">cloud</i>
      <i class = "material-icons large">cloud</i>      
      
      <h3>Bootstrap Icon Demo</h3>
      <i class = "glyphicon glyphicon-cloud tiny"></i>
      <i class = "glyphicon glyphicon-cloud"></i>      
      <i class = "glyphicon glyphicon-cloud small"></i>
      <i class = "glyphicon glyphicon-cloud medium"></i>
      <i class = "glyphicon glyphicon-cloud large"></i>      
   </body>  
</html>

결과

결과를 확인하십시오.

Materialise는 다양한 CSS 클래스를 제공하여 간편한 방법으로 멋진 탐색 모음을 만듭니다. 다음 표에는 사용 가능한 클래스와 그 효과가 나와 있습니다.

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

nav-wrapper

nav 구성 요소를 nav bar / breadcrumb wrapper로 설정합니다.

2

brand-logo

앵커 요소를 기본 로고로 설정합니다.

nav-mobile

ul 요소를 탐색 모음으로 설정합니다.

다음 예제는 navbar 클래스를 사용하여 다양한 탐색 모음을 표시하는 방법을 보여줍니다.

materialize_navbar.htm

<html>
   <head>
      <title>The Materialize NavBar Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">      
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>           
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script>	 
      
      <script>
         $( document ).ready(function()) { $(".dropdown-button").dropdown();
         });
      </script>
   </head>
   
   <body class = "container"> 
      <div class = "row" style = "width:560px;">
         <div class = "col s12 m12 l12" >
            <h5>Right Aligned Nav Bar</h5>
            <nav>
               <div class = "nav-wrapper">
                  <a href = "#" class = "brand-logo">TutorialsPoint</a>
                  <ul id = "nav-mobile" class = "right hide-on-med-and-down">
                     <li><a href = "#">HTML5</a></li>
                     <li><a href = "#">CSS</a></li>
                     <li><a href = "#">JavaScript</a></li>
                  </ul>
               </div>
            </nav>
         </div>
      </div>
      
      <div class = "row" style = "width:560px;">
         <div class = "col s12 m12 l12">
            <h5>Left Aligned Nav Bar</h5>
            <nav>
               <div class = "nav-wrapper">
                  <a href = "#" class = "brand-logo right">TutorialsPoint</a>
                  <ul id = "nav-mobile" class = "left hide-on-med-and-down">
                     <li><a href = "#">HTML5</a></li>
                     <li><a href = "#">CSS</a></li>
                     <li><a href = "#">JavaScript</a></li>
                  </ul>
               </div>
            </nav>
         </div>
      </div>
      
      <div class = "row" style = "width:560px;">
         <div class = "col s12 m12 l12">
            <h5>Center Aligned Nav Bar</h5>
            <nav>
               <div class = "nav-wrapper">
                  <a href = "#" class = "brand-logo center">TutorialsPoint</a>
                  <ul id = "nav-mobile" class = "right hide-on-med-and-down">                    
                     <li><a href = "#">Java</a></li>
                  </ul>
               </div>
            </nav>
         </div>
      </div>
      
      <div class = "row" style = "width:560px;">
         <div class = "col s12 m12 l12">
            <h5>Nav Bar with Active link</h5>
            <nav>
               <div class = "nav-wrapper">
                  <a href = "#" class = "brand-logo right">TutorialsPoint</a>
                  <ul id = "nav-mobile" class = "left hide-on-med-and-down">
                     <li><a href = "#">HTML5</a></li>
                     <li><a href = "#">CSS</a></li>
                     <li class = "active"><a href = "#">JavaScript</a></li>
                  </ul>
               </div>
            </nav>
         </div>
      </div>
      
      <div class = "row" style = "width:560px;">
         <div class = "col s12 m12 l12">
            <h5>Nav Bar with dropdown menu</h5>
            <ul id = "javaDropDown" class = "dropdown-content">
               <li><a href = "#!">JSF</a></li>
               <li><a href = "#!">JSP</a></li>
               <li class = "divider"></li>
               <li><a href = "#!">Servlets</a></li>
            </ul>
            
            <nav>
               <div class = "nav-wrapper">
                  <a href = "#" class = "brand-logo center">TutorialsPoint</a>
                  <ul id = "nav-mobile" class = "right hide-on-med-and-down">                    
                     <!-- Dropdown Trigger -->
                     <li><a class = "dropdown-button" href = "#!" 
                        data-activates = "javaDropDown">Java<i class = "material-icons
                        right">arrow_drop_down</i></a></li>
                  </ul>
               </div>
            </nav>
         </div>
      </div>
      
      <div class = "row" style = "width:560px;">
         <div class = "col s12 m12 l12">
            <h5>Nav Bar with Links and Icons</h5>
            <nav>
               <div class = "nav-wrapper">
                  <a href = "#" class = "brand-logo right">TutorialsPoint</a>
                  <ul id = "nav-mobile" class = "left hide-on-med-and-down">
                     <li><a href = "#"><i class = "material-icons left">search</i>
                        HTML5</a></li>
                     <li><a href = "#"><i class = "material-icons right">view_module</i>
                        CSS</a></li>
                     <li><a href = "#">JavaScript</a></li>
                  </ul>
               </div>
            </nav>
         </div>
      </div>  	 	  
   </body>  
</html>

결과

결과를 확인하십시오.

Materialise는 다양한 CSS 클래스를 제공하여 멋진 페이지 매김 막대를 쉽게 만들 수 있습니다. 다음 표에는 사용 가능한 클래스와 그 효과가 나와 있습니다.

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

pagination

ul 요소를 페이지 매김 구성 요소로 설정합니다.

다음 예제는 navbar 클래스를 사용하여 페이지 매김 막대를 표시하는 방법을 보여줍니다.

materialize_pagination.htm

<html>
   <head>
      <title>The Materialize Pagination Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">      
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script>
   </head>
   
   <body class = "container"> 
      <div class = "row" style = "width:560px;">
         <div class = "col s12 m12 l12" >
            <h5>Materialize Pagination</h5>
            <ul class = "pagination">
               <li class = "disabled"><a href = "#!">
                  <i class = "material-icons">chevron_left</i></a></li>
               <li class = "active"><a href = "#!">1</a></li>
               <li class = "waves-effect"><a href = "#!">2</a></li>
               <li class = "waves-effect"><a href = "#!">3</a></li>
               <li class = "waves-effect"><a href = "#!">4</a></li>
               <li class = "waves-effect"><a href = "#!">5</a></li>
               <li class = "waves-effect"><a href = "#!">
                  <i class = "material-icons">chevron_right</i></a></li>
            </ul>
         </div>
      </div>      
   </body>  
</html>

결과

결과를 확인하십시오.

Materialise는 다양한 유형의 프리 로더 또는 진행률 표시 줄을 표시하기 위해 미리 정의 된 다양한 시각적 및 동작 향상을 적용하는 다양한 CSS 클래스를 제공합니다. 다음 표에는 사용 가능한 클래스와 그 효과가 나와 있습니다.

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

progress

요소를 진행 구성 요소로 식별합니다. div 요소에 필요합니다.

2

determinate

기본 구체화 동작을 진행률 표시기로 설정합니다.

indeterminate

애니메이션을 진행률 표시기로 설정합니다.

다음은 다양한 방식으로 프리 로더를 사용하는 예입니다.

materialize_preloader.htm

<html>
   <head>
      <title>The Materialize Preloader Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">      
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>           
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script>
   </head>
   
   <body class = "container"> 
      <h4>Default Preloader</h4>
      <div class = "progress">
         <div class = "determinate" style = "width: 50%"></div>
      </div>
      
      <h4>Indeterminate Preloader</h4>
      <div class = "progress">
         <div class = "indeterminate"></div>
      </div>
      
      <h4>Circular Preloader</h4>
      <div class = "preloader-wrapper big active">
         <div class = "spinner-layer spinner-blue-only">
            <div class = "circle-clipper left">
               <div class = "circle"></div>
            </div>
            
            <div class = "gap-patch">
               <div class = "circle"></div>
            </div>
            
            <div class = "circle-clipper right">
               <div class = "circle"></div>
            </div>
         </div>
      </div>
   </body>  
</html>

결과

결과를 확인하십시오.

Materialise는 다양한 유형의 아코디언을 표시하기 위해 미리 정의 된 다양한 시각적 및 동작 향상을 적용하는 다양한 CSS 클래스를 제공합니다. 다음 표에는 사용 가능한 클래스와 그 효과가 나와 있습니다.

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

collapsible

요소를 구체화 축소 가능 구성 요소로 식별합니다. ul 요소에 필요합니다.

2

collapsible-header

div를 섹션 헤더로 설정합니다.

collapsible-body

div를 섹션 콘텐츠 컨테이너로 설정합니다.

4

popout

접을 수있는 팝 아웃을 만듭니다.

5

active

섹션을 엽니 다.

6

expandable

접을 수있는 구성 요소를 확장 가능으로 표시합니다.

7

accordion

접을 수있는 구성 요소를 아코디언으로 표시합니다.

다음은 다른 방법으로 아코디언을 사용하는 예입니다.

materialize_collapsible.htm

<html>
   <head>
      <title>The Materialize Collapsible Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">      
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>           
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script>
   </head>
   
   <body class = "container"> 
      <h4>Simple Accordion</h4>
      <ul class = "collapsible" data-collapsible = "accordion">
         <li>
            <div class = "collapsible-header">
               <i class = "material-icons">filter_drama</i>First Section</div>
            <div class = "collapsible-body"><p>This is first section.</p></div>
         </li>
         
         <li>
            <div class = "collapsible-header">
               <i class = "material-icons">place</i>Second Section</div>
            <div class = "collapsible-body"><p>This is second section.</p></div>
         </li>
         
         <li>
            <div class = "collapsible-header">
               <i class = "material-icons">whatshot</i>Third Section</div>
            <div class = "collapsible-body"><p>This is third section.</p></div>
         </li>
      </ul>
      
      <h4>Popout Accordion</h4>
      <ul class = "collapsible popout" data-collapsible = "accordion">
         <li>
            <div class = "collapsible-header">
               <i class = "material-icons">filter_drama</i>First Section</div>
            <div class = "collapsible-body"><p>This is first section.</p></div>
         </li>
         
         <li>
            <div class = "collapsible-header">
               <i class = "material-icons">place</i>Second Section</div>
            <div class = "collapsible-body"><p>This is second section.</p></div>
         </li>
         
         <li>
            <div class = "collapsible-header">
               <i class = "material-icons">whatshot</i>Third Section</div>
            <div class = "collapsible-body"><p>This is third section.</p></div>
         </li>
      </ul>
      
      <h4>Accordion with Preselected Section</h4>
      <ul class = "collapsible" data-collapsible = "accordion">
         <li>
            <div class = "collapsible-header">
               <i class = "material-icons">filter_drama</i>First Section</div>
            <div class = "collapsible-body"><p>This is first section.</p></div>
         </li>
         
         <li>
            <div class = "collapsible-header active">
               <i class = "material-icons">place</i>Second Section</div>
            <div class = "collapsible-body"><p>This is second section.</p></div>
         </li>
         
         <li>
            <div class = "collapsible-header">
               <i class = "material-icons">whatshot</i>Third Section</div>
            <div class = "collapsible-body"><p>This is third section.</p></div>
         </li>
      </ul>
      
      <h4>Expandables</h4>
      <ul class = "collapsible" data-collapsible = "expandable">
         <li>
            <div class = "collapsible-header">
               <i class = "material-icons">filter_drama</i>First Section</div>
            <div class = "collapsible-body"><p>This is first section.</p></div>
         </li>
         
         <li>
            <div class = "collapsible-header">
               <i class = "material-icons">place</i>Second Section</div>
            <div class = "collapsible-body"><p>This is second section.</p></div>
         </li>
         
         <li>
            <div class = "collapsible-header">
               <i class = "material-icons">whatshot</i>Third Section</div>
            <div class = "collapsible-body"><p>This is third section.</p></div>
         </li>
      </ul>	  		  
   </body>  
</html>

결과

결과를 확인하십시오.

Materialise는 사용자에게 눈에 띄지 않는 경고를 표시하는 다양한 특수 방법을 제공합니다. Materialise는 그들에게 토스트라는 용어를 제공합니다. 다음은 대화 상자를 토스트로 표시하는 구문입니다.

Materialize.toast(message, displayLength, className, completeCallback);

어디,

  • message − 사용자에게 표시 할 메시지.

  • displayLength − 메시지가 사라지는 기간.

  • className− 토스트에 적용 할 스타일 클래스. 예 : '반올림'.

  • completeCallback − 토스트가 해제되면 호출 할 콜백 메서드.

툴팁을 위해 Materialise는 다음 CSS 클래스를 제공합니다.

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

tooltipped

도구 설명이있는 구성 요소를 식별합니다.

2

data-position

툴팁의 위치. 하단, 상단, 왼쪽 또는 오른쪽.

data-delay

툴팁이 사라질 때까지의 기간을 설정합니다.

4

data-tooltip

툴팁 내용을 설정합니다.

다음 예제는 알림 및 도구 설명의 사용을 보여줍니다.

materialize_dialogs.htm

<html>
   <head>
      <title>The Materialize Dialogs Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">      
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>           
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script>
      
      <script>
         function showToast(message, duration) {
            Materialize.toast(message, duration);
         }
         
         function showToast1(message, duration) {
            Materialize.toast('<i>'+ message + '</i>', duration);
         }
         
         function showToast2(message, duration) {
            Materialize.toast(message, duration, 'rounded');
         }
         
         function showToast3(message, duration) {
            Materialize.toast('Hello World!', duration, '', function toastCompleted() {
               alert('Toast dismissed!');
            });
         }
      </script>
   </head>
   
   <body class = "container"> 
      <h4>Toasts</h4>
      <a class = "btn" onclick = "showToast('Hello World!', 3000)">Normal Alert!</a>
      <a class = "btn" onclick = "showToast1('Hello World!', 3000)">Italic Alert!</a>
      <a class = "btn" onclick = "showToast2('Hello World!', 3000)">Rounded Alert!</a>
      <br/><br/>
      <a class = "btn" onclick = "showToast3('Hello World!', 3000)">Callback Alert!</a>	  
      
      <h4>Tooltips</h4>
      <a class = "btn tooltipped" data-position = "bottom" data-delay = "50"
         data-tooltip = "I am in bottom!">Bottom</a>
      <a class = "btn tooltipped" data-position = "left" data-delay = "50"
         data-tooltip = "I am in left!">Left</a>
      <a class = "btn tooltipped" data-position = "right" data-delay = "50"
         data-tooltip = "I am in right!">Right</a>
      <a class = "btn tooltipped" data-position = "top" data-delay = "50"
         data-tooltip = "I am in top!">Top</a>
   </body>  
</html>

결과

결과를 확인하십시오.

Materialise는 드롭 다운 CSS 클래스를 제공하여 ul 요소를 드롭 다운으로 만들고 ul 요소의 id를 버튼 또는 앵커 요소의 data-activates 속성에 추가합니다. 다음 표에는 사용 가능한 클래스와 그 효과가 나와 있습니다.

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

dropdown-content

ul을 구체화 드롭 다운 구성 요소로 식별합니다. ul 요소에 필요합니다.

2

data-activates

드롭 다운 ul 요소의 ID입니다.

다음은 드롭 다운 사용의 예입니다.

materialize_dropdowns.htm

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Dropdowns Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">      
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>           
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script> 
   </head>
   
   <body class = "container"> 
      <h3>Drop Down Demo</h3>
      <ul id = "dropdown" class = "dropdown-content">
         <li><a href = "#">Inbox<span class = "badge">12</span></a></li>
         <li><a href = "#!">Unread<span class = "new badge">4</span></a></li>
         <li><a href = "#">Sent</a></li>
         <li class = "divider"></li>
         <li><a href = "#">Outbox<span class = "badge">14</span></a></li>
      </ul>
      
      <a class = "btn dropdown-button" href = "#" data-activates = "dropdown">Mail Box
         <i class = "mdi-navigation-arrow-drop-down right"></i></a>	 
   </body>
</html>

결과

결과를 확인하십시오.

Materialise는 탭 CSS 클래스를 제공하여 ul탭으로 요소. 다음 표에는 사용 가능한 클래스와 그 효과가 나와 있습니다.

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

tabs

ul을 구체화 탭 구성 요소로 식별합니다. ul 요소에 필요합니다.

2

active

탭을 활성화합니다.

다음은 탭 사용의 예입니다.

materialize_tabs.htm

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Tabs Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">      
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>           
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script> 
   </head>
   
   <body class = "container"> 
      <h3>Tabs Demo</h3>
      <div class = "row">
         <div class = "col s12">
            <ul class = "tabs">
               <li class = "tab col s3"><a href = "#inbox">Inbox</a></li>
               <li class = "tab col s3"><a class = "active" href = "#unread">
                  Unread</a></li>
               <li class = "tab col s3 disabled"><a href = "#outbox">
                  Outbox (Disabled)</a></li>
               <li class = "tab col s3"><a href = "#sent">Sent</a></li>
            </ul>
         </div>
         
         <div id = "inbox" class = "col s12">Inbox</div>
         <div id = "unread" class = "col s12">Unread</div>
         <div id = "outbox" class = "col s12">Outbox (Disabled)</div>
         <div id = "sent" class = "col s12">Sent</div>
      </div> 
   </body>
</html>

결과

결과를 확인하십시오.

Materialise는 외부 라이브러리 인 Waves를 사용하여 Material Design에 설명 된 잉크 효과를 만듭니다. 다음 표에는 사용 가능한 클래스와 그 효과가 나와 있습니다.

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

waves-effect

컨트롤에 물결 효과를 적용합니다.

2

waves-light

흰색 물결 효과를 적용합니다.

waves-red

빨간색 물결 효과를 적용합니다.

4

waves-green

녹색 물결 효과를 적용합니다.

5

waves-yellow

노란색 물결 효과를 적용합니다.

6

waves-orange

주황색 물결 효과를 적용합니다.

7

waves-purple

자주색 물결 효과를 적용합니다.

8

waves-teal

청록색 물결 효과를 적용합니다.

다음은 버튼에 웨이브 효과를 사용하는 예입니다.

materialize_waves.htm

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Waves Effects Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">      
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>           
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script> 
   </head>
   
   <body class = "container"> 
      <h3>Waves Effects Demo</h3>
      <div class = "collection waves-color-demo">
         <div class = "collection-item">
            <code class = " language-markup">Default</code>
            <a href = "#!" class = "waves-effect btn secondary-content">
               Click Me!</a>
         </div>
         
         <div class = "collection-item">
            <code class = " language-markup">waves-light</code>
            <a href = "#!" class = "waves-effect waves-light btn secondary-content">
               Click Me!</a>
         </div>
         
         <div class = "collection-item">
            <code class = " language-markup">waves-red</code>
            <a href = "#!" class = "waves-effect waves-red btn secondary-content">
               Click Me!</a>
         </div>
         
         <div class = "collection-item">
            <code class = " language-markup">waves-yellow</code>
            <a href = "#!" class = "waves-effect waves-yellow btn secondary-content">
               Click Me!</a>
         </div>
         
         <div class = "collection-item">
            <code class = " language-markup">waves-orange</code>
            <a href = "#!" class = "waves-effect waves-orange btn secondary-content">
               Click Me!</a>
         </div>
         
         <div class = "collection-item">
            <code class = " language-markup">waves-purple</code>
            <a href = "#!" class = "waves-effect waves-purple btn secondary-content">
               Click Me!</a>
         </div>
         
         <div class = "collection-item">
            <code class = " language-markup">waves-green</code>
            <a href = "#!" class = "waves-effect waves-green btn secondary-content">
               Click Me!</a>
         </div>
         
         <div class = "collection-item">
            <code class = " language-markup">waves-teal</code>
            <a href = "#!" class = "waves-effect waves-teal btn secondary-content">
               Click Me!</a>
         </div>
      </div>
   </body>
</html>

결과

결과를 확인하십시오.