Visitor

Namecheap.com

Tutorial Bootstrap

Namecheap.com

Tutorial Membuat Layout dengan perpaduan antar html 5 dan bootstrap

Pada Tutorial kali ini saya akan mengajarkan bagaiamana memakai bootstrap dengan html 5, langsung saja ke TKP....eheheheeh kiding bro...

Instalasi Bootstrap

Buat yang belum punya, pertama-tama download dulu di http://getbootstrap.com/getting-started/#download ya.. Setelah kita download, setidaknya ada 3 folder yang disediakan Bootstrap untuk kita gunakan. Folder CSS, JS, dan Font. Untuk bisa menggunakan bootstrap, setidaknya paling minimal kita harus include CSS yang sudah disediakan.. File JS lebih bersifat Optional untuk membuat efek-efek lainnya.
Kita buat file HTML dulu..
1
2
3
4
5
6
7
8
9
10
11
12
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Latihan Layout Bootstrap</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/css_kita.css">
</head>
<body>
<br><!--ISI WEB DISINI--><br>
</body>
</html>

Dalam contoh saya include CSS Bootstrap bentuk minified (bootstrap.min.css), supaya performa website sedikit lebih ringan. Secara tampilan dan cara penggunaannya, bootstrap.css dengan bootstrap.min.css nggak akan memberikan perbedaan apapun.

Penggunaan Bootstrap

Untuk bisa menggunakan bootstrap, setidaknya kita harus sedikit punya kemampuan menghafal nama-nama class yang sudah disediakan Bootstrap, Pertama-tama, bootstrap menyediakan class .container sebagai penampung seluruh isi website, yang lebarnya akan otomatis menyesuaikan sesuai dengan ukuran layar.. Disini kita akan coba langsung 2 model layout yang bisa digunakan sebagai perbandingan.
Container Luar
Langsung liat contoh aja yuk~
1
2
3
4
5
6
7
8
9
10
11
<div class="container">
    <div class="header">
        <a class="judul">Judul Website</a>
    </div>
    <div class="content">
        Lorem ipsum dolor sit amet ...
    </div>
    <div class="footer">
        &copy; 2015. Designed by Christian Rosandhy
    </div>
</div>
Seenggaknya ngerti dong ya, kenapa disebut Container luar? Karena <div class="container">nya kita letakkan sebagai parent div utamanya. Untuk lihat perbedaannya, kita coba kasi header, content, dan footer kita warna background dan height di file css_kita.css..
1
2
3
4
.header{background:#555; padding:20px;}
    .header a.judul{font-size:200%; color:#fff;}
.content{background:#ddd; min-height:400px; padding:10px;}
.footer{background:#333; padding:10px; color:#ccc;}
Langsung kita lihat hasilnya deh..


Subscribe to receive free email updates:

0 Response to "Tutorial Bootstrap"

Post a Comment