مثال‌های شبکه‌بندی

از ویکی‌کد
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Bootstarp4-menu.png
موارد آموزشی
شبکه‌بندی
۱سیستم شبکه‌بندی
۲stacked/افقی
۳شبکه‌بندی خیلی‌کوچک
۴شبکه‌بندی کوچک
۵شبکه‌بندی متوسط
۶شبکه‌بندی بزرگ
۷شبکه‌بندی خیلی‌بزرگ
۸مثال‌های شبکه‌بندی
Theme
مرجع


در ادامه چند مثال از چیدمان‌های شبکه ای بوت استرپ بیان می‌کنیم.[۱]

سه ستون برابر

از کلاس .col روی تعداد مشخصی از عنصرها استفاده کنید و بوت استرپ تشخیص می‌دهد چند عنصر وجود دارد (و سه ستون با عرض برابر تولید می‌کند). در مثال زیر، از سه عنصر col استفاده می‌کنیم که هرکدام عرض ۳۳٫۳۳٪ می‌گیرند.

مثال

1 <div class="row">
2   <div class="col">col</div>
3   <div class="col">col</div>
4   <div class="col">col</div>
5 </div>

مشاهدهٔ نتیجه


سه ستون برابر با استفاده از اعداد

می‌توانید با از عددها برای کنترل عرض ستون‌ها استفاده کنید. فقط مطمئن شوید که مجموع ستون‌ها حداکثر ۱۲ یا کمتر شود (لزومی ندارد از همهٔ ۱۲ ستون موجود استفاده کنید):

مثال

1 <div class="row">
2   <div class="col-4">col-4</div>
3   <div class="col-4">col-4</div>
4   <div class="col-4">col-4</div>
5 </div>

مشاهدهٔ نتیجه


سه ستون نا برابر

برای ایجاد ستون‌های نابرابر، باید از عددها استفاده کنید. مثال زیر یک تقسیم‌بندی ۲۵٪-۵۰٪-۲۵٪ را ایجاد می‌کند:

مثال

1 <div class="row">
2   <div class="col-3">col-3</div>
3   <div class="col-6">col-6</div>
4   <div class="col-3">col-3</div>
5 </div>

مشاهدهٔ نتیجه


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

با این حال، کافیست تنها عرض یک ستون را تنظیم کنید و ستون برادر آن را بطور خودکار در اطراف آن تغییر سایز می‌دهد. مثال زیر یک تقسیم‌بندی ۲۵٪-۵۰٪-۲۵٪ را تولید می‌کند:

مثال

1 <div class="row">
2   <div class="col">col</div>
3   <div class="col-6">col-6</div>
4   <div class="col">col</div>
5 </div>

مشاهدهٔ نتیجه


ستون‌های برابر بیشتر

مثال

 1 <!-- Two equal columns -->
 2 <div class="row">
 3   <div class="col">1 of 2</div>
 4   <div class="col">2 of 2</div>
 5 </div>
 6 
 7 <!-- Four equal columns -->
 8 <div class="row">
 9   <div class="col">1 of 4</div>
10   <div class="col">2 of 4</div>
11   <div class="col">3 of 4</div>
12   <div class="col">4 of 4</div>
13 </div>
14 
15 <!-- Six equal columns -->
16 <div class="row">
17   <div class="col">1 of 6</div>
18   <div class="col">2 of 6</div>
19   <div class="col">3 of 6</div>
20   <div class="col">4 of 6</div>  
21   <div class="col">5 of 6</div>
22   <div class="col">6 of 6</div>
23 </div>

مشاهدهٔ نتیجه


ستون‌های ردیف

با کلاس‌های .row-cols-* می‌توان کنترل کرد که چه تعداد ستون درکنار هم نمایش داده شوند (بدون توجه به تعداد Colها):

مثال

 1 <div class="row row-cols-1">
 2   <div class="col">1 of 2</div>
 3   <div class="col">2 of 2</div>
 4 </div>
 5 
 6 <div class="row row-cols-2">
 7   <div class="col">1 of 4</div>
 8   <div class="col">2 of 4</div>
 9   <div class="col">3 of 4</div>
10   <div class="col">4 of 4</div>
11 </div>
12 
13 <div class="row row-cols-3">
14   <div class="col">1 of 6</div>
15   <div class="col">2 of 6</div>
16   <div class="col">3 of 6</div>
17   <div class="col">4 of 6</div>  
18   <div class="col">5 of 6</div>
19   <div class="col">6 of 6</div>
20 </div>

مشاهدهٔ نتیجه


ستون‌های نابرابر بیشتر

مثال

 1 <!-- Two Unequal Columns -->
 2 <div class="row">
 3   <div class="col-8">1 of 2</div>
 4   <div class="col-4">2 of 2</div>
 5 </div>
 6 
 7 <!-- Four Unequal Columns -->
 8 <div class="row">
 9   <div class="col-2">1 of 4</div>
