Langkah selanjutnya dalam mempelajari framework Bootstrap adalah membuat template dasar bagi pemula. Kita belajar dari contoh yang ada di http://getbootstrap.com/examples/starter-template/ .
Dari informasi yang ada di http://getbootstrap.com/examples/starter-template/ kita akan belajar dengan langkah-langkah
- Pada folder ./dist silahkan membuat file baru yaitu coba02.html dengan isi seperti berikut ini:
<!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″>
<meta name=”description” content=””>
<meta name=”author” content=””><title>Template pemula</title>
<!– Bootstrap core CSS –>
<link href=”./css/bootstrap.min.css” rel=”stylesheet”><!– Custom styles for this template –>
<link href=”starter-template.css” rel=”stylesheet”></head>
<body>
<div class=”navbar navbar-inverse navbar-fixed-top” role=”navigation”>
<div class=”container”>
<div class=”navbar-header”>
<button type=”button” class=”navbar-toggle collapsed” data-toggle=”collapse” data-target=”.navbar-collapse”>
<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=”#”>Nama Project</a>
</div>
<div class=”collapse navbar-collapse”>
<ul class=”nav navbar-nav”>
<li class=”active”><a href=”#”>Home</a></li>
<li><a href=”#about”>About</a></li>
<li><a href=”#contact”>Contact</a></li>
</ul>
</div><!–/.nav-collapse –>
</div>
</div><div class=”container”>
<div class=”starter-template”>
<h1>Template Bootstrap untuk pemula</h1>
<p class=”lead”>Gunakan ini untuk cara cepat memulai project<br> Anda akan mendapatkan inti dari dokumen HTML</p>
</div></div><!– /.container –>
<!– Bootstrap core JavaScript
================================================== –>
<!– Placed at the end of the document so the pages load faster –>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script>
<script src=”./js/bootstrap.min.js”></script>
</body>
</html> - Pada folder ./dist silahkan membuat file starter-template.css
body {
padding-top: 50px;
}
.starter-template {
padding: 40px 15px;
text-align: center;
} - Hasilnya dapat dilihat http://aris.proweb.asia/dist/coba02.html dengan tampilan
Desktop browser:
Mobile Browser:
Informasi lebih lanjut silahkan mengunjungi:
1. http://getbootstrap.com/examples/starter-template/
2. http://getbootstrap.com/getting-started/ .
Kunjungi www.proweb.co.id untuk menambah wawasan anda.