So, kali ini kita akan mencoba PDKT supaya lebih deket lagi. Percuma dong, kalo tamat hanya sebatas kenalan. Syukur-syukur kalo sampe jadian dan bisa nyicipin gimana legitnya make Bootstrap.
Sebagai pembukaan dan ada gambaran, nanti kita akan bikin yg kayak beginian: Demo Bootstrap 1.
Demo-nya sederhana aja dulu, namanya juga episode 1.
Saya anggap pembaca sekalian udah paham tentang HTML ya, jadi saya nggak usah bahas tentang HTML lagi. Buat yang belum paham atau belum kenal tentang HTML, mangga dibaca-baca dulu aja, biar nggak bingung.
Okay langsung aja jou, sebelum saya berubah pikiran dan membenturkan kepala saya ke bantal 
Tahap Persiapan
Pertama-tama download dulu paket bootstrap disini.
Selanjutnya, ekstrak file bootstrap.zip, akan ada satu buah folder bernama bootstrap dan di dalamnya terdapat 3 buah folder, yaitu: css, img dan js. Nah itulah paket bootstrap yang nanti akan membuat hidup kita menjadi lebih indah.
FYI, kamu boleh rename folder bootstrap kalo kamu mau, kalo pun nggak juga nggak jadi masalah.
Tahap Penulisan Kode HTML
Buka texteditor, kemudian tulis kode berikut:
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
66
67
68
69
70
| <!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>Belajar Bootstrap 1</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="Belajar Bootstrap Twitter 1"> <meta name="author" content="Kresna Galuh D. Herlangga"> <link href="css/bootstrap.css" rel="stylesheet"> <link href="css/bootstrap-responsive.css" rel="stylesheet"></head><body> <div class="container"> <div class="masthead"> <h3 class="muted">Belajar Bootstrap 1</h3> <div class="navbar navbar-inverse"> <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="hero-unit"> <h1>Lorem ipsum dolor!</h1> <p class="lead">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam</p> <a class="btn btn-large btn-success" href="#">Get started today</a> </div> <hr> <div class="row-fluid"> <div class="span4"> <h2>Heading</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> <p><a class="btn btn-success" href="#">View details »</a></p> </div> <div class="span4"> <h2>Heading</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> <p><a class="btn btn-success" href="#">View details »</a></p> </div> <div class="span4"> <h2>Heading</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> <p><a class="btn btn-success" href="#">View details »</a></p> </div> </div> <hr> <div class="footer"> <p>© Copyright 2013</p> </div> </div></body></html> |
Selanjutnya simpan dengan nama index.html
Tahap Pembahasan Kode
Biar nggak bingung, mari kita bahas kode di atas.
Pada tag <head> terdapat kode berikut:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Itu berfungsi untuk menyesuaikan lebar web dengan layar device. Kode itulah yang bikin responsive bisa mulus.
Selanjutnya kode:
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
Kode itu adalah untuk memanggil style bootstrap.css yg akan menangani ketika web ditampilkan di layar laptop, sedangkan bootstrap-responsive.css itu style yang akan menangani responsive untuk layar device mobile atau tablet.
Ke bawah sedikit, kita akan menemukan ada kode berikut:
<div class=”container”>
Itu berfungsi untuk membentuk area box, supaya lebar web tidak penuh. Ini akan membuat halaman web menjadi lebih rapih.
Tag div dengan class “masthead” untuk membentuk header, yang di dalamnya ada navbar. Kode lengkapnya seperti berikut:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <div class="masthead"> <h3 class="muted">Belajar Bootstrap 1</h3> <div class="navbar navbar-inverse"> <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> |
Selanjutnya, untuk menambahkan headline kita bisa menggunakan hero-unit. Kodenya seperti berikut:
1
2
3
4
5
| <div class="hero-unit"> <h1>Lorem ipsum dolor!</h1> <p class="lead">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam</p> <a class="btn btn-large btn-success" href="#">Get started today</a></div> |
Untuk memisahkannya dengan garis, kita memerlukan tag <hr>.
Selanjutnya, untuk membentuk area 3 kolom, kita membutuhkan sebuah wadah fluid, maka kita bisa menggunakan class “row-fluid”. Dan untuk membentuk 3 kolom yang sama besar, dikarenakan Bootstrap menganut 12 Grid, maka, 12 / 3 = 4. Artinya kita akan membuat 3 buah kolom dengan ukuran 4 span untuk masing-masing kolom. Grid penuh itu terdiri dari 12 span. Jadi kodenya seperti berikut:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <div class="row-fluid"> <div class="span4"> <h2>Heading</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> <p><a class="btn btn-success" href="#">View details »</a></p> </div> <div class="span4"> <h2>Heading</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> <p><a class="btn btn-success" href="#">View details »</a></p> </div> <div class="span4"> <h2>Heading</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> <p><a class="btn btn-success" href="#">View details »</a></p> </div></div> |
Biar lebih rapih mari kita beri pembatas dengan garis <hr>.
Dan untuk footer bisa menggunakan kode berikut:
1
2
3
| <div class="footer"> <p>© Copyright 2013</p></div> |
Jadi deh, coba buka hasilnya (index.html) via browser. Kalo kamu beruntung maka tampilannya akan sama kayak demo tadi, tapi jika nggak sama, berarti kamu nggak beruntung dan ada yang salah, silahkan gosok sekali lagi….
0 komentar:
Posting Komentar