Cara Menampilkan Elemen Berdasarkan Ukuran Layar Menggunakan Foundation

Menampilkan Elemen Berdasarkan Ukuran Layar

Class yang digunakan untuk menampilkan elemen hampir sama dengan menyembunyikan elemen, tinggal ganti kata hide menjadi show. Misalnya, class .hide-for-large-only akan menyembunyikan elemen hanya pada ukuran layar besar, jika diganti .show-for-large-only maka akan menampilkan elemen hanya pada layar besar.

Skrip show by size.html

<p class="panel">

        <strong class="show-for-small-only">Teks ini akan tampil pada 

                    layar small .</strong>

        <strong class="show-for-medium-up"Teks ini akan tampil pada 

                    layar medium, large, xlarge, atau xxlarge .</ strong>

        <strong class="show-for-medium-only">Teks ini akan tampil pada 

                    layar medium .</strong>

        <strong class="show-for-large-up">Teks ini akan tampil pada 

                    layar large, xlarge, atau xxlarge .  </strong>

        <strong class="show-for-large-only">Teks ini akan tampil 

                    pada layar large .</strong>

        <strong class="show-for-xlarge-up">Teks ini akan tampil 

                    pada layar xlarge dan yang lebih besar.</strong>

        <strong class="show-for-xlarge-only">Teks ini akan tampil 

                    pada layar xlarge .</strong>

        <strong class="show-for-xxlarge-up">Teks ini akan tampil 

                    pada layar an xxlarge .</strong>

</p>

Baca Juga: Seperti Inilah Cara Menyembunyikan Elemen Dari Ukuran Layar Di Foundation!

Jika diperhatikan pada skrip html di atas, teks yang tampil hanya yang memiliki class.show-for-medium-up,. show-for-large-up dan .show-for-large-only.

Share :