Skip to main content

Contoh penggunaan framework bootstrap untuk membangun aplikasi web yang responsif

Apa itu bootstrap ?


Bootstrap itu kalau diterjemahkan dengan bahasa indonesia artinya gantungan sepatu :) tapi bukan itu pengertian yang sebenarnya.


Bootstrap adalah sebuah nama dari framework HTML, CSS dan Javascript yang sangat populer saat ini dan banyak digunakan untuk membangun website maupun aplikasi web yang responsif baik digunakan di PC, tablet maupun smartphone.


bootstrap-responsif.jpg

 

Banyak sekali artikel-artikel yang membahas mengenai bootstrap di internet dan sangat mudah untuk anda temukan. Salah satu situs yang menyediakan tema bootstrap secara gratis adalah bootswatch.


Disana anda dapat menemukan banyak tema yang bervariasi dan tentunya dapat anda download jika memang anda menyukainya. Sebelum mendownload, anda juga dapat melakukan preview terlebih dahulu agar anda yakin bahwa tema tersebut sesuai dengan tema yang sedang anda butuhkan.



Contoh Penggunaan Framework Bootstrap


Sebelum kita belajar mengenai framework bootstrap, anda harus mendownload framework tersebut terlebih dahulu disini. Jika sudah, buat sebuah folder dengan nama bootstrap di dalam folder  www jika anda menggunakan wamp sebagai web server, atau di dalam folder htdocs jika anda menggunakan xampp.


Tambahkan sebuah folder lagi bernama assets di dalam folder bootstrap. Kemudian extract file framework bootstrap yang telah anda download tadi ke dalam folder bootstrap\assets\. Untuk penamaan folder boleh kamu ganti sesuai dengan keinginan.




[caption id="attachment_2415" align="aligncenter" width="611"]folder-assets-bootstrap.png Nah kira-kira bentuk struktur foldernya seperti ini ya...[/caption]

Contoh cara membuat navigasi web sederhana dengan bootstrap


Buat sebuah file html dengan nama navbar dan simpan ke dalam folder bootstrap. Anda bisa menggunakan text editor seperti sublime text, notepad++ dan lain-lain terserah mana yang anda sukai. Ketikkan script html seperti berikut ini ke dalam file navbar.html dan simpan kembali.


[code language="html"]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Belajar mengenal Bootstrap, dari Twitter</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">

<!-- Le styles -->
<link href="assets/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
</head>

<body>
<div class="container">
<h2>Belajar membuat table dengan style bootstrap</h2>
Contoh table yang dibuat dengan menggunakan class table bootstrap.
<table class="table" style="width:600px;">
<thead>
<tr>
<th>Label</th>
<th>Layout width</th>
<th>Column width</th>
<th>Gutter width</th>
</tr>
</thead>
<tbody>
<tr>
<td>Large display</td>
<td>1200px and up</td>
<td>70px</td>
<td>30px</td>
</tr>
<tr>
<td>Default</td>
<td>980px and up</td>
<td>60px</td>
<td>20px</td>
</tr>
<tr>
<td>Large display</td>
<td>1200px and up</td>
<td>70px</td>
<td>30px</td>
</tr>
</tbody>
</table>
Contoh table yang dibuat dengan menggunakan class table-bordered bootstrap.
<table class="table table-bordered" style="width:700px;">
<thead>
<tr>
<th>Label</th>
<th>Layout width</th>
<th>Column width</th>
<th>Gutter width</th>
</tr>
</thead>
<tbody>
<tr>
<td>Large display</td>
<td>1200px and up</td>
<td>70px</td>
<td>30px</td>
</tr>
<tr>
<td>Default</td>
<td>980px and up</td>
<td>60px</td>
<td>20px</td>
</tr>
<tr>
<td>Large display</td>
<td>1200px and up</td>
<td>70px</td>
<td>30px</td>
</tr>
</tbody>
</table>
Contoh table yang dibuat dengan menggunakan class table-bordered table-striped bootstrap.
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Label</th>
<th>Layout width</th>
<th>Column width</th>
<th>Gutter width</th>
</tr>
</thead>
<tbody>
<tr>
<td>Large display</td>
<td>1200px and up</td>
<td>70px</td>
<td>30px</td>
</tr>
<tr>
<td>Default</td>
<td>980px and up</td>
<td>60px</td>
<td>20px</td>
</tr>
<tr>
<td>Large display</td>
<td>1200px and up</td>
<td>70px</td>
<td>30px</td>
</tr>
</tbody>
</table>
</div>
<!-- /container -->

