شبکه‌بندی بالای هم تا افقی

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


مثال شبکه بندی بوت استرپ ۴: (به انگلیسی: Stacked-to-horizontal)

یک سیستم شبکه‌بندی ساده ایجاد خواهیم کرد که در دستگاه‌های خیلی کوچک در ابتدا بصورت پشته ای (بالای یکدیگر) باشد، پیش از اینکه در دستگاه‌های بزرگ حالت افقی تبدیل شود.[۱]

مثال زیر یک چیدمان دو ستونهٔ «پشته ای-تا افقی» ساده را نشان می‌دهد، یعنی در همهٔ صفحه نمایش‌ها منجر به انشعاب ۵۰٪-۵۰٪ می‌شود، به جز صفحه نمایش‌های بسیار کوچک که در آنها بطور خودکار کاملاً پشته ای می‌شود (۱۰۰٪):

مثال: Stacked-to-horizontal

 1 <div class="container">
 2   <div class="row">
 3     <div class="col-sm-6 bg-success">
 4       <p>Lorem ipsum...</p>
 5     </div>
 6     <div class="col-sm-6 bg-warning">
 7       <p>Sed ut perspiciatis...</p>
 8     </div>
 9   </div>
10 </div>


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


نکته: عددها در کلاس‌های .col-sm-* نشان دهندهٔ تعداد ستون‌هایی است که در div قرار می‌گیرند (حداکثر ۱۲ تا). بنابراین .col-sm-1 یک ستون، .col-sm-4 چهار ستون، .col-sm-6 شش ستون را دربرمیگیرد و …

نکته: مطمئن شوید که مجموع کلی ستون ها همیشه حداکثر ۱۲ یا کمتر باشد (لزومی ندارد که از همهٔ ۱۲ ستون موجود استفاده کنید):
نکته: با تغییر کلاس .container به کلاس .container-fluid می‌توان هر چیدمان با عرض ثابتی (به انگلیسی: fixed-width) را به چیدمان با عرض کامل (به انگلیسی: full-width) تبدیل کنید.

مثال: Fluid container

 1 <div class="container-fluid">
 2   <div class="row">
 3     <div class="col-sm-6">
 4       <p>Lorem ipsum...</p>
 5     </div>
 6     <div class="col-sm-6">
 7       <p>Sed ut perspiciatis...</p>
 8     </div>
 9   </div>
10 </div>


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


ستون هایی با چیدمان خودکار (به انگلیسی: Auto Layout)

در بوت استرپ ۴، روش ساده‌ای برای ایجاد ستون‌هایی با عرض مساوی در همهٔ دستگاه‌ها وجود دارد: تنها باید عدد را از .col-size-* حذف کنید و فقط از کلاس .col-size با تعداد مشخصی از عناصر col استفاده کنید. بوت استرپ تشخیص خواهد داد چند ستون وجود دارد و هر ستون عرض برابر می‌گیرد.

کلاس‌های size تشخیص می‌دهند چه زمانی ستون‌ها باید واکنش‌گرا باشند:

 1 <!-- Two columns: 50% width on all screens, except for extra small (100% width) -->
 2 <div class="row">
 3   <div class="col-sm">1 of 2</div>
 4   <div class="col-sm">2 of 2</div>
 5 </div>
 6 
 7 <!-- Four columns: 25% width on all screens, except for extra small (100% width)-->
 8 <div class="row">
 9   <div class="col-sm">1 of 4</div>
10   <div class="col-sm">2 of 4</div>
11   <div class="col-sm">3 of 4</div>
12   <div class="col-sm">4 of 4</div>
13 </div>


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



منابع آموزشی