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

Mengirim Email dengan Delphi XE Menggunakan Account Google

Kemarin kita sudah membahas mengenai bagaimana caranya mengirim email melalui aplikasi yang dibuat dengan menggunakan VB.NET . Nah sekarang bagaimana caranya mengirim email tapi melalui aplikasi Delphi XE? Untuk mengirim email melalui Delphi XE sebenarnya mudah sekali. Caranya juga hampir mirip dengan VB.NET kok. Component yang dibutuhkan antara lain adalah TIdSMTP, TIdMessage dan TIdSSLIOHandlerSocketOpenSSL. Tanpa component-component tersebut kamu tidak akan dapat mengirimkan email. Selain component yang saya sebutkan diatas, tentu kamu akan membutuhkan koneksi internet. Tanpa itu mustahil email dapat dikirim ke alamat tujuan. Sebenarnya kamu juga dapat menambahkan class dari masing-masing component diatas ke dalam uses tanpa harus menggunakan component. Hal lain yang sangat penting yang mesti kamu pahami adalah untuk mengirimkan sebuah email dibutuhkan yang namanya email sender (email si pengirim), email recipient (email si penerima), email cc (optional), email bcc (optional) dan SM
1 comment
Read more

Penjumlahan Inputbox Secara Otomatis Di HTML, Php, Dan JQuery

Hai sobat yadishare apa kabar? Sudah hari sabtu lagi nih. Iseng-iseng ah pengen nulis mengenai html dan jquery. Ketika kita membangun sebuah aplikasi menggunakan php, seringkali kita harus membuat sebuah penjumlahan antar textbox secara otomatis agar memudahkan user. Misalnya kita memiliki 3 buah inputbox yang kita buat dengan menggunakan HTML yang terdiri dari sub total, ppn, dan grand total. Kemudian setiap kali kita menginputkan angka ke dalam textbox sub total dan textbox ppn tersebut, kita ingin textbox grand total jumlahnya terhitung secara otomatis agar dapat memudahkan user. Lalu bagaimana caranya? Nah untuk dapat melakukannya, kita pasti butuh cara yang mudah dan cepat bukan? Ada banyak cara yang dapat kita lakukan untuk mewujudkan hal tersebut. Salah satunya adalah dengan menggunakan bantuan JQuery. Pertama kalian bisa download file jquery.js disini . Masukkan ke dalam folder assets/js. Kalian juga dapat menambahkan script berikut ini tanpa harus mendownload f
Post a Comment
Read more

Aplikasi Database CRUD (VB6 + Ms. Access + Crystal Report 8)

Assalamualaikum wr. wb. sobat yadishare, apa kabar ? Di artikel kali ini saya akan membagikan tutorial tentang bagaimana cara membuat aplikasi CRUD (create, read, update, dan delete) menggunakan aplikasi atau bahasa pemrograman visual basic 6.0 dan database yang akan saya gunakan adalah database microsoft access. Untuk pembuatan laporannya nanti saya akan menggunakan aplikasi crystal report versi 8. Oke topiknya kali ini adalah membuat aplikasi crud sederhana tentang data pegawai. Namun di dalam aplikasi ini nanti teman-teman akan mempunyai opsi yang cukup lengkap. Selain ada fitur crud dan filtering data, teman-teman bisa langsung mencetak laporannya ke dalam printer. Keren kan ??? Ok langsung saja kita mulai tutorialnya. Untuk membuat aplikasi crud ini, dibutuhkan sebuah database microsoft access. Nah untuk mempersingkat waktu, berhubung saya sudah membuatkan tutorialnya di artikel dan video saya sebelumnya, jadi saya tidak akan bahas lagi disini. Teman-teman bisa langsung b
Post a Comment
Read more