Mengenal Grid System Bootstrap
Tutorial sites - Mengenal Grid System Bootstrap sangat berguna bagi kalian yang ingin menjadi desainer web, karena dengan System Grid, kalian dapat lebih mudah mendesain web, dan pastinya responsive. Dan berikut penjelasan lebih rinicnya yang saya kutip dari malasngoding.com dan petanikode.com
Grid System pada bootstrap merupakan pengaturan ukuran yang di tampilkan pada monitor. grid system berfungsi untuk membuat pengaturan untuk lebar dari masing-masing komponen web sehingga kita dapat dengan bebas mengatur ke-responsivan halaman website yang kita buat dengan bootstrap. bootstrap memiliki 12 grid. yang nantinya kita akan dapat menggunakan class berikut ini untuk mengatur keresponsive an halaman website dengan mengaturnya menggunakan 12 grid bootstrap. bootstrap memiliki beberapa class grid yang masing-masing nya memiliki kegunaannya masing-masing. Mengenal Grid System Bootstrap
- Kelas
.container - Kelas
.row - Kelas
.col-*
Mari kita bahas satu persatu.
1. Kelas .container
Kelas kontainer berfungsi membungkus konten web. Kelas ini sama fungsinya seperti tag
Pertama kita coba dulu kelas
<table> dalam pembuatan tabel. Ada dua jenis kelas .container: (1) Kelas.container yang ukuran lebarnya tetap (fixed) dan (2) kelas .container-fluid yang ukuran lebarnya mengikuti lebar browser.Pertama kita coba dulu kelas
.container. Kita tinjau ulang hasil dari tutorial pertama. Konten web yang belum menggunakan kelas .container: hello_bootstrap.html
Selanjutnya, kita tambahkan tag
<div> dengan kelas .container dan kode CSS untukbackground dan warna teks. Sehingga kodenya menjadi seperti berikut ini:<!DOCTYPE html>
<html>
<head>
<title>Hello Bootstrap</title>
<!-- menyisipkan bootstrap -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
</head>
<body>
<div class="container" style="background: #008080; color: white">
<h1>Hello Bootstrap!</h1>
<p>Selamat datang di tutorial framework bootstrap</p>
</div>
</body>
</html>
Maka, hasilnya akan seperti ini:
Konten web berpindah ke tengah, tidak lagi berada di tepi (samping). Itu disebabkan karena pengaruh dari kelas
Ukuran lebar kontainer akan mengikuti lebar browser. Coba saja perbesar ukuran browser, maka ukuran lebar kontainernya pun akan ikut berubah (membesar).
Satu hal lagi, di dalam sebuah website boleh memiliki lebih dari satu elemen kontainer. Jadi, bila anda ingin memisahkan kontainer untuk header, artikel, footer, dll. Itu dibolehkan.
.container. Sekarang kita coba menggunakan kelas.container-fluid. Gantilah kelas container menjadi kelas container-fluid. Maka hasilnya akan seperti berikut ini:Ukuran lebar kontainer akan mengikuti lebar browser. Coba saja perbesar ukuran browser, maka ukuran lebar kontainernya pun akan ikut berubah (membesar).
Satu hal lagi, di dalam sebuah website boleh memiliki lebih dari satu elemen kontainer. Jadi, bila anda ingin memisahkan kontainer untuk header, artikel, footer, dll. Itu dibolehkan.
2. Kelas .row
Di dalam kelas
.container ada kelas lagi, yaitu kelas .row. Fungsinya untuk membuat baris. Bila dibandungkan dengan tabel, kelas ini seperti tag <tr>. Kita harus membuat elemen div dengan kelas row di dalam kontainer. Jangan membuatnya di luar. Contohnya sebagai berikut:<div class="container">
<div class="row">
... konten web di sini ...
</div>
</div>3. Kelas .col-*
Di dalam elemen row, ada kelas
.col-*. Fungsinya untuk membuat kolom. Bila dibandingkan dengan tabel, kelas .col-* seperti tag <td>. Kelas .col-* memiliki ukuran-ukuran:col-xs-*(Extra Small) untuk perangkat dengan layar kecil seperti ponsel;col-sm-*(Small) untuk perangkat dengan layar agak kecil seperti tablet;col-md-*(medium) untuk perangkat dengan layar sedang seperti laptop; dancol-lg-*(Large) untuk perangkat dengan layar besar seperti komputer (PC).
Jadi, agar ukurannya sesui dengan perangkat yang digunakan, maka gunakanlah semuanya. Karena, sekarang website tidak hanya diakses melalui PC dan laptop saja. Namun, pada tutorial ini, kita sepakati menggunakan yang medium, yaitu
Ada lagi ukuran yang harus diketahui, yaitu ukuran lebar kolom. Lebar kolom paling panjang adalah 12 dan paling pendek adalah 1. Untuk membuat kolom dengan lebar 12, kita cukup memanggil nama kelasnya .
Sekarang mari kita coba menerapkan konsep grid ini dengan membuat kode HTML untuk rancangan web seperti beikut ini:
Pada rancangan di atas, terdapat tiga baris (row) dan satu kolom (col). Maka bentuk kodenya akan seperti berikut ini:
col-md-*.Ada lagi ukuran yang harus diketahui, yaitu ukuran lebar kolom. Lebar kolom paling panjang adalah 12 dan paling pendek adalah 1. Untuk membuat kolom dengan lebar 12, kita cukup memanggil nama kelasnya .
col-md-12. Pada dokumentasi Boostrap, sudah dijelaskan seperti ini:Sekarang mari kita coba menerapkan konsep grid ini dengan membuat kode HTML untuk rancangan web seperti beikut ini:
Pada rancangan di atas, terdapat tiga baris (row) dan satu kolom (col). Maka bentuk kodenya akan seperti berikut ini:
Maka akan menghasilkan tampilan seperti berikut ini:
Nah, sampai di sini dulu tutorial kali ini. Semoga dapat dipahami dengan jelas. Kalau pun belum paham, silahkan berdiskusi melalui komentar. Selamat belajar Bootstrap.
Nah, sampai di sini dulu tutorial kali ini. Semoga dapat dipahami dengan jelas. Kalau pun belum paham, silahkan berdiskusi melalui komentar. Selamat belajar Bootstrap.
0 komentar:
Posting Komentar