Pengenalan Bootstrap

Assalamualaikum Wr.Wb

bootstrap-logo

Halo semuanya, sudah sangat amat super lama saya tidak update ini blog. Oh ya kemarin-kemarin ada pengungjung blog yang ingin di jelaskan masalah Bootstrap. So, jadi daripada saya gak tahu mau bahas apa, ini dia tutorial selengkapnya.

Menurut Definisi saya Bootstrap adalah suatu framework CSS, yang digunakan untuk mempermudah dalam desain website. Yah mirip-mirip dengan jQeuery Mobile. (Ini beda ya seperti Framework PHP kaya Code Igniter atau Cake PHP, ini dibuat untuk mempermudah desainnya saja)

Bedanya adalah Jika Jquery Mobile itu hanya khusus untuk membuat aplikasi Website versi mobile. kalau yang ini (Bootstrap) anda desain tampilan Website Monitor besar sudah otomatis bisa langsung jadi tampilan versi mobile (Desain 1 saja mobile sudah otomatis jadi.). Masih Bingung ini dia Contohnya

DEMO 

Nah di demo atas adalah 1 halaman versi Bootstrap (yang sudah saya modif dikit). Jika anda ingin coba, di mobile, Sok atuh, tinggal di buka Browser Opera emulatornya dan diklik demo saya yang tadi. Insyallah juga jadi bagus versi Mobile Website.

Trus mana Tutorialnya Kang, Cerita mulu dari tadi!…!?

sabar atuh kang, ini baru mulai, satu-satu, namanya juga pengenalan.

oke. lalu apalagi dong kelebihannya?

kelebihan Bootstrap lainnya adalah dia sudah menganut sistem Grid 960.  APAAAN TUH…? wah kalau pengin tahu liat aja sendiri deh disini, saya gak jelasin karena panjang. intinya dengan grid 960 maka anda akan dibuat sangat mudah untuk mengatur tata letak suatu website.

contohnya di halaman demo saya ini, ada gambar besar seperti ini bukan..

1

Untuk membuat 2 buah kotak yang ada fotonya dengan ukuran sebesar itu cukup dengan Code seperti ini

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
</p>
<div class="row">
<div class="col-md-6">
<div class="thumbnail">
<img src="2015-mustang-shelby-8.jpg" alt="Mustang">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Ini adalah percobaan 1</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
</div><!--end of caption-->
</div><!--end of thumnbnaik-->
</div><!--end col sm-6-->

<div class="col-md-6">
<div class="thumbnail">
<img src="2015-mustang-shelby-8.jpg" alt="Mustang">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Ini adalah percobaan 1</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
</div><!--end of caption-->
</div><!--end of thumnbnaik-->
</div><!--end col sm-6-->

 

 

Anda tidak perlu memusingkan div dan lain sebagainya. Asal menggunakan Notepad ++ atau Aptana atau Editor yg bagus maka setiap <DIV> akan ada tag penutupnya berupa </DIV>. Justru yang perlu ada PERHATIKAN adala di baris ini

1
2
3
</p>
<p style="text-align: justify;">&lt;div class="col-md-6"&gt;</p>
<p style="text-align: justify;">

jika angka 6 itu dirubah, maka besar kotak juga akan ikut berubah otomatis. Sehingga mengatur kolom di website sangat amatlah mudah. coba anda ganti-ganti angka diatas pasti nanti berubah lagi. Anda hanya perlu belajar CSS dan HTML sedikit untuk mengerti alur dan maksudnya.

Masih kurang contoh bisa di lihat di kotak2 yang lebih kebawah

2

Untuk membuat 5 kotak berurutan yang rapi seperti diatas cukup dengan kode seperti 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
</p>
<p style="text-align: justify;"><div class="row">
<div class="col-md-1">
</div></p>
<div class="col-md-2">
<div class="thumbnail">
<img src="2015-mustang-shelby-8.jpg" alt="Mustang">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Ini adalah percobaan 1</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
</div><!--end of caption-->
</div><!--end of thumnbnaik-->
</div><!--end col sm-6-->

<div class="col-md-2">
<div class="thumbnail">
<img src="2015-mustang-shelby-8.jpg" alt="Mustang">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Ini adalah percobaan 1</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
</div><!--end of caption-->
</div><!--end of thumnbnaik-->
</div><!--end col sm-6-->

<div class="col-md-2">
<div class="thumbnail">
<img src="2015-mustang-shelby-8.jpg" alt="Mustang">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Ini adalah percobaan 1</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
</div><!--end of caption-->
</div><!--end of thumnbnaik-->
</div><!--end col sm-6-->

<div class="col-md-2">
<div class="thumbnail">
<img src="2015-mustang-shelby-8.jpg" alt="Mustang">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Ini adalah percobaan 1</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
</div><!--end of caption-->
</div><!--end of thumnbnaik-->
</div><!--end col sm-6-->

<div class="col-md-2">
<div class="thumbnail">
<img src="2015-mustang-shelby-8.jpg" alt="Mustang">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Ini adalah percobaan 1</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
</div><!--end of caption-->
</div><!--end of thumnbnaik-->
</div><!--end col sm-6-->

<div class="col-md-1">
</div>

</div><!--end of row-->

&nbsp;

Sama seperti sebelumnya, anda tidak perlu bingung dengan banyaknya tag div. anda tinggal mencocokan saja asal ada div atas harus ada div bawahnya. yg perlu di PERHATIKAN adalah ini

1
2
3
</p>
<p style="text-align: justify;">&lt;div class="col-md-2"&gt;</p>
<p style="text-align: justify;">

Semua kotak yang kecil, classnya tinggal diganti angka 2. Ya pokoknya dengan Bootstrap anda tidak perlu ribet melihat CSS nya.(Tetapi saya tetap menganjurkan Anda tetap belajar CSS dasar, agar tahu maksudnya)

Agar anda bisa mencoba coba sendiri bisa download disini

Mirror1 atau Mirror2

Tenang Aja langsung Sedot gak pake Muter kemana-mana kya website2 Tetangga. Saya kalo bagi-bagi ilmu iklas. 😀

Jangan lupa komen.

Itu saja dari saya

Wassalamualaikum Wr.Wb

Leave a Reply

Your email address will not be published. Required fields are marked *