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

از ویکی کد
پرش به ناوبری پرش به جستجو
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>

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


منابع آموزشی