Pengembangan Aplikasi Framework

Presentasi berjudul: "Pengembangan Aplikasi Framework"— Transcript presentasi:

1 Pengembangan Aplikasi Framework
Bootstrap (Button, Image & Navigation) Ramos Somya

2 Button (Tombol) Style untuk tombol (button) merupakan salah satu keunggulan Bootstrap, karena mudah dibuat dan menghasilkan tampilan yang memukau. Styling untuk tombol dapat diterapkan kepada elemen apapun selama menggunakan class .btn. Bisa juga menggunakan tag elemen <a> dan elemen <button> untuk memperoleh tampilan terbaik.

3 ...

4 Button Size Ada 4 level ukuran tombol dalam Bootstrap yang diatur dalam 4 class, yaitu .btn, .btn-large, .btn-small dan .btn-mini.

5 ... Tombol juga dapat ditampilkan dalam style Block Level, di mana dalam style ini tombol akan memanjang 100% memenuhi lebar container induknya. Caranya tambahkan class .btn-block setelah class .btn.

6 Image (Gambar) Bootstrap menyediakan 3 class untuk styling image:
.img-rounded : membuat ujung-ujung image membulat (rounded). .img-circle : membuat seluruh image menjadi berbentuk bundar. .img-polaroid : membuat sedikit padding dan border abu-abu.

7 ...

8 Icon (Ikon) Bootstrap menyediakan 140 icon yang dapat digunakan dalam tombol, link, navigasi dan elemen form. Icon-icon tersebut dikenal dengan nama Glyphicons Halfings yang disediakan oleh glyphicons.com secara gratis.

9 ...

10 Cara Penggunaan Icon Glyphicons
Gunakan tag <i> diikuti dengan class .icon-xxx, di mana xxx adalah nama icon tersebut. Misal untuk icon edit: <i class=“icon-edit”></i> Untuk icon dengan warna putih, tambahkan class .icon-white <i class=“icon-edit icon-white”></i>

11 Penggunaan Icon pada Button
Ada 3 pilihan dalam penggunaan icon pada button: Button group in a button tollbar, icon digunakan pada sekelompok tombol yang disatukan dalam satu folder.

12 ... Dropdown in a button group, icon digunakan pada satu group button, di mana salah satu button memiliki fitur dropdown. Icon juga digunakan dalam link-link dalam dropdown tersebut.

13 ... Button size, icon digunakan pada tombol atau link, di mana tombol atau link tersebut memiliki style relative sizing dengan class-class .btn-small, .btn-large dan sebagainya.

14 Menu dan Navigasi Bootstrap menyediakan komponen web seperti dropdown menu, pill navigation, navbar dll yang dapat digunakan untuk merancang interface aplikasi.

15 Button Dropdown Menu Button akan digunakan sebagai trigger untuk menampilkan dropdown menu dengan menempatkan button tersebut dalam kelompok dengan class .btn-group.

16 Navigasi Bootstrap menyediakan beberapa komponen navigasi, yaitu: Tab, Pill dan List. Semuanya menggunakan markup dasar dan style yang sama, yaitu class .nav

17 Basic Navigation Tab Tab akan menampilkan navigasi dalam bentuk format tabular. Untuk menghasilkan navigas dalam bentuk tab, kita menggunakan elemen <ul> biasa dengan class .nav-tabs dan isi anggota dari elemen <ul> tersebut adalah tag link <a> yang dibungkus oleh elemen <li></li>.

18 Basic Navigation Pill Untuk menampilkan navigasi dalam bentuk pill (kapsul), digunakan markup yang sama seperti tab, yaitu dengan mengganti class-nya dengan .nav-pills.

19 Basic Navigation List Basic navigation list merupakan cara mudah untuk menampilkan sekumpulan links dan paling bagus digunakan pada sidebar.

20 Memposisikan Komponen Navigasi
Untuk menempatkan komponen di bagian kiri atau kanan, digunakan c;ass .pull-left atau .pull-right

21 Navigation Bar Navigation bar merupakan salah satu komponen yang bertujuan memberikan penduan bagi pengunjung agar mudah menjelajahi isi dari website. Bootstrap menyediakan berbagai pilihan dan variasi navigation bar. Navigation bar merupakan salah satu fitur yang menjadi ciri khas website yang dibangun menggunakan bootstrap.

22 ... Sebuah navigation bar dihasilkan menggunakan class .navbar pada sebuah block elemen <div></div>

23 Dropdown pada Navigation Bar
Dropdown maupun dropup dapat ditambahkan ke dalam elemen navigation bar. Tambahkan markup pembentuk dropdown ataupun dropup setelah markup pembentuk item navigation bar.

24 Mengatur Posisi Navigation Bar
Fixed Top Navigation Bar Fixed Botton Navigation Bar

25 ... Static Top Navigation Bar

26 Responsive Navigation Bar
Navigation bar dapat dibuat 100% responsive. Untuk mengaktifkan fitur responsive navigation bar, komponen-komponen yang ingin dibuat responsive harus disatukan dalam kontainer <div> dengan class .nav-collapse dan class .collapse Pada saat kondisi collapse, Bootstrap akan menampilkan sebuat tombol yang digunakan sebagai trigger untuk menampilkan atau menyembunyikan komponen-komponen navbar.

27 Responsive Navigation Bar

28 ... Tombol trigger yang akan memacu komponen-komponen navbar yang responsive. Komponen brand: komponen ini tidak masuk dalam class .nav-collapse. Maka komponen ini tetap ditampilkan saat komponen lain disembunyikan (collapse). Komponen navbar lainnya yang masuk dalam class .nav-collapse. Komponen ini akan disembunyikan dan ditampilkan melalui tombol trigger.

29 Tugas Kelas (Waktu: 60 Menit)
Buat personal web sederhana seperti berikut: Isi bebas, kreasikan dengan materi yang sudah didapat. Buat semenarik mungkin & web harus responsive.

30 Terima Kasih 