Kelompok tombol memungkinkan beberapa tombol untuk ditumpuk pada baris yang sama. Bila Anda ingin menyelaraskan tombol bersama-sama, yang sangat membantu. Anda dapat Bootstrap tombol (Button) plug-in untuk menambahkan JavaScript kotak centang dan kotak gaya perilaku opsional. Tabel berikut merangkum beberapa Bootstrap kelas penting menggunakan tombol-tombol yang disediakan oleh grup: Class描述代码示例.btn-group该 class 用于形成基本的按钮组。在.btn-group中放置一系列带有 class.btn的按钮。.btn-toolbar该 class 有助于把几组 结合到一个 中，一般获得更复杂的组件。 .btn-group-lg, .btn-group-sm, .btn-group-xs这些 class 可应用到整个按钮组的大小调整，而不需要对每个按钮进行大小调整。 .btn-group-vertical该 class 让一组按钮垂直堆叠显示，而不是水平堆叠显示。
Kelompok dasar tombolContoh berikut menunjukkan tabel di atas untuk membahas penggunaankelas .btn-kelompok: contohTombol 1tombol 2tombol 3 Coba » Hasilnya adalah sebagai berikut:  Tombol pada toolbarContoh berikut menunjukkan tabel di atas dibahas dikelas .btn-toolbar untuk menggunakan: contohTombol 1tombol 2tombol 3 tombol 4Tombol 5tombol 6 tombol 7tombol 8tombol 9 Coba » Hasilnya adalah sebagai berikut: Ukuran tombolContoh berikut menunjukkan di atas meja diskusi untukkelas .btn-kelompok-* Gunakan: contohTombol 1tombol 2tombol 3 tombol 4Tombol 5tombol 6 tombol 7tombol 8tombol 9 Coba » Hasilnya adalah sebagai berikut: nestingAnda dapat sarang lain tombol kelompok tombol dalam suatu kelompok, yaitu, dalam sarang.btn-kelompok lain .btn-kelompok.Bila Anda menggunakan kombinasi dari serangkaian tombol dan menu drop-down untuk membuat, ini akan digunakan. Bootstrap adalah sebuah framework yang bersifat open source. Bootstrap adalah sebuah framework yang digunakan untuk membuat sebuah website dinamis dengan menggunakan bahasa script CSS. Bootstrap dapat membantu developer dan designer dalam membuat sebuah tampilan website dengan cepat dan mudah tanpa harus membuatnya dari awal. B. Penjelasan Alerts 1. Alerts Links Digunakan untuk mengatur alert agar di dalam alerts tersebut dapat disertakan sebuah link. Untuk menggunakannya cukup menambahkan komponen <a> di alerts tersebut dan lalu komponen <a> tersebut di tambahkan class .alerts-link. 2. Closing Alerts Digunakan agar kita dapat menutup / menclose alerts, dengan menggunakan ini, di dalam alerts yang kita buat akan muncul tombol (x) atau close. Untuk menggunakan ini, kita harus menambahkan class .alerts-dismissable di komponen alerts,setelah itu buat sebuah tombol lalu tambahkan class=”close” dan data-dismiss=”alerts”. 3. Animated Alerts Digunakan untuk membuat animasi agar ketika kita menutup alerts tersebut, alerts tersebut tidak langsung menghilang namun akan terdapat efek menghilang. Untuk menggunakan ini kita harus menambah class .fade dan .show di komponen alerts. Agar lebih paham tentang konsep alerts, lihatlah contoh penggunaan berikut : Buttons Gaya – gaya tombol di bootstarp
Menggunakan pengaturan bottom dapat di aplikasikan di <a>, <button>, dan <input>. 2. Button Outline. Adalah pengaturan outline untuk tombol. Komponen button group sama dengan komponen button style. 3. Button Size Digunakan untuk mengatur ukuran dari tombol. Digunakan dengan cara menambahkan class btn-lg (besar) dan btn-sm (kecil). 4. Block Level Button Digunakan untuk mengatur tombol agar lebarnya menyesuaikan lebar layar. 5. Active / Disabled Button Digunakan untuk mengatur tombol aktif atau dimatikan. Contoh Penggunaan : Button Group Button groups digunakan untuk menggabungkan beberapa tombol menjadi satu tombol. Cara menggunakan button groups yaitu dengan membuat <div> lalu ditambahkan class .btn-group . Di sini juga kamu dapat mengatur ukuran dari button groups yang kamu buat, dengan cara menambahkan class btn-group-lg (besar) , btn-group-sm (kecil), atau btn-group-xs (sangat kecil). 1. Vertical Button Group Di sini kamu juga dapat membuat tombol menyatu secara horizontal. Dengan cara mengganti class menjadi .btn-group-vertical. |
Kelas apa yang digunakan dalam bootstrap untuk mengelompokkan button dalam button group
Pos Terkait
Copyright © 2024 kemunculan Inc.
