Yayasan Tombol Grup

tombol Grup

Yayasan dapat membuat serangkaian tombol di baris yang sama.

Anda dapat menggunakan <ul> elemen dan menambahkan .button-group kelas untuk membuat grup tombol:

contoh

<Class Ul = "tombol-kelompok ">
<Li> <jenis tombol = " tombol" class = "button"> Apel </ button> </ li>
<Li> <jenis tombol = " tombol" class = "button"> Samsung </ button> </ li>
<Li> <jenis tombol = " tombol" class = "button"> Sony </ button> </ li>
</ Ul>

Coba »

Kelompok tombol vertikal

Vertikal kelompok tombol penggunaan .stack kelas untuk membuat. Perhatikan bahwa tombol meliputi seluruh lebar dari elemen induk:

contoh

<Class Ul = "tombol-kelompok stack">
<Li> <jenis tombol = " tombol" class = "button"> Apel </ button> </ li>
<Li> <jenis tombol = " tombol" class = "button"> Samsung </ button> </ li>
<Li> <jenis tombol = " tombol" class = "button"> Sony </ button> </ li>
</ Ul>

Coba »

.stack-for-small kelas untuk ukuran kecil dari layar, ada tombol disusun secara horizontal menjadi vertical alignment:

contoh

<Ul class = "tombol-kelompok tumpukan-untuk-kecil">
<Li> <jenis tombol = " tombol" class = "button"> Apel </ button> </ li>
<Li> <jenis tombol = " tombol" class = "button"> Samsung </ button> </ li>
<Li> <jenis tombol = " tombol" class = "button"> Sony </ button> </ li>
</ Ul>

Coba »

Kelompok tombol bulat

Tombol digunakan kelompok .radius dan .round tombol kelas untuk menambahkan sudut dibulatkan:

contoh

<Class Ul = "tombol-kelompok radius">
<Li> <jenis tombol = " tombol" class = "button"> Apel </ button> </ li>
<Li> <jenis tombol = " tombol" class = "button"> Samsung </ button> </ li>
<Li> <jenis tombol = " tombol" class = "button"> Sony </ button> </ li>
</ Ul>

<Class Ul = "tombol-kelompok bulat">
<Li> <jenis tombol = " tombol" class = "button"> Apel </ button> </ li>
<Li> <jenis tombol = " tombol" class = "button"> Samsung </ button> </ li>
<Li> <jenis tombol = " tombol" class = "button"> Sony </ button> </ li>
</ Ul>

Coba »

Kelompok tombol ekstensi seragam

.even-num kelas seluas tombol kelompok tombol dan distribusi seragam di seluruh lebar elemen induk dari 100%.

num adalah jumlah tombol pada kelompok tombol, 1-8:

contoh

<Ul class = "tombol-kelompok bahkan-3">
<Li> <jenis tombol = " tombol" class = "button"> Apel </ button> </ li>
<Li> <jenis tombol = " tombol" class = "button"> Samsung </ button> </ li>
<Li> <jenis tombol = " tombol" class = "button"> Sony </ button> </ li>
</ Ul>

<Ul class = "tombol-kelompok bahkan-5">
<Li> <jenis tombol = " tombol" class = "button"> Apel </ button> </ li>
<Li> <jenis tombol = " tombol" class = "button"> Samsung </ button> </ li>
<Li> <jenis tombol = " tombol" class = "button"> Sony </ button> </ li>
<Li> <button type = " button" class = "button"> HTC </ button> </ li>
<Li> <jenis tombol = " tombol" class = "button"> Huawei </ button> </ li>
</ Ul>

<Ul class = "tombol-kelompok bahkan-8">
<Li> <jenis tombol = " tombol" class = "button"> A </ button> </ li>
<Li> <jenis tombol = " tombol" class = "button"> B </ button> </ li>
<Li> <jenis tombol = " tombol" class = "button"> C </ button> </ li>
<Li> <jenis tombol = " tombol" class = "button"> D </ button> </ li>
<Li> <button type = " button" class = "button"> E </ button> </ li>
<Li> <jenis tombol = " tombol" class = "button"> F </ button> </ li>
<Li> <jenis tombol = " tombol" class = "button"> G </ button> </ li>
<Li> <jenis tombol = " tombol" class = "button"> H </ button> </ li>
</ Ul>

Coba »

tombol drop-down

Drop-down tombol menu memungkinkan pengguna untuk memilih nilai yang baik set:

contoh

<! - Memicu dropdown ->
<A Href = "#" Data -dropdown = "id01" class = "button dropdown"> Dropdown Tombol </ a>

<! - Sebenarnya dropdown ->
<Ul id = "ID01" Data -dropdown-konten class = "f-dropdown">
<Li> <a href = "#"> Link 1 </ a> </ li>
<Li> <a href = "#"> Link 2 </ a> </ li>
<Li> <a href = "#"> Link 3 </ a> </ li>
</ Ul>

<! - Initialize Yayasan JS ->
<Script>
$ (Dokumen) .ready (function () {
$ (Dokumen) .foundation ();
})
</ Script>

Coba »

Contoh analisis

.dropdown kelas untuk membuat tombol menu drop-down.

Gunakan dengan data-dropdown=" id " tombol atribut atau link untuk membuka menu drop-down.

nilai id harus sesuai dengan isi (ID01) menu pull-down.

Dalam <ul> Add di .f-dropdown kelas dan data-dropdown-content atribut untuk membuat menu drop-down konten.

inisialisasi Yayasan terakhir JS.

tombol perpecahan

Kami juga dapat membuat menu drop-down tombol perpecahan ini. Hanya Anda perlu menambahkan tombol .split kelas dan menggunakan elemen span untuk menghasilkan tombol arah panah:

contoh

<Tombol class = "tombol split" > Tombol Berpisah
<Span Data-dropdown = "ID01 "> </ span>
</ Tombol>

<Ul id = "ID01" Data -dropdown-konten class = "f-dropdown">
<Li> <a href = "#"> Link 1 </ a> </ li>
<Li> <a href = "#"> Link 2 </ a> </ li>
<Li> <a href = "#"> Link 3 </ a> </ li>
</ Ul>

<! - Initialize Yayasan JS ->
<Script>
$ (Dokumen) .ready (function () {
$ (Dokumen) .foundation ();
})
</ Script>

Coba »