Halo teman – teman selamat datang kembali di kursus website online seputar tips dan trik Dumet School, berjumpa kembali dengan saya pada pembahasan seputar dunia website. Pada kesempatan kali ini saya akan memberikan tips tentang Cara Memberbedakan Isi Website Pada Setiap Device dimana latihan kali ini kita akan belajar untuk membuat isi atau konten di dalam website menggunakan bootstrap 4 anggaplah misalnya text dan text tersebut dapat kita ubah – ubah color,backgorund ataupun padding dapat kita sesuaikan.
Baik langsung saja kita implementasikan Cara Memberbedakan Isi Website Pada Setiap Device teman – teman siapkan text editornya dan download bootstrapnya terlebih dahulu. Kemudian kita buat struktur htmlnya seperti gambar di bawah ini
|
1 2 3 4 5 6 7 |
<div class="container"> <div class="row"> <div class="col-md-12"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> </div> </div> |
Kemudian save dengan nama index.html, maka hasilnya seperti gambar di bawah ini
Bisa teman – teman lihat pada detail grid system bootstrap 4, kita akan set pada setiap device dengan menggunakan @media query css. Teman – teman kursus website online bisa ketikkan script di bawah ini untuk cssnya
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
/*mobile*/ @media (min-width: 320px) and (max-width: 575px) { p{color: red !important} } /*tablet*/ @media (min-width: 576px) and (max-width: 768px){ p{color: green !important} } @media (min-width: 769px) and (max-width: 800px){ p{color: gray !important} } /*desktop*/ @media (min-width: 769px) and (max-width: 992px){ p{color: orange !important} } /*screen large*/ @media (min-width: 993px) and (max-width: 1200px){ p{color: tomato !important; font-weight: bold} } /*xl*/ @media (min-width: 1201px){ p{color: yellow !important; } } |
Jika sudah save dan jalankan pada browsernya, hasilnya seperti gambar di bawah ini
Pada ukuran di atas 1200 (>1202) maka color akan berubah menjadi yellow
Kemudian pada saat ukuran maximal 1200 maka akan berubah menjadi warna tomato
Ukura di bawah 992 juga akan berbeda warna colornya, begitupun pada setiap device yang terkecil, nah itulah tips tentang Cara Memberbedakan Isi Website Pada Setiap Device.
Mau belajar lebih detail bisa mengikuti kelas di Belajar Website Online dari Dumet School. Semoga artikel ini dapat bermanfaat dan dapat kita gunakan untuk membuat tampilan yang indah.
Terimakasih dan sampai jumpa.