Materialise - Izgaralar

Materialise, 12 sütunlu bir sıvı duyarlı ızgara sağlar.

Sırasıyla satırları ve sütunları tanımlamak için satır ve sütun stili sınıflarını kullanır.

Sr.No. Sınıf Adı ve Tanımı
1

row

Duyarlı sütunlar için kullanılacak dolgusuz bir kabı belirtir. Bu sınıf, duyarlı sınıfların tamamen duyarlı olması için zorunludur.

2

col

Alt sınıfları olan bir sütun belirtir.

col farklı ekran türleri için tasarlanmış birkaç alt sınıfa sahiptir.

Küçük Ekranlı Cihazlar için Sütunlar

Aşağıda, genellikle akıllı telefonlar gibi küçük ekranlı cihazlar için sütun düzeyinde stillerin bir listesi bulunmaktadır.

Sr.No. Sınıf Adı ve Tanımı
1

s1

Genişliğe sahip 12 sütundan 1'ini% 08,33 olarak tanımlar.

2

s2

Genişliği% 16,66 olan 12 sütundan 2'sini tanımlar.

3

s3

Genişliği% 25,00 olan 12 sütundan 3'ünü tanımlar.

4

s4

Genişliği% 33,33 olan 12 sütundan 4'ünü tanımlar.

s5 - s11
12

s12

Genişliği% 100 olan 12 sütundan 12'sini tanımlar. Küçük ekranlı telefonlar için varsayılan sınıf.

Orta Boy Ekranlı Cihazlar için Sütunlar

Aşağıda, orta ekranlı cihazlar, tipik olarak tabletler için sütun düzeyinde stillerin bir listesi bulunmaktadır.

Sr.No. Sınıf Adı ve Tanımı
1

m1

12 sütundan 1'ini genişlikle% 08.33 olarak tanımlar

2

m2

Genişliği% 16,66 olan 12 sütundan 2'sini tanımlar.

3

m3

Genişliği% 25,00 olan 12 sütundan 3'ünü tanımlar.

4

m4

Genişliği% 33,33 olan 12 sütundan 4'ünü tanımlar.

m5 - m11
12

m12

Genişliği% 100 olan 12 sütundan 12'sini tanımlar. Orta ekranlı telefonlar için varsayılan sınıf.

Büyük Ekranlı Cihazlar için Sütunlar

Aşağıda, genellikle dizüstü bilgisayarlar gibi büyük ekranlı aygıtlar için sütun düzeyinde stillerin bir listesi bulunmaktadır.

Sr.No. Sınıf Adı ve Tanımı
1

l1

Genişliğe sahip 12 sütundan 1'ini% 08,33 olarak tanımlar.

2

l2

Genişliği% 16,66 olan 12 sütundan 2'sini tanımlar.

3

l3

Genişliği% 25,00 olan 12 sütundan 3'ünü tanımlar.

4

l4

Genişliği% 33,33 olan 12 sütundan 4'ünü tanımlar.

l5 - l11
12

l12

Genişliği% 100 olan 12 sütundan 12'sini tanımlar. Büyük ekranlı cihazlar için varsayılan sınıf.

Kullanım

Her alt sınıf, bir aygıtın türüne göre kullanılacak ızgaranın sütun sayısını belirler. Aşağıdaki HTML pasajını düşünün.

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

Bir HTML öğesinin sınıf özniteliğinde bir alt sınıf belirtilmemişse, kullanılacak varsayılan sütunlar bir cihazda 12'dir.

Misal

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>

Sonuç

Sonucu doğrulayın.