Proyek Membangun Responsive Web Design dengan Bootstrap 3 ... · tidak perlu pusing kepala dengan segala macam teknik CSS untuk merespon ukuran layar dari mobile device yang digunakan

dengan Bootstrap 3 dan 4

CV. LOKOMEDIA

Husein Alatas

P r oye k M e m b a n g u n Re s p o n s i ve We b D e s i g n

ii

Proyek Membangun Responsive Web Design dengan Bootstrap 3 dan 4Perpustakaan Nasional : Katalog Dalam Terbitan (KDT)Penulis : Husein AlatasProyek 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 HakimCover : Subkhan AnshoriLayout : Lukmanul Hakim

Diterbitkan pertama kali oleh :CV. LOKOMEDIAJl. Jambon, Perum. Pesona Alam Hijau 2 Kav. B-4, Kricak Yogyakarta 55242.

email : [email protected] : 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.

iii

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

UCAPAN TERIMAKASIH

iv

Halaman ini Sengaja Dikosongkan

www.bukulokomedia.com

v

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,

[email protected]

vi

Halaman ini Sengaja Dikosongkan

www.bukulokomedia.com

vii

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

viii

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

ix

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

x

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

xi

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

xii

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

xiii

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

xiv

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

xv

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

xvi

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

xvii

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

xviii

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

BAB I

Mengenal Bootstrap

Responsive Web Design dengan Bootstrap 3 & 42

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 BootstrapPada 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

Bab I. Mengenal Bootstrap 3

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 BootstrapBootsrap 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.


Gambar 1.2 Pilihan download Bootstrap

Gambar 1.3 Struktur folder dan file Bootstrap versi 3.3.5


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.


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”>

<title>Template Dasar HTML5</title>



</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


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.


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”>

<title>Bootstrap Template</title>

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

</head><body><h1>Hello, world!</h1> <script src=”js/jquery.min.js”></script>

<script src=”js/bootstrap.min.js”></script></body></html>

Apabila skripnya dijalankan di browser, maka akan tampil seperti gambar 1.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.


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 BootstrapBisa 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.


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


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.

Documents

Proyek Membangun Responsive Web Design dengan Bootstrap 3 ... · tidak perlu pusing kepala dengan segala macam teknik CSS untuk merespon ukuran layar dari mobile device yang digunakan