Proyek Membangun

Responsive Web Design

dengan Bootstrap 3 dan 4

Husein Alatas

CV. LOKOMEDIA
Proyek Membangun Responsive Web Design dengan
Bootstrap 3 dan 4
Perpustakaan Nasional : Katalog Dalam Terbitan (KDT)
Penulis : Husein Alatas
Proyek Membangun Responsive Web Design dengan Bootstrap 3 & 4
- Cet. I. - Yogyakarta : Penerbit Lokomedia, 2015
350 halaman; 14 x 21 cm
ISBN : 978-602-71905-6-6

Penerbit Lokomedia,
Cetakan Pertama : Oktober 2015

Editor : Lukmanul Hakim

Cover : Subkhan Anshori
Layout : Lukmanul Hakim

Diterbitkan pertama kali oleh :

CV. LOKOMEDIA
Jl. Jambon, Perum. Pesona Alam Hijau 2 Kav. B-4, Kricak
Yogyakarta 55242.

email : redaksi@bukulokomedia.com
website : www.bukulokomedia.com

Copyright © Lokomedia, 2015

Hak Cipta dilindungi oleh Undang-Undang

Dilarang memperbanyak, mencetak ataupun menerbitkan sebagian

maupun seluruh isi buku ini tanpa izin tertulis dari penerbit.

ii
UCAPAN TERIMAKASIH

Penulis sadar bahwa buku ini tidak

akan bisa terbit tanpa bantuan orang-
orang lain yang telah memberikan
waktu dan perhatian agar buku ini
sampai di hadapan pembaca.

Terimakasih kepada Tim Redaksi

dari Penerbit Lokomedia yang telah
memberikan semangat agar buku ini
bisa selesai pada waktunya.

Juga terimakasih kepada

Isteri tercinta, Eva Sulava
untuk setiap cangkir teh manisnya...

Dan juga,
Muhammad Ridho,
Fatimah Azzahra, dan
Ahmad Faqih
Sumber Inspirasi
dan Pendorong Semangat

iii
 Halaman ini Sengaja Dikosongkan
www.bukulokomedia.com

iv
 KATA PENGANTAR

Pada tahun 2008, Mary Meeker, seorang analis dari kantor Konsultan Kleiner
Perkins Caufield Byers (KPCB) membuat sebuah ramalan yang menghebohkan
di media masa, yaitu bahwa akses internet dari mobil devices (handphone, tablet,
phablet, dan sejenisnya) akan mengalahkan akses dari PC pada tahun 2014.
Sejak saat itu, berbagai riset meunjukkan akses internet menggunakan mobile
device semakin bertambah seperti riset yang dilakukan oleh GSMA Inteligent
membuktikan bahwa di tahun 2012 saja akses dari mobile device per populasi
penduduk di seluruh bagian dunia telah meninggalkan jauh persentase jumlah
akses internet via PC (https://gsmaintelligence.com/research/2014/02/gauging-
the-relationship-between-fixed-and-mobile-penetration/414/).
Semakin banyaknya mobile device yang digunakan ditambah dengan semakin
mudah, semakin cepat dan semakin murahnya akses internet telah membuat
perubahan dalam gaya hidup manusia. Sebuah riset di USA menunjukkan pada
tahun 2015 ini, akses dari mobile device ke digital media sudah mencapai 60%.
Meningkatknya akses internet dari mobile phone dan tablet ini, menimbulkan
budaya baru dan juga kebutuhan baru, antara lain adalah tersedianya website
yang tetap tampil elegan walau dibuka dengan mobile phone tersebut. Atau
dengan perkataan lain, tersedianya website yang responsive terhadap ukuran
layar mobile phone, bahkan Google sendiri menyatakan bahwa responsive web
merupakan cara terbaik untuk membuat website bagi mobil device (http://www.
developers.google.com/webmasters/smartphone-sites/).
Buku ini membahas tentang salah satu Framework yang paling populer untuk
pembuatan responsive website tersebut, yaitu Bootstrap. Dengan Bootstrap,
Anda akan mampu membangun responsive website dalam waktu yang singkat,
tidak perlu pusing kepala dengan segala macam teknik CSS untuk merespon
ukuran layar dari mobile device yang digunakan untuk mengakses web tersebut.
Akhir kata, semoga buku ini bermanfaat bagi kita semua.

Jakarta, Juli 2015

Penulis,
hhalat01@gmail.com

v
 Halaman ini Sengaja Dikosongkan
www.bukulokomedia.com

vi
 DAFTAR ISI

BAB 1. Mengenal Bootstrap.............................................................................1

1.1. Sejarah Bootstrap..........................................................................................2
1.2. Struktur Folder dan File Bootstrap...............................................................3
1.3. HTML Template Dasar dengan Bootstrap...................................................6
1.3.1. Template Dasar dengan HTML 5......................................................6
1.3.2. Template Dasar dengan Bootstrap.....................................................8
1.4. Kustomisasi File CSS Bootstrap................................................................10
1.4.1. Membuat File CSS Sendiri Secara Terpisah...................................10
1.4.2. Mengubah Pengaturan CSS di Website Bootstrap..........................11

