Tentang Boostrap
Pengertian Boostrap
Bootstrap adakah framework ataupun tools untuk membuat aplikasi web atapun websiteyang bersifat responsive secara cepat, dan mudah. Kata 'RESPONSIVE' disini berarti tampilan web (susunanisi dan lebarnya) menyesuaikan device yang di gunakan saat mengakses web.
Kegunaan Bootstrap
Bootstrap merupakan framework untuk membangun desain web secara responsif. Artinya, tampilan web yang dibuat oleh bootstrap akan menyesuaikan ukuran layar dari browser yang kita gunakan baik di desktop, tablet ataupun mobile device. Fitur ini bisa diaktifkan ataupun dinon-aktifkan sesuai dengan keinginan kita sendiri. Sehingga, kita bisa membuat web untuk tampilan desktop saja dan apabila dirender oleh mobile browser maka tampilan dari web yang kita buat tidak bisa beradaptasi sesuai layar. Dengan bootstrap kita juga bisa membangun web dinamis ataupun statis .
1. Harus memiliki file distribusi Bootstrap
Terlebih dahulu harus mendownload resource file atau file distribusi yang disediakan oleh bootstrap di situs resminya getbootstrap.com. Pada halaman tersebut, terdapat tombol Download Bootstrap, klik tombol Download Bootstrap. Setelah didownload, kemudian extract menggunakan program seperti 7zip atau winRAR
2. Download jQuery Library Untuk Bekerja Offline
Untuk bisa mengaplikasikan bootstrap component seperti modal dialog, navigation bar dan lainnya yang membutuhkan boostrap JS, Bootstrap JS juga membutuhkan jQuery library agar bisa berjalan normal. Bootstrap tidak menyertakan jQuery di dalam file download-nya untuk itu, kita harus mendownloadnya secara terpisah
3. Harus memiliki code editor.
Code editor penting sekali untuk memanipulasi file yang akan kita kembangkan khususnya file HTML, CSS dan Javascript sebagaimana file tersebut terdapat pada bootstrap. Jangan pernah menggunakan Word processor (Microsoft Word, dll) ataupun notepad untuk memanipulasi file-file tersebut. Karena aplikasi tersebut tidak cocok dan terdapat banyak kekurangan yang akan membingungkan kita sendiri nantinya.
Tahap-tahap belajar bootstrap:
- Buat Folder Baru
Buatlah folder baru, beri nama misalkan "Belajar_Bootstrap".
- Copy seluruh file Bootstrap ke dalam Folder Baru Tersebut
Copy folder css, fonts dan js yang ada pada Bootstrap yang telah kita download tadi, ke dalam folder baru tersebut (Belajar_Bootstrap).
- Copy file jQuery ke dalam folder js
Copy dan Gabungkan file jquery-1.11.1.min.js yang telah kita download kedalam folder js punya bootstrap tadi, hal ini dilakukan untuk mempermudah proses pembelajaran.
- Buat file html
Buat file baru dengan notepadd++ kemudian copy code snippet yang saya sediakan dibawah ini, kemudian save dan berilah nama seperti: index.html ataudefault.html dan simpanlah file tersebut ke folder "Belajar_Bootstrap" yang telah dibuat diatas. Berikut kodenya:
<!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">
<title>Bootstrap 3.3.0 Starter Template - by dul.web.id</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- AWAL CONTENT -- hapus dari sini kebawah (sampai AKHIR CONTENT) -->
<div class="container">
<h1>Apa Kabar Dunia?</h1>
<!-- Small modal -->
<button class="btn btn-danger" data-toggle="modal" data-target=".bs-example-modal-sm">Klik Aku</button>
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="mySmallModalLabel">Small modal</h4>
</div>
<div class="modal-body">
Hai... salam kenal dari <strong>dul</strong>. Jika dialog ini muncul dan Anda bisa baca tulisan ini berarti Bootstrap berhasil di load dan terintegrasi dengan baik. Selamat Belajar
</div>
</div>
</div>
</div>
</div>
<!-- AKHIR CONTENT - dari sini kebawah jgn dihapus -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.11.1.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Kelebihan Dan Kekurangan Boostrap
1. Kelebihan :
a. Dibangun menggunakan Less.
b. Teknologi CSS yang sederhana dan mudah digunakan.
c. Anda dapat mengakses dengan mudah informasi dan fungsi warna, variabel, dan operasi penggunaan
d. kompatibel di semua browser
Jadi tidak perlu takut hasilnya berlainan ketika di buka di browser yang berbeda dan hal ini tentunya mempermudah web designer dalam mengembangkan website nya. (dengan versi tertentu pastinya karena bootstrap requires HTML5 doctype dan CSS3
Jadi tidak perlu takut hasilnya berlainan ketika di buka di browser yang berbeda dan hal ini tentunya mempermudah web designer dalam mengembangkan website nya. (dengan versi tertentu pastinya karena bootstrap requires HTML5 doctype dan CSS3
e. opensource
f. bootstrap lebih lengkap karena mencakup HTML, CSS, and Javascript. juga mendukung responsive web design.
Bootstrap membagi lebar layar menjadi 12 bagian. Sehingga pembagian kolom per kolom tampilan web akan menjadi lebih mudah
a) Kerangka ini dibangun menggunakan Less, sebuah teknologi CSS yang sederhana dan mudah untuk digunakan. Less juga menawarkan lebih banyak kekuatan dan fleksibilitas dari CSS pada umumnya. Dengan Less, pengembang dapat mengakses dengan mudah informasi dan fungsi warna, variabel, dan operasi penggunaan.
b) Responsive layout dan 12 column grid system. Dengan responsive layout maka aplikasi web yang didesain dengan menggunakan Bootstrap akan langsung menyesuaikan dengan lebar dari media perambahnya. Sehingga tampilan web akan tetap rapih dibuka dengan media apapun baik itu handphone, tablet, laptop ataupun PC desktop. Jadi, tampilan tidak akan terganggu dengan resolusi dari layar. Sedangkan 12-column grid system sederhananya adalah Bootstrap akan membagi lebar layar menjadi 12 bagian. Sehingga pembagian kolom per kolom tampilan web akan menjadi lebih mudah
2. Kekurangan Bootstrap
1. Minim gambar karena menggunakan CSS3.
2. Belum mampu memberikan tampilan yang sesuai di semua web browser.
3. Membuat kita menjadi kurang kreatif karena terpaku dengancoding yang dikembangkan oleh developer.
3. Alasan Mengapa Twitter Menggunakan Bootstrap
a) Waktu pembuatan yang lebih cepat
Karena elemen-elemen yang biasa ada dalam sebuah website pada umumnya sudah dibuatkan class-nya oleh Bootstrap ini, jadi kita tinggal memanggilnya dalam theme.
b) Template yang menggunakan Bootstrap lebih rapi
Mungkin ini akan sedikit relatif, karena kebiasaan masing-masing developer membuat coding pasti berbeda-beda. Namun pada dasarnya, karena bootstrap sudah terstruktur, untuk modifikasi class dan penambahan class memang sebaiknya mempertahankan kerapihan code yang sudah ada lebih dulu.
c) Template yang menggunakan Bootstrap lebih ringan.
Untuk developer yang efisien, mungkin akan mengatakan saya salah. Karena, tidak mungkin semua class CSS dalam Bootstrap yang akan dipakai, Benar. Tetapi juga seperti halnya pengguna WordPress yang belum tentu memerlukan seluruh fitur WordPress, tapi tetap menggunakannya dengan alasan fitur itu berguna dan ada jika suatu saat dibutuhkan. Begitulah juga kira-kira saya menganggap bootstrap lebih ‘ringan’.
1. Responsive dan tidak responsive.
Ya, dengan sedikit modifikasi template, kita bisa memilih antara mengaktifkan sifat ‘responsive’ dan tidak ‘responsive’.
2. Banyak template bootstrap gratis dan contoh untuk belajar
Saya memang masih baru mengenal Bootstrap, dan sepertinya tidak percuma untuk mengenalinya lebih lanjut. Karena seperti wordpress dengan codex-nya, Twitter Bootstrap juga memiliki codex yang cukup mudah dipelajari. Template wordpress berbasis twitter bootstrap juga banyak yang gratis, jadi bisa sambil dipelajari karakteristik-nya.
