Memanfaatkan Fungsi @media Pada Bootstrap

Halo teman – teman, selamat datang kembali di laman tips dan trik Source Code Aplikasi. Di kesempatan kali ini kita akan belajar mengenai Memanfaatkan Fungsi @media Pada Bootstrap, sebelum kita jauh melangkah kita bahas terlebih dahulu. Apa itu kegunaan @media di css..??



Ya, kegunaan @media di css lebih mengarah kepada perubahasn setiap tampilan browser. Yang artinya, kita dapat bebas menentukan pengaturan tampilan laman supaya menjadi memiliki tampilan yang dinamis. Di umumnya dengan menggunakan framework bootstrap ekan menjadikan tampilan laman kita menjadi memiliki tampilan yang dinamis namun bagi lebih detilnya kita pun mesti dapat modifikasi sendiri agar tampilan yang di hasilkan lebih sempurna. Contoh kecil nya ialah margin dan padding, di tampilan desktop padding mempunyai nilai 20px namun di tampilan tertentu padding secara default 20px pengaruh dari tampilan desktop dan di dikala tampilan tablet maupun mobile hasilnya berbeda. Dan kita mesti mensetting di seluruh tampilan, tips kali ini saya harap dapat mempermudah teman – teman pada set di seluruh tampilan denga  kegunaan @media.



Lanjut di tips mengenai Memanfaatkan Fungsi @media Pada Bootstrap, di bawah ini saya mempunyai contoh sebuah laman dengan tampilan desktop





Di dikala tampilan tablet ukurannya margin nya berbeda





Dapat teman – teman lihat di gambar di atas ini. hasil nya berbeda dengan tampilan desktop dan tablet karena di dikala tampilan desktop saya memberikan margin-top sebanyak 30 px dan di dikala tampilan tablet margin tetap mempunyai margin-top 30px all hasil berpengaruh di tampilan tablet. Nah bagi mensetting teman – teman perlu menggunkan kegunaan @media dengan cara





Menentukan tampilan dari beberapa ukuran, contoh disini saya mereset margin-top agar terlihat rapi



@media (min-width: 768px) and (max-width: 1024px){


#searchform{margin-top: 5px}


}



Dengan seperti itu di dikala tampilan tablet margin-top saya pengaturan menjadi 5px, sehingga akan memperoleh hasil yang maksiimal





Trik ini perlu di miliki oleh seorang web design, agar menghasilkan tampilan laman yang bagus.



Bagus, demikian di artikel kali ini mengenai Memanfaatkan Fungsi @media Pada Bootstrap kita berjumpa kembali di artikel yang akan datang. Tips kali ini teman – teman coba sendiri supaya lebih paham bagi pemanfaatan kegunaan @media di bootstrap. Terimakasih dan hingga jumpa.



Semoga bermanfaat



 




Sumber https://kursuswebsite.org

Popular posts from this blog

Perbedaan Antara Keyup dan Keydown Pada jQuery

Even di javascript adalah sebuah suatu yang terjadi di element tertentu, maksudnya yaitu suatu respon atau aksi yang di lakukan oleh user dimana kegiatan tersebut akan memicu jalannya script javascript yang terdapat di blog tersebut. Di javascript terdapat banyak event namun di pembahasan kali ini kita akan membahas mengenai Perbedaan Antara Keyup dan Keydown Di jQuery, Keyup adalah sebuah event yang akan di jalankan ketika tombol dilepaskan di di keyboard, dan sedangkan Keydown adalah sebuah event ketika tombol ditekan di keyboard.
Read more

Membuat Table Warna Berselang dengan PHP

Image
Selamat datang di blog Source Code Aplikasi, masih dengan File yang kemarin, tapi sekarang ini kita akan menggunakan Framework Bootstrap dan Membangun Table Warna Berselang dengan PHP, jadi jangan lupa yang kemarin praktekin dulu yah teman teman link nya yang ini . oka seketika saja kita praktekan.
Read more