BAB 2. Memahami Grid dan Layout............................................................13

2.1. Apa itu Grid System?..................................................................................14
2.2. Grid System pada Bootstrap.......................................................................16
2.2.1. Membuat Kontainer.........................................................................16
2.2.2. Membuat Baris.................................................................................17
2.2.3. Membuat Kolom..............................................................................17
2.2.4. Menerapkan Konsep Mobile First...................................................19
2.2.5. Menggeser Kolom ke Kanan (Offseting Column).........................24
2.2.6. Percabangan (Nesting) Kolom........................................................25
2.2.7. Mengubah Susunan Kolom (Column Ordering)...........................26
2.2.8. Menggeser Kolom ke Baris Baru (Column Wrapping)..................28
2.2.9. Responsive Column Resets.............................................................29

vii
BAB 3. Tipografi, Kode, Tabel dan Form.....................................................33
3.1. Tipografi (Seni Huruf)................................................................................34
3.1.1. Heading (Judul)................................................................................34
3.1.2. Body Copy.......................................................................................35
3.1.3. Lead Body Copy..............................................................................36
3.1.4. Inline Text Element..........................................................................36
3.1.5. Text Alignment (Meratakan Teks)...................................................39
3.1.6. Singkatan..........................................................................................39
3.1.7. Mengubah Bentuk Teks...................................................................40
3.1.8. Addresses (Menampilkan Alamat)..................................................41
3.1.9. Blockquotes (Kutipan Teks)............................................................41
3.1.10. List (Daftar)....................................................................................43
3.2. Beragam Tag Penampil Kode.....................................................................47
3.3. Table............................................................................................................50
3.3.1. Markup Table yang Didukung Bootstrap........................................50
3.3.2. Style Dasar Markup Table...............................................................51
3.3.3. Class Tambahan untuk Markup Table.............................................52
3.4. Form (Formulir)..........................................................................................54
3.4.1. Style Dasar Form.............................................................................54
3.4.2. Pilihan Layout untuk Form..............................................................55
3.4.3. Elemen Form Control yang Didukung Bootstrap...........................58
3.4.4. Form Control States.........................................................................63
3.4.5. Mengatur Ukuran Elemen Form.....................................................68
3.4.6. Help Text..........................................................................................72

BAB 4. Tombol, Image dan Class Bantu.......................................................73

4.1. Tombol (Button)..........................................................................................74

viii
 4.1.1. Tombol Standar (Default Button)....................................................74
4.1.2. Pilihan Tampilan Tombol.................................................................74
4.1.3. Ukuran Tombol................................................................................75
4.1.4. Status Tombol Aktif.........................................................................77
4.1.5. Tombol Tidak Aktif (Disabled).......................................................78
4.2. Gambar (Image)..........................................................................................79
4.2.1. Responsive Image............................................................................79
4.2.2. Bentuk Tampilan Gambar................................................................81
4.3. Class Bantu (Helper Class).........................................................................81
4.3.1. Contextual Colors............................................................................81
4.3.2. Contextual Backgrounds..................................................................83
4.3.3. Close Icon.........................................................................................83
4.3.4. Caret Icon.........................................................................................85
4.3.5. Quick Floats.....................................................................................85
4.3.6. Center Content Blocks.....................................................................86
4.3.7. Clearfix.............................................................................................86
4.3.8. Menampilkan dan Menyembunyikan Konten................................86
4.3.9. Screen Reader and Keyboard Navigation Content.........................87
4.3.10. Menyembunyikan Teks (Image Replacement).............................88
4.4. Class Bantu Responsive (Responsive Utilities).........................................88
4.4.1. Class-Class Tampilan.......................................................................88
4.4.2. Class-Class untuk Pencetakan (Print Classes)................................90

BAB 5. Icon, Dropdown dan Button Group.................................................93

5.1. Icon (Ikon)...................................................................................................94
5.1.1. Koleksi Icon Glyphicons.................................................................94
5.1.2. Cara Menggunakan Icon Glyphicons..............................................94

ix
5.2. Dropdown Menu.........................................................................................96
5.2.1. Dropdown Menu Dasar...................................................................96
5.2.2. Dropdown Menu Rata Kanan..........................................................98
5.2.3. Membuat Header Menu...................................................................99
5.2.4. Pemisah Menu (Divider).................................................................99
5.2.5. Menu Tidak Aktif (Disabled Menu)..............................................100
5.3. Button Group (Kelompok Tombol)..........................................................101
5.3.1. Single Button Group......................................................................101
5.3.2. Multiple Button Group (Button Toolbar)......................................102
5.3.3. Vertical Button Group....................................................................102
5.3.4. Justified Button Group...................................................................103
5.3.5. Ukuran Tombol dalam Button Group...........................................105
5.3.6. Percabangan (Nesting) Button Group...........................................107
5.4. Menampilkan Dropdown Menu dengan Tombol....................................108
5.4.1. Dropdown Menu dengan Tombol Tunggal...................................108
5.4.2. Dropdown Menu dengan Tombol Terpisah..................................109
5.4.3. Ukuran Tombol Dropdown............................................................110
5.4.4. Dropup Menus...............................................................................110
5.5. Kelompok Input (Input Group)................................................................112
5.5.1. Menambahkan Simbol ke dalam Elemen Input............................112
5.5.2. Menambahkan Elemen Radio dan Checkbox...............................113
5.5.3. Menambahkan Tombol..................................................................113
5.5.4. Ukuran Kelompok Input................................................................114

