Apa itu evolusi apa Bootstrap

(1)

1. Apa itu Bootstrap ?

Sebelum kita menjawab pertanyaan tersebut, terlebih dahulu kita memahami tentang pengertian framework, perhatikan ilustrasi di bawah ini :

Wa a adalah seora g progra er freelance, ia baru lulus dari kuliah dan sedang mencari pekerjaan, setelah mencari kesana kemari melalui website akhirnya dia mendapatkan order untuk membuat website, dengan senang ia mengerjakan proyek tersebut.

Karena proyek tersebut merupakan pengalaman pertamanya, maka ia membuat sebuah sistem sesuai permintaan client, kemudian melakukan coding dari awal sampai akhir hingga menguras banyak waktu dan tenaga, pada akhirnya proyek selesai dan client senang dengan hasil pekerjaannya, sehingga client tersebut bersedia merekomendasikannya kepada rekan atau mitra bisnisnya.

Beberapa minggu kemudian ada perusahaan yang memesan website dengan permintaan beberapa fitur seperti website client sebelumnya, dengan senang hati wawan menerima dan mengerjakannya. Sedangkan yang ia lakukan adalah dengan melihat kembai coding pada website client sebelumnya kemudian mengadopsi beberapa coding yang diperlukan dan menerapkannya pada website client ke-2. Pada akhirnya proyek ke-2 selesai lebih cepat dari proyek pertama dan client senang dengan hasil pekerjaannya.

Beberapa minggu kemudian wawan mendapatkan beberapa proyek lagi dari beberapa client dan rata-rata kriteria website yang dikehendaki hampir sama. Dalam pembuatan website ke-3, ke-4 dan seterusnya, wawan telah

menyadari bahwa ada beberapa program yang harus ada untuk setiap website, misalnya seperti kode untuk koneksi ke database MySql, pagination untuk tampilan data atau email, dll. Dengan demikian wawan membuat koleksi kode program yang mana sewaktu-waktu bisa ia gunakan, sehingga dapat menghemat waktu dan tenaga dalam

e gerjaka se uah e site .

Apa yang dilakukan oleh wawan diatas adalah cikal bakal sebuah framework, sehingga dapat ditarik sebuah kesimpulan atau pengertian sederhana bahwa Framework adalah koleksi atau kumpulan potongan – potongan program yang disusun atau diorganisasikan sedemikian rupa, sehingga dapat digunakan untuk membantu membuat

aplikasi utuh atau program utuh tanpa harus memulainya dari awal.

Sekarang kita dapat menentukan jawaban untuk pertanyaan di atas :

Bootstrap adalah framework pemrograman web yang dibangun oleh twitter, sedangkan ilustrasi di atas dimaksudkan untuk mempermudah kita dalam memahami pengertian singkat dari Bootstrap.

Pendahuluan

▸ Baca selengkapnya: apa itu skumptk

(2)

2. Dimana kita bisa memperoleh bootstrap ?

Lisensi yang digunakan oleh bootstrap adalah Apache 2.0, yaitu sebuah lisensi yang terbuka sehingga kita dapat menggunakan bootstrap dengan mudah dan secara bebas. Untuk mendapatkannya bisa mengunjungi alamat berikut ini :

 Official Web : http://getbootstrap.com/  Official Blog : http://blog.getbootstrap.com/

Sedangkan untuk aktif mengikuti perkembangan tentang bootstrap anda bisa bergabung di sini :  Twitter : @twbootstrap

 Facebook : Twitter Bootstrap

3. Ada apa saja di dalam bootstrap ?

Bootstrap adalah source code yang meliputi kompilasi CSS, Javascript dan Fonts.

History

Awalnya dibuat oleh seorang desainer dan pengembang di Twitter, Bootstrap telah menjadi salah satu front-end framework yang paling populer dan merupakan proyek open source di dunia.

