Yayasan Equalizer (Equalizer)
Kita dapat menambahkan elemen wadah data-equalizer
properti, dan menambah masing-masing sub-elemen data-equalizer-watch
properti untuk membuat equalizer tinggi identik. Unsur tertinggi menentukan ketinggian elemen lainnya.
Catatan: slider membutuhkan JavaScript. Jadi, Anda perlu menginisialisasi oundation JS:
contoh
<Div class = "row" Data -equalizer>
<Class Div = "menengah-4 kolom panel" Data-equalizer-watch>
Lorem ipsum ...
</ Div>
<Class Div = "menengah-4 kolom panel" Data-equalizer-watch>
Sed ut ...
</ Div>
<Class Div = "menengah-4 kolom panel" Data-equalizer-watch>
Lorem ipsum ...
</ Div>
</ Div>
<! - Initialize Yayasan JS ->
<Script>
$ (Dokumen) .ready (function () {
$ (Dokumen) .foundation ();
})
</ Script>
<Class Div = "menengah-4 kolom panel" Data-equalizer-watch>
Lorem ipsum ...
</ Div>
<Class Div = "menengah-4 kolom panel" Data-equalizer-watch>
Sed ut ...
</ Div>
<Class Div = "menengah-4 kolom panel" Data-equalizer-watch>
Lorem ipsum ...
</ Div>
</ Div>
<! - Initialize Yayasan JS ->
<Script>
$ (Dokumen) .ready (function () {
$ (Dokumen) .foundation ();
})
</ Script>
Coba »
Equalizer layar yang berbeda
Pada equalizer dengan menambahkan data-equalizer-mq=" value "
mq atribut set dengan tinggi yang sama untuk ukuran layar yang berbeda. Nilai dapat menjadi salah satu dari berikut:
nilai | deskripsi | contoh |
---|---|---|
medium-up | Default. Buat ketinggian wadah yang sama, lebar lebih besar dari 40.063em | |
large-up | Buat ketinggian wadah yang sama, lebar lebih besar dari 64.063em | mencoba |
xlarge-up | Buat ketinggian wadah yang sama, lebar lebih besar dari 90.063em | mencoba |
xxlarge-up | Buat ketinggian wadah yang sama, lebar lebih besar dari 120.063em | mencoba |
konten bersarang
The data-equalizer
dan data-equalizer-watch
menambahkan nilai yang sama dari properti. Hal ini dapat dihubungkan bersama untuk wadah equalizer. Berulang kali bersarang equalizer, pastikan mereka cocok:
contoh
<! - The Samakan Kontainer ->
<Div class = "row" Data -equalizer = "pertama">
<Class Div = "menengah-4 kolom">
<Div class = "panel" Data -equalizer-watch = "pertama">
<H3> Panel </ h3>
<! - Sebuah Samakan Kontainer Inside The Samakan Kontainer ->
<Div class = "row" Data -equalizer = "kedua">
<Div class = "panel" Data -equalizer-watch = "kedua">
<H3> Bersarang Panel </ h3 >
<P> Lorem ipsum ... </ p>
</ Div>
<Div class = "panel" Data -equalizer-watch = "kedua">
<H3> Bersarang Panel </ h3 >
<P> Lorem ipsum ... </ p>
</ Div>
<Div class = "panel" Data -equalizer-watch = "kedua">
<H3> Bersarang Panel </ h3 >
<P> Lorem ipsum ... </ p>
</ Div>
</ Div>
<! - End Bersarang Samakan Kontainer - >
</ Div>
</ Div>
<Class Div = "menengah-4 kolom">
<Div class = "panel" Data -equalizer-watch = "pertama">
<H3> Panel </ h3>
<P> Ut enim ... </ p>
</ Div>
</ Div>
<Class Div = "menengah-4 kolom">
<Div class = "panel" Data -equalizer-watch = "pertama">
<H3> Panel </ h3>
<P> Lorem ipsum .... </ p>
</ Div>
</ Div>
</ Div>
<Div class = "row" Data -equalizer = "pertama">
<Class Div = "menengah-4 kolom">
<Div class = "panel" Data -equalizer-watch = "pertama">
<H3> Panel </ h3>
<! - Sebuah Samakan Kontainer Inside The Samakan Kontainer ->
<Div class = "row" Data -equalizer = "kedua">
<Div class = "panel" Data -equalizer-watch = "kedua">
<H3> Bersarang Panel </ h3 >
<P> Lorem ipsum ... </ p>
</ Div>
<Div class = "panel" Data -equalizer-watch = "kedua">
<H3> Bersarang Panel </ h3 >
<P> Lorem ipsum ... </ p>
</ Div>
<Div class = "panel" Data -equalizer-watch = "kedua">
<H3> Bersarang Panel </ h3 >
<P> Lorem ipsum ... </ p>
</ Div>
</ Div>
<! - End Bersarang Samakan Kontainer - >
</ Div>
</ Div>
<Class Div = "menengah-4 kolom">
<Div class = "panel" Data -equalizer-watch = "pertama">
<H3> Panel </ h3>
<P> Ut enim ... </ p>
</ Div>
</ Div>
<Class Div = "menengah-4 kolom">
<Div class = "panel" Data -equalizer-watch = "pertama">
<H3> Panel </ h3>
<P> Lorem ipsum .... </ p>
</ Div>
</ Div>
</ Div>
Coba »