اختیارات سایزبندی

سیستم توری بوت استرپ از یک سری دربرگیرنده، سطر و ستون برای طرح بندی محتوا استفاده می کند. این سیستم توسط flexbox ساخته شده و کامکلا واکنشگرا می باشد. قسمت زیر یک نمونه و نگاه عمیق به نحوه کار سیستم توری است.

هرچند بوت استرپ از em یا remبرای تعریف اکثر اندازه ها استفاده میکند، از pxبرای تعریف نقاط تغییر سیستم توری و اندازه دربرگیرنده ها استفاده میکند. چرا که اندازه viewport بر اساس پیکسل بوده و وابسته به اندازه فونت نیست.

نحوه کار سیستم توری بوت استرپ در دستگاه ها و اندازه های مختلف را در جدول زیر مشاهده می کنید.

خیلی کوچک
<576px
کوچک
≥576px
متوسط
≥768px
بزرگ
≥992px
خیلی بزرگ
≥1200px
حداکثر عرض Container None (خودکار) 540px 720px 960px 1140px
پیشوند کلاس .col- .col-sm- .col-md- .col-lg- .col-xl-
تعداد ستون ها 12
عرض فاصله 15px (از هر طرف 7.5px)
قابلیت استفاده تو در تو بله
مرتب سازی ستون ها بله

ستون های Auto-layout

Utilize breakpoint-specific column classes for easy column sizing without an explicit numbered class like .col-sm-6.

عرض برابر

برای مثال، دو طرح توری در زیر آمده اند که به هر دستگاه و viewport اعمال میشوند، از xs به xl. به هر تعداد دلخواه کلاس بدون واحد breakpoint ها اضافه کنید، تمامی ستون ها با عرض یکسان خواهند بود.

1 از 2
2 از 2
1 از 3
2 از 3
3 از 3
							
								<div class="container">
								  <div class="row">
								    <div class="col">
								      1 of 2
								    </div>
								    <div class="col">
								      2 of 2
								    </div>
								  </div>
								  <div class="row">
								    <div class="col">
								      1 of 3
								    </div>
								    <div class="col">
								      2 of 3
								    </div>
								    <div class="col">
								      3 of 3
								    </div>
								  </div>
								</div>
							
						

تنظیم عرض یک ستون

Auto-layout for flexbox grid columns also means you can set the width of one column and have the sibling columns automatically resize around it. You may use predefined grid classes (as shown below), grid mixins, or inline widths. Note that the other columns will resize no matter the width of the center column.

1 از 3
2 از 3 (عریض تر)
3 از 3
1 از 3
2 از 3 (عریض تر)
3 از 3
							
								<div class="container">
								  <div class="row">
								    <div class="col">
								      1 of 3
								    </div>
								    <div class="col-6">
								      2 of 3 (wider)
								    </div>
								    <div class="col">
								      3 of 3
								    </div>
								  </div>
								  <div class="row">
								    <div class="col">
								      1 of 3
								    </div>
								    <div class="col-5">
								      2 of 3 (wider)
								    </div>
								    <div class="col">
								      3 of 3
								    </div>
								  </div>
								</div>
							
						

محتوای با عرض متغیر

از col-{breakpoint}-auto برای اندازه دهی ستون ها بر اساس عرض محتوای آن ها استفاده کنید.

1 از 3
محتوای با عرض متغیر
3 از 3
1 از 3
محتوای با عرض متغیر
3 از 3
							
								<div class="container">
								  <div class="row justify-content-md-center">
								    <div class="col col-lg-2">
								      1 of 3
								    </div>
								    <div class="col-md-auto">
								      Variable width content
								    </div>
								    <div class="col col-lg-2">
								      3 of 3
								    </div>
								  </div>
								  <div class="row">
								    <div class="col">
								      1 of 3
								    </div>
								    <div class="col-md-auto">
								      Variable width content
								    </div>
								    <div class="col col-lg-2">
								      3 of 3
								    </div>
								  </div>
								</div>
							
						

کلاس های واکنش گرا

توری بوت استرپ، دارای پنج رده از کلاس های از پیش تعریف شده برای ساختن طرح های واکنش گرای پیچیده می باشد. اندازه ستون هایتان را برای دستگاه های خیلی کوچک، کوچک، متوسط، بزرگ و خیلی بزرگ بر اساس نیازتان تنظیم کنید.

انباشته شدن افقی