10   <div class="col-2">2 of 4</div>
11   <div class="col-2">3 of 4</div>
12   <div class="col-6">4 of 4</div>
13 </div>
14 
15 <!-- Setting two column widths -->
16 <div class="row">
17   <div class="col-4">1 of 4</div>
18   <div class="col-6">2 of 4</div>
19   <div class="col">3 of 4</div>
20   <div class="col">4 of 4</div>
21 </div>

مشاهدهٔ نتیجه


ارتفاع برابر

اگر یکی از ستون‌ها بلندتر از دیگر ستون‌ها باشد (بخاطر متن یا ارتفاع CSS)، مابقی ستون‌ها از آن پیروی می‌کنند (ارتفاعشان افزایش می‌یابد تا با ستون بلندتر برابر شود):

مثال

1 <div class="row">
2   <div class="col">Lorem ipsum...</div>
3   <div class="col">col</div>
4   <div class="col">col</div>
5 </div>

مشاهدهٔ نتیجه


ستون‌های تودرتو

مثال زیر نحوه ایجاد چیدمان دو ستون، با دو ستون دیگر در داخل یکی از آنها نشان می‌دهد:

مثال

 1 <div class="row">
 2   <div class="col-8">
 3     .col-8
 4     <div class="row">
 5       <div class="col-6">.col-6</div>
 6       <div class="col-6">.col-6</div>
 7     </div>
 8   </div>
 9   <div class="col-4">.col-4</div>
10 </div>

مشاهدهٔ نتیجه


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

بوت استرپ 4 پنج کلاس شبکه بندی واکنش گرا دارد:

  • .col- (دستگاه‌های خیلی کوچک - عرض صفحه کمتر از ۵۷۶ پیکسل باشد)
  • .col-sm- (دستگاه‌های کوچک - عرض صفحه برابر با ۵۷۶ پیکسل یا بزرگتر باشد)
  • .col-md- (دستگاه هایی با سایز متوسط - عرض صفحه نمایش برابر با ۷۶۸ پیکسل یا بیشتر باشد)
  • .col-lg- (دستگاه‌های بزرگ - عرض صفحه برابر با ۹۹۲ پیکسل یا بیشتر باشد)
  • .col-xl- (دستگاه‌های خیلی بزرگ - عرض صفحه برابر با ۱۲۰۰ پیکسل یا بیشتر باشد)

کلاس‌های بالا را می‌توان ترکیب کرد تا چیدمان پویاتر یا منعطف تری ایجاد شود.

نکته: هر کلاس را می‌توان افزایش مقیاس داد، بنابراین در صورتیکه برای sm و md عرض‌های مشابهی تنظیم شود، تنها لازم است sm را مشخص کرد.

Stacked تا افقی

مثال زیر نحوه ایجاد چیدمان ستون‌ها را نشان می‌دهد که از حالت stacked (ستون‌ها بالای یکدیگر) در دستگاه‌های خیلی کوچک آغاز می‌شود، پیش از آنکه در دستگاه‌های بزرگتر به شکل افقی تبدیل شود (sm, md, lg و xl):

مثال

1 <div class="row">
2   <div class="col-sm-9">col-sm-9</div>
3   <div class="col-sm-3">col-sm-3</div>
4 </div>
5 <div class="row">
6   <div class="col-sm">col-sm</div>
7   <div class="col-sm">col-sm</div>
8   <div class="col-sm">col-sm</div>
9 </div>

مشاهدهٔ نتیجه


ترکیب و تطبیق (به انگلیسی: Mix and Match)

مثال

 1 <!-- 50%/50% split on extra small devices and 75%/25% split on larger devices -->
 2 <div class="row">
 3   <div class="col-6 col-sm-9">col-6 col-sm-9</div>
 4   <div class="col-6 col-sm-3">col-6 col-sm-3</div>
 5 </div>
 6 
 7 <!-- 58%/42% split on extra small, small and medium devices and 66.3%/33.3% split on large and xlarge devices -->
 8 <div class="row">
 9   <div class="col-7 col-lg-8">col-7 col-lg-8</div>
10   <div class="col-5 col-lg-4">col-5 col-lg-4</div>
11 </div>
12 
13 <!-- 25%/75% split on small devices, a 50%/50% split on medium devices, and a 33%/66% split on large and xlarge devices. On extra small devices, it will automatically stack (100%) -->
14 <div class="row">
15   <div class="col-sm-3 col-md-6 col-lg-4">col-sm-3 col-md-6 col-lg-4</div>
16   <div class="col-sm-9 col-md-6 col-lg-8">col-sm-9 col-md-6 col-lg-8</div>
17 </div>

مشاهدهٔ نتیجه


حذف Gutterها (فاصلهٔ بین محتوای ستون‌ها)

کلاس .no-gutters را به ظرف .row اضافه کنید تا gutterها (فاصله‌های اضافی) حذف شوند:

مثال

<div class="row no-gutters">

مشاهدهٔ نتیجه


منابع آموزشی