MODUL PERKULIAHAN

Web
Design
Bootstrap

Fakultas Program Studi Tatap Muka Kode MK Disusun Oleh

13
Fakultas Ekonomi dan Manajemen XXXXXXX Egi Abinowi, S.T., M.Kom.
Bisnis

Abstract Kompetensi

Web sudah tidak asing lagi di Mahasiswa mengetahui dan

kalangan masyarakat saat ini, memahami tentang web design
hal ini untuk memberikan serta informasi dan
kemudahan. Menjadi suatu pemanfaatannya.
media informasi yang kini
efektif dan efisien

‘20 Web Design Biro Akademik dan Pembelajaran

1 Egi Abinowi, S.T., M.Kom http://www.widyatama.ac.id
 Bootstrap

Sejarah Bootstrap

Bootstrap, awalnya bernama Twitter Blueprint, dikembangkan oleh Mark Otto dan Jacob
Thornton di Twitter sebagai kerangka kerja untuk mendorong konsistensi di perangkat
internal yang sesuai.

Sebelum Bootstrap, berbagai pustaka sudah banyak digunakan untuk pengembangan

antarmuka, yang menyebabkan tidak konsisten dan beban pemeliharaan yang berat.

Setelah beberapa bulan pengembangan oleh sebuah kelompok kecil, banyak

pengembang di Twitter mulai memberikan kontribusi untuk proyek ini sebagai bagian
dari Hack Week, sebuah pekan ala hackathon untuk tim pengembangan Twitter.

Nama itu diganti dari Twitter Blueprint menjadi Bootstrap, dan dirilis sebagai proyek
sumber terbuka pada 19 Agustus 2011. Hal ini terus dipertahankan oleh Mark Otto,
Jacob Thornton, dan sekelompok kecil pengembang inti, serta sejumlah besar
komunitas dari para kontributor.

‘20 Web Design Biro Akademik dan Pembelajaran

2 Egi Abinowi, S.T., M.Kom http://www.widyatama.ac.id
Bootstrap 2 dan 3
Pada 31 Januari 2012, Bootstrap 2 dirilis, yang menambahkan sistem layout dua belas
kolom grid yang responsif, dukungan built-in untuk Glyphicons, beberapa komponen
baru, serta perubahan dari beberapa komponen yang sudah ada.

Pada 19 Agustus 2013, Bootstrap 3 dirilis, yang didesain ulang komponennya untuk
menggunakan desain flat, dan pendekatan mobile-first.

Bootstrap 4
Pada 29 Oktober 2014, Mark Otto mengumumkan bahwa Bootstrap 4 sedang dalam
pengembangan.Versi alfa pertama dari Bootstrap 4 dirilis pada 19 Agustus 2015.

Pada 6 September 2016, Mark menghentikan pengerjaan Bootstrap 3 dalam rangka

untuk meluangkan waktu untuk pengerjaan Bootstrap 4. Sejauh ini, sudah lebih dari
17.500 kommit yang telah dibuat untuk basis kode Bootstrap 4. Versi beta pertama
dirilis pada 10 Agustus 2017.

Manfaat Bootstrap

‘20 Web Design Biro Akademik dan Pembelajaran

3 Egi Abinowi, S.T., M.Kom http://www.widyatama.ac.id
Seperti yang telah dijelaskan oleh penjelasan di atas template website yang dibangun
dengan bootstrap sudah responsif sehingga kita cukup membuat satu buah template
lengkap saja dan sudah support atau kompatibel diberbagai browser sekaligus berbagai
device baik untuk desktop, laptop, tablet maupun smartphone sekalipun.

Template yang kita buat dengan bootstrap ini akan langsung menyesuaikan diri dengan
lebar layar dari masing-masing device. Fitur responsif ini juga telah menjadi
rekomendasi google guna memperkuat SEO mobile dari website yang kita buat.

Di tutorial bootstrap ini kiata akan mencoba membuat template website dengan layout
dua kolom dengan menggunakan fitur teks dari bootstrap dan tentunya akan kita bahas
langkah demi langkah selanjutnya.
Baca Juga : 7 Framework CSS Untuk Membuat Web Responsif

Cara Menginstall Bootstrap Online

Jika anda telah melakukan ekstrak file, Kemudian selanjutnya Anda bisa memanggil
Bootstrap secara online (menggunakan CDN). Hanya saja, ketika Anda memanggil
secara online tentunya akan mengurangi tingkat kecepatan website.

Perintah ini akan mengambil file Bootstrap dan menyalinnya ke dalam website supaya
dapat digunakan oleh class atau fungsi lain.

‘20 Web Design Biro Akademik dan Pembelajaran

4 Egi Abinowi, S.T., M.Kom http://www.widyatama.ac.id
Tutorial Cara Menggunakan Template Bootstrap Untuk
Membuat Website

Silahkan download source code bootstrap di situs resminya getbootstrap.com yang

disediakan oleh bootstrap secara gratis untuk diunduh oleh siapa saja.
Kemudian, download jquery di jquery.com atau library google. Karena bootstrap tidak
menyediakan jquery dalam paketan source code-nya. Jquery ini digunakan untuk
menjalankan komponen-komponen bawaan bootstrap seperti modal dialog, navigation
agar berjalan dengan normal.

Lalu, pastikan kalian sudah punya code editor seperti notepad++, dreamweaver atau
Sublime Text yang nanti akan kita gunakan untuk membuat template website dengan
bootstrap.

Agar lebih terasa bawa kita membuat website, kita akan menggunakan xampp dan file
dengan extention php dalam membuat template website ini.

‘20 Web Design Biro Akademik dan Pembelajaran

5 Egi Abinowi, S.T., M.Kom http://www.widyatama.ac.id
Biasanya file Bootstrap akan dipanggil melalui link bootstrap tersebut agar lebih mudah
dalam pengolahan datanya.

‘20 Web Design Biro Akademik dan Pembelajaran

6 Egi Abinowi, S.T., M.Kom http://www.widyatama.ac.id
Setelah anda melakukan ekstrak atau copy codingan tersebut, maka akan muncul
tampilan seperti diatas. Teks dan kolom pada tampilan tersebut dapat anda ganti sesuai
keinginan anda.

Kesimpulan dan Penutup

Bootstrap memang menjadi penolog bagi para developer. Bagaimana tidak, proses
pengolahannya yang praktis dan cepat serta dapat membuat website lebih responsive.
Sehingga tampilan website cenderung tidak kaku.

Jika anda masih bingung bootsrtap itu apa, maka definisi dari bootstrap adalah sebuah
front-end framework atau framework css yang sengaja dibangun untuk memudahkan
pendesain web dalam membuat website atau membuat template website.

Lalu, biasanya bootsrtap ini bisa menjadi sebuah template website yang dibangun
dengan bootstrap sudah responsif sehingga kita cukup membuat satu buah template
lengkap saja dan sudah support atau kompatibel diberbagai browser sekaligus berbagai
device baik untuk desktop, laptop, tablet maupun smartphone sekalipun. Selamat
Mencoba!

‘20 Web Design Biro Akademik dan Pembelajaran

7 Egi Abinowi, S.T., M.Kom http://www.widyatama.ac.id