Sistem Grid
Selamat datang di tutorial ke-2 Bootstrap. Pada tutorial kali ini, saya akan membahas sistem grid dan tata letak di Bootstrap. Disarankan Untuk melihat postingan saya sebelum nya tentang cara Memasang dan Downlaod Bootstrap Dengan Click Link ->>https://ngoding-gan.blogspot.com/2018/12/cara-mendownload-dan-menggunkan.html
Sistem grid memudahkan kita mengatur tata letak elemen di web. Zaman dulu, kebanyakan web menggunakan tag table untuk mengatur tata letaknya. Sekarang sudah tidak lagi. Karena kurang efektif dan tidak SEO friendly. Oleh karena itu, website zaman sekarang menggunakan CSS untuk mengatur tata letaknya.
<div>
. Berikut ini tiga kelas yang dimaksud:- Kelas
.container
- Kelas
.row
- Kelas
.col-
1. Kelas (class) .container
Classkontainer berfungsi membungkus konten web. Kelas ini sama fungsinya seperti tag<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.
Contoh nya :
Maka Hasil Nya Akan Seperti Berikut :
Konten web berpindah ke tengah, tidak lagi berada di tepi (samping). Itu disebabkan karena pengaruh dari kelas
.
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).
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: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 .
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:
Sekian Tutorial Kali ini Next akan ada Tutorial Membuat "Navigation"
Thanks
0 Comments:
Posting Komentar