Bootstrap adalah framework CSS dan javascript yang sangat populer dan open
source. Bootstrap dapat memudahkan kita dalam mendesain web. Kita tidak perlu
lagi membuat css dari nol sehingga pengembangan menjadi lebih cepat.
Saya akan sedikit bercerita tentang bootstrap dan template bootstrap.
Bootstrap menyediakan file css dan js saja, sehingga bootstrap tidak lah sama
dengan template. Template merupakan karya orang yang banyak diinternet baik
geratis maupun berbayar. Jika anda berfikir membuat web secara instan maka
downloadlah template bootstrap. Namun jika anda ingin mengembangkan template
sendiri maka downloadlah framework bootstrap untuk mempercepat pembuatannya.
Sebelum belajar bootstrap anda harus terlebih dahulu paham hal berikut.
- Mengerti penulisan HTML
- Mengerti penulisan CSS eksternal
- Mengerti penulisan JS eksternal
Alangkah baiknya anda juga belajar jQuery sembari belajar bootstrap. Ketika
belajar bootstrap baiknya kita lupakan dulu PHP dan mulai mendesain
tampilan. Ada beberapa hal yang paling terkenal tentang kemampuan bootstrap.
- Responship terhadap layar
- Mudah dipelajari
- Dokumentasi lengkap
Baik, saya akan membagikan tips belajar bootstrap secara cepat. Menurut saya
ada dua hal yang harus anda ketahui untuk belajar bootstrap dengan cepat.
- Layout
- Dokumentasi
Hal terpenting dalam membuat desain tampilan web adalah membuat layout.
Jika anda pernah belajar membuat layout dengan tabel html maka cukup mudah
untuk memahami layout di bootstrap. Baris dan kolom pada layout tabel
dikenal dengan istilah grid di bootstrap. Bedanya bootstrap responship
terhadap ukuran layar sedangkan tabel tidak. Terakhir anda cukup
mengunjungi dokumentasi bootsrap dan terus belajar sambil mengingatnya
sampai luar kepala.
Langsung saja, anda dapat mendownload bootstrap melalui web resminya.
Jika anda telah mendownloadnya maka selanjutnya buat folder di htdocs.
Saya menempatkan boostrap di dalam folder test di htdocs. Folder hasil extrak
dari download tadi adalah folder css dan js. Pada kesempatan ini sebenarnya
kita hanya menggunakan file bootstrap.css untuk yang lain anda dapat
mempelajarinya sendiri.
<!DOCTYPE html>
<html>
<head>
<title>Template</title>
<link rel="stylesheet"
type="text/css" href="css/bootstrap.css">
</head>
<body>
<div class="container">
Ini adalah kolom pertama.Ini
adalah kolom pertama.Ini adalah kolom pertama.Ini adalah kolom pertama.Ini
adalah kolom pertama.Ini adalah kolom pertama.Ini adalah kolom pertama.Ini
adalah kolom pertama.Ini adalah kolom pertama.Ini adalah kolom pertama.Ini
adalah kolom pertama.Ini adalah kolom pertama.Ini adalah kolom pertama.Ini
adalah kolom pertama.Ini adalah kolom pertama.Ini adalah kolom pertama.Ini
adalah kolom pertama.Ini adalah kolom pertama.Ini adalah kolom pertama.Ini
adalah kolom pertama.Ini adalah kolom pertama.Ini adalah kolom pertama.Ini
adalah kolom pertama.Ini adalah kolom pertama.Ini adalah kolom pertama.Ini
adalah kolom pertama.Ini adalah kolom pertama.Ini adalah kolom pertama.Ini
adalah kolom pertama.Ini adalah kolom pertama.Ini adalah kolom pertama.Ini
adalah kolom pertama.Ini adalah kolom pertama.
</div>
Ini adalah kolom kedua. Ini adalah
kolom kedua.Ini adalah kolom kedua.Ini adalah kolom kedua.Ini adalah kolom
kedua.Ini adalah kolom kedua.Ini adalah kolom kedua.Ini adalah kolom
kedua.Ini adalah kolom kedua.Ini adalah kolom kedua.Ini adalah kolom
kedua.Ini adalah kolom kedua.Ini adalah kolom kedua.Ini adalah kolom
kedua.Ini adalah kolom kedua.Ini adalah kolom kedua.Ini adalah kolom
kedua.Ini adalah kolom kedua.Ini adalah kolom kedua.Ini adalah kolom
kedua.Ini adalah kolom kedua.Ini adalah kolom kedua.Ini adalah kolom
kedua.Ini adalah kolom kedua.Ini adalah kolom kedua.Ini adalah kolom
kedua.Ini adalah kolom kedua.Ini adalah kolom kedua.Ini adalah kolom
kedua.Ini adalah kolom kedua.Ini adalah kolom kedua.Ini adalah kolom
kedua.Ini adalah kolom kedua.
</div>
Ini adalah kolom ketiga.Ini adalah
kolom ketiga.Ini adalah kolom ketiga.Ini adalah kolom ketiga.Ini adalah
kolom ketiga.Ini adalah kolom ketiga.Ini adalah kolom ketiga.Ini adalah
kolom ketiga.Ini adalah kolom ketiga.Ini adalah kolom ketiga.Ini adalah
kolom ketiga.Ini adalah kolom ketiga.Ini adalah kolom ketiga.Ini adalah
kolom ketiga.Ini adalah kolom ketiga.Ini adalah kolom ketiga.Ini adalah
kolom ketiga.Ini adalah kolom ketiga.Ini adalah kolom ketiga.Ini adalah
kolom ketiga.Ini adalah kolom ketiga.Ini adalah kolom ketiga.Ini adalah
kolom ketiga.Ini adalah kolom ketiga.Ini adalah kolom ketiga.Ini adalah
kolom ketiga.Ini adalah kolom ketiga.Ini adalah kolom ketiga.Ini adalah
kolom ketiga.Ini adalah kolom ketiga.Ini adalah kolom ketiga.Ini adalah
kolom ketiga.Ini adalah kolom ketiga.Ini adalah kolom ketiga.
</div>
</div>
</div>
</body>
</html>
Hasilnya seperti ini,
Nah, anda baru saja belajar grid yang terdiri dari satu baris dan tiga kolom.
Jika anda sudah belajar tabel di HTML begini cara mengingatnya.
- class="container" => <table>
- class="row" => <tr>
- class="col-4" => <td>
untuk class kolom terdiri dari 1 sampai 12. Untuk col-12 berati lebar kolom
selebar layar (full) dan mengecil sampai col-1.
anda dapat membaca lengkapnya di sana
<div class="col-md-3 col-6">
Arti kode di atas adalah jika dibuka dilayar medium maka lebarya 3/12 yaitu
1/4 ukuran layar. sedangkan jika lebar layar extra small maka 6/12 yaitu 1/2
ukuran layar. ini lah yang membuat bootrstrap responship terhadap layar.
Lalu bagaimana cara untuk colspan atau marger cell ? tidak perlu hawatir
begini caranya
<div class="col-2">
</div>
<div class="col-10">
</div>
maka lebar kolom pertama 2/12 dan lebar kolom ke dua 10/12. Lalu bagaimana untuk
rowspan? anda dapat menambahkan properti height css pada kolom dan memanfaatkan
teknik layout di dalam layout.
Setelah anda paham membuat layout anda dapat membaca dokumentasi yang anda
butuhkan dan copas contoh kode nya ke dalam layout. Ingat ya lihat dokumentasi di halaman resmi bootstrap.
<!DOCTYPE html>
<html>
<head>
<title>Template</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
</head>
<body>
<div class="container-fluid">
<div class="row" >
<div class="col-12" style="padding: 0px">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</div>
</div>
<div class="row">
<div class="card col-lg-2 col-12 shadow rounded" style="min-height: 500px">
Selamat Datang di Belajar Web Medan.
</div>
<div class="card col-lg-10 col-12 shadow rounded" style="min-height: 500px">
Mari belajar pemrograman web di sini
</div>
</div>
<div class="row">
<div class="col-lg-12 col-12 d-flex justify-content-center">
Copyright © Belajar Web Medan 2020
</div>
</div>
</div>
</body>
</html>
Hasilnya seperti ini.
Diatas adalah contoh sederhana template yang dibuat menggunakan bootstrap. Semoga bermanfaat 😀
