سایز بندی

با ابزارهای عرض و ارتفاع خود، به راحتی یک عنصر را به عرض یا بلندی (نسبت به مادرش) بسازید.

شامل پشتیبانی از،،، 25% و 50% به 75% طور 100% پیش فرض است. کلاس ها با استفاده از فرمت {property}-{size}برای xs و {property}-{breakpoint}-{size}برای sm ،،، md و lg نامگذاری می xl شوند xxl.

اندازه گیری در بوت استرپ
عرض (نسبت به والدین)
.w-100
.w-75
.w-50
.w-25
.w-auto
<div class="bg-light text-dark p-2 border-dashed mb-3 w-100"><code>.w-100</code></div>
<div class="bg-light text-dark p-2 border-dashed mb-3 w-75"><code>.w-75</code></div>
<div class="bg-light text-dark p-2 border-dashed mb-3 w-50"><code>.w-50</code></div>
<div class="bg-light text-dark p-2 border-dashed mb-3 w-25"><code>.w-25</code></div>
<div class="bg-light text-dark p-2 border-dashed mb-3 w-auto"><code>.w-auto</code></div>
قد (نسبت به والدین)
.h-100
.h-75
.h-50
.h-25
.h-auto
<div class="vh-50 text-dark py-3">
  <div class="row h-100">
    <div class="col">
      <div class="bg-light p-2 border-dashed mb-3 h-100"><code>.h-100</code></div>
    </div>
    <div class="col">
      <div class="bg-light p-2 border-dashed mb-3 h-75"><code>.h-75</code></div>
    </div>
    <div class="col">
      <div class="bg-light p-2 border-dashed mb-3 h-50"><code>.h-50</code></div>
    </div>
    <div class="col">
      <div class="bg-light p-2 border-dashed mb-3 h-25"><code>.h-25</code></div>
    </div>
    <div class="col">
      <div class="bg-light p-2 border-dashed mb-3 h-auto"><code>.h-auto</code></div>
    </div>
  </div>
</div>
کلاس های ویژه (مرتبط با viewport)

تغییرات پاسخگو نیز برای اندازه‌بندی کلاس‌ها نسبت به viewport. در اینجا تمام کلاس های پشتیبانی آمده است:

.mw-100 { max-width: 100%; }
.min-vw-100 { min-width: 100vw; }
.vw-100 { width: 100vw; }
.max-vh-100 { max-height: 100vh; }
.max-vh-75 { max-height: 75vh; }
.max-vh-50 { max-height: 50vh; }
.max-vh-25 { max-height: 25vh; }
.min-vh-100 { min-height: 100vh; }
.min-vh-75 { min-height: 75vh; }
.min-vh-50 { min-height: 50vh; }
.min-vh-25 { min-height: 25vh; }
.vh-100 { height: 100vh !important; }
.vh-75 { height: 75vh !important; }
.vh-50 { height: 50vh !important; }
.vh-25 { height: 25vh !important; }
.max-vh-sm-100 { max-height: 100vh; }
.max-vh-sm-75 { max-height: 75vh; }
.max-vh-sm-50 { max-height: 50vh; }
.max-vh-sm-25 { max-height: 25vh; }
.min-vh-sm-100 { min-height: 100vh; }
.min-vh-sm-75 { min-height: 75vh; }
.min-vh-sm-50 { min-height: 50vh; }
.min-vh-sm-25 { min-height: 25vh; }
.vh-sm-100 { height: 100vh !important; }
.vh-sm-75 { height: 75vh !important; }
.vh-sm-50 { height: 50vh !important; }
.vh-sm-25 { height: 25vh !important; }
.max-vh-md-100 { max-height: 100vh; }
.max-vh-md-75 { max-height: 75vh; }
.max-vh-md-50 { max-height: 50vh; }
.max-vh-md-25 { max-height: 25vh; }
.min-vh-md-100 { min-height: 100vh; }
.min-vh-md-75 { min-height: 75vh; }
.min-vh-md-50 { min-height: 50vh; }
.min-vh-md-25 { min-height: 25vh; }
.vh-md-100 { height: 100vh !important; }
.vh-md-75 { height: 75vh !important; }
.vh-md-50 { height: 50vh !important; }
.vh-md-25 { height: 25vh !important; }
.max-vh-lg-100 { max-height: 100vh; }
.max-vh-lg-75 { max-height: 75vh; }
.max-vh-lg-50 { max-height: 50vh; }
.max-vh-lg-25 { max-height: 25vh; }
.min-vh-lg-100 { min-height: 100vh; }
.min-vh-lg-75 { min-height: 75vh; }
.min-vh-lg-50 { min-height: 50vh; }
.min-vh-lg-25 { min-height: 25vh; }
.vh-lg-100 { height: 100vh !important; }
.vh-lg-75 { height: 75vh !important; }
.vh-lg-50 { height: 50vh !important; }
.vh-lg-25 { height: 25vh !important; }
.max-vh-xl-100 { max-height: 100vh; }
.max-vh-xl-75 { max-height: 75vh; }
.max-vh-xl-50 { max-height: 50vh; }
.max-vh-xl-25 { max-height: 25vh; }
.min-vh-xl-100 { min-height: 100vh; }
.min-vh-xl-75 { min-height: 75vh; }
.min-vh-xl-50 { min-height: 50vh; }
.min-vh-xl-25 { min-height: 25vh; }
.vh-xl-100 { height: 100vh !important; }
.vh-xl-75 { height: 75vh !important; }
.vh-xl-50 { height: 50vh !important; }
.vh-xl-25 { height: 25vh !important; }
.max-vh-xxl-100 { max-height: 100vh; }
.max-vh-xxl-75 { max-height: 75vh; }
.max-vh-xxl-50 { max-height: 50vh; }
.max-vh-xxl-25 { max-height: 25vh; }
.min-vh-xxl-100 { min-height: 100vh; }
.min-vh-xxl-75 { min-height: 75vh; }
.min-vh-xxl-50 { min-height: 50vh; }
.min-vh-xxl-25 { min-height: 25vh; }
.vh-xxl-100 { height: 100vh !important; }
.vh-xxl-75 { height: 75vh !important; }
.vh-xxl-50 { height: 50vh !important; }
.vh-xxl-25 { height: 25vh !important; }

ممنون که با فالکون خلق کردید

نسخه 3.4.0

تنظیمات

سبک سفارشی خود را تنظیم کنید

طرح رنگ بندی

حالت رنگ مناسب را برای برنامه خود انتخاب کنید.


RTL حالت

جهت زبان خود را تغییر دهید

RTL راهنما

چیدمان سیال

سیستم چیدمان کانتینر را تغییر دهید

راهنما سیال

موقعیت ناوبری

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


سبک نوار ناوبری عمودی

برای نوار ناوبری عمودی خود بین سبک ها جابه جا شوید

دیدن راهنما

چیزی که میبینی را دوست داری؟

برای خرید قالب فالکون از راستچین اقدام کنید.

خرید
شخصی سازی