شبکه

  1. رابط کاربری پایه
  2. شبکه

گزینه های شبکه

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

xs
<576 پیکسل 		اس ام
≥576 پیکسل 		md
≥768 پیکسل 		ال جی
≥992 پیکسل 		xl
≥1200 پیکسل 		xxl
≥1400 پیکسل
رفتار شبکه افقی در همه زمان ها برای شروع جمع شد، افقی بالای نقاط شکست
حداکثر عرض ظرف هیچکدام (خودکار) 540 پیکسل 720 عدد 960 عدد 1140 پیکسل 1320 پیکسل
پیشوند کلاس col- col-sm- col-md- col-lg- col-xl- col-xxl-
# ستون 12
عرض ناودان 1.5 ريم (0.75 ريم در هر طرف ستون)
ناودان سفارشی بله
تودرتو بله
افست بله
ترتیب ستون بله

تراز عمودی (align-item-start)

استفاده کنید align-items-start کلاس برای تراز عمودی آیتم ها در شروع.

col-sm-4
col-sm-4
col-sm-4
 <!-- Vertical alignment (align-items-start) -->
<div class="row align-items-start">
    <div class="col-sm-4">
        ...
    </div>
    <div class="col-sm-4">
        ...
    </div>
    <div class="col-sm-4">
        ...
    </div>
</div>

تراز عمودی (align-item-center)

استفاده کنید align-items-center کلاس برای تراز عمودی موارد در مرکز.

col-sm-4
col-sm-4
col-sm-4
 <!-- Vertical alignment (align-items-center) -->
<div class="row align-items-center">
    <div class="col-sm-4">
        ...
    </div>
    <div class="col-sm-4">
        ...
    </div>
    <div class="col-sm-4">
        ...
    </div>
</div>

تراز عمودی (align-item-end)

استفاده کنید align-items-end کلاس به تراز عمودی آیتم ها در پایان.

col-sm-4
col-sm-4
col-sm-4
 <!-- Vertical alignment (align-items-end) -->
<div class="row align-items-end">
    <div class="col-sm-4">
        ...
    </div>
    <div class="col-sm-4">
        ...
    </div>
    <div class="col-sm-4">
        ...
    </div>
</div>

خود را تراز کنید

استفاده کنید align-self-start ، align-self-center ، یا align-self-end کلاس به ترتیب برای تراز عمودی موارد با موقعیت متفاوت.

تراز خود شروع
تراز خود مرکزی
خود پایان دادن
 <!-- Align Self -->
<div class="row">
    <div class="col-sm-4 align-self-start">
        ...
    </div>
    <div class="col-sm-4 align-self-center">
        ...
    </div>
    <div class="col-sm-4 align-self-end">
        ...
    </div>
</div>

تراز افقی

استفاده کنید justify-content-start ، justify-content-center ، یا justify-content-end کلاس به ترتیب برای تراز افقی موارد با موقعیت متفاوت.

توجیه-محتوا-شروع
justify-content-center
توجیه-محتوا-پایان
 <!-- Horizontal Alignment -->
<div class="row justify-content-start">
    <div class="col-sm-4">
        ...
    </div>
</div> 
 <div class="row justify-content-center">
    <div class="col-sm-4">
        ...
    </div>
</div> 
 <div class="row justify-content-end">
    <div class="col-sm-4">
        ...
    </div>
</div>
© Velzon.
طراحی و توسعه توسط مرداد