با آموزشی دیگر از ریسپانسیو کردن صفحات وب سایت ها در خدمت شما دانش آموختگان آنلاین هستیم, امروز میخواهیم ریسپانسیو کردن لیست های چند ستونه را به شما آموزش بدهیم, تا ببینید به چه راحتی میتوانید لیست های چند ستونه خود را ریسپانسیو کنید,البته این آموزش میتواند با ایده ای شما تکمیل شود و شما با اضافه کردن کدهای سی اس اس css بیشتر استایل های زیباتری به آن ببخشید,پس در آموزش این جلسه از ریسپانسیو کردن لیست ها با وب یار همراه باشید.
ریسپانسیو کردن لیست های چند ستونه
Responsive Multi-Column Lists
آموزش لیست ها ی چند ستونه ریسپانسیو انعطاف پذیر:
در آموزش ریسپانسیو کردن لیست ها میخواهیم ابتدا N ایتم را تعریف کنیم ,که این N ایتم در Z تعداد ستون نمایش داده خواهند شد, خب توجه کنید که تعداد این Z ستون با توجه به عرض صفحه نمیش ما width میتواند بیشتر شود و یا اینکه حتی کمتر نیز شود, پس این تغییر تعداد ستون ها در صفحه نمایش های دستگاههای گوناگون با عرض های مختلف به چه چیزی بستگی دارد؟؟؟؟
پاسخ خیلی واضح و مشخص است این تعداد ستون های گوناگون به عرض صفحه ی نمایش بستگی دارد و در صفحه نمایش های گوناگون باعرض های مختلف این تعداد ستون ها تغییر میکند و همچنین با تغییر سایز دادن صفحه ی مرورگر خود خواهید دید که چگونه تعداد ستون های صفحه نمایش شما تغیییر میکند.
کدهایHtml ریسپانسیو کردن لیست ها:
Responsive Multi-Column Lists with Flexbox
<div class=”lists”>
<div class=”list”>maryam farzinniya</div>
<div class=” list”>seyed reza</div>
<div class=” list”>Mohandes edrisi </div>
<div class=” list”>responsive list </div>
<div class=” list”>English webyar</div>
<div class=” list”>system webapplication</div>
<div class=” list”>karnoval webinig</div>
<div class=” list”>webdesign webyar</div>
خب خیلی ساده است یک لیستی از ایتم ها رو تعریف کرده ایم و چندین div پشت سر هم داریم,حالا میخواهیم ببینیم که این div بندی های پشت سر هم را چگونه سی اس اس css بدهیم که همگی آنها با تغییر عرض صفحه نمایش به درستی نمایش داده بشوند؟؟؟در فایل css خود کدهای زیر را اضافه کنید.
خب مشخصه که اگه عرض صفحه نمایش ما ۱۰۰% باشه با اختصاص دادن ۲۵% آن به این آیتم ها هر دو آیتم در یک ستون قرار میگیرند و روی هم رفته ۴ تا ستون خواهیم داشت.
حالا میتونید واسه زیبا تر به نظر رسیدن ستون هاتون و استایل بخشی بیشتر به آن ها کدهای زیر را اضافه کنید.
خب به همین راحتی یه لیست ریسپانسیو ساخته ایم,با هم با ما همراه باشید تا در ادامه پست های آموزشی ببینید که به چه راحتی سایت های شما از سایت های غیر قابل انعطاف به سایت های ریسپانسیو تبدیل میشوند.در آموزش بعدی نکاتی تکمیلی در خصوص همین لیست های ریسپانسیو به شما همراهان همیشگی و با دانش وب یار تقدیم میکنم,پس خیلی زود با یه استراحت کوتاه برید و برگردید و ادامه مطالب ریسپانسیو کردن صفحات وب را با ما باشید.
