Bootstrap merupakan framework HTML, CSS dan Javascript untuk merancang
website yang responsive. Bootstrap bisa diunduh di
link ini.
Untuk merancang template ini, unduh bootstrap dari link diatas, lalu extrak pada folder yang kita tentukan.
Kemudian kita mulai ke kode HTML-nya :
Awal HTML index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40 | <!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">
<!-- Ketiga tag meta diatas harus dijabarkan
terlebih dahulu
-->
<title>JockerDT Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Punya kita -->
<link href="css/style.css" rel="stylesheet">
<!-- Tambahan untuk browser Internet Explorer -->
<!-- HTML5 shim and Respond.js for 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/html5shiv/3.7.2/html5shiv.min.js">
</script>
<script
src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js">
</script>
<![endif]-->
</head>
<body>
<h1>Ba da tung pess !!!</h1>
<!-- jQuery (Digunakan sebagai plugin javasript bootstrap)-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
</script>
<!-- Script bootstrap -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
|
Catatan :
Pastikan isi folder untuk template kita telah diatur sesuai script HTML ini.
Jquery digunakan sebagai plugin javascript bootstrap. Saya menggunakan jquery dari googleapis. Untuk yang ingin mencoba tutorial ini dengan tidak terhubung ke internet, jangan lupa mendownload jquery-nya dulu : jquery-1.11.2.js
Hasilnya :
Navbar
Navbar : navigasi website pada bagian atas(header).
Tambahkan kode berikut setelah tag <body> :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38 | <nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" 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="#">JockerDT</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 navbar-right">
<li class="active"><a href="#">Link 1
<span class="sr-only">(current)</span></a>
</li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
Link Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="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>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
|
.navbar : navigasi web pada bagian atas web.
.navbar-default : tampilan default navbar.
.navbar-fixed-top : posisi navbar tetap diatas.
.icon-bar : garis-garis(ikon menu) yang kelihatan pada tampilan layar kecil
Note : menu dropdown memerlukan script jQuery.
Hasil :
Hasil pada layar lebih kecil :
Jumbotron
Tambahkan setelah script
navbar
Kita
Ba da tung pess !!! ke dalam div kelas jumbotron.
Codenya :
1
2
3
4
5
6
7 | <div class="container">
<div class="jumbotron">
<h1>Ba da tung pess !!!</h1>
<p>Isi dari jumbotron</p>
<a class="btn btn-primary btn-lg" href="#" role="button">Tombol</a>
</div>
</div><!-- /.container -->
|
Konten
Tambahkan setelah
jumbotron
Konten kita tampilkan dalam bentuk thumbnail.
Codenya :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65 | <div class="row">
<div class="container">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="..." alt="242x200">
<div class="caption">
<h3>Thumbnail 1</h3>
<p>
Ini adalah thumnail pertama.
Thumbnail bisa kita gunakan sebagai postingan terbaru pada index.html
</p>
<p>
<a href="#" class="btn btn-primary" role="button">
Tombol Lagi
</a>
<a href="#" class="btn btn-default" role="button">
Tom...
</a>
</p>
</div>
</div>
</div><!-- /.thumbnail -->
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="..." alt="242x200">
<div class="caption">
<h3>Thumbnail 2</h3>
<p>
Ini adalah thumnail kedua.
Selain postingan terbaru, mungkin bisa menjadi navigasi ke label tertentu.
</p>
<p>
<a href="#" class="btn btn-primary" role="button">
Tombol Lagi
</a>
<a href="#" class="btn btn-default" role="button">
Tom...
</a>
</p>
</div>
</div>
</div><!-- /.thumbnail -->
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="..." alt="242x200">
<div class="caption">
<h3>Thumbnail 1</h3>
<p>
Ini adalah thumnail kedua.
Atau menuju halaman tertentu, misalnya
<strong>Tentang</strong> atau lainnya.
</p>
<p>
<a href="#" class="btn btn-primary" role="button">
Tombol Lagi
</a>
<a href="#" class="btn btn-default" role="button">
Tom...
</a>
</p>
</div>
</div>
</div><!-- /.thumbnail -->
</div><!-- /.container -->
</div><!-- /.row -->
|
Kostumisasi tampilan : style.css
Karena kelas
row margin-nya tidak nol, maka kita menormalkan agar lebar template sesuai layar. Berikut kodenya :
1
2
3
4 | .row {
margin: 0;
padding: 0;
}
|
Hasil :
0 komentar:
Posting Komentar