Apa itu Bootstrap?
Seperti yang telah dikatakan sebelumnya, Bootstrap merupakan sebuah framework CSS dari twitter, yang menyediakan kumpulan komponen-komponen antarmuka dasar pada web yang telah dirancang sedemikian rupa untuk digunakan bersama-sama. Selain komponen antarmuka, Bootstrap juga menyediakan sarana untuk membangun layout halaman dengan mudah dan rapi, serta modifikasi pada tampilan dasar HTML untuk membuat seluruh halaman web yang dikembangkan senada dengan komponen-komponen lainnya.Mengutip pengembang yang menciptakan Bootstrap, Bootstrap dibuat untuk memberikan sekumpulan perangkat yang dapat digunakan untuk membangun website sederhana dengan mudah.
Bootstrap is a very simple way to promote quick, clean and highly usable applications � providing a clean and uniform solution to the most common, everyday interface tasks developers come across. Mark OttoLisensi yang digunakan oleh Bootstrap yaitu lisensi Apache 2.0, sebuah lisensi yang sangat terbuka sehingga kita dapat dengan bebas dan mudah menggunakan Bootstrap, tanpa perlu khawatir akan ancaman legal dari Twitter atau pihak lainnya.
Menggunakan Bootstrap
Langkah-langkah yang dibutuhkan untuk menggunakan Bootstrap pada website yang akan kita kembangkan sangatlah sederhana. Sederhananya, penggunaan Bootstrap dapat dicapai dengan tiga langkah singkat, yaitu:- Download Bootstrap pada website resminya.
- Lakukan ekstraksi file
zip
hasil download, dan - masukkan CSS Bootstrap pada file HTML anda.
Langkah 1: File HTML Awal
Untuk mulai melihat bagiamana Bootstrap memberikan fitur-fitur rancangan antarmuka indah ke halaman website, kita akan membuat sebuah file HTML sederhana terlebih dahulu. Buat sebuah file HTML, dan isikan file tersebut dengan kode berikut:Simpan file dengan nama
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Sebuah file HTML Sederhana</title>
</head>
<body>
<h1>File HTML</h1>
<p>Ini adalah sebuah file HTML sederhana, yang dapat dibuka langsung melalui <i>browser</i>.</p>
<blockquote>
Lakukanlah hal yang sulit ketika hal tersebut masih mudah, dan lakukan hal besar ketika hal tersebut masih kecil. Perjalanan ribuan mil harus dimulai dengan satu langkah.
<small>Lao Tzu</small>
</blockquote>
</body>
</html>
bootstrap.html
, dan buka file HTML yang baru dibuat pada browser. Sampai titik ini, halaman HTML kita akan memiliki tampilan seperti berikut:Checkpoint: Sampai titik ini, kita telah memiliki sebuah file HTML, yaitu bootstrap.html
.
Langkah 2: Download dan Ekstrak Bootstrap
Untuk menggunakan Boostrap pada aplikasi kita, tentunya kita harus memiliki Bootstrap terlebih dahulu. Buka website resmi Bootstrap, http://twitter.github.io/bootstrap/, dan klik tombol “Download Bootstrap” untuk memulai download Bootstrap.Selesai download, anda akan memiliki file
bootstrap.zip
yang berisi file-file yang dibutuhkan untuk menggunakan Bootstrap. Ekstrak file tersebut pada tempat yang sama dengan bootstrap.html
, sehingga sekarang kita memiliki file seperti berikut:dengan isi dari masing-masing direktori yaitu:
- Direktori “
css
” memiliki empat buah file di dalamnya, yaitu:bootstrap.css
bootstrap.min.css
bootstrap-responsive.css
bootstrap-responsive.min.css
- Direktori “
img
memiliki dua buah file di dalamnya, yaitu:glyphicons-halflings.png
glyphicons-halflings-white.png
- Direktori “
js
” memiliki dua buah file di dalamnya, yaitu:bootstrap.js
bootstrap.min.js
Checkpoint: Sebelum masuk ke langkah selanjutnya, pastikan file yang ada pada direktori percobaan anda telah sama dengan daftar file yang ada di atas.
Langkah 3: Memasukkan Bootstrap ke dalam HTML
Langkah terakhir sangat sederhana, karena kita hanya perlu memasukkan CSS Bootstrap ke dalam filebootstrap.html
, dan kita dapat langsung melihat perubahan yang dibuat oleh Bootstrap.Buka file
bootstrap.html
dan tambahkan kode berikut sebelum baris ke 6 (</head>
):
<link rel="stylesheet" href="css/bootstrap.css">
Catatan: filesehingga isi dari filebootstrap.css
merupakan file CSS yang belum dikompilasi, dan digunakan hanya pada tahap pengembangan untuk mempermudah debugging. Jika ingin menggunakan Bootstrap pada website produksi yang akan benar-benar dikunjungi pengguna, disarankan untuk menggunakanbootstrap.min.css
untuk meminimalkan download pengguna.
bootstrap.html
menjadi seperti berikut:kemudian buka kembali
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Sebuah file HTML Sederhana</title>
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
<h1>File HTML</h1>
<p>Ini adalah sebuah file HTML sederhana, yang dapat dibuka langsung melalui <i>browser</i>.</p>
<blockquote>
Lakukanlah hal yang sulit ketika hal tersebut masih mudah, dan lakukan hal besar ketika hal tersebut masih kecil. Perjalanan ribuan mil harus dimulai dengan satu langkah.
<small>Lao Tzu</small>
</blockquote>
</body>
</html>
bootstrap.html
pada browsr, dan kita dapat langsung melihat perubahan pada halaman, terutama pada font dan posisi dari kutipan Lao Tzu:Ya, dengan hanya menambahkan satu baris kode saja halaman web anda telah dipermak secara otomatis oleh Bootstrap! Selanjutnya, kita akan mencoba beberapa fitur-fitur lain dari Bootstrap.
Fitur Bootstrap: Layout
Salah satu hal yang menjadi momok bagi para pengembang web ialah menyusun layout dengan rapi. Untuk menyusun elemen-elemen dengan rapi, biasanya pengembang harus mengerti konsep-konsep yang kompleks pada CSS: float, box model, positioning, dan lainnya. Untungnya, Bootstrap menyediakan banyakclass
CSS standar yang dapat digunakan untuk menyusun elemen-elemen dokumen HTML dengan rapi dan mudah. Agar tidak membuang-buang waktu, mari kita lihat fitur Bootstrap untuk layout!Penampung Halaman
Umumnya sebuah halaman website memiliki bagian penampung utama yang berisikan keseluruhan konten website tersebut. Bagian penampung digunakan untuk membatasi lebar dokumen, sehingga konten pada website masih dapat dibaca dengan mudah. Gambar berikut memperlihatkan area konten dari beberapa website:Membuat penampung seperti website di atas merupakan pekerjaan yang sangat mudah dengan menggunakan Bootsrap. Kita cukup “membungkus” elemen-elemen dokumen ke dalam sebuah
div
dengan atribut class
bernilai container
. Langsung saja, bungkus seluruh kode HTML yang ada di dalam body
pada bootstrap.html
ke dalam elemen div
, sehingga isi dari bootstrap.html
menjadi seperti berikut:Seperti biasa, buka
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Sebuah file HTML Sederhana</title>
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
<div class="container">
<h1>File HTML</h1>
<p>Ini adalah sebuah file HTML sederhana, yang dapat dibuka langsung melalui <i>browser</i>.</p>
<blockquote>
Lakukanlah hal yang sulit ketika hal tersebut masih mudah, dan lakukan hal besar ketika hal tersebut masih kecil. Perjalanan ribuan mil harus dimulai dengan satu langkah.
<small>Lao Tzu</small>
</blockquote>
</div>
</body>
</html>
bootstrap.html
pada browser untuk melihat bagaimana elemen-elemen HTML sekarang memiliki batas lebar dan berada di tengah browser (klik gambar untuk memperbesar).Baris dan Kolom
Desain dari sebuah halaman HTML seringkali dikembangkan dengan menggunakan pembagian kolom, yang dikenal dengan nama grid system. Untuk mengakomodir hal ini, Bootstrap juga memberikan fitur pembagian halaman ke dalam 12 kolom secara otomatis, dan tentunya kita bebas menentukan lebar kolom yang diinginkan.Adapun
class
yang diberikan oleh Bootstrap untuk memasukkan elemen ke dalam kolom ialah span[jumlahkolom]
, dengan nilai jumlahkolom
adalah 1 sampai 12. Jadi, kita ingin membagi halaman menjadi tiga kolom sama besar, kita dapat menggunakan tiga buah span4
dan mengisikan konten di dalam penampung span4
tersebut. Elemen-elemen kolom sendiri harus ditampung di dalam sebuah class
dengan nilai row
. Singkatnya, dengan menggunakan Bootstrap, kita dapat menyusun elemen-elemen halaman dalam baris dan kolom dengan rapi.Untuk memudahkan pengertian, mari kita langsung praktekkan saja dengan menambahkan elemen tiga kolom ke dalam
bootstrap.html
! Tambahkan kode berikut tepat setelah </blockquote>
pada bootstrap.html
:dan buka
<div class="row">
<div class="span4">
<h2>Kolom Pertama</h2>
<p>Kolom pertama pada baris pertama yang memiliki lebar 4.</p>
</div>
<div class="span4">
<h2>Kolom Kedua</h2>
<p>Kolom kedua pada baris pertama yang memiliki lebar 4.</p>
</div>
<div class="span4">
<h2>Kolom Ketiga</h2>
<p>Kolom ketiga pada baris pertama yang memiliki lebar 4.</p>
</div>
</div>
bootstrap.html
pada browser untuk melihat bagaimana kita telah membagi isi dari konten pada baris tersebut pada halaman web:Selanjutnya, kita dapat menambahkan baris sebanyak yang diinginkan untuk mengorganisasikan elemen-elemen halaman sesuai dengan kemauan kita. Misalnya, kita dapat menambahkan baris baru dengan pembagian elemen yang berbeda setelah kode di atas, seperti berikut:
yang akan menghasilkan halaman seperti berikut jika dibuka pada browser:
<div class="row">
<div class="span8">
<h2>Kolom Pertama</h2>
<p>Kolom pertama baris kedua, yang memiliki lebar 8. Lorem ipsum dolor sit amet. Lorem nec dapibus egestas sit cursus. Urna dictumst?</p>
</div>
<div class="span4">
<h2>Kolom Kedua</h2>
<p>Kolom kedua baris kedua, yang memiliki lebar 4.</p>
</div>
</div>
Tentunya masih terdapat banyak fitur-fitur untuk menyusun elemen pada Bootstrap, misalnya fitur responsive design. Karena tulisan ini hanya merupakan pengenalan, kita tidak akan mebahas fitur-fitur lain secara mendalam. Jika penasaran, anda dapat membaca dokumentasi Bootstrap mengenai hal ini.
Komponen Antarmuka
Selain penyusunan elemen konten dokumen web dengan mudah, hal lan yang dibutuhkan oleh banyak pengembang web ialah komponen-komponen antarmuka yang umum ditemui dalam sebuah website. Misalnya, karena sebuah website dinamis telah menjadi hal yang lumrah, hampir semua website sekarang akan membutuhkan elemen navigasi untuk membantu pengunjung website menelusuri konten yang ada di dalam web. Sebuah tombol juga seringkali kita temui, baik yang digunakan untuk navigasi maupun untuk hal-hal lainnya.Untungnya, Bootstrap menyediakan banyak komponen-komponen dasar yang dapat kita gunakan. Misalnya, untuk membuat menu website, kita cukup menuliskan kode HTML sesuai dengan aturan yang diberikan bootstrap pada dokumentasinya, dan secara otomatis kita akan mendapatkan menu yang cukup bagus.
Mari kita coba lihat tampilan menu standar dari Bootstrap. Tambahkan kode berikut tepat setelah
<body>
:untuk menambahkan sebuah menu sederhana di atas seluruh elemen konten, seperti berikut:
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#">BootstrapTest</a>
<ul class="nav">
<li class="active"><a href="#">Utama</a></li>
<li><a href="#">Menu1</a></li>
<li><a href="#">Menu2</a></li>
</ul>
</div>
</div>
Contoh lain lagi, kita dapat menambahkan tombol dengan memberikan
class
yang tepat pada elemen button
. Tambahkan kode berikut tepat setelah <h1>File HTML</h1>
:yang akan memberikan kita tiga tombol seperti berikut:
<p>
Contoh tombol-tombol yang disediakan oleh Boot
strap:
</p>
<p>
<button class="btn btn-danger">Tombol Merah</button>
<button class="btn btn-primary">Tombol Biru</button>
<button class="btn btn-success">Tombol Hijau</button>
</p>
Catatan: Tentunya masing-masing tombol memiliki makna semantik yang berbeda, tergantung dengan class
dari tombol tersebut. Silahkan baca dokumentasi Bootstrap untuk hal ini.
Tidak hanya dua elemen ini, Bootstrap masih menyediakan sangat banyak komponen-komponen antarmuka yang dapat digunakan oleh pengembang. Kembali lagi, pembahasan tidak dilakukan pada tulisan ini, karena tujuan tulisan hanyalah pengenalan akan Bootstrap (tetapi tentunya tidak tertutup kemungkinan penulis akan membahas lebih jauh mengenai Bootstrap pada tulisan-tulisan lainnya). Jika tertarik, silahkan baca dokumentasi Bootstrap pada dua halaman berikut: komponen, css dasar.
Sumber:
http://bertzzie.com/post/31/bootstrap-sebuah-framework-css-dari-twitter
0 comments:
Post a Comment