GRID SISTEM PADA MATERIALIZE
Sebelumya sudah saya jelaskan tentang grid sistem pada materialize , di sini kita langusng membahas grid sistem pada materialize . grid sistem bisa di sebut dengan responsive , ini bisa di gunakan untuk membuat website yang bisa membuat resonsive jika di lihat di handphone ,
di sini saya akan share tentang script dari grid sistem , perhatikan di bawah ini :
Container
container biasanya di gunakan untuk membuat website agar rapi , dan script ini secara otomatis akan memberikan panjang sekitar 70% sisanya margin , perhatikan script di bawah ini :
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>struktur dasar</title>
<link rel="stylesheet" type="text/css" href="assets/css/materialize.css">
<script type="text/javascript" src="assets/js/materilaize.js"></script>
<script type="text/javascript" src="assets/js/jquery.js"></script>
</head>
<body>
<div class="container">
<h4>Bima zainudin ikhsan</h4>
</div>
<div>
<h4>Bima zainudin ikhsan</h4>
</div>
</body>
</html>
Bisa di lihat pada script di atas , terdapat div class="container " dan div biasa , di bawah ini adalah hasil dari script di atas :
terlihat bukan perbedaan jelas , yang memakai container dan tidak .
terlihat agak rapi jika memakai container , selanjutnya kita akan membahas tentang grid sistemnya .
GRID SISTEM
Grid sistem ini biasaya ada 12 Kolom , di setiap kolom itu biasanya membunyai nama tersendiri , tidak jauh berbeda jika grid sistem ini dengan bootstrap , berbeda cuma cara pemangilanya saja .
grid sistem pada materliaze diawali dengan div class yang berelemet ROW . di bawah ini adalah contoh grid sistemnya :
<!DOCTYPE html>Di sini adalah adalah contoh gambar grid sistem atau script di atas :
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>struktur dasar</title>
<link rel="stylesheet" type="text/css" href="assets/css/materialize.css">
<script type="text/javascript" src="assets/js/materilaize.js"></script>
<script type="text/javascript" src="assets/js/jquery.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col s1 red card-panel">1</div>
<div class="col s1 red card-panel">2</div>
<div class="col s1 red card-panel">3</div>
<div class="col s1 red card-panel">4</div>
<div class="col s1 red card-panel">5</div>
<div class="col s1 red card-panel">6</div>
<div class="col s1 red card-panel">7</div>
<div class="col s1 red card-panel">8</div>
<div class="col s1 red card-panel">9</div>
<div class="col s1 red card-panel">10</div>
<div class="col s1 red card-panel">11</div>
<div class="col s1 red card-panel">12</div>
</div>
</div>
</body>
</html>
Selanjutnya kita akan membuat sistem layout dengan col atas full dan di bawahnya col ukuran setengah-setengah :
Columns live inside Rows
Di bawah ini adalah script tutorial selanjutnya :<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>struktur dasar</title>
<link rel="stylesheet" type="text/css" href="assets/css/materialize.css">
<script type="text/javascript" src="assets/js/materilaize.js"></script>
<script type="text/javascript" src="assets/js/jquery.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col s12 card-panel red">This div is 12-columns wide</div>
<div class="col s6 card-panel red">This div is 6-columns wide</div>
<div class="col s6 card-panel red">This div is 6-columns wide</div>
</div>
</div>
</body>
</html>
dan jika di kecilkan akan mengikuti layar kalian , jika kalian memnggunakan grid sistem ini akan terlihat bagus jika di lihat di handphone,
Offsets
offsets bisa di gunakan untuk membuat sistem grid berkurang dan bisa di atur seberapa kurangnya offsets tersebut ,<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>struktur dasar</title>
<link rel="stylesheet" type="text/css" href="assets/css/materialize.css">
<script type="text/javascript" src="assets/js/materilaize.js"></script>
<script type="text/javascript" src="assets/js/jquery.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col s12 card-panel red"><span class="flow-text">This div is 12-columns wide on all screen sizes</span></div>
<div class="col s6 offset-s6 card-panel red"><span class="flow-text red">6-columns (offset-by-6)</span></div>
</div>
</body>
</html>
Push dan Pull
Anda dapat dengan mudah mengubah urutan kolom Anda dengan push and pull. Cukup tambahkan push-s2 atau pull-s2 ke kelas di mana s menandakan awalan kelas layar (s = kecil, m = medium, l = besar) dan nomornya adalah jumlah kolom yang ingin Anda dorong atau tarik.di bawah ini adalah souce codenya :
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>struktur dasar</title>
<link rel="stylesheet" type="text/css" href="assets/css/materialize.css">
<script type="text/javascript" src="assets/js/materilaize.js"></script>
<script type="text/javascript" src="assets/js/jquery.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="row">
<div class="col s7 red push-s5"><span class="flow-text">This div is 7-columns wide on pushed to the right by 5-columns.</span></div>
<div class="col s5 blue pull-s7"><span class="flow-text">5-columns wide pulled to the left by 7-columns.</span></div>
</div>
</div>
</body>
</html>
MEMBUAT LAYOUT DI GRID SISTEM
Di sini kami akan menunjukkan cara membuat beberapa layout yang umum digunakan dengan sistem grid materialize. Mudah-mudahan ini akan membuat Anda lebih nyaman dengan meletakkan elemen.Di bawah ini adalah script dari layout pertama:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>struktur dasar</title>
<link rel="stylesheet" type="text/css" href="assets/css/materialize.css">
<script type="text/javascript" src="assets/js/materilaize.js"></script>
<script type="text/javascript" src="assets/js/jquery.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="divider"></div>
<div class="section">
<h5>Section 1</h5>
<p>Stuff</p>
</div>
<div class="divider"></div>
<div class="section">
<h5>Section 2</h5>
<p>Stuff</p>
</div>
<div class="divider"></div>
<div class="section">
<h5>Section 3</h5>
<p>Stuff</p>
</div>
</div>
</body>
</html>
Pengertian Section
Celas bagian digunakan untuk alas bagian atas dan bawah sederhana. Cukup tambahkan kelas bagian ke div Anda yang berisi blok konten yang besar.Pengetian Divider
Pembagi adalah 1 garis piksel yang membantu memecah konten Anda. Cukup tambahkan pembagi ke div di antara konten Anda.Selanjutnya membuat responisve nya :
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>struktur dasar</title>
<link rel="stylesheet" type="text/css" href="assets/css/materialize.css">
<script type="text/javascript" src="assets/js/materilaize.js"></script>
<script type="text/javascript" src="assets/js/jquery.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="row">
<div class="col s12 card-panel red"><p>s12</p></div>
<div class="col s12 card-panel red m4 l2"><p>s12 m4</p></div>
<div class="col s12 card-panel red m4 l8"><p>s12 m4</p></div>
<div class="col s12 card-panel red m4 l2"><p>s12 m4</p></div>
</div>
<div class="row">
<div class="col red card-panel s12 m6 l3"><p>s12 m6 l3</p></div>
<div class="col red card-panel s12 m6 l3"><p>s12 m6 l3</p></div>
<div class="col red card-panel s12 m6 l3"><p>s12 m6 l3</p></div>
<div class="col red card-panel s12 m6 l3"><p>s12 m6 l3</p></div>
</div>
</div>
</body>
</html>
No comments:
Post a Comment