BAB 6. Komponen Navigasi.........................................................................117

6.1. Tab dan Pill................................................................................................118
6.1.1. Tab Dasar........................................................................................118

x
 6.1.2. Pill Dasar........................................................................................119
6.1.3. Justified Tab dan Pill......................................................................119
6.1.4. Membuat Link Tampak Tidak Aktif (Disabled)...........................120
6.1.5. Tab dan Pill dengan Dropdown Menu..........................................121
6.2. Navigation Bar (NavBar)..........................................................................123
6.2.1. NavBar Dasar.................................................................................124
6.2.2. Elemen-Elemen didalam NavBar..................................................125
6.2.3. Memposisikan Elemen didalam NavBar......................................130
6.2.4. Posisi NavBar.................................................................................132
6.2.5. Inverted NavBar.............................................................................134
6.3. Breadcrumbs.............................................................................................135
6.4. Pagination..................................................................................................136
6.4.1. Pagination Standar.........................................................................136
6.4.2. Variasi pada Pagination Standar....................................................137
6.5. Pager..........................................................................................................139
6.5.1. Pager Standar.................................................................................139
6.5.2. Posisi Elemen Pager.......................................................................139
6.5.3. Elemen Pager Tidak Aktif (Disabled)...........................................140

BAB 7. Komponen Pelengkap Bootstrap....................................................141

7.1. Labels........................................................................................................142
7.2. Badges.......................................................................................................143
7.3. Jumbotron..................................................................................................144
7.4. Page Header (Judul Halaman)..................................................................145
7.5. Thumbnails................................................................................................145
7.6. Alerts..........................................................................................................147
7.6.1. Variasi Warna Alert........................................................................148

xi
 7.6.2. Alert dengan Link..........................................................................148
7.7. Progress Bar..............................................................................................149
7.7.1. Progress Bar Dasar.........................................................................149
7.7.2. Progress Bar dengan Label............................................................150
7.7.3. Progress Bar Bergaris (Striped).....................................................151
7.7.4. Progress Bar Bergerak (Animated)...............................................152
7.7.5. Progress Bar Bertumpuk (Stacked)...............................................152
7.7.6. Variasi Penggunaan Warna pada Progress Bar.............................153
7.8. Media Object.............................................................................................155
7.8.1. Media Object Standar....................................................................156
7.8.2. Variasi Posisi Media.......................................................................157
7.8.3. Media List......................................................................................158
7.9. List Group.................................................................................................159
7.9.1. List Group Dasar............................................................................160
7.9.2. List Group dengan Badge..............................................................160
7.9.3. List Group Berisi Anchor Link......................................................161
7.9.4. List Group Berisi Elemen Tombol................................................162
7.9.5. Membuat Elemen List Group Tidak Aktif (Disabled)..................163
7.9.6. Menambahkan Elemen Lainnya....................................................164
7.9.7. Variasi Warna Tampilan Elemen didalam List Group..................164
7.10. Panel........................................................................................................166
7.10.1. Panel Dasar...................................................................................166
7.10.2. Panel dengan Header...................................................................167
7.10.3. Panel dengan Footer....................................................................167
7.10.4. Panel Berisi Tabel........................................................................168
7.10.5. Panel Berisi List Group...............................................................169
7.10.6. Variasi Warna Panel.....................................................................170

xii
7.11. Responsive Embed..................................................................................171
7.12. Well..........................................................................................................172

BAB 8. Javascript Plugin..............................................................................175

8.1. Bootstrap Data API...................................................................................176
8.2. Plugin Individual atau Kompilasi.............................................................177
8.3. Plugin Transition.......................................................................................177
8.4. Plugin Modal.............................................................................................178
8.4.1. Modal Statis...................................................................................178
8.4.2. Modal Interaktif.............................................................................179
8.4.3. Ukuran Modal................................................................................181
8.4.4. Menggunakan Grid System didalam Modal.................................183
8.4.5. Cara Menggunakan Modal............................................................184
8.4.6. Modal Options...............................................................................184
8.4.7. Modal Methods..............................................................................185
8.4.8. Modal Events.................................................................................186
8.5. Plugin Dropdown......................................................................................187
8.5.1. Cara Menggunakan Dropdown.....................................................187
8.5.2. Dropdown Methods.......................................................................188
8.5.3. Dropdown Events..........................................................................188
8.6. Plugin Scrollspy........................................................................................189
8.6.1. Cara Menggunakan Scrollspy.......................................................190
8.6.2. Scrollspy Method...........................................................................191
8.6.3. Scrollspy Option............................................................................191
8.6.4. Scrollspy Event..............................................................................192
8.7. Plugin Tab..................................................................................................192
8.7.1. Cara Menggunakan Tab.................................................................193

