Karena ikut-ikutan, coba kita pelajari beberapa cara penggunaan layout Bootstrap, tetapi karena dasarnya penulis tidak terlalu berbakat di Desain, coba kita gunakan saja beberapa fitur penting yang dirasa cukup bagus. Fitur yang penulis coba yaitu :
1. Starter Template, bagaimana menyiapkan library javascript dan CSS dari Bootstrap.
2. Grid Layout dan Container
3. Table, bagaimana memakai Table
4. Navbar, Menu Navigasi
5. Navlist, Menu Berbentuk Sidebar
6. PrettyPrint, untuk menampilkan kode program di web (misal untuk tutorial)
7. Carousel Slider
Kali ini kita coba saja menyiapkan Starter Template yaitu halaman Web Kosong yang sudah dihubungkan dengan Library Javascript dan CSS milik Bootstrap. Penulis sarankan agar mendownload saja dari Github yang lengkap. Buka URL http://github.com/twitter/bootstrap, kemudian Download.
Extract bootstrap-master.zip, ambil saja folder assets, disitu sudah lengkap semua library, css, javascript dan image yang dibutuhkan. Copy - Paste ke folder kita misal htdocs/bootstrap.
Kemudian buat file HTML dengan isi sebagai berikut :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap, from Twitter</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="assets/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="assets/js/html5shiv.js"></script>
<![endif]-->
<!-- Fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="assets/ico/favicon.png">
</head>
<body>
<div class="container">
<h2>Bootstrap starter template</h2>
<p>Dokumen kosong dengan library Bootstrap siap digunakan.</p>
</div> <!-- /container -->
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="assets/js/jquery.js"></script>
<script src="assets/js/bootstrap-transition.js"></script>
<script src="assets/js/bootstrap-alert.js"></script>
<script src="assets/js/bootstrap-modal.js"></script>
<script src="assets/js/bootstrap-dropdown.js"></script>
<script src="assets/js/bootstrap-scrollspy.js"></script>
<script src="assets/js/bootstrap-tab.js"></script>
<script src="assets/js/bootstrap-tooltip.js"></script>
<script src="assets/js/bootstrap-popover.js"></script>
<script src="assets/js/bootstrap-button.js"></script>
<script src="assets/js/bootstrap-collapse.js"></script>
<script src="assets/js/bootstrap-carousel.js"></script>
<script src="assets/js/bootstrap-typeahead.js"></script>
</body>
</html>
Hasilnya sudah jadi starter template atau desain dasar halaman web dengan menggunakan Bootstrap.
Fitur lain kita coba pelajari di artikel yang lain.
Desain selengkapnya dapat didownload disini. Klik link ini, kemudian klik File-Download (Unduh)
Selamat mencoba
