Assalamu'alaikum.. wr.. wb..
Pada kesempatan kali ini, saya
akan membahas mengenai materi perkuliahan pertemuan ketujuh di tanggal 30 Maret
2015 Mata Kuliah Web 2.0 Technology. Pada pertemuan ini, kami membahas mengenai
“Bootstrap” .
Apa itu Bootstrap ?
Bootstrap adalah platform baru
yang dikembangkan tim twitter. Pertama kali muncul pada ajang hackweek dan kini
sudah mulai penyempurnaan. Platform ini hanya menggunakan sedikit coding CSS
dan JavaScript namun tetap bisa membuat website yang powerfull mengikuti
perkembangan browser. Website yang menggunakan bootstrap akan menjadi website
yang fleksibel, nyaman dan tentu saja cepat.
Bootstrap juga memudahkan
pengaturan website bagi mereka yang kurang mahir coding atau tidak punya waktu
banyak. Sekumpulan javascript dan CSS yang dibutuhkan untuk banyak sekali
widget ada dalam satu file yang terus di update oleh pengembang. Pemilik
website tidak akan lagi disibukkan dengan pengaturan css atau javascript
berlebihan. Mereka hanya perlu menentukan gadget atau elemen apa yang ingin
ditampilkan dalam bentuk HTML standart bootstrap yang sangat simple.
Tapi... Penggunaan bootstrap kadang membuat kita jadi
kurang kreatif, Coding yang sudah di buatkan oleh pengembang membuat desain web
kita terbatas. Sebenarnya kita masih bisa tambahkan CSS manual pada
elemen-elemen bootstrap untuk mempercantiknya, tapi jelas ini membuat web kita
nanggung. Menambahkan CSS manual sama saja kembali ke cara lama.
Jadi, pilihan Anda apakah akan
mengikuti perkembangan jaman bersama bootstrap, editing dan kelola website
secara instan. Atau lebih suka oprek template sendiri berkutat dengan kode CSS
yang Anda susun-susun sendiri.
Nah, untuk mempermudah setelah
penjelasan diatas, mari kita coba Latihan sederhana mengenai Bootstrap tersebut
:
Langkah 1 :
(Buatlah File HTML Biasa)
<!DOCTYPE html>
<html>
<head>
<meta
charset ="utf-8">
<title>
LATIHAN </title>
</head>
<body>
<div
class="container">
<h1><a
href="#">BOOTSTRAP</a></h1>
<div
class="navbar">
<div
class="navbar-inner">
<div
class="container">
<ul
class="nav">
<li
class="active"><a
href="#">Home</a></li>
<li><a
href="#">Projects</a></li>
<li><a
href="#">Services</a></li>
<li><a
href="#">Downloads</a></li>
<li><a
href="#">About</a></li>
<li><a
href="#">Contact</a></li>
</ul>
</div>
</div>
</div>
</div>
<div
class="container">
<div
class="navbar">
<h1
align="center"> Ayo Belajar Bootstrap ! </h1>
<hr>
<div
class="col-lg-4">
<h3>Pengisian
Form</h3>
<p>
<form
class="form-horizontal" role="form">
<label
for="name">Nama <em>*</em></label>
<input
id="name" placeholder="nfrachmah" autofocus
required><br>
<br><label
for="gender">Gender</label>
<select
id="gender" >
<option
value="female">Female</option>
<option
value="male">Male</option>
</select><br>
<br><label
for="age">Age<em>*</em></label>
<input id="age" type="number" min="0" max="120" step="0.1" required><br>
<input id="age" type="number" min="0" max="120" step="0.1" required><br>
<br><label
for="telephone">Telephone</label>
<input
id="telephone" placeholder="(xxx) xxx-xxxx"><br>
<br><label
for="email">Email <em>*</em></label>
<input
id="email" type="email" required><br>
<br><label>Pick
Your Favorite Language </label>
<label for="wildebeest"><input id="korean" type="checkbox"> Korean </label>
<label for="wildebeest"><input id="korean" type="checkbox"> Korean </label>
<label
for="pigeon"><input id="chinese"
type="checkbox"> Chinese </label>
<label
for="crab"><input id="indo"
type="checkbox"> Indonesian </label>
</form><!-- form -->
</p>
</div><!--
col -->
<div
class="col-lg-4">
<table class="table">
<thead>
<tr>
<th>No</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Rachmah</td>
<td>Nur Fitri</td>
<td>@nfrachmah</td>
</tr>
<tr>
<td>2</td>
<td>Ulfi</td>
<td>Oktafiani</td>
<td>@fhiiocthaf</td>
</tr>
<tr>
<td>3</td>
<td>Febi</td>
<td>Kurnia Putri</td>
<td>@febikurnia</td>
</tr>
</tbody>
</table>
</div>
<div
class="col-lg-3 centered">
<img
class="img img-thumbnail" src="fa.jpg"
height="120px" width="120px" alt="">
<img
class="img img-circle" src="wa.jpg"
height="120px" width="120px" alt="">
<img
class="img img-rounded" src="ca.jpg"
height="120px" width="120px" alt="">
<br>
<h4><b>nfrachmah</b></h4>
<a
href="#" class="icon icon-twitter"></a>
<a
href="#" class="icon icon-facebook"></a>
<a
href="#" class="icon icon-flickr"></a>
</div><!--
col-lg-3 -->
</div><!--
row -->
</div><!--
container -->
<br>
<br>
<br>
<br>
<br>
<div
id="footerwrap">
<div
class="container">
<h4>Created
by <a href="http://blacktie.co">nfrachmah</a> - Copyright
2015</h4>
</div>
</div>
<!--
JS -->
<script
src = "http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script
src = "js/bootstrap.js"></script>
</body>
</html>
Output :
Langkah 2 :
(Download Bootstrap dan Ekstrak)
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:
Daftar File Bootstrap
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
Jika seluruh file yang ada telah
sama, maka kita telah siap menggunakn Bootstrap!
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 :
(Tambahkan Bootstrap kedalam
HTML)
<!DOCTYPE html>
<html>
<head>
<meta
charset ="utf-8">
<title>
LATIHAN </title>
<link
rel ="stylesheet" type="text/css"
href="css/bootstrap.css"> //bootstrap
</head>
<body>
<div
class="container">
<h1><a
href="#">BOOTSTRAP</a></h1>
<div
class="navbar">
<div
class="navbar-inner">
<div
class="container">
<ul
class="nav">
<li
class="active"><a
href="#">Home</a></li>
<li><a
href="#">Projects</a></li>
<li><a
href="#">Services</a></li>
<li><a
href="#">Downloads</a></li>
<li><a
href="#">About</a></li>
<li><a
href="#">Contact</a></li>
</ul>
</div>
</div>
</div>
</div>
<div
class="container">
<div
class="navbar">
<h1
align="center"> Ayo Belajar Bootstrap ! </h1>
<hr>
<div
class="col-lg-4">
<h3>Pengisian
Form</h3>
<p>
<form
class="form-horizontal" role="form">
<label
for="name">Nama <em>*</em></label>
<input
id="name" placeholder="nfrachmah" autofocus
required><br>
<br><label
for="gender">Gender</label>
<select
id="gender" >
<option
value="female">Female</option>
<option
value="male">Male</option>
</select><br>
<br><label
for="age">Age<em>*</em></label>
<input id="age" type="number" min="0" max="120" step="0.1" required><br>
<input id="age" type="number" min="0" max="120" step="0.1" required><br>
<br><label
for="telephone">Telephone</label>
<input
id="telephone" placeholder="(xxx) xxx-xxxx"><br>
<br><label
for="email">Email <em>*</em></label>
<input
id="email" type="email" required><br>
<br><label>Pick Your Favorite Language </label>
<label for="wildebeest"><input id="korean" type="checkbox"> Korean </label>
<label for="wildebeest"><input id="korean" type="checkbox"> Korean </label>
<label for="pigeon"><input id="chinese" type="checkbox"> Chinese </label>
<label for="crab"><input id="indo" type="checkbox"> Indonesian </label>
</form><!-- form -->
</p>
</div><!-- col -->
<div class="col-lg-4">
<table class="table">
<thead>
<tr>
<th>No</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Rachmah</td>
<td>Nur Fitri</td>
<td>@nfrachmah</td>
</tr>
<tr>
<td>2</td>
<td>Ulfi</td>
<td>Oktafiani</td>
<td>@fhiiocthaf</td>
</tr>
<tr>
<td>3</td>
<td>Febi</td>
<td>Kurnia Putri</td>
<td>@febikurnia</td>
</tr>
</tbody>
</table>
</div>
<div class="col-lg-3 centered">
<img class="img img-thumbnail" src="fa.jpg" height="120px" width="120px" alt="">
<img class="img img-circle" src="wa.jpg" height="120px" width="120px" alt="">
<img class="img img-rounded" src="ca.jpg" height="120px" width="120px" alt="">
<br>
<h4><b>nfrachmah</b></h4>
<a href="#" class="icon icon-twitter"></a>
<a href="#" class="icon icon-facebook"></a>
<a href="#" class="icon icon-flickr"></a>
</div><!-- col-lg-3 -->
</div><!-- row -->
</div><!-- container -->
<br>
<br>
<br>
<br>
<br>
<div id="footerwrap">
<div class="container">
<h4>Created by <a href="http://blacktie.co">nfrachmah</a> - Copyright 2015</h4>
</div>
</div>
<!-- JS -->
<script src = "http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src = "js/bootstrap.js"></script>
</body>
</html>
Output :
Saya rasa cukup sekian pembahasan
saya mengenai Bootstrap secara sederhana.. semoga bisa bermanfaat dan nantikan
pembahasan saya di kesempatan lainnya..
Wassalamu'alaikum.. wr.. wb..
Referensi :
http://themasdoyok.com/2013/08/pengertian-apa-itu-bootstrap.html
[060615: 10.39]