xiii
 8.7.2. Efek Tab Memudar (Fade).............................................................194
8.7.3. Tab Methods...................................................................................194
8.7.4. Tab Events......................................................................................194
8.8. Plugin Tooltip............................................................................................195
8.8.1. Cara Menggunakan Tooltip...........................................................196
8.8.2. Tooltip Options...............................................................................196
8.8.3. Tooltip Methods.............................................................................198
8.8.4. Tooltip Events................................................................................198
8.9. Plugin Popover..........................................................................................199
8.9.1. Cara Menggunakan Popover.........................................................199
8.9.2. Efek Popover Menghilang (Dismissable Popover)......................200
8.9.3. Popover Options.............................................................................200
8.9.4. Popover Methods...........................................................................202
8.9.5. Popover Events..............................................................................202
8.10. Plugin Alert.............................................................................................203
8.10.1. Cara Menggunakan Alert.............................................................204
8.10.2. Alert Methods...............................................................................204
8.10.3. Alert Event...................................................................................204
8.11. Plugin Button...........................................................................................205
8.11.1. Loading State Button...................................................................205
8.11.2. Single Toggle Button...................................................................206
8.11.3. Checkbox Style Button (Tombol Bergaya Checkbox)...............206
8.11.4. Radio Style Button (Tombol Bergaya Radio).............................207
8.11.5. Cara Menggunakan Button..........................................................208
8.11.6. Button Methods............................................................................208
8.12. Plugin Collapse.......................................................................................209
8.12.1. Beberapa Contoh Penggunaan Collapse.....................................209

xiv
 8.12.2. Cara Menggunakan Collapse......................................................211
8.12.3. Collapse Options..........................................................................212
8.12.4. Collapse Methods........................................................................213
8.13. Plugin Carousel.......................................................................................214
8.13.1. Cara Menggunakan Carousel......................................................215
8.13.2. Carousel Options..........................................................................217
8.13.3. Carousel Methods........................................................................217
8.13.4. Carousel Events...........................................................................218
8.14. Plugin Affix.............................................................................................218
8.14.1. Cara Menggunakan Affix............................................................220
8.14.2. Affix Options................................................................................220
8.14.3. Affix Methods..............................................................................221
8.14.4. Affix Events..................................................................................221

BAB 9. Teknik Merancang Template Bootstrap........................................223

9.1. Template Dasar Bootstrap.........................................................................224
9.2. Membuat Layout Halaman.......................................................................226
9.2.1. Unsur-Unsur Pembentuk Halaman Web.......................................226
9.2.2. Elemen-Elemen Baru HTML5 untuk Layout Halaman...............228
9.2.3. Variasi Layout Halaman dengan Elemen HTML5.......................229
9.2.4. Solusi Problem pada Browser Lama.............................................232
9.2.4.1. Menggunakan html5shiv.js...............................................233
9.2.4.2. Menggunakan modernizr..................................................234
9.3. Menerapkan Grid System Bootstrap........................................................234
9.3.1. Container Fluid atau Container Saja?............................................237
9.3.2. Menambahkan Baris dan Kolom...................................................242
9.4. Merancang Web Template Bootstrap.......................................................246

xv
 9.4.1. Menyiapkan Elemen-Elemen HTML5.........................................246
9.4.2. Menyisipkan Grid System Bootstrap............................................249
9.4.3. Menyisipkan Komponen Bootstrap dan Teks...............................252

BAB 10. Proyek Point Of Sales Responsive................................................255

10.1. Informasi Umum Aplikasi POS.............................................................256
10.2. Struktur Folder dan File Aplikasi POS...................................................257
10.3. Layout Halaman Aplikasi POS..............................................................259
10.3.1. Halaman Login............................................................................259
10.3.2. Halaman Utama...........................................................................260
10.3.3. Halaman Data Master..................................................................264
10.3.3.1. Layout dan Komponen Halaman Data Master..............264
10.3.3.2. Penerapan Column Ordering Halaman Data Master.....269
10.3.4. Halaman Pembelian Barang........................................................271
10.3.4.1. File-File Pembelian Barang............................................271
10.3.4.2. Layout dan Komponen Halaman Pembelian Barang....272
10.3.5. Halaman Penjualan Barang (Kasir).............................................274
10.3.5.1. File-File Penjualan Barang.............................................274
10.3.5.2. Layout dan Komponen Halaman Penjualan Barang.....275
10.3.6. Halaman Laporan.........................................................................276
10.3.4.1. File-File Laporan............................................................276
10.3.4.2. Layout dan Komponen Halaman Laporan.....................277

