Scribd
Unggah
17 tayangan35 halaman

Tutorial Bootstrap - Memahami Sistem Grid Untuk Membuat Layout

Tutorial Bootstrap_ Memahami Sistem Grid untuk membuat Layout

Diunggah oleh

kholikq
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
17 tayangan35 halaman

Tutorial Bootstrap - Memahami Sistem Grid Untuk Membuat Layout

Tutorial Bootstrap_ Memahami Sistem Grid untuk membuat Layout

Diunggah oleh

kholikq
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 35

Tutorial Bootstrap: Memahami Sistem Grid untuk membuat Layout

#CSS#Bootstrap#Framework

Bagian terpenting yang harus dipahami pada Bootstrap adalah sistem


grid.
Saya yakin, jika kamu memahami sistem grid.. kamu akan bisa
membuat layout web dengan mudah dan bagaimanapun bentuknya.
Pada tutorial ini..
Kita akan belajar tentang pengertian sistem grid,
class-class untuk membuat sistem grid,
dan latihan menggunakan sistem grid untuk membuat beberapa
macam layout web.

Apa itu Sistem Grid di Bootstrap?


Sistem Grid adalah sistem yang digunakan Bootstrap untuk mengatur
tata letak (layout). Sistem ini terdiri dari 12 kolom dan 6 breakpoint.
Satu kolom penuh panjangnya adalah 12. Jika kolom dibagi dua maka
panjangnya akan menjadi 6.
Jika dibagi lagi, maka panjang kolomnya akan semakin kecil, hingga
yang paling kecil adalah 1. Ini artinya, kolom pada grid hanya bisa
dibagi sampai 12 saja.
Selain untuk menentukan tata letak, Grid juga berfungsi sebagai guide
line bagi desainer. Sehingga nanti akan membuat desain lebih mudah
diterapkan ke dalam kode.

Memahami Breakpoint
Breakpoint adalah ukuran lebar yang menentukan tampilan responsif
terhadap ukuran viewport perangkat tertentu. 1
Saat ini Bootstrap memiliki 6 ukuran Breakpoint, yakni none, sm, md, lg,
xl, dan xxl.
Perhatikan gambar berikut.
Ini adalah ukuran breakpoint sesuai dengan ukuran layar perangkat.
Ingat!
Bootstrap adalah framework yang menggunakan pendekatan mobile
first, jadi kita harus memikirkan tampilan di mobile terlebih dahulu
sebelum membuat tampilan untuk desktop.
Karena itu, nilai default breakpoint adalah none. Ukuran ini adalah
ukuran yang paling kecil, yakni sekitar 576px.
Contoh:
<div class="col-12">
<!-- ukuran kolom ini 12 -->
</div>
<div class="col-6">
<!-- ukuran kolom ini 6 -->
</div>
Pada contoh tersebut, kita memberikan ukuran kolom 12 dan 6 tanpa
menggunakan breakpoint.
Artinya:
Ukuran kolom tersebut akan tetap 12 dan 6 di semua ukuran layar.
Gimana kalau kita ingin mengubah, misalnya menjadi 8 pada layar
komputer dan tetap 12 pada layar HP.
Gampang!
Tinggal berikan breakpoint.
<div class="col-12 col-lg-8">
<!-- ukuran kolom ini 12 pada layar hp -->
<!-- ukuran kolom ini 8 pada layar komputer -->
</div>
<div class="col-6">
<!-- ukuran kolom ini 6 -->
</div>
Nah, sekarang ukurannya akan menjadi 8 di layar komputer.
Class Container
Container adalah fondasi dasar dari blok layout. Container berfungsi
untuk membungkus blok di dalamnya, sehingga terlihat rapi terhadap
ukuran layar.
Container juga memiliki breakpoint.

Ukuran kontainer akan 100% pada breakpoint tertentu. Misalnya, jika


kita menggunakan class container-md maka lebar kontainer akan
100% pada layar Extra Small dan Small.
Mari kita coba dalam contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Contoh Container</title>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/
css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-
1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2
QvZ6jIW3" crossorigin="anonymous">
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/j
s/bootstrap.bundle.min.js" integrity="sha384-
ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8n
bTov4+1p" crossorigin="anonymous"></script>
</head>
<body>
<header>
<div class="container bg-info text-white">
<h1>Contoh Container</h1>
</div>
</header>
</body>
</html>
Hasilnya:

