Pengembangan Aplikasi Framework Bootstrap Button Image Navigation Ramos

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

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.

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

. . . • 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.

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.

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.

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>

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.

. . . • 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.

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

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

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

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

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

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

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

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

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.

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

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.

Mengatur Posisi Navigation Bar • Fixed Top Navigation Bar • Fixed Botton Navigation Bar

. . . • Static Top Navigation Bar

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.

Responsive Navigation Bar

. . . • Tombol trigger yang akan memacu 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 ditampilkan melalui tombol trigger.

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.

Terima Kasih