BAB 11. Bonus: Bootstrap Versi 4...............................................................279

11.1. Bootstrap 3.3.5 Vs Bootstrap 4...............................................................280
11.1.1. Dukungan Terhadap Browser......................................................280
11.1.2. Perubahan Global.........................................................................281

xvi
 11.1.3. Perubahan pada Tipografi............................................................281
11.1.4. Perubahan pada Elemen Table.....................................................281
11.1.5. Perubahan pada Elemen Form.....................................................282
11.1.6. Perubahan pada Komponen CSS Non-Javascript.......................282
11.1.7. Perubahan pada Komponen Javascript Plugin............................283
11.2. Perubahan pada Template Dasar.............................................................283
11.3. Perubahan pada Satuan Ukuran Px ke Rem dan Em.............................284
11.4. Grid System pada Bootstrap 4................................................................286
11.5. Class Bantu Responsive (Responsive Utilities).....................................286
11.6. Styling pada Elemen-Elemen HTML5..................................................287
11.6.1. Styling Elemen HTML5 yang dihapus Bootstrap 4...................287
11.6.2. Styling Elemen HTML5 di Bootstrap 3.3.5 yang Masih Digunakan
di Bootstrap 4..............................................................................287
11.6.3. Styling Elemen HTML5 yang Berubah di Bootstrap 4..............289
11.6.3.1. Elemen List.....................................................................280
11.6.3.2. Elemen Table...................................................................290
11.6.4. Elemen Form...............................................................................295
11.6.4.1. Klasifikasi Elemen Pembentuk Form.............................296
11.6.4.2. Layout (Tata Letak) Elemen Form.................................297
11.6.4.3. Menyembunyikan Label.................................................300
11.6.4.4. Variasi Tampilan Elemen Checkbox dan Radio............301
11.6.4.5. Menon-Aktifkan (Disabled) Elemen form-control........304
11.6.4.6. Readonly Input................................................................305
11.6.4.7. Mengatur Ukuran Elemen Form....................................306
11.6.4.8. Status Hasil Validasi........................................................308
11.6.4.9. Custom Form...................................................................309
11.6.5. Styling Elemen HTML5 yang Baru di Bootstrap 4....................313

xvii
 BAB 12. Bonus: Komponen Bootstrap 4....................................................315
12.1. Komponen Bootstrap 3.3.5 yang Dihapus.............................................316
12.2. Komponen Bootstrap 3.3.5 yang Tidak Berubah..................................316
12.3. Komponen Bootstrap 3.3.5 yang Berubah.............................................318
12.3.1. Dropdown Menu..........................................................................318
12.3.2. Komponen Navigasi....................................................................319
12.3.3. Pewarnaan Navigation Bar (NavBar).........................................325
12.3.4. Komponen Pager.........................................................................327
12.3.5. Komponen Label.........................................................................328
12.3.6. Komponen Jumbotron.................................................................328
12.3.7. Progress Bar.................................................................................329
12.4. Komponen Card......................................................................................332
12.4.1. Markup Dasar Card......................................................................332
12.4.2. Header dan Footer Card...............................................................333
12.4.3. Berbagai Ragam Isi Komponen Card.........................................335
12.4.4. Mengatur Lebar Komponen Card...............................................339
12.4.5. Meratakan Teks pada Komponen Card.......................................342
12.4.6. Image Caps...................................................................................343
12.4.7. Image Overlays............................................................................343
12.4.8. Inverted Text................................................................................345
12.4.9. Variasi Warna Latar Belakang.....................................................345
12.4.10.Card Groups................................................................................346
12.4.11. Card Deck...................................................................................347
12.4.12. Card Column..............................................................................348

Daftar Pustaka................................................................................................351
Lampiran.........................................................................................................355

xviii
BAB I

Mengenal Bootstrap
 BAB 1
Mengenal Bootstrap

Bootstrap adalah framework ataupun tools untuk membuat aplikasi web

ataupun website yang bersifat responsive secara cepat, mudah dan gratis.
Kata ‘responsive’ disini berarti bahwa tampilan web (lebar dan susunan isinya)
dapat berubah secara otomatis sesuai dengan lebar layar yang menampilkannya.
Bootstrap terdiri dari CSS dan HTML untuk menghasilkan Grid, Layout,
Tifografi, Tabel, Form, Navigasi, dan lain-lain. Di dalam Bootstrap juga sudah
terdapat Javascript (jQuery Plugins) untuk menghasilkan komponen UI yang
cantik seperti Transitions, Modal, DropDown, ScrollSpy, ToolTip, PopOver, Tab,
Alert, Button, Carousel, dan lain-lain.
Dengan Bootstrap, kita dapat membuat responsive website dengan cepat dan
mudah dan dapat berjalan sempurna pada browser-browser modern seperti
Chrome, Firefox, Safari, Opera dan Internet Explorer.