Jika class container dihapus, maka hasilnya:

Blok header tidak menggunakan container, sekilas terlihat seperti


menggunakan class container-fluid.
Namun, sebenarnya berbeda.
Berikut ini tampilan blok header yang menggunakan class container-
fluid.
Class container-fluid adalah class kontainer yang ukurannya 100%
di semua ukruan layar.
Nah, setelah kita mengetahui blok dasar dari layout yakni container,
berikutnya kita akan pelajari class row dan col.
Class row dan col
Class row dan col merupakan class untuk membuat baris dan kolom.
Kedua class ini lah yang kita gunakan untuk membuat grid.
Class row berfungsi untuk membuat baris. Class ini menggunakan
flex, namun breakpoint tidak berlaku untuk class ini.
Contoh penggunaan:
<div class="row">

</div>
Class col berfungsi untuk membuat kolom. Class ini harus dibungkus
oleh class row agar menjadi grid.
Class col memiliki ukuran dan breakpoint. Ukuran paling panjang
adalah 12, dan ukuran paling pendek adalah 1.
Format penulisannya:
col-[breakpoint]-[ukuran]
Contoh penggunaan:
<div class="row">

<div class="col">
<!-- kolom 1 -->

</div>

<div class="col">

<!-- kolom 2 -->

</div>

</div>

<div class="row">

<div class="col-md-12">

<!-- kolom 1 -->

</div>

</div>

Class Gutter
Gutter adalah jarak antar kolom. Class Gutter ditulis bersamaan
dengan class row.
Format penulisannya menggunakan huruf g.
g-[breakpoint]-[ukuran]

gx-[breakpoint]-[ukuran]

gy-[breakpoint]-[ukuran]
Gutter punya ukuran mulai dari 0 sampai 5.
Class gx adalah Gutter untuk horizontal, sedangkan gy adalah Gutter
untuk vertikal. Jika hanya menggunakan g saja, maka artinya gutter
untuk horizontal dan vertikal.
Contoh:
<div class="row g-2">

<div class="col">

<!-- kolom 1 -->


</div>

<div class="col">

<!-- kolom 2 -->

</div>

</div>
Artinya, kita akan memberikan jarak Gutter untuk kolom sebesar 2.
Contoh lagi:
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width,


initial-scale=1.0">

<title>Contoh Gutter</title>

<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/b
ootstrap.min.css" rel="stylesheet" integrity="sha384-
1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6j
IW3" crossorigin="anonymous">
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/boo
tstrap.bundle.min.js" integrity="sha384-
ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4
+1p" crossorigin="anonymous"></script>

</head>

<body>

<div class="container">

<div class="row g-0">

<div class="col-md-3">

<img class="w-100"
src="https://placeimg.com/150/150/nature" alt="gambar alam">

</div>

<div class="col-md-3">

<img class="w-100"
src="https://placeimg.com/150/150/nature" alt="gambar alam">

</div>
<div class="col-md-3">

<img class="w-100"
src="https://placeimg.com/150/150/nature" alt="gambar alam">

</div>

<div class="col-md-3">

<img class="w-100"
src="https://placeimg.com/150/150/nature" alt="gambar alam">

</div>

<div class="col-md-3">

<img class="w-100"
src="https://placeimg.com/150/150/nature" alt="gambar alam">

</div>

<div class="col-md-3">

<img class="w-100"
src="https://placeimg.com/150/150/nature" alt="gambar alam">

</div>

<div class="col-md-3">

<img class="w-100"
src="https://placeimg.com/150/150/nature" alt="gambar alam">
</div>

<div class="col-md-3">

<img class="w-100"
src="https://placeimg.com/150/150/nature" alt="gambar alam">

</div>

</div>

</div>

</body>

</html>
Pada contoh ini, kita memberikan nilai gutter 0, artinya tidak ada jarak
antar kolom.
Hasilnya:
Sekarang coba ubah g-0 menjadi g-5 untuk memberikan jarak sebesar
5.
Maka hasilnya:

Latihan: Layout 1 Kolom


Pada latihan ini, kita akan membuat layout 1 kolom dan ada tiga
komponen penting yang ada di dalam kolom tersebut, yakni Header,
Artikel, dan Footer.
Kurang lebih desainnya seperti ini:
Mari kita buat dengan Bootstrap.
Buatlah satu file dengan nama latihan-1-kolom.html, kemudian isi
dengan kode berikut.
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width,


