Responsive bootstrap v.1.1
Upcoming SlideShare
Loading in...5
×
 

Responsive bootstrap v.1.1

on

  • 647 views

 

Statistics

Views

Total Views
647
Views on SlideShare
647
Embed Views
0

Actions

Likes
0
Downloads
41
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Responsive bootstrap v.1.1 Responsive bootstrap v.1.1 Document Transcript

  • Panduan Twitter BootstrapDidistribusikan oleh : Fluider Team versi 1.1 Update : Maret 2013
  • Panduan Twitter Bootstrap1.1 Twitter BootstrapA. PengenalanTwitter Bootstrap adalah toolkit untuk membangun web aplikasi secara cepat. Termasuk didalamnya yaitu CSS dan Javascript.Toolkit ini dapat diunduh di http://twitter.github.com/bootstrap/, Ekstrak folder bootstrap yangtelah diunduh dan toolkit siap digunakan.B. PersiapanAda dua cara untuk menggunakan Twitter Bootstrap di HTML : 1. Memanggil CSS Bootstrap dengan menambahkan baris berikut sebelum </head> <link rel="stylesheet" href="/bootstrap/css/bootstrap.css"> 2. Atau dengan memanggil LESS Bootstrap (CSS Preprocessor yang digunakan untuk mempercepat dan mempermudah web development) dengan menambahkan baris di bawah ini. <link rel="stylesheet/less" href="/bootstrap/less/bootstrap.less"> Javacript dan CSS dalam bootstrap merupakan satu kesatuan untuk membuat sebuah desain web yang indah, untuk memanggil Javascript Bootstrap dapat menambahkan baris dibawah ini. <script src=”/bootstrap/js/bootstrap.js”></script>C. StartC.1 Grid System Default dari Grid System Bootstrap adalah lebar 940px dan 12 kolom. Grid System inidigunakan untuk pembagian resolusi layar ke dalam 4 responsive variasi untuk phone, tabletportrait and tablet landscape, small desktop, dan large wide screen desktop.Distributed by Fluider Team 2
  • Pertama, buat sebuah file HTML dengan standar di bawah ini ditambah dengan CSS danJavascript dari Bootstrap. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Fluider - Twitter Bootstrap Tutorial</title> <link href="/bootstrap/css/bootstrap.css" rel="stylesheet"> <script src=”/bootstrap/js/bootstrap.js”></script> </head> <body> …. </body> </html>Untuk membuat sebuah grid system pada bootstrap, dibutuhkan beberapa class seperti :container, row dan span, untuk contoh penggunaan dapat meilhat contohnya di bawah ini. <div class="container"> <div class="row"> <div class="span12"> </div> </div> </div>untuk mengetahui fungsi grid system pada bootstrap, terapkan baris di bawah ini pada HTML,Distributed by Fluider Team 3 View slide
  • untuk membuat struktur dari grid. <div class="container"> <div class="row"> <div class="span12"> </div> </div> <div class="row"> <div class="span6"> </div> <div class="span6"> </div> </div> <div class="row"> <div class="span4"> </div> <div class="span4"> </div> <div class="span4"> </div> </div> <div class="row"> <div class="span3"> </div> <div class="span3"> </div> <div class="span3"> </div> <div class="span3">Distributed by Fluider Team 4 View slide
  • </div> </div> <div class="row"> <div class="span2"> </div> <div class="span2"> </div> <div class="span2"> </div> <div class="span2"> </div> <div class="span2"> </div> <div class="span2"> </div> </div> <div class="row"> <div class="span1"> </div> <div class="span1"> </div> <div class="span1"> </div> <div class="span1"> </div> <div class="span1"> </div> <div class="span1"> </div>Distributed by Fluider Team 5
  • <div class="span1"> </div> <div class="span1"> </div> <div class="span1"> </div> <div class="span1"> </div> <div class="span1"> </div> <div class="span1"> </div> </div> </div>Dengan contoh di atas, tidak dapat menampilkan grid system secara kasat mata, untukmenampilkan warna dari tiap-tiap span, buat sebuah class CSS pada HTML dengan barisberikut. Letakkan sebelum </head> <style> .green {background-color: #CBF93E; } .blue {background-color: #4282D3; } .orange {background-color: #FFB640; } .red {background-color: #FF6140; } .purple {background-color: #906CD7; } .yellow {background-color: #FFE640; } .jarak {height: 100px; margin-top: 5px; margin-bottom: 5px;} </style>Setelah selesai, terapkan warna yang berbeda dari tiap span, seperti contoh di bawah ini.Distributed by Fluider Team 6
  • <div class="row"> <div class="jarak span12 green"> </div> </div> <div class="row"> <div class="jarak span6 blue"> </div> <div class="jarak span6 blue"> </div> </div> <div class="row"> <div class="jarak span4 orange"> </div> <div class="jarak span4 orange"> </div> <div class="jarak span4 orange"> </div> </div> <div class="row"> <div class="jarak span3 red"> </div> <div class="jarak span3 red"> </div> <div class="jarak span3 red"> </div> <div class="jarak span3 red"> </div> </div> <div class="row">Distributed by Fluider Team 7
  • <div class="jarak span2 purple"> </div> <div class="jarak span2 purple"> </div> <div class="jarak span2 purple"> </div> <div class="jarak span2 purple"> </div> <div class="jarak span2 purple"> </div> <div class="jarak span2 purple"> </div> </div> <div class="row"> <div class="jarak span1 yellow"> </div> <div class="jarak span1 yellow"> </div> <div class="jarak span1 yellow"> </div> <div class="jarak span1 yellow"> </div> <div class="jarak span1 yellow"> </div> <div class="jarak span1 yellow"> </div> <div class="jarak span1 yellow"> </div> <div class="jarak span1 yellow">Distributed by Fluider Team 8
  • </div> <div class="jarak span1 yellow"> </div> <div class="jarak span1 yellow"> </div> <div class="jarak span1 yellow"> </div> <div class="jarak span1 yellow"> </div> </div>Maka akan tampak struktur grid memenuhi 12 kolom tiap barisnya seperti tampilan HTML dibawah ini.Distributed by Fluider Team 9
  • C.2 Layout Untuk permulaan mendesain responsive web, harus mempunyai sebuah kerangka /layout, untuk mempermudah membuat layout dapat menggunakan grid system yang telahdipelajari sebelumnya. Kerangka terbagi menjadi 3 bagian, yaitu header, content, dan footer.Buatlah layout seperti langkah-langkah di bawah ini.HeaderPertama, gunakan struktur HTML default dengan tambahan Bootstrap CSS + Javascript kedalam HTML baru.Kemudian di dalam <body>, berikan code di bawah ini. <header class="green"> <div class="container"> <div class="row"> <div class="span12">Header / Navigasi</div> </div> </div> </header>ContentKedua, yang diperlukan sebuah content untuk menampilkan isi atau artikel dari blog,tambahkan code untuk content di bawah ini di bawah </header>. <div class="container"> <div class="row"> <div class="span12 yellow jarak"> Content Header </div> </div>Distributed by Fluider Team 10
  • <div class="row"> <div class="span4 orange jarak"> Content Pertama </div> <div class="span4 orange jarak"> Content Kedua </div> <div class="span4 orange jarak"> Content Ketiga </div> </div> </div>FooterKetiga, Footer berfungsi menampilkan si pembuat website, pemilik website, atau pembuatdesain, untuk menambahkan footer gunakan code di bawah ini. <footer class="blue"> <div class="container"> <div class="row"> <div class="span12">Footer</div> </div> </div> </footer>Maka hasil struktur HTMLnya akan seperti ini.Distributed by Fluider Team 11
  • C.3 TypographyTypography pada dasarnya digunakan untuk memperindah tampilan atau susunan text.Untuk langkah selanjutnya gunakan typography untuk memasukkan content / artikel ke dalamHTML.Ubah header sebelumnya menjadi seperti di bawah ini. <header class="green"> <div class="container"> <div class="row"> <div class="span12"><h3>Fluider</h3></div> </div> </div> </header>Setelah itu pada content, tambahkan no image dengan menambahkan baris berikut: <div class="row"> <div class="span12" style="margin-top: 10px;"> <img src="http://dummyimage.com/1200x300/ddd/fff" /> </div>Distributed by Fluider Team 12
  • </div>Ubah juga pada Content Header dengan baris di bawah ini, untuk menampilkan typographyh1, h2, h3, h4, h5, h6, paragraf, penggunaan strong, dan addr. <div class="row"> <div class="span12 yellow" style="margin-top: 10px;"> <h1>Ini adalah header h1</h1> <h2>Ini adalah header h2</h2> <h3>Ini adalah header h3</h3> <h4>Ini adalah header h4</h4> <h5>Ini adalah header h5</h5> <h6>Ini adalah header h6</h6> <p> Ini merupakan paragraf. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p> <p>Ini menggunakan <strong>Strong</strong> di dalam paragraf.</p> <p>Ini penggunaan abbr pada singkatan <abbr title="Indonesia">INA</abbr>. </p> </div> </div>Pada bagian Content Pertama, berikan contoh typography untuk penggunaan address,berikut codenya.Distributed by Fluider Team 13
  • <div class="span4 orange" style="margin-top: 10px; margin-bottom: 10px"> <h4>Penggunaan Address</h4> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <address> <strong>Fluider</strong><br/> Swadaya 2<br/> Cempaka Baru, Jakarta Pusat. </address> </div>Sedangkan untuk Content Kedua Berikan Typography penggunaan Blockquote dengan codedi bawah ini. <div class="span4" style="margin-top: 10px; margin-bottom: 10px; color: #333"> <h4>Penggunaan Blockquotes</h4> <blockquote> <i>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </i> </blockquote> </div>Distributed by Fluider Team 14
  • Untuk yang Content yang terakhir yaitu Content ketiga, berikan code untuk menampilkanpenggunaan Unordered List sama Ordered List. <div class="span4 orange" style="margin-top: 10px; margin-bottom: 10px"> <h4>Penggunaan Unordered List dan Ordered List</h4> <p> <ol> <li>Penggunaan Ordered List(ol)</li> <li>Penggunaan Ordered List(ol)</li> <li>Penggunaan Ordered List(ol)</li> </ol> <ul> <li>Penggunaan Unordered List(ul)</li> <li>Penggunaan Unordered List(ul)</li> <li>Penggunaan Unordered List(ul)</li> </ul> </p> </div>Yang terakhir, pada footer ubah baris footer dengan baris di bawah ini, untuk merubah warnafont dan ukuran. <footer class="blue"> <div class="container"> <div class="row"> <div class="span12" style="color: #fff;"> <h5>&copy; 2013 Fluider.org </h5> </div> </div>Distributed by Fluider Team 15
  • </div> </footer>Setelah semuanya selesai, maka tampilannya akan berubah menjadi seperti gambar dibawah ini.Distributed by Fluider Team 16
  • C.4 Tabel Tabel sering digunakan untuk menampilkan data yang bersifat sama dandikelompokkan menurut kolom dan baris. Untuk membuatnya sebuah tabel pada Bootstrap, diperlukan class tr, td dan th,dengan tambahan class thead dan tbody, berikut penggunaannya.Buat sebuah html baru, kemudian isi bagian content dengan baris berikut : <div class="container"> <div class="row"> <div class="span12" style="margin-top: 10px"> <table class="table table-striped"> <thead> <tr> <th>No</th> <th>Nama Depan</th> <th>Nama Belakang</th> <th>Sekolah</th> <th>Kfelas</th> </tr> </thead> <tbody> <tr> <td>1.</td> <td>Rika</td> <td>Vikawati</td> <td>SDN Sumberjo 03</td> <td>3</td> </tr> <tr>Distributed by Fluider Team 17
  • <td>2.</td> <td>Budi</td> <td>Prasetyo</td> <td>SDN Sumbelimo 10</td> <td>5</td> </tr> <tr> <td>3.</td> <td>Nori</td> <td>Manae</td> <td>SDN Karangraja 05</td> <td>5</td> </tr> </tbody> </table> </div> </div> </div>Hasilnya akan tampak seperti di bawah ini.C.5 FormDistributed by Fluider Team 18
  • Pada panduan selanjutnya akan membahas tentang membuat form dengan bootstrap,form lebih sering digunakan untuk hal-hal yang bersifat membutuhkan inputan dari pengguna.Seperti form pendaftaran, form login, form kebutuhan dan lain-lain.Berikut contoh kode untuk membuat sebuah form :Membuat Vertical Form LayoutBuatlah sebuah HTML baru yang lain, kemudian pada baris awal bagian content, tambahkanbaris di bawah ini. <div class="span12" style="margin-top: 10px"> <h3>Vertical Form Layout</h3> <form class="well"> <label>Username</label> <input type="text" class="span5" placeholder="username"> <span class="help-inline">Masukkan Username Anda!</span> <label class="checkbox"> <input type="checkbox">Centang apabila username Anda benar. </label> <button type="submit" class="btn">Submit</button> </form> </div>Maka Hasilnya akan seperti di bawah ini.Distributed by Fluider Team 19
  • Membuat Search Form LayoutGunakan class form-search untuk membuat inputan menjadi block level. Tambahkan code dibawah ini setelah code vertical form. <h3>Search Form Layout</h3> <form class="well"> <label>Username</label> <input type="text" class="input-medium search-query"> <button type="submit" class="btn">Submit</button> </form>Maka hasilnya akan seperti ini.Membuat Inline Form LayoutGunakan class form-inline untuk membuat inputan menjadi inline. Tambahkan code di bawahini setelah code search form. <h3>Inline Form Layout</h3> <form class="well form-inline">Distributed by Fluider Team 20
  • <input type="text" class="input-small" placeholder="Username"> <input type="password" class="input-small" placeholder="Password"> <label class="checkbox"> <input type="checkbox"> Remember me </label> <button type="submit" class="btn">Masuk</button> </form>Hasilnya akan seperti di bawah ini.Membuat Horizontal Form LayoutGunakan class form-horizontal untuk membuat inputan menjadi horizontal. Tambahkan codedi bawah ini setelah code inline form. <h3>Horizontal Form Layout</h3> <form class="well form-horizontal"> <fieldset> <legend>Horizontal Form Layout</legend> <div class="control-group"> <label class="control-label" for="input">Text input</label> <div class="controls"> <input type="text" class="input- xlarge" id="input">Distributed by Fluider Team 21
  • <p class="help-block"> In addition to freeform text, any HTML5 text-based input appears like so. </p> </div> </div> <div class="control-group"> <label class="control-label" for="checkbox">Checkbox</label> <div class="controls"> <label class="checkbox"> <input type="checkbox" id="checkbox" value="Pilihan 1"> Option one is this and that—be sure to include why its great </label> </div> </div> <div class="control-group"> <label class="control-label" for="select01">Select list</label> <div class="controls"> <select id="select01"> <option>--Pilihan1--</option> <option>--Pilihan2--</option> <option>--Pilihan3--</option> <option>--Pilihan4--</option> <option>--Pilihan5--</option> </select>Distributed by Fluider Team 22
  • </div> </div> <div class="control-group"> <label class="control-label" for="multiSelect">Multicon-select</label> <div class="controls"> <select multiple="multiple" id="multiSelect"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> </div> </div> <div class="control-group"> <label class="control-label" for="fileInput">File input</label> <div class="controls"> <input class="input-file" id="fileInput" type="file"> </div> </div> <div class="control-group"> <label class="control-label" for="textarea">Textarea</label> <div class="controls"> <textarea class="input-xlarge"Distributed by Fluider Team 23
  • id="textarea" rows="3"></textarea> </div> </div> <div class="form-actions"> <button type="submit" class="btn btn-primary"> Simpan Perubahan </button> <button class="btn">Batal</button> </div> </fieldset> </form>Jika berhasil, maka akan tampilannya seperti ini.Distributed by Fluider Team 24
  • Form ControlsDi dalam toolkit bootstrap disediakan pengendalian form untuk read-only, dan disabled, untukcontoh dapat menggunakan kode di bawah ini, letakkan kode di bawah horizontal form layout. <h3>Form Controls</h3> <form class="well form-horizontal"> <fieldset> <legend>Form Controls Bootstrap</legend> <div class="control-group"> <label class="control-label"Distributed by Fluider Team 25
  • for="input01">Fokus Input</label> <div class="controls"> <input type="text" class="input- xlarge" id="input01"> <p class="help-block">Input dalam mode biasa dan dapat di tulis dan di baca.</p> </div> </div> <div class="control-group"> <label class="control-label" for="input01">Raed only Input</label> <div class="controls"> <input type="text" class="input- xlarge" id="input01" readonly="true"> <p class="help-block">Input dalam mode read-only, hanya bisa di baca dan fokus.</p> </div> </div> <div class="control-group"> <label class="control-label" for="input01">Disabled Input</label> <div class="controls"> <input type="text" class="input- xlarge" id="input01" disabled> <p class="help-block">Input tidak bisa digunakan alias di disable.</p> </div> </div> <div class="control-group">Distributed by Fluider Team 26
  • <label class="control-label" for="optionsCheckbox" reado>Checkbox (disabled)</label> <div class="controls"> <label class="checkbox"> <input type="checkbox" id="optionsCheckbox" value="option1" disabled> Checkbox yang telah di disable. </label> </div> </div> <div class="form-actions"> <button type="submit" class="btn btn-primary" disabled> Simpan Perubahan (tombol yang di disabel) </button> <button class="btn">Cancel</button> </div> </fieldset> </form>Hasilnya akan tampak seperti gambar berikut :Distributed by Fluider Team 27
  • Form Input StyleDi dalam bootstrap juga disediakan form input style untuk error, warning, success, selectsuccess. Berikut contoh kodenya. <h3>Form Input Style</h3> <form class="well form-horizontal"> <fieldset> <legend>Form validasi error, warning dan success</legend> <div class="control-group error"> <label class="control-label" for="inputError">Input with error</label> <div class="controls"> <input type="text" id="inputError">Distributed by Fluider Team 28
  • <span class="help-inline">Please correct the error</span> </div> </div> <div class="control-group warning"> <label class="control-label" for="inputWarning">Input with warning</label> <div class="controls"> <input type="text" id="inputWarning"> <span class="help-inline">Something may have gone wrong</span> </div> </div> <div class="control-group success"> <label class="control-label" for="inputSuccess">Input with success</label> <div class="controls"> <input type="text" id="inputSuccess"> <span class="help- inline">Successfully entered</span> </div> </div> <div class="control-group success"> <label class="control-label" for="selectError">Select with success</label> <div class="controls"> <select id="selectError"> <option>1</option> <option>2</option>Distributed by Fluider Team 29
  • <option>3</option> <option>4</option> <option>5</option> </select> <span class="help- inline">Successfully selected</span> </div> </div> </fieldset> </form>Maka Hasilnya akan seperti gambar berikut :Distributed by Fluider Team 30
  • C.6 Navbar pada bagian struktur HTML yang telah dibuat, ada bagian bernama header. Dalampanduan ini akan dibahas bagaimana cara mengganti header menjadi navigasi. Navigasi pada umumnya berguna untuk mempermudah pembagian artikel, data, atauspesifikasi, untuk menambahkan navigasi pada header, ubah baris <header>...</header>dengan baris di bawah ini. <header style="margin-bottom: 40px"> <div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <ul class="nav"> <li class="active"> <a class="brand" style="margin- left: 0" href="#">Fluider</a> </li> <li><a href="#">Responsive</a></li> <li><a href="#">Metro Style</a></li> <li><a href="#">Leaflet</a></li> </ul> <ul class="nav"> <li class="dropdown"> <a href="#" class="dropdown- toggle" data-toggle="dropdown"> Services <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Web Design</a></li> <li><a href="#">Web development</a></li>Distributed by Fluider Team 31
  • <li><a href="#">Wordpress Theme development</a></li> </ul> </li> </ul> <form class="navbar-search pull-left"> <input type="text" class="search-query" placeholder="Search"> </form> </div> </div> </div> </header>Maka tampilannya akan seperti berikut :Distributed by Fluider Team 32
  • Untuk fungsi drop down tidak berfungsi dikarenakan tidak adanya javascript yangmenjalankan fungsi tersebut, tambahkan jquery.js dan bootstrap-dropdown.js ke dalamHTML, letakkan sebelum </head><script src="js/jquery.js"></script><script src="js/bootstrap-dropdown.js"></script>Refresh halaman HTML di Web Browser kemudian coba klik dropdown sekali lagi.Distributed by Fluider Team 33
  • C.7 Icon Pada Pembahasan selanjutnya, yaitu menambahkan icon, dengan menggunakan fontawesome yang dapat di download di http://fortawesome.github.com/Font-Awesome/.Sebelum menggunakannya, tambahkan baris berikut ke bagian atas </head>.<link rel="stylesheet" href="/bootstrap/css/font-awesome.css">Syntax yang digunakan untuk memanggil icon adalah : <i class=”class nama_icon”></i>Menambahkan Icon di NavigasiSetelah pada pembahasan sebelumnya menambahkan navigasi di header, selanjutnya dapatdicoba menambahkan icon di navigasi, ubah baris navigasi Responsive, Metro Style danLeaflet dengan baris di bawah ini. <li><a href="#"><i class="icon-tablet"></i> Responsive</a></li> <li><a href="#"><i class="icon-plus-sign-alt"></i> Metro Style</a></li> <li><a href="#"><i class="icon-leaf"></i> Leaflet</a></li>Maka hasilnya akan seperti gambar di bawah ini.Distributed by Fluider Team 34
  • Menambahkan Icon di Button dan Button GroupSetelah mencoba menambahkan icon di Navigasi, selanjutnya mencoba menambahkan icondi button dan button group.Syntax yang diperlukan untuk menggabungkan icon dan button adalah : <div class=”btn-group”> <a class=”btn” href=”#”><i class=”icon-refresh”></i> </div> Untuk contoh, gunakan code di bawah ini dan letakkan setelah form class search pada navigasi.. <ul class="nav pull-right"> <div class="btn-group"> <a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> User</a> <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#"><i class="icon-pencil"></i> Edit</a></li> <li><a href="#"><i class="icon-trash"></i> Delete</a></li> <li><a href="#"><i class="icon-ban-circle"></i> Ban</a></li> <li class="divider"></li> <li><a href="#"><i class="i"></i> Logout</a></li>Distributed by Fluider Team 35
  • </ul> </div> </ul>Hasilnya akan seperti gambar di bawah ini.C.8 Navigation Tabs dan Pills Untuk pembelajaran selanjutnya yaitu pengenalan tabs dan pills dari bootstrap, untukmemanggil tabs dapat menggunakan class .nav-tabs dan jika memanggil pills dapatmenggunakan .nav-pills. Berikut contoh kode untuk navigasi tabs dan pills.Membuat Navigasi Tabs <ul class="nav nav-tabs"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Tutorials</a></li> <li><a href="#">Practice Editor </a></li> <li><a href="#">Gallery</a></li> <li><a href="#">Contact</a></li> </ul>Distributed by Fluider Team 36
  • Membuat Navigasi Pills <ul class="nav nav-pills"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Tutorials</a></li> <li><a href="#">Practice Editor </a></li> <li><a href="#">Gallery</a></li> <li><a href="#">Contact</a></li> </ul>Dalam tahap ini, HTML yang telah dibuat akan ditambahkan sidebar, ubah baris contentheader, content pertama, content kedua, dan content ketiga menjadi seperti di bawah ini. <div class="row"> <div class="span3 green" style="margin-top: 10px; height: 485px;"> Sidebar </div>Distributed by Fluider Team 37
  • <div class="span9" style="margin-top: 10px;"> <div class="row-fluid"> <div class="span12 yellow"> <ul class="nav nav-pills"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Tutorials</a></li> <li><a href="#">Practice Editor </a></li> <li><a href="#">Gallery</a></li> <li><a href="#">Contact</a></li> </ul> <h3>Apa itu Fluider ?</h3> <p> <strong>Fluider</strong> adalah inisiatif dari meruvian yang membahas tentang aspek Desain dan lain-lain. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.<br /> Fluider menyediakan beberapa konten untuk mendesain, antara lain: <ul> <li>Programming</li> <li>Responsive</li> <li>Metro Style</li> <li>Map GIS</li> </ul> </p> </div> </div>Distributed by Fluider Team 38
  • <div class="row-fluid"> <div class="span6 orange" style="margin-top: 10px; margin-bottom: 10px"> <h4>Responsive</h4> <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. <br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> </div> <div class="span6 orange" style="margin-top: 10px; margin-bottom: 10px"> <h4>Metro Style</h4> <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. <br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> </div> </div> </div> </div>Maka hasilnya akan seperti gambar di bawah ini.Distributed by Fluider Team 39
  • Membuat Navigasi Vertical TabsSyntax yang digunakan adalah .navs-tabs dan .navs-stacked, untuk membuat sebuahnavigasi vertikal, dibutuhkan bagian sidebar, ubah bagian sidebar pada HTML yang telahdibuat menjadi seperti baris berikut : <ul class="nav nav-tabs nav-stacked"> <li class="active"><a href="#">Home</a></li>Distributed by Fluider Team 40
  • <li><a href="#">Tutorials</a></li> <li><a href="#">Practice Editor </a></li> <li><a href="#">Gallery</a></li> <li><a href="#">Contact</a></li> </ul>Membuat Navigasi Vertical PillsSyntax yang digunakan adalah .navs-pills dan .navs-stacked, hampir sama dengan navigasibar, ubah baris di sidebar menjadi baris berikut : <ul class="nav nav-pills nav-stacked"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Tutorials</a></li> <li><a href="#">Practice Editor </a></li> <li><a href="#">Gallery</a></li> <li><a href="#">Contact</a></li> </ul>Distributed by Fluider Team 41
  • Menambah Dropdown pada Navigation TabsUntuk membuat dropdown pada navigation tabs, perlu menggunakan class dropdown, contohkodenya dapat dilihat di bawah ini. <ul class="nav nav-tabs"> <li class="active"><a href="#">Home</a></li> <li><a href="#">About</a></li> <li class="dropdown"> <a class="dropdown-toggle" data- toggle="dropdown" href="#">FrontEnd<b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Twitter Bootstrap</a></li> <li><a href="#">Google Plus API</a></li> <li><a href="#">HTML5</a></li> <li class="divider"></li> <li><a href="#">Examples</a></li> </ul> </li> <li class="dropdown"> <a class="dropdown-toggle" data- toggle="dropdown" href="#">BackEnd<b class="caret bottom-Distributed by Fluider Team 42
  • up"></b></a> <ul class="dropdown-menu bottom-up pull-right"> <li><a href="#">PHP</a></li> <li><a href="#">MySQL</a></li> <li><a href="#">PostgreSQL</a></li> <li class="divider"></li> <li><a href="#">Live Demos</a></li> </ul> </li> </ul>Menambah Dropdown pada Navigation PillsPenggunaannya hampir sama dengan kode di atas hanya mengganti .nav-tabs menjadi .nav-pills. <ul class="nav nav-pills"> <li class="active"><a href="#">Home</a></li> <li><a href="#">About</a></li> <li class="dropdown"> <a class="dropdown-toggle" data- toggle="dropdown" href="#">FrontEnd<b class="caret"></b></a> <ul class="dropdown-menu">Distributed by Fluider Team 43
  • <li><a href="#">Twitter Bootstrap</a></li> <li><a href="#">Google Plus API</a></li> <li><a href="#">HTML5</a></li> <li class="divider"></li> <li><a href="#">Examples</a></li> </ul> </li> <li class="dropdown"> <a class="dropdown-toggle" data- toggle="dropdown" href="#">BackEnd<b class="caret bottom- up"></b></a> <ul class="dropdown-menu bottom-up pull-right"> <li><a href="#">PHP</a></li> <li><a href="#">MySQL</a></li> <li><a href="#">PostgreSQL</a></li> <li class="divider"></li> <li><a href="#">Live Demos</a></li> </ul> </li> </ul>Distributed by Fluider Team 44
  • Membuat Navigasi Sidebar dengan Nav ListUntuk membuat sebuah navigasi dengan list di sidebar, syntax yang digunakan adalah .nav,dan .nav-list. Berikut contoh kodenya : <ul class="nav nav-list"> <li class="nav-header">List header</li> <li class="active"><a href="#">Home</a></li> <li><a href="#">Library</a></li> <li><a href="#">Applications</a></li> <li class="nav-header">Another list header</li> <li><a href="#">Profile</a></li> <li><a href="#">Settings</a></li> <li class="divider"></li> <li><a href="#">Help</a></li> </ul>Membuat Navigasi Sidebar dengan Nav List + IconAgar Navigasi menarik, tambahkan beberapa icon di setiap listnya, berikut codenya.Distributed by Fluider Team 45
  • <ul class="nav nav-list"> <li class="active"><a href="#"><i class="icon-white icon- home"></i> Home</a></li> <li><a href="#"><i class="icon-book"></i> Library</a></li> <li><a href="#"><i class="icon-pencil"></i> Applications</a></li> <li class="nav-header">Another list header</li> <li><a href="#"><i class="icon-user"></i> Profile</a></li> <li><a href="#"><i class="icon-cog"></i> Settings</a></li> <li class="divider"></li> <li><a href="#"><i class="icon-flag"></i> Help</a></li> </ul>Tabbable Nav dengan JavascriptPembahasan terakhir dari Navigasi adalah Membuat Tab berfungsi dengan javascript, padabagian content header ganti kode menjadi seperti di bawah ini.Distributed by Fluider Team 46
  • <div class="tabbable"> <ul class="nav nav-tabs"> <li class="active"><a href="#1" data- toggle="tab">Home</a></li> <li><a href="#2" data-toggle="tab">About</a></li> <li class="dropdown"> <a class="dropdown-toggle" data- toggle="dropdown" href="#">FrontEnd<b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Twitter Bootstrap</a></li> <li><a href="#">Google Plus API</a></li> <li><a href="#">HTML5</a></li> <li class="divider"></li> <li><a href="#">Examples</a></li> </ul> </li> <li class="dropdown"> <a class="dropdown-toggle" data- toggle="dropdown" href="#">BackEnd<b class="caret bottom- up"></b></a> <ul class="dropdown-menu bottom-up pull- right"> <li><a href="#">PHP</a></li> <li><a href="#">MySQL</a></li> <li><a href="#">PostgreSQL</a></li> <li class="divider"></li> <li><a href="#">Live Demos</a></li> </ul> </li>Distributed by Fluider Team 47
  • </ul> </div> <div class="tab-content"> <div class="tab-pane active" id="1"> <h3>Apa itu Fluider ?</h3> <p> <strong>Fluider</strong> adalah inisiatif dari meruvian yang membahas tentang aspek Desain dan lain-lain. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.<br /> Fluider menyediakan beberapa konten untuk mendesain, antara lain: <ul> <li>Programming</li> <li>Responsive</li> <li>Metro Style</li> <li>Map GIS</li> </ul> </p> </div> <div class="tab-pane" id="2"> <h3>About Me</h3> <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. <br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> </div> </div>Distributed by Fluider Team 48
  • Tambahkan fungsi Javascript pada tab dengan menambahkan baris berikut sebelum</head>. <script src="js/bootstrap-tab.js"></script>Hasilnya akan seperti gambar berikut :C.9 Inline Label dan Badges Pada panduan kali ini akan dijelaskan bagaimana membuat inline label dan badges.Untuk syntax yang digunakan adalah .label.Untuk kode label di bagi menjadi 6 bagian yaitu :Default → class=”label”Success → class=”label-success”Warning → class=”label-warning”Important → class=”label-important”Info → class=”label-info”Inverse → class=”label-inverse”Berikut contoh kode, tambahkan di HTML yang telah dibuat.Distributed by Fluider Team 49
  • <p><span class=”label”>Default</span></p> <p><span class=”label label-success”>Success</span></p> <p><span class=”label label-warning”>Warning</span></p> <p><span class=”label label-important”>Important</span></p> <p><span class=”label label-info”>Info</span></p> <p><span class=”label label-inverse”>Inverse</span></p>Untuk pembagian badges hampir sama dengan label, ubah semua kode label di atas menjadibadge.Distributed by Fluider Team 50
  • <p><span class=”badge”>Default</span></p> <p><span class=”badge badge-success”>Success</span></p> <p><span class=”badge badge-warning”>Warning</span></p> <p><span class=”badge badge-important”>Important</span></p> <p><span class=”badge badge-info”>Info</span></p> <p><span class=”badge badge-inverse”>Inverse</span></p>C.10 Thumbnail Pada panduan ini akan membahas bagaimana cara membuat thumbnail, class yangdigunakan adalah thumbnails.Untuk percobaan, ganti kode pada content pertama dan content kedua dengan kode dibawah ini. <div class="span6 orange" style="margin-top: 10px; margin-bottom: 10px"> <h4>Responsive</h4> <ul class="thumbnails">Distributed by Fluider Team 51
  • <li class="span12"> <div class="thumbnail"> <img src="img/responsive.jpg" alt="product 1"> <div class="caption"> <h5>Responsive dengan Bootstrap</h5> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <p><a href="#" class="btn btn- success">Read More</a></p> </div> </div> </li> </ul> </div> <div class="span6 orange" style="margin-top: 10px; margin-bottom: 10px"> <h4>Metro Style</h4> <ul class="thumbnails"> <li class="span12"> <div class="thumbnail"> <img src="img/metrostyle.jpg" alt="product 2"> <div class="caption"> <h5>Metro Style</h5> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt utDistributed by Fluider Team 52
  • labore et dolore magna aliqua.</p> <p><a href="#" class="btn btn- success">Read More</a></p> </div> </div> </li> </ul> </div>Dan hasilnya akan seperti gambar di bawah ini.C.11 Progress Bar Progress Bar sering digunakan untuk mendeskripsikan proses atau jumlah, untukmenggunakannya class progress.Distributed by Fluider Team 53
  • Class progress pada bootstrap di bagi menjadi 3 yaitu:progress, progress striped, dan progress striped active.Untuk contoh kode dapat menggunakan kode di bawah ini. <h3>Progress Bar</h3> <div class="progress"> <div class="bar" style="width: 40%;"></div> </div> <h3>Progress Bar dengan efek striped</h3> <div class="progress progress-striped"> <div class="bar" style="width: 40%;"></div> </div> <h3>Program Bar dengan efek striped dan animasi</h3> <div class="progress progress-striped active"> <div class="bar" style="width: 40%;"></div> </div>Dan hasilnya akan tanpak seperti gambar di bawah ini.Distributed by Fluider Team 54
  • Progress Bar juga di bagi menjadi 4 fungsi, yaitu :Info → progress-infoSuccess → progress-successWarning → progress-warningDanger → progress-dangerBerikut contoh kodenya : <h3>Progress bars dengan berbagai warna</h3> <div class="progress progress-info progress-striped" style="margin-bottom: 9px;"> <div class="bar" style="width: 20%"></div> </div> <div class="progress progress-success progress-striped active" style="margin-bottom: 9px;"> <div class="bar" style="width: 40%"></div> </div> <div class="progress progress-warning progress-striped"Distributed by Fluider Team 55
  • style="margin-bottom: 9px;"> <div class="bar" style="width: 60%"></div> </div> <div class="progress progress-danger progress-striped active" style="margin-bottom: 9px;"> <div class="bar" style="width: 80%"></div> </div>dan tampilannya akan seperti gambar di bawah ini.C.12 Breadcrumbs Breadcrumbs adalah bantuan navigasi yang menginformasikan kepada penggunamengenai posisi atau letak sebuah artikel itu berada. Untuk menambahkan breadcrumbspada bootstrap adalah dengan menggunakan class breadcrumb.Tambahkan kode contoh breadcrumbs di bawah ini setelah header. <div class="row"> <ul class="breadcrumb" style="margin-left: 20px"> <li> <a href="#">Home</a> <spanDistributed by Fluider Team 56
  • class="divider">></span> </li> <li> <a href="#">Responsive</a> <span class="divider">></span> </li> <li class="active">Bootstrap</li> </ul> </div>Tampilannya akan seperti gambar di bawah ini.C.13 Pagination Pada langkah selanjutnya adalah membuat pagination untuk halaman HTML yangsedang dibuat, pagination pada bootstrap berfungsi membagi artikel menjadi beberapahalaman untuk menghindari artikel yang panjang dalam satu halaman HTML.Terdapat 3 contoh kode pagination, yaitu :Multicon-page Paginationuntuk menggunakan multicon-page, gunakan class pagination. <div class="pagination"> <ul> <li><a href="#">Prev</a></li>Distributed by Fluider Team 57
  • <li class="active"><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">Next</a></li> </ul> </div>Pager dengan Next dan Previousclass yang digunakan untuk menampilkan pager next dan previous adalah pager. Berikutcontoh kodenya. <ul class="pager"> <li> <a href="#">Previous</a> </li>Distributed by Fluider Team 58
  • <li> <a href="#">Next</a> </li> </ul>Pager dengan Old dan Newerclass yang digunakan sama dengan next dan previous, hanya bedanya, posisi untuk previousdan next berada di tengah, sedangkan untuk old dan newer, posisinya berada di ujung kiriuntuk old, dan ujung kanan untuk newer.Distributed by Fluider Team 59
  • C.14 Alert dan ErrorDi pembahasan ini akan membahas fungsi bootstrap lain yaitu fungsi untuk menampilkanalert dan error. Untuk kode dapat melihat contohnya di bawah ini.Pesan PemberitahuanGunakan class alert untuk menampilkan pesan pemberitahuan. <div class="alert"> <a class="close" data-dismiss="alert">×</a> <strong>Warning!</strong> Ini contoh adalah pesan pemberitahuan !. </div>Distributed by Fluider Team 60
  • Seharusnya untuk pesan pemberitahuan dapat di tutup/close setelah mengklik tombol X diujung kanan, tetapi fungsi tombol X tidak bisa, ini dikarenakan harus ada javascript yangmengaktifkan fungsi tersebut.Tambahkan javascript untuk alert di HTML. <script src="js/bootstrap-alert.js"></script>Pesan Pemberitahuan, Pesan Kesalahan, Pesan Keberhasilan, dan Pesan InformasiBootstrap juga menyediakan fungsi untuk menampilkan pesan kesalahan, pesankeberhasilan dan pesan informasi selain dari menampilkan pesan pemberitahuan, untuk kodedapat melihat contohnya di bawah ini. <div class="alert"> <a class="close" data-dismiss="alert">×</a> <strong>Warning!</strong> Ini adalah contoh pesan pemberitahuan !. </div> <div class="alert alert-error"> <a class="close" data-dismiss="alert">×</a> <strong>Error!</strong> Ini adalah contoh pesan kesalahan !. </div>Distributed by Fluider Team 61
  • <div class="alert alert-success"> <a class="close" data-dismiss="alert">×</a> <strong>Success!</strong> Ini adalah contoh pesan keberhasilan !. </div> <div class="alert alert-info"> <a class="close" data-dismiss="alert">×</a> <strong>Info!</strong> Ini adalah contoh pesan informasi !. </div>C.15 ModalUntuk menambahkan fungsi modal pada HTML, tambahkan javascript berikut di HTML.<script src="js/bootstrap-modal.js"></script>Sedangkan untuk tampilan modalnya menggunakan class modal-header untuk headernya,modal-body untuk isiannya dan modal-footer untuk bagian footernya.Untuk kodenya dapat melihat contohnya di bawah ini.Distributed by Fluider Team 62
  • <h3>Contoh Membuat Modal dengan Twitter Bootstrap</h3> <div id="example" class="modal hide fade in" style="display: none; "> <div class="modal-header"> <a class="close" data-dismiss="modal">×</a> <h3>Ini Modal Header</h3> </div> <div class="modal-body"> <h4>Modal Body</h4> <p>Anda dapat menambahkan artikel atau kode lainnya disini.</p> </div> <div class="modal-footer"> <a href="#" class="btn" data- dismiss="modal">Close</a> </div> </div><p><a data-toggle="modal" href="#example" class="btn btn-primary btn-large">Jalankanmodal</a></p>Distributed by Fluider Team 63
  • C.16 Popover dan TooltipFungsi Popover pada bootstrap adalah untuk menampilkan popup yang akan muncul ketikamouse mengarahkan ke tombol atau tulisan tertentu. Popup itu dapat berupa penjelasan,jabaran, atau pendapat.Untuk javascript yang dibutuhkan ada 2 yaitu boostrap-tooltip dan bootstrap-popover.Tambahkan baris berikut untuk memanggil javascript tersebut. <script src="js/bootstrap-tooltip.js"></script> <script src="js/bootstrap-popover.js"></script> <script> $(function () { $("#example").popover(); }); </script>Untuk contoh kode dapat meilhat contoh di bawah ini. <h3>Contoh Membuat Popover dengan Twitter Bootstrap</h3> <div class="well"> <a href="#" id="example" class="btn btn-success" rel="popover" data-content="Sangat mudah membuat tooltip untuk HTML!" data- original-title="Twitter Bootstrap Popover">hover dari popover</a> </div>Distributed by Fluider Team 64
  • C.17 ScrollSpy ScrollSpy pada bootstrap digunakan untuk menunjukkan atau mengarahkan tab yangakan dituju dalam satu halaman.Untuk menggunakan fitur tersebut, tambahkan javascript di bawah ini di HTML. <script src="js/bootstrap-scrollspy.js"></script>Setelah itu tambahkan kode di bawah ini pada sidebar HTML, pada sidebar ganti list keduadan ketiga menjadi seperti di bawah ini. <li><a href="#responsive"><i class="icon-book"></i> Responsive</a></li> <li><a href="#metrostyle"><i class="icon-pencil"></i> Metro Style</a></li>Kemudian arahkan list tersebut ke content pertama dan content kedua pada halaman yangsama dengan menambahkan kode di bawah ini. <div class="row-fluid" data-spy="scroll" data- target="#navbarExample">Distributed by Fluider Team 65
  • Pada list di atas pada a href telah di arahkan ke url yang dimaksud, tambahkan contentpertama dan kedua dengan id yang dimaksud. <h4 id="responsive">Responsive</h4> <h4 id="metrostyle">Metro Style</h4>Kemudian coba sekali lagi dengan mengklik list responsive, actionnya akan mengarahkannyake baris yang dimaksud.C.18 Carousel Bootstrap juga memiliki fitur image slider bernama carousel. Dengan fitur ini, dapatmenampilkan gambar dalam bentuk slide.Untuk class yang digunakan adalah carousel slide, carousel-inner dan carousel-control.Di Tampilan HTML sebelumnya, di bagian bawah header terdapat bagian untuk meletakkanbagian gambar, ubah letak tersebut dengan kode di bawah ini.Distributed by Fluider Team 66
  • <div id="myCarousel" class="carousel slide"> <div class="carousel-inner"> <div class="active item"><img src="img/1.png" /></div> <div class="item"><img src="img/2.png" /></div> <div class="item"><img src="img/3.png" /></div> <div class="item"><img src="img/4.png" /></div> </div> <a class="carousel-control left" href="#myCarousel" data- slide="prev">&lsaquo;</a> <a class="carousel-control right" href="#myCarousel" data- slide="next">&rsaquo;</a> </div>Untuk saat ini, slider tidak dapat berjalan atau diam, dikarenakan belum adanya fungsijavascript yang menjalankan slider tersebut, tambahkan script di bawah ini di atas </head>.<script src="js/bootstrap-carousel.js"></script>Distributed by Fluider Team 67
  • C.19 Collapse Collapse pada Bootstrap kegunaannya hampir sama dengan drop down pada navigasi,bedanya pada fitur Collapse, drop downnya penuh satu halaman, sedangkan drop down padanavigasi menghalangi layar di belakangnya. Untuk mengetahui lebih lanjut apa itu Collapse,silahkan lihat kode di bawah ini. <div class="accordion" id="accordion2"> <div class="accordion-group"> <div class="accordion-heading"> <a class="accordion-toggle" data- toggle="collapse" data-parent="#accordion2" href="#collapseOne"> Klik untuk memperluas. Klik sekali lagi untuk menutup. Part I. </a> </div> <div id="collapseOne" class="accordion-body collapse" style="height: 0px; "> <div class="accordion-inner"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> </div> </div>Distributed by Fluider Team 68
  • <div class="accordion-group"> <div class="accordion-heading"> <a class="accordion-toggle" data- toggle="collapse" data-parent="#accordion2" href="#collapseTwo"> Klik untuk memperluas. Klik sekali lagi untuk menutup. Part II. </a> </div> <div id="collapseTwo" class="accordion-body collapse"> <div class="accordion-inner"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> </div> </div> <div class="accordion-group"> <div class="accordion-heading"> <a class="accordion-toggle" data- toggle="collapse" data-parent="#accordion2" href="#collapseThree"> Klik untuk memperluas. Klik sekali lagi untuk menutup. Part III.Distributed by Fluider Team 69
  • </a> </div> <div id="collapseThree" class="accordion-body collapse"> <div class="accordion-inner"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> </div> </div> </div>Pada tampilan di atas fungsi dari Collapse masih belum berjalan, tambahkan denganjavascript bootstrap-collapse.Distributed by Fluider Team 70
  • <script src="js/bootstrap-collapse.js"></script>Ketika mulai mengklik yang part I, penjelasan akan otomotis bergeser kebawah pada part I,tapi ketika mengklik part II, penjelasan pada part I kembali menutup, dan penjelasan padapart II bergeser ke bawah, dan begitu seterusnya ketika mengklik part yang lain.C.20 Responsive Pada pembahasan yang terakhir, yaitu mengubah desain HTML yang ada menjadidapat di tampilkan pada layout mobile, layout tablet dan layout desktop dalam sekaligus.Beda antara desain yang tidak responsive dan yang responsive adalah resolusi web yangtidak dapat menyesuaikan layout.Seperti contoh di bawah ini.Distributed by Fluider Team 71
  • Pada Gambar di atas, ketika layout dikecilkan, sisi kanan desain web akan tertutup, bedaketika dalam mode responsive, layout akan menyesuaikan.Distributed by Fluider Team 72
  • Untuk membuat HTML dalam mode responsive, cukup mudah tinggal tambahkan CSS dibawah ini sebelum </head>. <link href="css/bootstrap-responsive.css" rel="stylesheet">Distributed by Fluider Team 73
  • ~ Selamat Mencoba ~Distributed by Fluider Team 74