1.1 Sejarah Bootstrap

Pada tahun 2011, Bootstrap diciptakan oleh dua orang Programmer di Twitter,
yaitu Mark Otto dan Jacob Thornton. Pada saat itu, para programmer di
Twitter menggunakan berbagai macam tool dan library yang mereka kenal dan
senangi untuk melakukan pekerjaan mereka, sehingga tidak ada standarisasi
dan akibatnya sulit untuk di maintain, kemudian Mark Otto dan Jacob Thornton
tergerak untuk menciptakan satu tool ataupun framework yang dapat digunakan
bersama di lingkungan internal Twitter.
Oleh karena faktor historis tersebut, walaupun nama resminya hanyalah Bootstrap,
namun terkenal di kalangan Developer sebagai Twitter Bootstrap.
Sejak diluncurkan pada bulan Agustus 2011, Bootstrap telah berevolusi dari
sebuah project yang hanya berbasis CSS menjadi sebuah tool ataupun framework
yang lebih lengkap yang juga berisi Javascript Plugin, Icon, Forms dan Button.
Pada Januari 2012, Bootstrap merelease versi 2.0 yang didalamnya sudah
memasukkan fitur responsive layout.
Pada bulan Agustus 2014, Bootstrap mengeluarkan versi 3.0 yang didalamnya
sudah mengakomodasi konsep ‘mobile first’, artinya didalam pembuatan desain

2 Responsive Web Design dengan Bootstrap 3 & 4

web maka kita merancang untuk layar yang kecil dahulu (handphone), kemudian
secara bertahap menambahkan fitur-fitur untuk layar yang lebih besar.

1.2 Struktur Folder dan File Bootstrap

Bootsrap dapat didownload secara gratis dari website resminya di http://
getbootstrap.com/ atau https://github.com/twbs/bootstrap, atau dapat Anda
temukan di CD terlampir. Saat buku ini ditulis, versi terbarunya adalah Bootstrap
3.3.5. Lihat gambar 1.1.

Gambar 1.1 Website resmi Bootstrap

Klik tombol Download Bootstrap, maka akan tampil halaman download

bootstrap dengan tiga pilihan seperti pada gambar 1.2.
Untuk memudahkan pembahasan di dalam buku ini, maka kita klik saja tombol
pilihan yang pertama (Download Bootstrap), maka kita akan memperolah file
bootstrap-3.3.5-dist.zip dengan ukuran 260KB.
Simpan file tersebutdi harddisk, lalu unzip/extract file tersebut, maka Anda akan
mendapatkan struktur folder dan file-file didalamnya. Lihat gambar 1.3.

Bab I. Mengenal Bootstrap 3

 Gambar 1.2 Pilihan download Bootstrap

Gambar 1.3 Struktur folder dan file Bootstrap versi 3.3.5

4 Responsive Web Design dengan Bootstrap 3 & 4

Pada folder css terdapat enam file, yaitu:
 bootstrap.css, file css yang biasanya digunakan untuk development, karena
disusun sedemikian rupa agar mudah dibaca dan terdapat banyak comment.
 bootstrap.css.map, file css yang dihasilkan oleh CSS Preprocessor, seperti
Sass, Less, atau Stylus. File ini dapat kita edit menggunakan developer tool
(debuggers) yang tersedia di browser Firefox dan Chrome. Jika kita tidak
menggunakan CSS Preprocessor dalam membuat web dengan bootstrap,
maka kita dapat menghapus file ini.
 bootstrap.min.css, file css yang biasanya digunakan dalam production,
karena sudah di kompresi agar ukuran filenya lebih kecil.
 bootstrap-theme.css, file css tambahan terhadap file bootstrap.css, fungsi
file ini memperkaya dan memperindah tampilan beberapa komponen
bootstrap seperti button, thumbnail, dropdown, navbar, dan sebagainya.
Karena sifatnya tambahan, file ini boleh saja tidak kita gunakan.
 bootstrap-theme.css.map, file ini sama seperti bootstrap.css.map adalah file
css yang dihasilkan oleh CSS Preprocessor. Fungsinya agar dapat di edit
menggunakan development tool yang ada pada browser Firefox dan Chrome.
 bootstrap-theme.min.css, versi mini (compressed) dari file bootstrap-
theme.css untuk digunakan pada saat production.
Pada folder fonts terdiri dari lima file, biasa disebut dengan glyphicons yang
berisi 263 icon. Semua file tersebut isinya sama saja, hanya formatnya saja
yang berbeda, misalnya file dengan ekstension *.eot untuk menampilkan font
di browser IE (Microsoft), *.svg untuk menampilkan font di browser Chrome,
Safari dan Opera, dan *.ttf bisa dibuka di semua browser.
Untuk lebih memahami tentang format-format font tersebut, dapat dilihat pada
situs-situs yang membahas tentang web font.
Pada folder js (javascript) terdiri dari tiga file, yaitu bootstrap.js dan versi mini-
nya yaitu bootstrap.min.js dan file npm.js.
File bootstrap.js berisi fungsi-fungsi javascript yang langsung dapat digunakan
(plug-in) untuk membuat tampilan komponen bootstrap lebih interaktif.
Adapun file npm.js hanya digunakan apabila kita menggunakan bootstrap
bersama dengan node.js.