آیا نمیخواهید اندازه ستون هایتان تنها مختص یک رده باشد؟ از ترکیبی از کلاس ها برای هر رده بر اساس نیازتان استفاده کنید. مثال زیر را برای درک بهتر این مفهوم مشاهده نمایید.

.col-12 .col-md-8
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6
.col-6
							
							<!-- Stack the columns on mobile by making one full-width and the other half-width -->
							<div class="row">
							  <div class="col-12 col-md-8">.col-12 .col-md-8</div>
							  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
							</div>

							<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
							<div class="row">
							  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
							  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
							  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
							</div>

							<!-- Columns are always 50% wide, on mobile and desktop -->
							<div class="row">
							  <div class="col-6">.col-6</div>
							  <div class="col-6">.col-6</div>
							</div>
							
						

تراز

از ابزارهای تراز flexbox برای تراز عمودی و افقی ستون ها استفاده کنید.

تراز عمودی

یکی از سه ستون
یکی از سه ستون
یکی از سه ستون
یکی از سه ستون
یکی از سه ستون
یکی از سه ستون
یکی از سه ستون
یکی از سه ستون
یکی از سه ستون
							
							<div class="container">
							  <div class="row align-items-start">
							    <div class="col">
							      One of three columns
							    </div>
							    <div class="col">
							      One of three columns
							    </div>
							    <div class="col">
							      One of three columns
							    </div>
							  </div>
							  <div class="row align-items-center">
							    <div class="col">
							      One of three columns
							    </div>
							    <div class="col">
							      One of three columns
							    </div>
							    <div class="col">
							      One of three columns
							    </div>
							  </div>
							  <div class="row align-items-end">
							    <div class="col">
							      One of three columns
							    </div>
							    <div class="col">
							      One of three columns
							    </div>
							    <div class="col">
							      One of three columns
							    </div>
							  </div>
							</div>
							
						

تراز افقی

یکی از دو ستون
یکی از دو ستون
یکی از دو ستون
یکی از دو ستون
یکی از دو ستون
یکی از دو ستون
یکی از دو ستون
یکی از دو ستون
یکی از دو ستون
یکی از دو ستون
							
								<div class="container">
								  <div class="row justify-content-start">
								    <div class="col-4">
								      One of two columns
								    </div>
								    <div class="col-4">
								      One of two columns
								    </div>
								  </div>
								  <div class="row justify-content-center">
								    <div class="col-4">
								      One of two columns
								    </div>
								    <div class="col-4">
								      One of two columns
								    </div>
								  </div>
								  <div class="row justify-content-end">
								    <div class="col-4">
								      One of two columns
								    </div>
								    <div class="col-4">
								      One of two columns
								    </div>
								  </div>
								  <div class="row justify-content-around">
								    <div class="col-4">
								      One of two columns
								    </div>
								    <div class="col-4">
								      One of two columns
								    </div>
								  </div>
								  <div class="row justify-content-between">
								    <div class="col-4">
								      One of two columns
								    </div>
								    <div class="col-4">
								      One of two columns
								    </div>
								  </div>
								</div>
							
						

بدون فاصله

فاصله بین ستون ها در کلاس های توری از پیش تعریف شده می توانند توسط کلاس .no-guttersحذف شوند. این کلاس marginهای منفی را از .row و padding افقی را از تمام فرزندان مستقیم آن حذف می کند.

در زیر سورس کد مربوط به این طرح را مشاهده می کنید. توجه داشته باشید که تغییر فاصله ستون ها تنها به ستون های فرزند درجه اول اعمال می شوند که توسط attribute selector انتخاب می شوند. هرچند این یک انتخابگر به خصوص ایجاد میکند اما فاصله داخلی ستون ها میتواند از طریق ابزار فاصله دهی سفارشی سازی شود.

آیا یک طراحی گوشه به گوشه نیاز دارید؟ در برگیرنده .container یا .container-fluid را حذف کنید.

							
								.no-gutters {
								  margin-right: 0;
								  margin-left: 0;
								}
								.no-gutters > .col,
								.no-gutters > [class*="col-"] {
								  padding-right: 0;
								  padding-left: 0;
								}
							
						

در عمل، نحوه نمایش آن اینگونه است. به یاد داشته باشید که همچنان میتوانید این کلاس را به همراه سایر کلاس های توری از پیش تعریف شده استفاده کنید (شامل اندازه های ستون ها، رده های واکنش گرایی، ترتیب دهی ها و ...)

.col-12 .col-sm-6 .col-md-8
.col-6 .col-md-4
							
								<div class="row no-gutters">
								  <div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div>
								  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
								</div>
							
						

