dengan Bootstrap 3 dan 4

Transkripsi

1 Proyek Membangun Responsive Web Design dengan Bootstrap 3 dan 4 Husein Alatas CV. LOKOMEDIA

2 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, halaman; 14 x 21 cm ISBN : 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 [email protected] website : 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

3 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

4 Halaman ini Sengaja Dikosongkan iv

5 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 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 ( 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 ( 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, v

6 Halaman ini Sengaja Dikosongkan vi

7 DAFTAR ISI BAB 1. Mengenal Bootstrap Sejarah Bootstrap Struktur Folder dan File Bootstrap HTML Template Dasar dengan Bootstrap Template Dasar dengan HTML Template Dasar dengan Bootstrap Kustomisasi File CSS Bootstrap Membuat File CSS Sendiri Secara Terpisah Mengubah Pengaturan CSS di Website Bootstrap...11 BAB 2. Memahami Grid dan Layout Apa itu Grid System? Grid System pada Bootstrap Membuat Kontainer Membuat Baris Membuat Kolom Menerapkan Konsep Mobile First Menggeser Kolom ke Kanan (Offseting Column) Percabangan (Nesting) Kolom Mengubah Susunan Kolom (Column Ordering) Menggeser Kolom ke Baris Baru (Column Wrapping) Responsive Column Resets...29 vii

8 BAB 3. Tipografi, Kode, Tabel dan Form Tipografi (Seni Huruf) Heading (Judul) Body Copy Lead Body Copy Inline Text Element Text Alignment (Meratakan Teks) Singkatan Mengubah Bentuk Teks Addresses (Menampilkan Alamat) Blockquotes (Kutipan Teks) List (Daftar) Beragam Tag Penampil Kode Table Markup Table yang Didukung Bootstrap Style Dasar Markup Table Class Tambahan untuk Markup Table Form (Formulir) Style Dasar Form Pilihan Layout untuk Form Elemen Form Control yang Didukung Bootstrap Form Control States Mengatur Ukuran Elemen Form Help Text...72 BAB 4. Tombol, Image dan Class Bantu Tombol (Button)...74 viii

9 Tombol Standar (Default Button) Pilihan Tampilan Tombol Ukuran Tombol Status Tombol Aktif Tombol Tidak Aktif (Disabled) Gambar (Image) Responsive Image Bentuk Tampilan Gambar Class Bantu (Helper Class) Contextual Colors Contextual Backgrounds Close Icon Caret Icon Quick Floats Center Content Blocks Clearfix Menampilkan dan Menyembunyikan Konten Screen Reader and Keyboard Navigation Content Menyembunyikan Teks (Image Replacement) Class Bantu Responsive (Responsive Utilities) Class-Class Tampilan Class-Class untuk Pencetakan (Print Classes)...90 BAB 5. Icon, Dropdown dan Button Group Icon (Ikon) Koleksi Icon Glyphicons Cara Menggunakan Icon Glyphicons...94 ix

10 5.2. Dropdown Menu Dropdown Menu Dasar Dropdown Menu Rata Kanan Membuat Header Menu Pemisah Menu (Divider) Menu Tidak Aktif (Disabled Menu) Button Group (Kelompok Tombol) Single Button Group Multiple Button Group (Button Toolbar) Vertical Button Group Justified Button Group Ukuran Tombol dalam Button Group Percabangan (Nesting) Button Group Menampilkan Dropdown Menu dengan Tombol Dropdown Menu dengan Tombol Tunggal Dropdown Menu dengan Tombol Terpisah Ukuran Tombol Dropdown Dropup Menus Kelompok Input (Input Group) Menambahkan Simbol ke dalam Elemen Input Menambahkan Elemen Radio dan Checkbox Menambahkan Tombol Ukuran Kelompok Input BAB 6. Komponen Navigasi Tab dan Pill Tab Dasar x

11 Pill Dasar Justified Tab dan Pill Membuat Link Tampak Tidak Aktif (Disabled) Tab dan Pill dengan Dropdown Menu Navigation Bar (NavBar) NavBar Dasar Elemen-Elemen didalam NavBar Memposisikan Elemen didalam NavBar Posisi NavBar Inverted NavBar Breadcrumbs Pagination Pagination Standar Variasi pada Pagination Standar Pager Pager Standar Posisi Elemen Pager Elemen Pager Tidak Aktif (Disabled) BAB 7. Komponen Pelengkap Bootstrap Labels Badges Jumbotron Page Header (Judul Halaman) Thumbnails Alerts Variasi Warna Alert xi

12 Alert dengan Link Progress Bar Progress Bar Dasar Progress Bar dengan Label Progress Bar Bergaris (Striped) Progress Bar Bergerak (Animated) Progress Bar Bertumpuk (Stacked) Variasi Penggunaan Warna pada Progress Bar Media Object Media Object Standar Variasi Posisi Media Media List List Group List Group Dasar List Group dengan Badge List Group Berisi Anchor Link List Group Berisi Elemen Tombol Membuat Elemen List Group Tidak Aktif (Disabled) Menambahkan Elemen Lainnya Variasi Warna Tampilan Elemen didalam List Group Panel Panel Dasar Panel dengan Header Panel dengan Footer Panel Berisi Tabel Panel Berisi List Group Variasi Warna Panel xii

13 7.11. Responsive Embed Well BAB 8. Javascript Plugin Bootstrap Data API Plugin Individual atau Kompilasi Plugin Transition Plugin Modal Modal Statis Modal Interaktif Ukuran Modal Menggunakan Grid System didalam Modal Cara Menggunakan Modal Modal Options Modal Methods Modal Events Plugin Dropdown Cara Menggunakan Dropdown Dropdown Methods Dropdown Events Plugin Scrollspy Cara Menggunakan Scrollspy Scrollspy Method Scrollspy Option Scrollspy Event Plugin Tab Cara Menggunakan Tab xiii

14 Efek Tab Memudar (Fade) Tab Methods Tab Events Plugin Tooltip Cara Menggunakan Tooltip Tooltip Options Tooltip Methods Tooltip Events Plugin Popover Cara Menggunakan Popover Efek Popover Menghilang (Dismissable Popover) Popover Options Popover Methods Popover Events Plugin Alert Cara Menggunakan Alert Alert Methods Alert Event Plugin Button Loading State Button Single Toggle Button Checkbox Style Button (Tombol Bergaya Checkbox) Radio Style Button (Tombol Bergaya Radio) Cara Menggunakan Button Button Methods Plugin Collapse Beberapa Contoh Penggunaan Collapse xiv

15 Cara Menggunakan Collapse Collapse Options Collapse Methods Plugin Carousel Cara Menggunakan Carousel Carousel Options Carousel Methods Carousel Events Plugin Affix Cara Menggunakan Affix Affix Options Affix Methods Affix Events BAB 9. Teknik Merancang Template Bootstrap Template Dasar Bootstrap Membuat Layout Halaman Unsur-Unsur Pembentuk Halaman Web Elemen-Elemen Baru HTML5 untuk Layout Halaman Variasi Layout Halaman dengan Elemen HTML Solusi Problem pada Browser Lama Menggunakan html5shiv.js Menggunakan modernizr Menerapkan Grid System Bootstrap Container Fluid atau Container Saja? Menambahkan Baris dan Kolom Merancang Web Template Bootstrap xv

16 Menyiapkan Elemen-Elemen HTML Menyisipkan Grid System Bootstrap Menyisipkan Komponen Bootstrap dan Teks BAB 10. Proyek Point Of Sales Responsive Informasi Umum Aplikasi POS Struktur Folder dan File Aplikasi POS Layout Halaman Aplikasi POS Halaman Login Halaman Utama Halaman Data Master Layout dan Komponen Halaman Data Master Penerapan Column Ordering Halaman Data Master Halaman Pembelian Barang File-File Pembelian Barang Layout dan Komponen Halaman Pembelian Barang Halaman Penjualan Barang (Kasir) File-File Penjualan Barang Layout dan Komponen Halaman Penjualan Barang Halaman Laporan File-File Laporan Layout dan Komponen Halaman Laporan BAB 11. Bonus: Bootstrap Versi Bootstrap Vs Bootstrap Dukungan Terhadap Browser Perubahan Global xvi

17 Perubahan pada Tipografi Perubahan pada Elemen Table Perubahan pada Elemen Form Perubahan pada Komponen CSS Non-Javascript Perubahan pada Komponen Javascript Plugin Perubahan pada Template Dasar Perubahan pada Satuan Ukuran Px ke Rem dan Em Grid System pada Bootstrap Class Bantu Responsive (Responsive Utilities) Styling pada Elemen-Elemen HTML Styling Elemen HTML5 yang dihapus Bootstrap Styling Elemen HTML5 di Bootstrap yang Masih Digunakan di Bootstrap Styling Elemen HTML5 yang Berubah di Bootstrap Elemen List Elemen Table Elemen Form Klasifikasi Elemen Pembentuk Form Layout (Tata Letak) Elemen Form Menyembunyikan Label Variasi Tampilan Elemen Checkbox dan Radio Menon-Aktifkan (Disabled) Elemen form-control Readonly Input Mengatur Ukuran Elemen Form Status Hasil Validasi Custom Form Styling Elemen HTML5 yang Baru di Bootstrap xvii

18 BAB 12. Bonus: Komponen Bootstrap Komponen Bootstrap yang Dihapus Komponen Bootstrap yang Tidak Berubah Komponen Bootstrap yang Berubah Dropdown Menu Komponen Navigasi Pewarnaan Navigation Bar (NavBar) Komponen Pager Komponen Label Komponen Jumbotron Progress Bar Komponen Card Markup Dasar Card Header dan Footer Card Berbagai Ragam Isi Komponen Card Mengatur Lebar Komponen Card Meratakan Teks pada Komponen Card Image Caps Image Overlays Inverted Text Variasi Warna Latar Belakang Card Groups Card Deck Card Column Daftar Pustaka Lampiran xviii

19 BAB I Mengenal Bootstrap

20 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

21 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 getbootstrap.com/ atau atau dapat Anda temukan di CD terlampir. Saat buku ini ditulis, versi terbarunya adalah Bootstrap 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 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

22 Gambar 1.2 Pilihan download Bootstrap Gambar 1.3 Struktur folder dan file Bootstrap versi Responsive Web Design dengan Bootstrap 3 & 4

23 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. Bab I. Mengenal Bootstrap 5

24 1.3 HTML Template Dasar dengan Bootstrap 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= html5shiv.min.js ></script> <script src= 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

25 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: reference/safarihtmlref/articles/metatags.html 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

26 1.3.2 Template Dasar dengan Bootstrap Untuk menambahkan Bootstrap versi 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= html5shiv.min.js ></script> <script src= 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 Responsive Web Design dengan Bootstrap 3 & 4

27 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= 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

28 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 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: 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 Responsive Web Design dengan Bootstrap 3 & 4

29 Gambar 1.5 Menempatkan link ke file CSS sendiri di bawah link ke CSS Bootstrap 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 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

30 4. Pada 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