Bab I. Mengenal Bootstrap 5

 1.3 HTML Template Dasar dengan Bootstrap

1.3.1 Template Dasar dengan HTML5

Bootstrap sangat terkait erat dengan HTML5 dalam membuat sebuah layout
halaman web. Oleh karena itu, semakin baik pengetahuan kita mengenai
HTML5, maka semakin mudah kita mengimplementasikan Bootstrap.
Pada umumnya, sebuah html template dasar akan tampak seperti berikut ini
apabila menggunakan HTML5:
Skrip 1_1_template_dasar_HTML5.html
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8”>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width,
initial-scale=1”>
<!-- The above 3 meta tags *must* come first in the head;
any other head content must come *after* these tags -->

<title>Template Dasar HTML5</title>

<!-- HTML5 shim and Respond.js for IE8 support of HTML5

elements and media queries -->

<!-- WARNING: Respond.js doesn’t work if you view the page

via file:// -->
<!--[if lt IE 9]>
<script src=”https://oss.maxcdn.com/html5shiv/3.7.2/
html5shiv.min.js” ></script>
<script src=”https://oss.maxcdn.com/respond/1.4.2/
respond.min.js”></script>
<![endif]-->
</head>
<body>

<h1>Hello, world!</h1>

</body>
</html>

Penjelasan Skrip:
 <htmllang=”en”>, menunjukan bahwa Bahasa yang digunakan oleh situs ini
adalah Bahasa Inggris, jika kita menggunakan Bahasa Indonesia maka kita

6 Responsive Web Design dengan Bootstrap 3 & 4

 ganti lang attribute tersebut dengan id atau in.
 <metacharset=”utf-8”>, menunjukkan character encoding yang digunakan,
dalam hal ini adalah Unicode utf-8.
 <metahttp-equiv=”X-UA-Compatible”content=”IE=edge”>, tag ini digunakan
untuk memaksa browser Internet Explorer (IE) menampilkan dokumen html
menggunakan versi terkini (edge) dari rendering engine-nya.
 <metaname=”viewport” content=”width=device-width, initial-scale=1”>,
viewport adalah bagian dari sebuah alat (notebook, desktop pc, handphone,
dan sebagainya) yang dapat menampilkan halaman web (window).
Meta tag viewport ini umumnya digunakan untuk mengatur tampilan
browser pada mobile device dan juga tablet. Pada tag di atas, pernyataan
content=”width=device-width” untuk mengatur lebar tampilan awal browser
disesuaikan dengan lebar layar mobile device, sedangkan pernyataan
“initial-scale=1” untuk mengatur level zoom dari tampilan pada saat
ditampilkan, semakin besar nilai initial-scale, semakin besar tampilannya
(zoom in).
Untuk lebih jelasnya mengenai pengaturan pada viewport ini bisa di lihat
pada url berikut:
http://developer.apple.com/library/safari/#documentation/appleapplications/
reference/SafariHTMLRef/Articles/MetaTags.html
http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-
viewport/
 html5shiv.min.js, saat ini semua browser utama dengan versi terkini telah
mendukung elemen-elemen baru di HTML5, namun demikian masih terdapat
banyak user yang masih menggunakan browser versi lama seperti IE6, IE7
dan IE8 yang belum mendukung elemen-elemen baru di HTML5, sehingga
apabila halaman web kita yang dibuat menggunakan HMTL5 ditampilkan
di browser versi lama tersebut dapat menghasilkan penampilan yang tidak
bagus.
html5shiv.min.js adalah file yang berisi skrip singkat untuk mengatasi
problem tersebut. File ini bisa di link secara online seperti tertera di atas, atau
bisa kita download agar bisa digunakan secara offline.
 respond.min.js, file ini digunakan untuk mengaktifkan fitur responsive pada
browser yang tidak mendukung fitur media queries dalam CSS, khususnya
browser IE versi 8 dan sebelumnya.

Bab I. Mengenal Bootstrap 7

 1.3.2 Template Dasar dengan Bootstrap
Untuk menambahkan Bootstrap versi 3.3.5 sangat mudah, kita tinggal
menambahkan file bootstrap.min.css, file jquery dan bootstrap.min.js seperti
berikut, perhatikan bagian yang ditebalkan:
Skrip 1_2_template_dasar_bootstrap.html
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8”>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width,
initial-scale=1”>
<!-- The above 3 meta tags *must* come first in the head; any
other head content must come *after* these tags -->

<title>Bootstrap Template</title>

<!-- Bootstrap & Bootstrap Theme-->

<link href=”css/bootstrap.min.css” rel=”stylesheet”>
<link href=”css/bootstrap-theme.min.css” rel=”stylesheet”>

