این آموزش در تاریخ ۱۴۰۰/۱۰/۲۴ آپدیت شده است.
آموزش واکنش گرایی صفحات وب قدم چهارم
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش واکنش گرایی صفحات وب قدم چهارم با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
آموزش واکنش گرایی صفحات وب قدم چهارم
خب دوستان ما تو این جلسه میخوایم نحوه طراحی و استفاده از حالت نمایش گرید ( یا هم بهش میگن حالت نمایش شبکه ای ) رو یاد بگیریم ، هم اینکه خودمون طراحیش کنیم و هم اینکه چجوری ازش استفاده کنیم.
درصد زیادی از وبسایت های موجود در دنیا ( بیش از ۸۰ درصد ) ، بر پایه حالت نمایش گرید / شبکه طراحی شده اند و این یعنی یک صفحه رو به تعداد ستون های مشخص تقسیم میکنند بعدش عناصر را در این ستون ها قرار میدهند.
Free-Learn
نمای گرید یا Grid View چیست؟
خب همونطور که گفتم ما با استفاده از این نمای گرید میتونیم صفحه مون رو به تعداد ستون های دلخواه تقسیم کنیم و بعدش به راحتی از این ستون های ایجاد شده استفاده نماییم.
یعنی خیلی راحت میتونیم یک سطر از صفحه رو به چندین ستون تقسیم کنیم، بعدش تو هرستون که دوس داشتیم هر محتوایی قرار بدیم، مثلا میتونیم بگیم ۲تا ستون باشه، یکی ۷۰درصد و دیگری ۳۰درصد و…
فرض میکنیم صفحه مون رو میخوایم به ۴ ستون و هر ستون رو به ۲۵% تقسیم کنیم ، پس میایم چنتا کلاس بصورت زیر تعریف میکنیم :
|
1 2 3 4 |
.col-25 { width: 25%; } .col-50 { width: 50%; } .col-75 { width: 75%; } .col-100 { width: 100%; } |
حالا اگه من بخوام ۲ ستون در صفحه داشته باشم که یکیش ۲۵ درصد باشه و یکی دیگه ۷۵ درصد ، خیلی راحت میام و از کلاس های col-25 و col-75 استفاده میکنم، به همین سادگی و تموم شد رفت ، یا مثلا میخواید ۲ ستون باشه و هر کدوم ۵۰% ، خب خیلی راحت از ۲ تا کلاس col-50 استفاده کنید.
Free-Learn
نحوه طراحی و استفاده از نمای گرید
- مرحله اول
خب برای ایجاد یک طرح بندی بر اساس گرید، اولین کاری که باید کنیم استفاده از ویژگی box-sizing می باشد، برای اینکه بتونیم اندازه های padding و border رو از اندازه های width و height یک عنصر تفکیک کنیم.
حتما جریان مدل باکس در CSS رو مشاهده و مطالعه نمایید.
پس اول box-sizing رو در قسمت CSS صفحه اضافه میکنیم :
|
1 2 3 |
* { box-sizing: border-box; } |
- مرحله دوم
حال میایم و ستون هامون رو تعریف میکنیم، مثلا میخوایم ۱۲ ستون داشته باشیم پس ۱۰۰ رو تقسیم بر ۱۲ که کنیم میشه ۸٫۳۳۳% ، یعنی ستون اولمون اندازش میشه ۸٫۳۳۳% حالا همین ۸٫۳۳۳% رو ضرب در ۲ کنیم میشه ۱۶٫۶۶۶% پس ستون دومم میشه ۱۶٫۶۶۶% و….
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.seton-8 {width: 8.333%;} .seton-16 {width: 16.666%;} .seton-25 {width: 25%;} .seton-33 {width: 33.333%;} .seton-41 {width: 41.666%;} .seton-50 {width: 50%;} .seton-58 {width: 58.333%;} .seton-66 {width: 66.666%;} .seton-75 {width: 75%;} .seton-83 {width: 83.333%;} .seton-91 {width: 91.666%;} .seton-100 {width: 100%;} |
- مرحله سوم
حالا میایم و یه ظرف ( یا ردیف یا Row ) برای نگهداری ستون ها ایجاد میکنیم، چون قراره ستون ها شنارو ( فلوت یا Float ) بشن پس حتما باید از دستورات زیر استفاده نماییم تا از سَرریزشدن عناصر جلوگیری بشه »
|
1 2 3 4 5 |
.row::after { content: ""; clear: both; display: table; } |
- مرحله چهارم
در نهایت میایم و به ستون هایی که تعریف کردیم برای اینکه بتونن کنار همدیگه قرار بگیرند فلوت ( Float ) میدیم و با استفاده از انتخابگر صفت گفتیم تمامی تگ هایی که صفت class دارند و مقدار این صفت شامل کلمه seton هست همگی رو به سمت چپ شناور کن.
|
1 2 3 4 5 |
[class*="seton-"] { float: left; padding: 10px; border: 2px solid #f2f2f2; } |
و در آخر ستون هامون رو با استفاده از ویژگی media@ واکنش گرا میکنیم، یعنی میخوایم ستون ها در گوشی موبایل یا در کل در صفحه نمایش های کوچکتر بیوفتن زیر هم.
|
1 2 3 4 5 6 7 8 9 |
/* وقتی اندازه صفحه کمتر از 500 پیکسل شد */ @media only screen and (max-width:500px) { [class*="seton-"] { float: none; width:100%; } } |
و تمام ، حالا بریم تا از ستون ها استفاده کنیم ، باید اول یه ردیف ( row ) ایجاد کنیم بعدش داخل این ردیف ستون هامون رو قرار بدیم.
کد کامل :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<body> <div class="row"> <div class="seton-8">8.33%</div> <div class="seton-8">8.33%</div> <div class="seton-8">8.33%</div> <div class="seton-8">8.33%</div> <div class="seton-8">8.33%</div> <div class="seton-8">8.33%</div> <div class="seton-8">8.33%</div> <div class="seton-8">8.33%</div> <div class="seton-8">8.33%</div> <div class="seton-8">8.33%</div> <div class="seton-8">8.33%</div> <div class="seton-8">8.33%</div> </div> <div class="row"> <div class="seton-8">8.33%</div> <div class="seton-16">16.66%</div> <div class="seton-25">25%</div> <div class="seton-33">33.33%</div> <div class="seton-16">16.66%</div> </div> <div class="row"> <div class="seton-25">25%</div> <div class="seton-25">25%</div> <div class="seton-25">25%</div> <div class="seton-25">25%</div> </div> <div class="row"> <div class="seton-50">50%</div> <div class="seton-50">50%</div> </div> <div class="row"> <div class="seton-25">25%</div> <div class="seton-75">75%</div> </div> </body> |
Free-Learn
مثال های مختلف از نمای گرید
مثال شماره ۱ : ایجاد گالری تصویر + واکنش گرایی با استفاده از دستور media@
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div class="row"> <div class="seton-33"> <img src="files/img_galleri_1.jpg"> </div> <div class="seton-33"> <img src="files/img_galleri_2.jpg"> </div> <div class="seton-33"> <img src="files/img_galleri_3.jpg"> </div> </div> |
مثال شماره ۲ : طرح بندی ساده یک قالب + واکنش گرایی با استفاده از دستور media@
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<body> <div class="row"> <div class="seton-100">هدر</div> </div> <div class="row"> <div class="seton-16">لوگو</div> <div class="seton-83">منو</div> </div> <div class="row"> <div class="seton-25">ستون راست</div> <div class="seton-50">ستون وسط</div> <div class="seton-25">ستون چپ</div> </div> <div class="row"> <div class="seton-100"> <div>فوتر</div> <div class="seton-33">فوتر - ستون 1</div> <div class="seton-33">فوتر - ستون 2</div> <div class="seton-33">فوتر - ستون 3</div> </div> </div> </body> |