</body>
</html>
[/code]

Jika sudah selesai, silahkan buka web browser anda dan ketikkan alamat url : http://localhost/bootstrap/navbar.html. Kira-kira tampilannya akan menjadi seperti berikut ini.


navbar-bootstrap.png


Gimana...mudah bukan ? Nantikan artikel-artikel berikutnya mengenai bootstrap di pertemuan selanjutnya. Sampai jumpa.


Silahkan kalau anda mau download materi bootstrap disini.
Labels:

Comments

Post a Comment

Popular posts from this blog

Tips Jitu Cara Mengatasi Error Pada Saat Compile Aplikasi Menggunakan Visual Basic 6

Sebenarnya ada banyak sekali nih project yang harus saya kerjakan dikantor. Namun terkadang apa yang kita rencanakan sering kali berbeda dengan kenyataan. Maksud hati ingin focus dulu ke satu project, tapi karena adanya satu dan lain hal, akhirnya terpaksa deh harus melakukan modifikasi dan membuka project lama yang sebenarnya saya sudah malas untuk berhubungan lagi dengannya :) Project ini sudah dibangun dari awal tahun 2000-an, jauh sebelum saya join. Ya intinya saya dapat warisannya lah seperti itu. Di bangun masih dengan menggunakan vb5-vb6 waktu itu. Sekarang sudah tahun 2016. Jadi sudah lama ya sob. Sudah ketinggalan jaman lah kurang lebih. Meskipun sudah tua, tapi menurut saya visual basic tetap menjadi bahasa pemrograman yang masih powerful. Masalah Kompatibilitas Nah masalah terbesar dalam menggunakan program-program lawas seperti itu biasanya ada pada kompatibilitas component-componentnya. Karena hardware dan os yang kita gunakan biasanya akan berubah seiring waktu. Jika soba...
Post a Comment
Read more

Cara mudah membuat gambar animasi bergerak

Inspirasi itu memang kadang bisa datang tiba-tiba tanpa mengenal waktu, tempat dan dari mana kamu mendapatkannya, bener ngga sob ? Contohnya tadi siang pas kebetulan lagi makan tiba-tiba sahabat nelpon dan menanyakan bagaimana caranya bikin banner. Mau ngejelasin caranya lewat telpon sepertinya terlalu panjang deh jelasinnya. Yang ada nanti malah ngga jadi makan. Yo wis diposting aja ke blog. Biar ilmunya bisa dinikmati oleh banyak orang dan pahala saya bertambah. Aamiin. Sebelumnya saya sudah pernah sharing mengenai cara mudah membuat logo . Kali ini saya juga akan sharing bagaimana caranya membuat sebuah gambar animasi bergerak yang bisa kamu jadikan sebagai banner atau iklan di website kamu. Buat kamu yang hobby gonta-ganti dp bbm, cara ini juga bisa kamu gunakan untuk membuat gambar animasi yang lucu dan menarik. Tipe file gambar yang biasanya digunakan untuk membuat gambar animasi bergerak adalah Graphics Interchange Format ( GIF ) yang merupakan format grafis yang paling sering ...
Post a Comment
Read more

Cara Mengedit Gambar Dengan Aplikasi Paint

Buat kamu para pengguna windows pasti tahu atau minimal pernah melihat bahwa di komputer kamu terdapat aplikasi yang bernama Paint. Aplikasi paint ini biasanya akan kamu temukan dibagian accessories. Namun pernahkah kamu menggunakan aplikasi tersebut ? Tahukah kamu bahwa aplikasi editing gambar yang sederhana tersebut sebenarnya cukup handal, ringan dan praktis untuk digunakan? https://www.youtube.com/watch?v=jUzR-EiLrJM Meskipun tingkat kehandalannya tentu tidak dapat dibandingkan dengan aplikasi editing gambar yang lebih canggih seperti Adobe Photoshop, Lightroom, Corel Draw, Picasa dan lain-lain, namun dengan menggunakan aplikasi paint ini rasanya sudah cukup apabila anda hanya ingin sekedar melakukan proses editing gambar yang sederhana. Tertarik untuk mencoba dan mengetahui hal-hal apa saja yang dapat anda lakukan dengan aplikasi paint ? Silahkan buka aplikasi paint anda kemudian simak saja caranya... Cropping Teknik cropping biasanya digunakan apabila anda ingin mengambil bagian-...
Post a Comment
Read more