Bootstrap diciptakan di Twitter pada pertengahan 2010 oleh @mdo dan @fat. Sebelum menjadi kerangka kerja open-source, Bootstrap dikenal sebagai Twitter Blueprint. Mendistribusikan lebih dari 350 juta tweet per hari, Twitter berkembang dari sekedar suatu layanan pesan yang biasa. Selama bertahun-tahun seiring dengan kemampuannya dalam hal analisa data real time, perusahaan tersebut juga telah mencapai

pengalaman yang luar biasa dalam hal perancangan web. Pengalaman tersebut kini telah dikumpulkan dalam suatu pengembangan antar muka yang dikonsolidasikan dan dipublikasikan dalam bentuk Bootstrap.

Awalnya dirilis pada Jumat, 19 Agustus, 2011, dan sudah memiliki lebih dari 20 produk release termasuk yang terbesar adalah versi -2 dan versi-3.

(3)

<!DOCTYPE html> <html>

<head>

<title>My First Bootstrap project</title> </head>

<body>

<h1>Ini Adalah Project Pertama Menggunakan Bootstrap</h1> <h2>Menggunakan class css bootstrap</h2>

</hgroup> </header>

</body> </html>

Contoh :

4. Cara sederhana untuk memahami prinsip penggunaan bootstrap

1. Download bootstrap, untuk segmen kali ini saya coba dengan versi 3.0.3-dist, ekstrak file ke dalam folder yang sudah kita sediakan.

2. Open folder, karena disitu baru tersedia directory css, fonts, dan js, maka kita tambahkan index.html

3. Isi file index.html dengan elemen sederhana atau elemen dasar html 5, seperti di bawah ini :

Checkpoint : sampai di sini kita telah memiliki sebuah file html yaitu index.html, file ini belum terintegrasi dengan bootstrap dan jika kita lihat di browser maka tampilannya akan seperti ini :

4. Masukan bootstrap kedalam index.html dengan cara menambahkan sebuah link yang menuju ke directory css, sebagaimana berikut :

(4)

<head>

<title>My First Bootstrap project</title>

<body>

</hgroup> </header>

</body> </html>

Overview :

Sekarang lihat perubahan yang dibuat oleh bootstrap :

Jika kita belum puas dengan yang disediakan oleh bootstrap, maka kita bisa melakukan editing pada file css dalam hal ini adalah bootstrap.css, sebagai contoh saya menambahkan font-style pada bootstrap.css :

Sehingga menghasilkan perubahan seperti tampila berikut ini :

(5)

<head>

</hgroup> </header>

</body> </html>

5. Cara menggunakan class css bootstrap

Perlu kita ingat bahwa bootstrap menggunakan 12 grids dalam design templatenya, untuk membagi grids tersebut kita akan menggunakan span, namun untuk kasus ini kita akan coba terapkan pada 2 span yaitu :

 Header  Navbar

Dalam hal ini kita akan membuat sebuah navigasi, maka terlebih dahulu kita integrasikan index.html kita dengan css navbar dari bootstrap dengan cara menambahkan link untuk menuju ke directory- css-navbar dari bootstrap

sebagaimana di bawah ini :

Jadikan elemen paling bawah pada tag <head>…</head> Overview :

Selanjutnya kita akan memasang sebuah navigasi dengan cara menambahkan beberapa kode dengan berkorelasi pada css navbar yang telah disediakan oleh bootstrap, dalam hal ini saya telah mengadobsi beberapa kode navbar yang telah disediakan oleh bootstrap.

Letaka kode a ar di agia pali g a ah pada ele e < od >…</ od >

(6)

<head>

</hgroup> </header>

<li class="active"><a href="#">Home</a></li> <li><a href="#about">Tentang Saya</a></li> <li><a href="#contact">Contact</a></li> <li class="dropdown">

<a href="#" class="dropdown-toggle"

data-toggle="dropdown">Catatan Kuliah<b class="caret"></b></a> <ul class="dropdown-menu">

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

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

</li> </ul>

(7)

6. Cara menggunakan koleksi icon pada bootstrap

Contoh :

Saya akan mengganti navbar intermeso dengan sebuah icon star perhatikan langkah di bawah ini : Jangan dicampur dengan komponen lain

