Tutorial Penggunaan Twitter Bootstrap

INSTALASI TWITTER BOOTSTRAP

Langkah 1 :

Download file Bootstrap yang ada Disini.
Hasil download berupa file .Zip yang berisikan folder CSS, JS & IMG.

Isi folder CSS : bootstrap.css , bootstrap.min.css, bootstrap-responsive.css & bootstrap-responsive.min.css

Isi folder JS : bootstrap.js & bootstrap.min.js

Isi folder IMG : glyphicons-halflings.png & glyphicons-halflings-white.png

Selanjutnya Download juga jQuery.js / jQuery.min.js , ini WAJIB ADA karena function Javascript yang ada di Twitter Bootsrap diambil dari jQuery. Silahkan Download Disini (Direkomendasikan untuk download versi yang terbaru).

Langkah 2 :

Buat sebuah folder dengan nama Belajar_Bootstrap di derektori mana saja / lebih bagus lagi kalau di buat di derektori local webserver yang anda gunakan seperti Apache , XAMPP & WAMPP.

Langkah 3 :

Copy kan folder hasil download dari Twitter Bootstrap (Folder : JS,CSS,IMG) kedalam folde Belajar_Bootstrap.

Berikutnya copy kan hasil dowload jquery.js kedalam Folder JS

Lalu, Buat file HTML dengan nama index.html, Letakan / simpan di dalam folder Belajar_Bootstrap.

Jika sudah selesai, Struktur foldernya kurang lebih akan seperti ini :

Belajar_Bootstrap

css

bootstrap.css
bootstrap.min.css
bootstrap-responsive.css
bootstrap-responsive.min.css

img

glyphicons-halflings.png
glyphicons-halflings-white.png

bootstrap.js

bootstrap.min.js

jquery.js

index.html

Keterangan : Yang di Bold (Cetak Tebal) itu = Folder

Sekarang instalasi / pengaturan struktur file dan folder sudah selesai. Berikut nya kita mulai untuk coding awal.

Silahkan ketikan coding berikut ini di file index.html untuk permulaan.

<!DOCTYPE html>

<html>

<head>

<title>Belajar Bootstrap</title>

body {

padding-top:60px;

padding-bottom: 40px;

}

</style>

</head>

<body>

</body>

</html>

Coding diatas fungsinya : memanggil file-file yang dibutuhkan. Jika ada 2 file dengan nama sama dan akhirannya berbeda, contoh: dengan akhiran ---.js atau ---.min.js , panggil / load salah satu aja.

IMPLEMENTASI TWITTER BOOTSTRAP

Setelah langkah di atas selesai, maka tahap instalasi / pengaturan struktur folder dan file, serta pemanggilan file kedalam file index.html telah selesai. Silahkan anda coba modifikasi atau buat code-code yang ada pada Dokumentasi dari Twitter Bootstrap. Ketikan Coding anda di bagian yang ada tulisan CODING HERE.
Sebagai contoh awal, silahkan Copy Paste Code berikut ,dan lihat hasil nya..

</button>

<a class="brand" href="#">Belajar Bootstrap </a>

<li><a href="#about">About</a></li>

<li><a href="#contact">Contact</a></li>

<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>

<li><a href="#">Action</a></li>

<li><a href="#">Another action</a></li>

<li><a href="#">Something else here</a></li>

<li class="nav-header">Nav header</li>

<li><a href="#">Separated link</a></li>

<li><a href="#">One more separated link</a></li>

</ul>

</li>

</ul>

</form>

</div>

</div>

<h1>Hello, world!</h1>

<p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>

<p><a href="#" class="btn btn-primary btn-large">Learn more »</a></p>

</div>

<h2>Heading</h2>

<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>

<p><a class="btn" href="#">View details »</a></p>

</div>

<h2>Heading</h2>

<p><a class="btn" href="#">View details »</a></p>

</div>

<h2>Heading</h2>

<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>

<p><a class="btn" href="#">View details »</a></p>

</div>

<hr>

</footer>

</div>

Baiklah,sekian dulu tutorial dari saya,silahkan diperdalam & dipelajari sendiri tentang penggunaan Twitter Bootstrap dengan membaca Dokumentasi yang ada. Perhatikan attribute class pada setiap Tag dan pelajari itu,karena pada dasarnya untuk menggunakan bootstrap kita hanya bermain pada selector tersebut untuk menampilkan suatu desain / toolkit lain yang ada pada Twitter Bootstrap.

Semoga tutorial ini bermanfaat khusus nya buat para pemula yang baru ingin belajar mengenai Twitter Bootstrap. Sampai ketemu di Tutor berikutnya.

About Admin MC3

This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.

Kampung Klik