Latest web development tutorials

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>

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>

Coba »