سیستم توری
برای اساس استاندارد پیشنهادی در متریال دیزاین، ما نیز صفحه را به 12 ستون تقسیم بندی کردیم که میتوانید از آن برای نمایش درست محتوی استفاده کنید.
LTR
RTL
اندازه های یکسان
LTR
RTL
اندازه های متغییر
LTR
RTL
اندازه های هر ستون
بر اساس معیارهای متریال دیزاین، میزان 100% را به 12 قسم تقسیم کردیم و هر مقدار 12 به معنی 100% و مقدار 1 به معنی 1/12 میباشد. برای همین اگر col-1 را انتخاب کنید 1/12 و مقدار col-12 را انتخاب کنید مقدار 100% برای طول ستون انتخاب میشود.
LTR
RTL
جایگذاری ستون ها
برای تنظیم موقعیت قرارگیری ستون ها میتوانید از کلاسهای زیر یا مشابه استفاده کنید.
LTR
RTL
فضای خالی
برای ایجاد فضای خالی بین هر ستون و ردیف میتوانید از کلاسهای اندازه متصل به g- استفاده کنید.
LTR
RTL
تعیین اندازه ستون در معرفی ردیف
LTR
RTL
برای تعیین ستون ها یا ردیف ستون ها میتوانید از کلاس col-? و row-col-? استفاده کنید.
به جای علامت سوال، یکی از مقادیر روبرو را قرار دهید: 1، 2، 3، 4، 5، 6، 7، 8، 9، 10، 11، 12، auto
کلاس های مرتبط
| عنوان | شرح |
|---|---|
| d-flex | نمایش به صورت فلکس |
| justify-content-start | justify-content: flex-start |
| justify-content-end | justify-content: flex-end |
| justify-content-center | justify-content: flex-center |
| justify-content-between | justify-content: space-between |
| justify-content-around | justify-content: flex-space-around |
| justify-content-evenly | justify-content: flex-space-evenly |
| align-items-start | align-items: flex-start |
| align-items-end | align-items: flex-end |
| align-items-center | align-items: center |
| align-items-baseline | align-items: baseline |
| align-items-stretch | align-items: stretch |
| align-content-start | align-content: flex-start |
| align-content-end | align-content: flex-end |
| align-content-center | align-content: center |
| align-content-between | align-content: space-between |
| align-content-around | align-content: space-around |
| align-content-stretch | align-content: stretch |
| align-self-auto | align-self: auto |
| align-self-start | align-self: flex-start |
| align-self-end | align-self: flex-end |
| align-self-center | align-self: center |
| align-self-baseline | align-self: baseline |
| align-self-stretch | align-self: stretch |
| row | ردیف |
| col | ستون |
| col-1 یا row-col-1 | ستون 8 درصد |
| col-2 یا row-col-2 | ستون 16 درصد |
| col-3 یا row-col-3 | ستون 25 درصد |
| col-4 یا row-col-4 | ستون 33 درصد |
| col-5 یا row-col-5 | ستون 41 درصد |
| col-6 یا row-col-6 | ستون 50 درصد |
| col-7 یا row-col-7 | ستون 58 درصد |
| col-8 یا row-col-8 | ستون 66 درصد |
| col-9 یا row-col-9 | ستون 75 درصد |
| col-10 یا row-col-10 | ستون 83 درصد |
| col-11 یا row-col-11 | ستون 91 درصد |
| col-12 یا row-col-12 | ستون 100 درصد |
| col-auto یا row-col-auto | اندازه خودکار |
معرفی ستون ها در اندازه های مختلف صفحه نمایش
برای مدیریت ریسپانسیو برای آنکه ستون ها چگونه نمایش داده شوند، میتوانید از کلاسهای زیر استفاده کنید.
همانطور که در صفحه نقاط شکست توضیح داده شده است میتوانید در انتهای کلاسهای مرتبط اندازه صفحه را نیز بزنید.
| عنوان | شرح |
|---|---|
| col-1-? | ستون 1 در اندازه صفحه s,m,l,xl,xxl |
| row-col-2-? | در اندازه صفحه s,m,l,xl,xxl |
| d-none-? | عدم نمایش در اندازه صفحه s,m,l,xl,xxl |