initial-scale=1.0">

<title>Contoh Layout 1 Kolom</title>


<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/b
ootstrap.min.css" rel="stylesheet" integrity="sha384-
1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6j
IW3" crossorigin="anonymous">

<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/boo
tstrap.bundle.min.js" integrity="sha384-
ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4
+1p" crossorigin="anonymous"></script>

</head>

<body>

<header class="container bg-primary text-white">

<div class="row">

<div class="col-12 py-4 text-center">

<h1 class="display-1">Tutorial Bootstrap</h1>

<p class="lead">Panduan Belajar Bootstrap


untuk Pemula</p>

</div>
</div>

</header>

<main class="container border">

<div class="row">

<div class="col-12 py-5">

<h1>Membuat Layout Satu Kolom</h1>

<p>Lorem ipsum dolor sit amet consectetur


adipisicing elit. Ad reprehenderit libero unde ullam ducimus

sunt, saepe fugit animi accusamus


accusantium excepturi corrupti aut tenetur? Cumque quasi
ratione

ipsam facere quod?</p>

</div>

</div>

</main>

<footer class="container bg-light">


<div class="row">

<div class="col-12 py-4">

&copy; 2021 Tutorial Bootstrap

</div>

</div>

</footer>

</body>

</html>
Hasilnya:
Latihan: Layout 2 Kolom
Pada laithan kedua ini, kita akan membagi elemen artikel menjadi dua
kolom.
Kolom pertama untuk artikel dan kolom kedua untuk menampilkan
informasi lain seperti widget, iklan, dll.
Pada tampilan mobile, kita ingin layout dua kolom ini ditampilkan
dalam satu kolom, sedangkan pada desktop tetap ditampilkan dua
kolom.
Kira-kira desainnya seperti ini:

Baiklah..
Mari kita coba buat dengan Bootstrap.
Buatlah file baru dengan nama latihan-2-kolom.html, kemudian isi
dengan kode berikut.
<!DOCTYPE html>

<html lang="en">

<head>
<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width,


initial-scale=1.0">

<title>Contoh Layout 1 Kolom</title>

<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/b
ootstrap.min.css" rel="stylesheet" integrity="sha384-
1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6j
IW3" crossorigin="anonymous">

<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/boo
tstrap.bundle.min.js" integrity="sha384-
ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4
+1p" crossorigin="anonymous"></script>

</head>

<body>

<header class="container bg-primary text-white">

<div class="row">
<div class="col-12 py-4 text-center">

<h1 class="display-1">Tutorial Bootstrap</h1>

<p class="lead">Panduan Belajar Bootstrap


untuk Pemula</p>

</div>

</div>

</header>

<main class="container border">

<div class="row">

<div class="col-md-8 py-5">

<h1>Membuat Layout Satu Kolom</h1>

<p>Lorem ipsum dolor sit amet consectetur


adipisicing elit. Ad reprehenderit libero unde ullam ducimus
sunt, saepe fugit animi accusamus accusantium excepturi
corrupti aut tenetur? Cumque quasi ratione ipsam facere quod?
</p>

</div>

<div class="col-md-4 py-5">


<img class="w-100"
src="https://placeimg.com/250/250/nature" alt="gambar alam">

</div>

</div>

</main>

<footer class="container bg-primary text-white">

<div class="row">

<div class="col-12 py-4">

&copy; 2021 Tutorial Bootstrap

</div>

</div>

</footer>

</body>

</html>
Hasilnya:
Latihan: Layout 3 Kolom
Pada latihan ke-3 ini, kita akan membuat tiga kolom untuk tampilan di
komputer dan satu kolom di HP.
Berikut ini rancangan desainnya:

Baiklah mari kita buat dalam bootstrap..


Buatlah file baru dengan nama contoh-3-kolom.html, kemudian isi
dengan kode berikut:
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width,


initial-scale=1.0">

<title>Contoh Layout 1 Kolom</title>

<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/b
ootstrap.min.css" rel="stylesheet" integrity="sha384-
1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6j
IW3" crossorigin="anonymous">

<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/boo
tstrap.bundle.min.js" integrity="sha384-
ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4
+1p" crossorigin="anonymous"></script>

</head>
<body>

<header class="container bg-primary text-white">

<div class="row">

<div class="col-12 py-4 text-center">

<h1 class="display-1">Tutorial Bootstrap</h1>