Kelas Icon tidak dapat dikombinasikan dengan unsur-unsur lain. Mereka dirancang untuk menjadi elemen mandiri.

Untuk alasan performa, maka semua ikon memerlukan kelas dasar dan kelas icon individual. Untuk menggunakan, letakkan kode berikut hampir di mana saja. Pastikan untuk memberikan ruang antara icon dan teks untuk padding yang tepat.

(8)

<li class="active"><a href="./">Intermeso</a></li>

</ul>

Masih dengan index.html kita, sehingga perhatikan kode warna biru pada elemen ini :

Ganti dengan kode warna biru di bawah ini :

7. Cara mengintegrasikan Javascript di bootstrap

Individu atau dikompilasi

Plugin dapat dimasukkan secara individual menggunakan bootstrap.js atau bootstrap.min.js.

SESUDAH

Jangan mencoba untuk memasukkan keduanya.

seperti bootstrap.js dan bootstrap.min.js berisi semua plugin dalam satu file.

Dependensi (ketergantungan) Plugin

(9)

Catatan :

mungkin kita akan bertanya kapan kita seharusnya meletakkan kode javascript kita di tag <head> atau <body>. Kita dapat meletakkan kode javascript didalam tag <head> bila kita membuat fungsi yang akan dipanggil di tag <body>. Sedangkan kita dapat menuliskan kode javascript di dalam tag <body> ketika kita akan memanggil fungsi yang telah kita definisikan di dalam tag <head> atau dari file external javascript.

Pada html sebelumnya kita telah memiliki sebuah menu dropdown akan tetapi belum aktif dikarenakan html kita belum terintegrasi dengan javascript dari bootstrap beserta jquery, coba perhatikan dibawah ini :

Dengan tampilan seperti ini, yaitu ketika catatan kuliah kita klik, maka tidak ada option yang ditampilkan.

(10)

<head>

<body>

Sekarang kita integrasikan index.html kita dengan menambahkan link, sebagaimana berikut ini :

Dan sekarang kita lihat, perubahan apa yang dibuat oleh bootstrap :

(11)

<!DOCTYPE html> <html lang="en"> <head>

</div>

</div> </div> </body> </html>

<div class="container"> <div class="row">

<legend>Registration</legend> <div class="control-group">

</div> </div>

<label class="control-label" for="input01">Email</label> <div class="controls">

</div>

8. Mengimplementasikan design form registrasi dengan bootstrap

1. Bootstrap CSS

Hanya mencakup dua file CSS untuk diintegrasikan yaitu bootstrap.css dan doc.css, anda bisa mendapatkannya di bootstrap versi 3.0.3

contoh :

2. Code Form HTML

Berikut nama-nama warna font merah adalah elemen class Bootstrap untuk styling, Anda dapat

(12)

</div>

<label class="control-label" for="input01">Password</label> <div class="controls">

</div> </div>

<label class="control-label" for="input01">Confirm Password</label> <div class="controls">

</div>

<button type="submit" class="btn btn-success" rel="tooltip" title="first tooltip">Create My Account</button>

(13)

<li class="active"><a href="#">Home</a></li> <li><a href="registrasi.html">Registrasi</a></li> <li><a href="#contact">Contact</a></li>

Masukan code html pada tag <body> dibawah comment, Al – hasil seperti ini :

Kemudian cara mengintegrasikan registrasi.html pada index.html maka silakan cari kode ini <li><a href="about">Tentang saya</a></li> pada index.html, dan silakan ganti menjadi seperti ini <li><a href="registrasi.html">Registrasi</a></li> sehingga akan Nampak seperti dibawah ini :

(14)

Sesudah :

Dan jika kita klik, maka tampilah halaman registrasi yang telah kita buat sebelumnya :

Da sudah saat a kita u tuk ila g, Co gratulatio heee  ok gan selamat mencoba , semoga tutorial singkat dari saya ini bermanfaat, Terimakasih

Ok, ga , u tuk tutorial ootstrap i i aka sa a update lagi setelah sa a elakuka e plorasi le ih jauh lagi,,