RINGKASAN BOOTSTRAP

DESAIN WEB

DISUSUN OLEH :

Nama : Rizka Rahmadini Salim

Nim : 1957301011
Jurusan : Teknologi Informasi dan Komputer
Prodi : Teknik Informatika
Kelas : TI-1A

KEMENTRIAN RISET, TEKNOLOGI DAN PERGURUAN

TINGGI POLITEKNIK NEGERI LHOKSEUMAWE
2019/2020
 Pengertian Bootstrap

Pengertian Bootstrap adalah library (pustaka / kumpulan fungsi-fungsi) dari

Framework CSS yang dibuat khusus untuk bagian pengembangan frontend dari suatu
website. Framework bootstrap agar memudahkan dan mempercepat pembuatan website.
Karena semuanya sudah ada dalam frameworknya sehingga para develop / pengembang
hanya tinggal membuat / menyisipkan class nya yang ingin dipakai seperti membuat
tombol, grid navigasi dan lain sebagainya.

 Sejarah Bootstrap

Bootstrap awalnya dibuat dan dikembangkan oleh pekerja / programmer Twitter,

yaitu Mark Octo dan Jacob Thornton sejak tahun 2011. Saat itu memang para
programmer di Twitter menggunakan berbagai macam tools dan library yang mereka
kuasai dan disukai untuk melakukan pekerjaannya, sehingga tidak ada standarisasi dalam
penamaan suatu class. Akibatnya sulit untuk dikelola, maka dari itu keduanya membuat
suatu tools ataupun framework yang digunakan bersama dilingkukan internal twitter.

Sejak diluncurkan pada bulan Agustus 2011, bootstrap telah berevolusi dari
proyek yang hanya basis css menjadi sebuah framework yang lebih lengkap yang juga
berisi javascript plugin, icon, Forms, dan button.

Pada januari 2012, Bootstrap merealease Versi 2.0 yang didalamnya sudah
memasukan fitur responsive layout, dan sejak itu penggunaan Bootstrap sangat banyak
sekali sehingga menjadi proyek Github yang sangan banyak di copy hingga 20.000 kali.

Dua tahun setelah itu tepatnya pada bulan agustus 2014 bootstrap kembali
mengeluarkan versi terbaru yaitu versi 3.0 yang didalamnya sudah mengakomodasi
konsep Mobile first artinya didalam pembuatan dan pengembangan mulai dari layar yang
terkecil dahulu (mobile / handphone/ smartphone) dan secara bertahap pada tampilan
yang paling besar.

Dan baru-baru ini bootstrap merilis versi 4.0 (sebelumnya pada tahun 2017 sudah
dirilis versi betanya) sebagai penyempurnaan dokumentasi dan menambah beberapa fitur
tambahan yang saat ini sedang booming yaitu dengan memberikan tampilan lebih baik
 bagi para pengembang ecommerce , dan tampak lebih stabil dan dengan ini maka versi
2.0 dan 3.0 tidak akan ada lagi support atau update dalam penggunaannya.

 Komponen Bootstrap
a) Dropdown
Dropdown merupakan menu-menu yang biasanya ditampilkan dalam bentuk listatau
daftar bisa dibuat interaktif dengan Toggleable dropdown JavaScript plugin, menu
kontekstual untuk menampilkan link dalam format daftar.

b) Button groups
Button groups memungkinkan beberapa tombol untuk ditumpuk selaras
bersama-sama pada satu baris. Hal ini berguna ketika anda ingin menempatkan item
sepertitombol alignment bersama-sama. Kita dapat menambahkan pilihan JavaScript
radio dan checkbox style dengan Bootstrap Plugin Button.

c) Button dropdown
Pada komponen ini akan dibahas tentang cara menambahkan menu
buttondropdown dengan menggunakan kelas Bootstrap. Untuk menambahkan
dropdownke tombol, cukup membungkus tombol dan menu dropdown di .btn-group.

d) Breadcrumbs
Breadcrumbs adalah cara yang tepat untuk menampilkan informasi hirarki
untuk sebuah situs. Dalam kasus blog, breadcrumbs dapat menunjukkan
tanggal penerbitan, kategori, atau tag.