<p class="lead">Panduan Belajar Bootstrap


untuk Pemula</p>

</div>

</div>

</header>

<main class="container border">

<div class="row">

<div class="col-md-3">

<h1>Membuat Layout Satu Kolom</h1>


<p>Lorem ipsum dolor sit amet consectetur
adipisicing elit. Ad reprehenderit libero unde ullam ducimus
sunt, saepe fugit animi accusamus accusantium excepturi
corrupti aut tenetur? Cumque quasi ratione ipsam facere quod?
</p>

</div>

<div class="col-md-6">

<h1>Membuat Layout Satu Kolom</h1>

<p>Lorem ipsum dolor sit amet consectetur


adipisicing elit. Ad reprehenderit libero unde ullam ducimus
sunt, saepe fugit animi accusamus accusantium excepturi
corrupti aut tenetur? Cumque quasi ratione ipsam facere quod?
</p>

</div>

<div class="col-md-3">

<h1>Membuat Layout Satu Kolom</h1>

<p>Lorem ipsum dolor sit amet consectetur


adipisicing elit. Ad reprehenderit libero unde ullam ducimus
sunt, saepe fugit animi accusamus accusantium excepturi
corrupti aut tenetur? Cumque quasi ratione ipsam facere quod?
</p>

</div>

</div>
</main>

<footer class="container bg-light">

<div class="row">

<div class="col-12 py-4">

&copy; 2021 Tutorial Bootstrap

</div>

</div>

</footer>

</body>

</html>
Hasilnya:
Latihan: Layout 4 Kolom
Pada latihan ke-4 ini, kita akan membuat 4 kolom untuk menampilkan
galeri foto.
PC,Laptop, Tablet: 4 kolom
HP: 3 kolom.
Berikut ini desainnya:
Mari kita buat!
Buatlah file baru dengan nama contoh-4-kolom.html, kemudian isi
dengan kode berikut:
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width,


initial-scale=1.0">

<title>Contoh Layout 4 Kolom</title>


<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/b
ootstrap.min.css" rel="stylesheet" integrity="sha384-
1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6j
IW3" crossorigin="anonymous">

<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/boo
tstrap.bundle.min.js" integrity="sha384-
ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4
+1p" crossorigin="anonymous"></script>

</head>

<body>

<header class="container bg-primary text-white">

<div class="row">

<div class="col-12 py-4 text-center">

<h1 class="display-2">Galleri Bootstrap</h1>

<p class="lead">Panduan Belajar Bootstrap


untuk Pemula</p>

</div>
</div>

</header>

<main class="container border p-md-5 p-2">

<div class="row g-2 g-md-4">

<div class="col-6 col-md-3">

<img class="w-100"
src="https://placeimg.com/150/150/nature/1" alt="gambar
alam">

</div>

<div class="col-6 col-md-3">

<img class="w-100"
src="https://placeimg.com/150/150/nature/2" alt="gambar
alam">

</div>

<div class="col-6 col-md-3">

<img class="w-100"
src="https://placeimg.com/150/150/nature/3" alt="gambar
alam">

</div>
<div class="col-6 col-md-3">

<img class="w-100"
src="https://placeimg.com/150/150/nature/4" alt="gambar
alam">

</div>

<div class="col-6 col-md-3">

<img class="w-100"
src="https://placeimg.com/150/150/nature/5" alt="gambar
alam">

</div>

<div class="col-6 col-md-3">

<img class="w-100"
src="https://placeimg.com/150/150/nature/6" alt="gambar
alam">

</div>

<div class="col-6 col-md-3">

<img class="w-100"
src="https://placeimg.com/150/150/nature/7" alt="gambar
alam">

</div>

<div class="col-6 col-md-3">


<img class="w-100"
src="https://placeimg.com/150/150/nature/8" alt="gambar
alam">

</div>

</div>

</main>

<footer class="container bg-light">

<div class="row">

<div class="col-12 py-4">

&copy; 2021 Tutorial Bootstrap

</div>

</div>

</footer>

</body>

</html>
Hasilnya:
Latihan: Challenge!
Jika kamu sudah paham cara membuat layout di Bootstrap, coba
tantangan berikut.
Buatlah layout galeri yang mirip seperti layout instagram.

Galeri foto menggunakan tiga kolom. Pada tampilan di HP tidak ada


gutter anter foto, sedangkan di desktop ada gutternya.

Anda mungkin juga menyukai