شکستن ستون

شکستن ستون ها به یک سطر جدید در flexbox نیازمند یک ترفند کوچک است: یک المان با width: 100% در جایی که میخواهید ستون ها از یک سطر جدید شروع شوند اضافه کنید. به طور معمول این حالت در هنگام استفاده از چند .rowبه دست می آید، اما این روش هم در جای خود کاربرد دارد.

.col-6 .col-sm-3
.col-6 .col-sm-3
.col-6 .col-sm-3
.col-6 .col-sm-3
							
								<div class="row">
								  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
								  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>

								  <!-- Force next columns to break to new line -->
								  <div class="w-100"></div>

								  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
								  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
								</div>
							
						

کلاس های ترتیب دهی

از .order- برای کنترل ترتیب نمایش محتوایتان استفاده کنید. این کلاس ها واکنشگرا هستند، بنابراین میتوانید order را بر اساس breakpoint تنظیم کنید. (برای مثال .order-1.order-md-2). برای پشتیبانی از 1 تا 12 در میان همه پنج رده توری کاربرد دارد.

اولین، ولی بدون ترتیب
دومین، ولی آخرین
سومین، ولی اولین
							
								<div class="container">
								  <div class="row">
								    <div class="col">
								      First, but unordered
								    </div>
								    <div class="col order-12">
								      Second, but last
								    </div>
								    <div class="col order-1">
								      Third, but first
								    </div>
								  </div>
								</div>
							
						

همچنین یک کلاس واکنش گرای .order-first وجود دارد که به طور سریع ترتیب یک المان را با اضافه کردن order: -1تغییر می دهد. اینکلاس همچنین قابل ترکیب با کلاس شماره دار .order-* بر اساس نیاز می باشد.

اولین، ولی بدون ترتیب
دومین، ولی بدون ترتیب
سومین، ولی اولین
							
								<div class="container">
								  <div class="row">
								    <div class="col">
								      First, but unordered
								    </div>
								    <div class="col">
								      Second, but unordered
								    </div>
								    <div class="col order-first">
								      Third, but first
								    </div>
								  </div>
								</div>
							
						

جا به جایی ستون ها

ستون های توری را به دو روش میتوانید جا به جا کنید: کلاس های واکنش گرای .offset- و ابزارهای margin. کلاس های توری طوری اندازه دهی شده اند که برابر با ستون ها باشند در حالی که margin ها برای طرح های سریع که عرض فاصله متغیر باشد مناسب هستند.

کلاس های فاصله

ستون ها را با استفاده از کلاس های .offset-md-* به سمت چپ جا به جا کنید. این کلاس ها فاصله از راست یک ستون را به اندازه * ستون افزایش میدهند. برای مثال، .offset-md-4 ستون .col-md-4 را به اندازه چهار ستون جا به جا می کند.

.col-md-4
.col-md-4 .offset-md-4
.col-md-3 .offset-md-3
.col-md-3 .offset-md-3
.col-md-6 .offset-md-3
							
								<div class="row">
								  <div class="col-md-4">.col-md-4</div>
								  <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
								</div>
								<div class="row">
								  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
								  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
								</div>
								<div class="row">
								  <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
								</div>
							
						

ابزارهای margin

شما میتوانید از ابزارهای margin مانند .mr-auto برای اجبار به فاصله المان ها از یکدیگر استفاده کنید.

.col-md-4
.col-md-4 .ml-auto
.col-md-3 .ml-md-auto
.col-md-3 .ml-md-auto
.col-auto .mr-auto
.col-auto
							
								<div class="row">
								  <div class="col-md-4">.col-md-4</div>
								  <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
								</div>
								<div class="row">
								  <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
								  <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
								</div>
								<div class="row">
								  <div class="col-auto mr-auto">.col-auto .mr-auto</div>
								  <div class="col-auto">.col-auto</div>
								</div>
							
						

سفارشی سازی قالب

سفارشی سازی کنید و به صورت زنده مشاهده کنید.
طرح قالب

رنگ های فهرست

جمع کردن فهرست

رنگ های نوار بالایی
نکته : این گزینه تنها در حالت نوار ثابت و در هنگام اسکرول صفحه نمایش داده خواهد شد.
نوع نوار بالایی

نوع فوتر

سایه کارت

مخفی سازی دکمه اسکرول به بالا
ارتباط با ما
امروز

لورم ایپسوم متن ساختگی

7:45 ق.ظ

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم

7:50 ق.ظ

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ

8:01 ق.ظ