Irul Seri2a Bootstrap

Komunitas eLearning IlmuKomputer.Com Copyright © 2003-2015 IlmuKomputer.Com

1

SSeerrii--22aa BBoooottssttrraapp:: SSeemmuuddaahh AAppaa BBoooottssttrraapp??

Muhammad Khoirul Hasin [email protected] https://ordinaryhumansays.wordpress.com/

Akan Membuat apa sih.. Posting sebelumnya saya sudah memberikan sedikit wawasan terkait dengan template dasar Bootstrap. Sekarang saya akan membahas kemudahan yang anda peroleh ketika anda menggunakan framework ini. Tapi, materi yang saya berikan di seri kedua ini hanya bertujuan untuk memberikan pandangan umum cara menggunakan framework ini, untuk detailnya anda bisa mengikuti seri-seri selanjutnya. Saya memberikan sedikit contoh kasus cara menyusun tampilan pada gambar berikut ini.

Pada tampilan web di atas terdiri dari navigasi, jumbotron, dan konten yang tersusun menggunakan grid. Mari kita bahas satu persatu.

Lisensi Dokumen: Copyright © 2003-2015 IlmuKomputer.Com Seluruh dokumen di IlmuKomputer.Com dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial (nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari IlmuKomputer.Com.

navigasi

jumbotron

konten


2

Navigasi Ada banyak gaya template navigasi di Bootstrap, anda bisa mengatur tata letak menunya, misalnya form search navigasi bisa diletakkan di sisi kiri dan menu yang sebelah kiri bisa dipindah ke kanan atau sebaliknya. Jika anda jeli ada satu menu yang disebelahnya memiliki ikon. Sebenarnya, ikon tersebut bukan gambar tapi sebuah font, Bootstrap telah menyediakan font yang berbentuk ikon tersebut, ikon ini merupakan produk berbayar dari Glyphicons (website http://glyphicons.com/) tapi creator nya memberikannya free untuk pengguna Bootstrap. Sayangnya, disini tidak akan membahas bagaimana meng-customize ikon tersebut, tapi hanya memberi tahu bagaimana cara menggunakannya di Bootstrap.

Jumbotron Fungsi dari jumbotron sendiri adalah untuk menginformasikan sesuatu yang penting, setiap pengunjung web harus tahu informasi tersebut ketika pertama kali mengunjungi web. Oleh karenanya, jumbotron biasanya diletakkan di halaman homepage. Selain itu, tag heading (h1, h2, dan seterusnya) yang berada di jumbotron akan diperbesar ukurannya dari ukuran normal, dengan tujuan memberikan efek eye catching bagi pengunjung. Konten Konten, bisa dikatakan sebagai isi dari web, tidak lagi menggunakan tabel untuk mengatur tata letak layoutnya namun menggunakan layer yang memanfaatkan sistem grid. Lebih detail dengan berbagai contoh terkait sistem grid bisa dilihat di http://960.gs/. Ukuran lebar grid sistem adalah 960 pixel, dari ukuran tersebut dibelah-belah lagi ke dalam 12 dan 16 kolom, dengan menambahkan ukuran tertentu pada margin dan padding. Sedangkan Bootstrap sendiri menggunakan sistem grid 960 dan 12 kolom. Pembahasan grid akan dibahas pada seri-seri berikutnya.

Mari mulai membuat Ada tiga hal yang harus anda ketahui terlebih dahulu pada framework ini. Bootstrap membagi templatenya ke dalam tiga bagian, diantaranya: CSS, Component dan Javascript . CSS terkait dengan tampilan dan tata letak, kita bisa mengibaratkan seperti tata ruang dan gaya rumah kita, contoh grid sistem. Component terkait dengan item-item yang sudah jadi yang bisa langsung digunakan, kita bisa mengibaratkan seperti perabotan yang harus ada di rumah kita (pintu, jendela, dan lain-lain), contoh menu dan jumbotron. Yang terakhir Javascript, ia terkait dengan polesan yang memperindah item-item yang ada di component, kita bisa mengibaratkannya seperti ornamen-ornamen yang ada di rumah kita, untuk contoh pada kasus ini belum ada, nanti akan kita bahas lebih lanjut pada seri berikutnya. Baik, saya pikir anda semua sudah tahu dan sudah memiliki bayangan apa yang akan kita buat. Langsung saja kita membangun tampilan seperti gambar diatas.

1. Persiapkan file yang sudah disisipkan pada seri Bootstrap sebelumnya, atau anda bisa

mendownloadnya di

http://ilmukomputer.org/2015/04/22/seri-1-bootstrap-persiapkan-dirimu/

2. Kita membuat navigasinya terlebih dahulu, anda bisa langsung copy paste di website

Bootstrap menu Component > Navbar atau di laman

3

http://getbootstrap.com/components/#navbar tepat di bawah tag body namun terlebih

dahulu hapus tag h1.

001  002 <nav class="navbar navbar-default"> 003 <div class="container-fluid"> 004  005 <div class="navbar-header"> 006 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 007 <span class="sr-only">Toggle navigation</span> 008 <span class="icon-bar"></span> 009 <span class="icon-bar"></span> 010 <span class="icon-bar"></span> 011 </button> 012 <a class="navbar-brand" href="#">Brand</a> 013 </div> 014 015  016 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 017 <ul class="nav navbar-nav"> 018 <li class="active"><a href="#"><span class="glyphicon glyphicon-user" aria-hidden="true"></span> Link <span class="sr-only">(current)</span></a></li> 019 <li><a href="#">Link</a></li> 020 <li class="dropdown"> 021 <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a> 022 <ul class="dropdown-menu" role="menu"> 023 <li><a href="#">Action</a></li> 024 <li><a href="#">Another action</a></li> 025 <li><a href="#">Something else here</a></li> 026 <li class="divider"></li> 027 <li><a href="#">Separated link</a></li> 028 <li class="divider"></li> 029 <li><a href="#">One more separated link</a></li> 030 </ul> 031 </li> 032 </ul> 033 <form class="navbar-form navbar-left" role="search"> 034 <div class="form-group"> 035 <input type="text" class="form-control" placeholder="Search"> 036 </div> 037 <button type="submit" class="btn btn-default">Submit</button> 038 </form> 039 <ul class="nav navbar-nav navbar-right"> 040 <li><a href="#">Link</a></li> 041 <li class="dropdown"> 042 <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a> 043 <ul class="dropdown-menu" role="menu"> 044 <li><a href="#">Action</a></li>

4

045 <li><a href="#">Another action</a></li> 046 <li><a href="#">Something else here</a></li> 047 <li class="divider"></li> 048 <li><a href="#">Separated link</a></li> 049 </ul> 050 </li> 051 </ul> 052 </div> 053 </div> 054 </nav> 055 

berikut ini hasilnya.

3. Navigasi tersebut, letaknya terlalu pinggir. Mari kita coba supaya letaknya lebih masuk

ke dalam dengan membuat sebuah container. Container merupakan tempat atau wadah

dimana semua item diletakkan agar memiliki lebar padding dari sisi paling luar browser.

Untuk membuat container, anda bisa copy paste kode tersebut di

http://getbootstrap.com/css/#overview-container. Letakkan navigasi tersebut di dalam

container.

001  002 <div class="container"> 003  004 <nav class="navbar navbar-default"> 005 <div class="container-fluid"> 006  007 <div class="navbar-header"> 008 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 009 <span class="sr-only">Toggle navigation</span> 010 <span class="icon-bar"></span> 011 <span class="icon-bar"></span> 012 <span class="icon-bar"></span> 013 </button> 014 <a class="navbar-brand" href="#">Brand</a> 015 </div> 016 ................... 017 </div> 018 </nav> 019  020 </div> 021 

Berikut ini hasilnya, letak navigasi menjadi lebih dalam.

5

4. Selanjutnya menambahkan jumbotron, copy paste code nya di

http://getbootstrap.com/components/#jumbotron. Letakkan code tersebut di dalam

container tapi tepat di bawah tag penutup nav (</nav>).

001  002 <div class="container"> 003  004 <nav class="navbar navbar-default"> 005 ................... 006 </nav> 007  008  009 <div class="jumbotron"> 010 <h1>Hello, world!</h1> 011 <p>...</p> 012 <p><a class="btn btn-success btn-lg" href="#" role="button">Learn more</a></p> 013 </div> 014  015 </div> 016 

Hasilnya seperti pada gambar berikut.

5. Sekarang menambakan glyphicon. Cara untuk menambah ikon tersebut bisa anda lihat

di http://getbootstrap.com/components/#glyphicons. Pastikan terlebih dahulu bahwa di

dalam folder fonts sudah ada beberapa file berbagai jenis fonts.

Anda bisa memilih jenis ikon yang tersedia, dengan merubah class di tag span, misal

kita ingin menggunakan ikon user maka ganti code berikut. <span class="glyphicon glyphicon-search"

aria-hidden="true"></span>

menjadi

6

<span class="glyphicon glyphicon-user" aria-hidden="true"></span>

dan letakkan kode tersebut di salah satu menu navigasi.

001  002 <div class="container"> 003  004 ............. 005 006  007 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 008 <ul class="nav navbar-nav"> 009 <li class="active"><a href="#"><span class="glyphicon glyphicon-user" aria-hidden="true"></span> Link <span class="sr-only">(current)</span></a></li> 010 <li><a href="#"><span class="glyphicon glyphicon-user" aria-hidden="true"></span> Link</a></li> 011 <li class="dropdown"> 012 <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a> 013 <ul class="dropdown-menu" role="menu"> 014 <li><a href="#">Action</a></li> 015 <li><a href="#">Another action</a></li> 016 <li><a href="#">Something else here</a></li> 017 <li class="divider"></li> 018 <li><a href="#">Separated link</a></li> 019 <li class="divider"></li> 020 <li><a href="#">One more separated link</a></li> 021 </ul> 022 </li> 023 </ul> 024 .......... 025 </div> 026 </div> 027 </nav> 028 

Hasilnya seperti gambar ini.

Ini membuktikan bahwa Bootstrap hanya menggunakan permainan class yang ada di

setiap tag. Untuk lebih jelasnya, akan dibahas pada seri berikutnya.

BERSAMBUNG…..

Biografi Penulis Muhammad Khoirul Hasin. Menyelesaikan S1 di Institut Teknologi Sepuluh Nopember (ITS) Surabaya Jurusan Sistem Informasi dan S2 pada tahun pertama di universitas yang sama dengan S1 namun S2 untuk tahun kedua di Asian Institute of Technology (AIT) Thailand Departement of


7

Computer Science and Information Management. Dosen pemrograman di Politeknik Perkapalan Negeri Surabaya (PPNS). Kompetensi inti pada bidang Software Engineering. Penulis sedang merintis start up berbasiskan web dan android.

Irul Seri2a Bootstrap

Documents

Transcript of Irul Seri2a Bootstrap