Bootstrap merupakan framework web desain yang paling pupuler saat ini. Bootstrap mudah digunakan dan mudah dipelajari. Itulah mengapa bootstrap banyak diminati orang. Prinsip kerja sederhana, anda tinggal download paket bootstrap kemudian sertakan di dalam halamawan web anda seperti kita menggunakan jquery. Anda bisa mendownload bootstrap di situsnya : http://getbootstrap.com/
Atau jika anda tidak ingin mendownload file bootstrap anda bisa menggunakan file yang ada diserver mereka dengan menggunakan link berikut ini:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>Berikut adalah contoh sederhana penggunaan bootstrap dalam sebuah halaman:
<!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 101 Template</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/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>Nah untuk selanjutnya anda dapat mendesain sendiri halaman website anda menggunakan framework bootstrap. Bagaimana caranya? anda tinggal mengukuti saja aturan main css nya bootstrap yang sudah dijelaskan di situs bootstrap. Misalnya anda ingin membuat grid (pembagian kolom) anda bisa mengikuti aturan pembuatan grid seperti ini:
<div class="row">
<div class="col-xs-12 col-md-8">Konten</div>
<div class="col-xs-6 col-md-4">Konten</div>
</div>Dengan sistem grid diatas maka website anda akan responsive ketika diakses melalui mobile akan langsung menyesuaikan tampilannya. Jadi anda tidak perlu repot untuk mengatur ukuran dan menyediakan dua tampilan website khusus.
Untuk membuat menu anda bisa gunakan contoh berikut ini :
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>Kode menu berikut ini jika diakses melalui perangkat mobile maka akan otomatis menyesuaikan dengan cara menyembunyikan menu tersebut lalu menampilkan menu versi mobile.
Selain itu juga banyak model tampilkan lainnya yang memudahkan kita dalam mendesain. Hal ini tidak perlu keahlian khusus untuk menggunakan bootstrap karena dokumentasinya sangat baik dan kita tinggal mengikutinya saja.