<!-- HTML5 shim and Respond.js for IE8 support of HTML5

elements and media queries -->
<!-- WARNING: Respond.js doesn’t work if you view the page
via file:// -->
<!--[if lt IE 9]>
<script src=”https://oss.maxcdn.com/html5shiv/3.7.2/
html5shiv.min.js”></script>
<script src=”https://oss.maxcdn.com/respond/1.4.2/
respond.min.js”></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>

<!-- jQuery (necessary for Bootstrap’s JavaScript plugins) -->
<script src=”js/jquery.min.js”></script>

<!-- Include all compiled plugins (below),

or include individual files as needed -->
<script src=”js/bootstrap.min.js”></script>
</body>
</html>

Apabila skripnya dijalankan di browser, maka akan tampil seperti gambar 1.4.

8 Responsive Web Design dengan Bootstrap 3 & 4

 Gambar 1.4. Tampilan Template Dasar di Browser

Jadi, ada tiga hal utama untuk mengubah template dasar HTML5 menjadi
template dasar Bootstrap, yaitu:
1. Tambahkan link ke file bootstrap dan file bootstrap theme:
<link href=”css/bootstrap.min.css” rel=”stylesheet”>
<link href=”css/bootstrap-theme.min.css” rel=”stylesheet”>

Elemen html ini kita gunakan untuk me-link ke file css bootstrap. Dan kita
letakkan diatas baris atau elemen yang memanggil skrip dalam file html5shiv.
min.js dan respond.min.js.
Sedangkan link ke file css bootstrap theme merupakan option (tambahan),
jadi boleh digunakan atau tidak.
2. Tambahkan link ke file jquery:
<script src=”https://ajax.googleapis.com/ajax/libs/
jquery/1.11.2/jquery.min.js”></script>

Plugin Javascript di Bootstrap membutuhkan jQuery, maka link ke jQuery

merupakan standar pada html template pada Bootstrap.

Bab I. Mengenal Bootstrap 9

 3. Tambahkan link ke file javascript bootstrap:
<script src=”js/bootstrap.min.js”></script>

Link ke plugin javascript bootstrap diletakkan paling bawah dari skrip,

hal ini untuk mempercepat browser dalam me-render halaman web sesuai
rekomendasi dari http://developer.yahoo.com/performance/rules.html.

1.4 Kustomisasi File CSS Bootstrap

Bisa saja karena sesuatu hal pengaturan standar yang sudah dilakukan oleh
Bootstrap kurang sesuai dengan selera kita. Misalnya pewarnaan standar oleh
Bootstrap pada navbar yang hanya ada dua, yaitu abu-abu dan hitam tidak cocok
dengan situs yang sedang kita buat, sehingga harus kita ubah pewarnaannya, juga
berbagai hal lainnya seperti warna background pada elemen body, padding pada
elemen tabel, warna huruf pada komponen button dan lainnya.
Ada beberapa cara untuk membatalkan pengaturan CSS dari Bootstrap dan
membuat pengaturan kita sendiri, caranya simak pembahasan berikut:

1.4.1 Membuat File CSS Sendiri Secara Terpisah

Buat file CSS sendiri, misalnya style.css yang kita isi dengan skrip pengaturan
pada elemen ataupun komponen yang kita ingin ubah tampilannya, misalnya:
Skrip style.css
.navbar {
min-height: 80px;
border: 1px solid transparent;
border-radius: 0;
}

Kemudian simpan/letakkan file style.css di folder bootstrap/css/. Selanjutnya,

pada halaman utama, kita buat link ke file tersebut dibawah baris link ke file
css Bootstrap agar tidak mengacaukan fungsi responsive Bootstrap. Contohnya
seperti gambar 1.5.

10 Responsive Web Design dengan Bootstrap 3 & 4

Gambar 1.5 Menempatkan link ke file CSS sendiri di bawah link ke CSS Bootstrap

1.4.2 Mengubah Pengaturan CSS di Website Bootstrap

Cara yang kedua adalah dengan membuat perubahan pada file CSS langsung di di
website Bootstrap, caranya:
1. Buka website resmi Bootstrap di www.getbootsrap.com.
2. Pilih menu Customize.
3. Kita akan diberi banyak pilihan kustomisasi, pilih yang kita mengerti saja,
misalnya kita ingin mengubah tinggi navbar, maka cari pilihan kustomisasi
mengenai navbar. Lihat gambar 1.6.

Gambar 1.6 Halaman kustomisasi navbar di situs Bootstrap

Bab I. Mengenal Bootstrap 11

 4. Pada kolom @navbar-height, ubah tingginya dari 50px menjadi 100px.
5. Kemudian scroll ke bawah halaman, lalu klik tombol Compile and
Download, maka kita akan memperoleh satu set file-file Bootstrap yang
sudah di kustomisasi sesuai keinginan kita.

12 Responsive Web Design dengan Bootstrap 3 & 4