۲۴
مرداد

جلسه ۳۶ : سیستم شبکه بندی Extra Small در Bootstrap 4

دسته‌بندی‌ها :

جزئیات
نوع محتواآموزش تصویری

فهرست

مقدمه

با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره آموزش Bootstrap 4 ، را دنبال می کنند.تاکنون با کلیات سیستم Grid در Bootstrap 4 ، آشنا شدید. محور اصلی مبحث این بخش و مباحث کلی فصل جاری، بررسی کلاسهای سیستم شبکه بندی در Bootstrap 4 ، خواهد بود. که در آموزش این بخش، با بررسی سیستم شبکه بندی Extra Small در Bootstrap 4 آغاز می کنیم.

سیستم شبکه بندی Extra Small در Bootstrap 4

فرض کنید ما یک طرح ساده با دو ستون داریم. ما می خواهیم که ستونها با عرض ۲۵٪ و ۷۵٪ برای همه دستگاه ها، تنظیم شود.

نکته: دستگاههای با عرض صفحه نمایش بین

کد تقسیم بندی فوق، بصورت زیر خواهد بود:

مثال :

<div class="col-3">....</div>
<div class="col-9">....</div>

1 2	<div class="col-3">....</div> <div class="col-9">....</div>

کد بالا در Bootstrap 4، دو عنصر با عرض های ۲۵٪ و ۷۵٪ در یک سطر نمایش می دهد:

سیستم شبکه بندی Extra Small در Bootstrap 4

مثال:

مثال :

<div class="container-fluid">
  <div class="row">
    <div class="col-3 bg-success">
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-9 bg-warning">
      <p>Sed ut perspiciatis...</p>
    </div>
  </div>
</div>

<p>Lorem ipsum...</p>

</div>

<p>Sed ut perspiciatis...</p>

</div>

توجه: اطمینان حاصل کنید که اعداد جمع شده تا ۱۲ یا کمتر باشد (لازم نیست از تمام ۱۲ ستون موجود استفاده کنید):

مثال:

عرض های ۳۳٫۳%و ۶۶٫۶% (کلاس های .col-4 و.col-8)که مجموعا از ۱۰۰% و عرض کامل ۱۲ ستون بیشتر نمی شود.

سیستم شبکه بندی Extra Small در Bootstrap 4

مثال:

مثال :

<!-- 33.3%/66.6% split -->
<div class="container-fluid">
  <div class="row">
    <div class="col-4 bg-success">
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-8 bg-warning">
      <p>Sed ut perspiciatis...</p>
    </div>
  </div>
</div>

<!-- 50%/50% split -->
<div class="container-fluid">
  <div class="row">
    <div class="col-6 bg-success">
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-6 bg-warning">
      <p>Sed ut perspiciatis...</p>
    </div>
  </div>
</div>

<p>Lorem ipsum...</p>

</div>

<p>Sed ut perspiciatis...</p>

</div>

<p>Lorem ipsum...</p>

</div>

<p>Sed ut perspiciatis...</p>

</div>

تنظیم خودکار عرض ستونها

در Bootstrap 4، یک راه آسان برای ایجاد ستون های عرض برابر برای همه دستگاه ها وجود دارد:

در زمان استفاده از سری کلاسهای .col-size-* عدد قسمت تعیین عرض را حذف کنید. و از این عدد فقط زمانیکه تعداد عناصر مشخص باشد استفاده کنید:

مثال :

<!-- Two columns: 50% width-->
<div class="row">
  <div class="col">1 of 2</div>
  <div class="col">2 of 2</div>
</div>

<!-- Four columns: 25% width-->
<div class="row">
  <div class="col">1 of 4</div>
  <div class="col">2 of 4</div>
  <div class="col">3 of 4</div>
  <div class="col">4 of 4</div>
</div>

</div>

</div>

چیدمان خودکار ستون ها

کلام آخر

در مرور مباحث آموزش سیستم شبکه بندی Extra Small در Bootstrap 4 ، شما را با یکی از کلاسهای سیستم شبکه بندی بوت استرپ، آشنا کردیم، امیدواریم که از آموزش فوق، بهره ی لازم را برده باشید.

QR: جلسه ۳۶ : سیستم شبکه بندی Extra Small در Bootstrap 4

به اشتراک بگذارید

دیدگاه کاربران

تعداد دیدگاه : 0

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۳۶ : سیستم شبکه بندی Extra Small در Bootstrap 4

مقدمه

سیستم شبکه بندی Extra Small در Bootstrap 4

تنظیم خودکار عرض ستونها

کلام آخر

لیست مطالب دوره

آموزش بوت استرپ 4

سیستم شبکه بندی در Bootstrap 4

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