آموزش واکنش گرایی صفحات وب قدم آخر
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش واکنش گرایی صفحات وب قدم آخر با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
آموزش واکنش گرایی صفحات وب قدم آخر
خب دوستان ما تو این قدم میخوایم نحوه واکنش گرایی عناصر رو با تکنیک / فناوری Grid در زبان CSS یاد بگیریم ، بنده آموزش سیستم Grid رو بطور کامل در یک مطلب جداگانه ارسال کردم که ازتون خواهش میکنم از طریق لینک زیر این آموزش رو مشاهده و مطالعه نمایید ، چرا که در این بخش بصورت کلی با Grid کار میکنیم و وارد جزئیات نخواهیم شد.
برای مشاهده ویژگی های مرتبط با grid اینجا کلیک نمایید و برای مشاهده آموزش کلی و مجزای grid اینجا کلیک نمایید.
Free-Learn
استفاده از فناوری گرید یا Grid برای واکنش گرایی عناصر
برای استفاده از گرید یا Grid باید ۲ کار انجام بدیم :
- تعریف ظرف گرید ( برای نگهداری آیتم های گرید )
- تعریف آیتم های گرید ( که در ظرف گرید قرار میگیرند )
تعریف ظرف Grid
خیلی راحت با استفاده از ویژگی display میتونیم حالت نمایش grid رو روی یک تگ ایجاد کنیم.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html> <head> <style> .zarf { display: grid; } </style> </head> <body> <div class="zarf"> این میشه ظرف فلکس باکس </div> </body> </html> |
تعریف آیتم های Grid
حالا هرچی بزاریم داخل این ظرف ، میشه فرزند یا آیتمی از گرید / Grid به همین راحتی!
|
1 2 3 4 5 |
<div class="zarf"> <div class="item">آیتم 1</div> <div class="item">آیتم 2</div> <div class="item">آیتم 3</div> </div> |
Free-Learn
مثال های کاربردی از Grid
مثال شماره ۱ : طرح بندی ساده با ۴ آیتم بدون واکنش گرایی
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.zarf { display: grid; grid-template-columns: 2fr 1fr 1fr 2fr; } .item { border: solid 2px silver; padding: 5px; margin: 3px; background-color:#fff; box-shadow: 2px 5px 30px rgba(0,0,0,.1); text-align:center; } |
مثال شماره ۲ : طرح بندی ساده با ۴ آیتم + واکنش گرایی در دستگاهای مختلف با استفاده از دستور media@
|
1 2 3 4 5 6 |
@media screen and (max-width: 500px) { .zarf { grid-template-areas: 'item1' 'item2' 'item3' 'item4'; } } |
مثال شماره ۳ : طرح بندی ساده یک قالب + واکنش گرایی
|
1 2 3 4 5 |
@media screen and (max-width: 500px) { .zarf { grid-template-areas: 'header' 'seton-vasat' 'seton-chap' 'seton-rast' 'footer'; } } |
