dengan Bootstrap 3 dan 4

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 : [email protected] 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 orangorang 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/gaugingthe-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] 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


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 bootstraptheme.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 mininya 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.


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 <meta charset=”utf-8”> <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> <meta name=”viewport” content=”width=device-width, initial-scale=1”> Template Dasar HTML5
Hello, world!

Penjelasan Skrip:  , menunjukan bahwa Bahasa yang digunakan oleh situs ini adalah Bahasa Inggris, jika kita menggunakan Bahasa Indonesia maka kita

6


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-andviewport/  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.


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 <meta charset=”utf-8”> <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> <meta name=”viewport” content=”width=device-width, initial-scale=1”> Bootstrap Template
Hello, world!

<script src=”js/jquery.min.js”>

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

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

8


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:

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

Plugin Javascript di Bootstrap membutuhkan jQuery, maka link ke jQuery merupakan standar pada html template pada Bootstrap.


9

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

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


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


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


dengan Bootstrap 3 dan 4

Recommend Documents

Hello, world!

Hello, world!