e) Pagination
Pagination adalah sebuah teknik untuk lebih mempermudah user agar
tidakscroll terlalu jauh saat inign menampilkan data dalam bentuk yang ratusan
hinggaribuan data. Dengan Menggunakan Pagination, Maka Akan terbentuk
Halaman-halaman yang berurutan untuk menampilkan data-data tersebut.
 f) Label dan Badges
 Label
Label yang besar untuk menawarkan jumlah, tips, atau markup lainnya
untuk halaman.

 Badges
Badges mirip dengan label, perbedaan utamanya adalah bahwa sudut 
budges lebih bulat. badges terutama digunakan untuk menyorot item baru atau
yang belum dibaca.

g) Progress Bar
Tujuan dari progress bar adalah untuk menunjukkan bahwa aset memuat,
dalam proses, atau bahwa ada tindakan yang terjadi mengenai elemen pada
halaman.Progress bar menggunakan CSS3 transisi dan animasi untuk mencapai
beberapaefeknya. Fitur-fitur ini tidak didukung di Internet Explorer 9 dan di
bawah atau versiFirefox yang lebih tua. Opera 12 tidak mendukung animasi.

 Fitur – Fitur Bootstrap

 Source Bootstrap
Yang perlu anda lakukan untuk bisa memanfaatkan bootstrap ini adalah
mendownload file-file bootstrap dari Twitter, anda dapat mendownloadnya di sini.
Jika anda sudah mendownloadnya, maka anda akan melihat sebuah file zip, bernama
bootstrap.zip, yang mana jika di-extract akan menjadi sebuah folder Bootstrap.

 Struktur Bootstrap
Struktur bootstrap tersebut dapat digambarkan sebagai berikut :
bootstrap/
+-- css/
¦ +-- bootstrap.css
¦ +-- bootstrap.min.css
+-- js/
¦ +-- bootstrap.js
 ¦ +-- bootstrap.min.js
Dari struktur bootstrap di atas, maka jika kita ingin memanfaatkan Bootstrap
untuk layout website kita, kita pasti faham, di mana seharusnya file kita diletakkan.
 Docs Section
Berikut adalah beberapa fitur untuk layout website yang disediakan oleh bootstrap :
 Scaffoling : Bagian yang mengatur background, link styles, grid system, dan two
simple layouts
 Base CSS : Bagian yang mengatur tampilan elemen HTML seperti typography,
code, table, form, dan button. Termasuk Glyphicons, sebuah kumpulan ikon-ikon
kecil.
 Components : Bagian yang mengatur tampilan component, seperti tab, navbar,
alerts, page headers, dst.
 Javascript Plugins: Menyediakan beberapa component interaktif, seperti tooltips,
popovers, modals, dan seterusnya.

 Cara Menggunakan Bootstrap

Jika ingin menggunakan bootstrap juga bisa men-download filenya di
getbootstrap.com. Berikut adalah caranya:
1. Download filenya terlebih dahulu di getbootstrap.com
2. Ekstrak file .zip yang telah didownload tadi
3. Setelah itu kita bisa memanggil file tersebut dan menerapkannya di website yang
sudah dibangin sebelumnya
Memang pemasangan bootstrap untuk website ini tidak boleh dilakukan oleh
sembarang orang. Anda harus mengandalkan seorang programmer yang sudah terlatih.
Karena tidak semua programmer bisa memasang bootstrap tersebut.

 Contoh – Contoh Bootstrap

Bootstrap mendapatkan reputasinya sebagai framework yang bagus bukan karena
tanpa alasan. Lihat saja contoh beberapa web terkenal dibawah ini, pasti Sobat Androbuntu
akan semakin tertarik untuk mempelajari dan menggunakannya.
o creative-tim.com
 o pixelsvibe.com
o resto-elephant.com
o mpoweryogastusio.com
o twitter.com
o lyft.com
o meteor.com
o mapsconnect.apple.com

 Fungsi Bootstrap
 Bootstrap memiliki fungsi yang tidak jauh berbeda dengan framework HTML,
CSS dan JavaSript lainnya.
 Yaitu memudahkan pengembang dalam membuat website.
 Seorang pengembang hanya perlu “memanggil” kelas-kelas yang dibutuhkan.
 Misalnya ingin membuat tombol, maka hanya perlu memanggil kelas button.
 Tidak perlu lagi mengkoding button secara manual dari awal.Jadi jauh lebih
cepat.