Apa itu evolusi apa Bootstrap
Tutorial © Wawan Chahyo Nugroho / 12131294
Pendahuluan
Dalam rangka memenuhi tugas mata kuliah Web Statis, Prodi TI, STMIK EL Rahma, dengan topik dan konten
yang telah ditetapkan, yaitu mengenai Bootstrap. Maka saya mengekspresikan sebuah pemahaman tentang
topik tersebut dalam karya tulis ini.
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.
Tutorial © Wawan Chahyo Nugroho / 12131294
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.
Hadirnya Bootstrap 2, maka fungsionalitas responsif terhadap seluruh kerangka sebagai stylesheet
opsional telah di tambahkan dan pada Bootstrap 3, maka responsif secara default telah ditambahkan untuk
pendekatan pertamanya terhadap ponsel.
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
Official Blog
: http://getbootstrap.com/
: http://blog.getbootstrap.com/
Sedangkan untuk aktif mengikuti perkembangan tentang bootstrap anda bisa bergabung di sini :
Twitter
Facebook
: @twbootstrap
: Twitter Bootstrap
3. Ada apa saja di dalam bootstrap ?
Bootstrap adalah source code yang meliputi kompilasi CSS, Javascript dan Fonts.
Tutorial © Wawan Chahyo Nugroho / 12131294
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 :
My First Bootstrap project
Ini Adalah Project Pertama Menggunakan Bootstrap
Menggunakan class css bootstrap
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 :
Jadikan elemen paling bawah pada tag …
Tutorial © Wawan Chahyo Nugroho / 12131294
Overview :
My First Bootstrap project
Ini Adalah Project Pertama Menggunakan Bootstrap
Menggunakan class css bootstrap
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 :
Catatan: file bootstrap.css merupakan file CSS yang belum dikompilasi, dan digunakan hanya pada tahap
pengembangan untuk mempermudah debugging. Jika ingin menggunakan Bootstrap pada website produksi
yang akan benar-benar dikunjungi pengguna, disarankan untuk menggunakan bootstrap.min.css untuk
meminimalkan download pengguna.
Tutorial © Wawan Chahyo Nugroho / 12131294
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 …
Overview :
My First Bootstrap project
Ini Adalah Project Pertama Menggunakan Bootstrap
Menggunakan class css bootstrap
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 >…
Sebagaimana dibawah ini :
Tutorial © Wawan Chahyo Nugroho / 12131294
Overview :
My First Bootstrap project
Ini Adalah Project Pertama Menggunakan Bootstrap
Menggunakan class css bootstrap
Home
Tentang Saya
Contact
Catatan Kuliah
fisika
wirausaha
ppkn
Intermeso
Al – hasil akan tampil seperti dibawah ini :
Tutorial © Wawan Chahyo Nugroho / 12131294
6. Cara menggunakan koleksi icon pada bootstrap
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.
Jangan dicampur dengan komponen lain
Kelas Icon tidak dapat dikombinasikan dengan unsur-unsur lain. Mereka dirancang untuk menjadi
elemen mandiri.
Contoh :
Saya akan mengganti navbar intermeso dengan sebuah icon star perhatikan langkah di bawah ini :
SEBELUM
Tutorial © Wawan Chahyo Nugroho / 12131294
SESUDAH
Caranya :
Masih dengan index.html kita, sehingga perhatikan kode warna biru pada elemen ini :
Intermeso
Ganti dengan kode warna biru di bawah ini :
Intermeso
7. Cara mengintegrasikan Javascript di bootstrap
Individu atau dikompilasi
Plugin dapat dimasukkan secara individual menggunakan bootstrap.js atau bootstrap.min.js.
Jangan mencoba untuk memasukkan keduanya.
seperti bootstrap.js dan bootstrap.min.js berisi semua plugin dalam satu file.
Dependensi (ketergantungan) Plugin
Beberapa plugin dan komponen CSS tergantung pada plugin lainnya. Jika Anda memasukan plugin
individual, pastikan untuk memeriksa dependensi ini dalam dokumentasi, dan juga mencatat
semua plugin yang tergantung pada jQuery (ini berarti jQuery harus disertakan sebelum file
plugin). kesimpulan : setiap integrasikan index.html dengan bootstrap.js jangan lupa integrasikan
juga dengan jQuery.js
Tutorial © Wawan Chahyo Nugroho / 12131294
Catatan :
mungkin kita akan bertanya kapan kita seharusnya meletakkan kode javascript kita di tag atau
. Kita dapat meletakkan kode javascript didalam tag bila kita membuat fungsi yang akan
dipanggil di tag . Sedangkan kita dapat menuliskan kode javascript di dalam tag ketika kita
akan memanggil fungsi yang telah kita definisikan di dalam tag 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.
Masih dengan index.html kita sebelumnya, sehingga pada segmen kali ini kita akan mengintegrasikan sebuah
javascript yang ada di directory dengan cara meletakan elemen javascript paling bawah pada tag .
Sebagaimana telah dijelaskan sebelumnya tentang dependensi plugin, maka untuk integrasi javascript
bootstrap harus diiringi dengan integrasi javascript jQuery, jika salah satunya tidak ada maka plugin tidak
akan bekerja. Sehingga dalam hal ini terlebih dahulu kita lengkapi directory js kita dengan cara download
jQuery.js di sini http://jquery.com/download , sehingga nampak seperti ini :
Tutorial © Wawan Chahyo Nugroho / 12131294
Sekarang kita integrasikan index.html kita dengan menambahkan link, sebagaimana berikut ini :
My First Bootstrap project
Dan sekarang kita lihat, perubahan apa yang dibuat oleh bootstrap :
Nah mudah bukan?
Tutorial © Wawan Chahyo Nugroho / 12131294
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 :
Page Title
2. Code Form HTML
Berikut nama-nama warna font merah adalah elemen class Bootstrap untuk styling, Anda dapat
menggunakan nama class yang berbeda untuk ukuran input input-kecil, menengah dan input-input-besar.
Registration
Name
Email
Tutorial © Wawan Chahyo Nugroho / 12131294
Password
Confirm Password
Gender
Gender
Male
Female
Other
Create My
Account
© wawan chahyo nugroho
Tutorial © Wawan Chahyo Nugroho / 12131294
Masukan code html pada tag dibawah comment,
Al – hasil seperti ini :
Kemudian cara mengintegrasikan registrasi.html pada index.html maka silakan cari kode ini Tentang saya pada index.html, dan silakan ganti menjadi seperti ini Registrasi sehingga akan Nampak seperti dibawah ini :
Home
Registrasi
Contact
Al – hasil :
Sebelum
Tutorial © Wawan Chahyo Nugroho / 12131294
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
saya ini bermanfaat, Terimakasih
heee ok gan selamat mencoba , semoga tutorial singkat dari
Ok, ga , u tuk tutorial ootstrap i i aka sa a update lagi setelah sa a
Please, do ’t a
here e ept just here.. bye ..
elakuka e plorasi le ih jauh lagi,,
Pendahuluan
Dalam rangka memenuhi tugas mata kuliah Web Statis, Prodi TI, STMIK EL Rahma, dengan topik dan konten
yang telah ditetapkan, yaitu mengenai Bootstrap. Maka saya mengekspresikan sebuah pemahaman tentang
topik tersebut dalam karya tulis ini.
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.
Tutorial © Wawan Chahyo Nugroho / 12131294
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.
Hadirnya Bootstrap 2, maka fungsionalitas responsif terhadap seluruh kerangka sebagai stylesheet
opsional telah di tambahkan dan pada Bootstrap 3, maka responsif secara default telah ditambahkan untuk
pendekatan pertamanya terhadap ponsel.
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
Official Blog
: http://getbootstrap.com/
: http://blog.getbootstrap.com/
Sedangkan untuk aktif mengikuti perkembangan tentang bootstrap anda bisa bergabung di sini :
: @twbootstrap
: Twitter Bootstrap
3. Ada apa saja di dalam bootstrap ?
Bootstrap adalah source code yang meliputi kompilasi CSS, Javascript dan Fonts.
Tutorial © Wawan Chahyo Nugroho / 12131294
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 :
My First Bootstrap project
Ini Adalah Project Pertama Menggunakan Bootstrap
Menggunakan class css bootstrap
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 :
Jadikan elemen paling bawah pada tag …
Tutorial © Wawan Chahyo Nugroho / 12131294
Overview :
My First Bootstrap project
Ini Adalah Project Pertama Menggunakan Bootstrap
Menggunakan class css bootstrap
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 :
Catatan: file bootstrap.css merupakan file CSS yang belum dikompilasi, dan digunakan hanya pada tahap
pengembangan untuk mempermudah debugging. Jika ingin menggunakan Bootstrap pada website produksi
yang akan benar-benar dikunjungi pengguna, disarankan untuk menggunakan bootstrap.min.css untuk
meminimalkan download pengguna.
Tutorial © Wawan Chahyo Nugroho / 12131294
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 …
Overview :
My First Bootstrap project
Ini Adalah Project Pertama Menggunakan Bootstrap
Menggunakan class css bootstrap
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 >…
Sebagaimana dibawah ini :
Tutorial © Wawan Chahyo Nugroho / 12131294
Overview :
My First Bootstrap project
Ini Adalah Project Pertama Menggunakan Bootstrap
Menggunakan class css bootstrap
Home
Tentang Saya
Contact
Catatan Kuliah
fisika
wirausaha
ppkn
Intermeso
Al – hasil akan tampil seperti dibawah ini :
Tutorial © Wawan Chahyo Nugroho / 12131294
6. Cara menggunakan koleksi icon pada bootstrap
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.
Jangan dicampur dengan komponen lain
Kelas Icon tidak dapat dikombinasikan dengan unsur-unsur lain. Mereka dirancang untuk menjadi
elemen mandiri.
Contoh :
Saya akan mengganti navbar intermeso dengan sebuah icon star perhatikan langkah di bawah ini :
SEBELUM
Tutorial © Wawan Chahyo Nugroho / 12131294
SESUDAH
Caranya :
Masih dengan index.html kita, sehingga perhatikan kode warna biru pada elemen ini :
Intermeso
Ganti dengan kode warna biru di bawah ini :
Intermeso
7. Cara mengintegrasikan Javascript di bootstrap
Individu atau dikompilasi
Plugin dapat dimasukkan secara individual menggunakan bootstrap.js atau bootstrap.min.js.
Jangan mencoba untuk memasukkan keduanya.
seperti bootstrap.js dan bootstrap.min.js berisi semua plugin dalam satu file.
Dependensi (ketergantungan) Plugin
Beberapa plugin dan komponen CSS tergantung pada plugin lainnya. Jika Anda memasukan plugin
individual, pastikan untuk memeriksa dependensi ini dalam dokumentasi, dan juga mencatat
semua plugin yang tergantung pada jQuery (ini berarti jQuery harus disertakan sebelum file
plugin). kesimpulan : setiap integrasikan index.html dengan bootstrap.js jangan lupa integrasikan
juga dengan jQuery.js
Tutorial © Wawan Chahyo Nugroho / 12131294
Catatan :
mungkin kita akan bertanya kapan kita seharusnya meletakkan kode javascript kita di tag atau
. Kita dapat meletakkan kode javascript didalam tag bila kita membuat fungsi yang akan
dipanggil di tag . Sedangkan kita dapat menuliskan kode javascript di dalam tag ketika kita
akan memanggil fungsi yang telah kita definisikan di dalam tag 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.
Masih dengan index.html kita sebelumnya, sehingga pada segmen kali ini kita akan mengintegrasikan sebuah
javascript yang ada di directory dengan cara meletakan elemen javascript paling bawah pada tag .
Sebagaimana telah dijelaskan sebelumnya tentang dependensi plugin, maka untuk integrasi javascript
bootstrap harus diiringi dengan integrasi javascript jQuery, jika salah satunya tidak ada maka plugin tidak
akan bekerja. Sehingga dalam hal ini terlebih dahulu kita lengkapi directory js kita dengan cara download
jQuery.js di sini http://jquery.com/download , sehingga nampak seperti ini :
Tutorial © Wawan Chahyo Nugroho / 12131294
Sekarang kita integrasikan index.html kita dengan menambahkan link, sebagaimana berikut ini :
My First Bootstrap project
Dan sekarang kita lihat, perubahan apa yang dibuat oleh bootstrap :
Nah mudah bukan?
Tutorial © Wawan Chahyo Nugroho / 12131294
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 :
Page Title
2. Code Form HTML
Berikut nama-nama warna font merah adalah elemen class Bootstrap untuk styling, Anda dapat
menggunakan nama class yang berbeda untuk ukuran input input-kecil, menengah dan input-input-besar.
Registration
Name
Tutorial © Wawan Chahyo Nugroho / 12131294
Password
Confirm Password
Gender
Gender
Male
Female
Other
Create My
Account
© wawan chahyo nugroho
Tutorial © Wawan Chahyo Nugroho / 12131294
Masukan code html pada tag dibawah comment,
Al – hasil seperti ini :
Kemudian cara mengintegrasikan registrasi.html pada index.html maka silakan cari kode ini Tentang saya pada index.html, dan silakan ganti menjadi seperti ini Registrasi sehingga akan Nampak seperti dibawah ini :
Home
Registrasi
Contact
Al – hasil :
Sebelum
Tutorial © Wawan Chahyo Nugroho / 12131294
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
saya ini bermanfaat, Terimakasih
heee ok gan selamat mencoba , semoga tutorial singkat dari
Ok, ga , u tuk tutorial ootstrap i i aka sa a update lagi setelah sa a
Please, do ’t a
here e ept just here.. bye ..
elakuka e plorasi le ih jauh lagi,,