آب و برق

  1. رابط کاربری پایه
  2. آب و برق

مرزها

از ابزارهای حاشیه برای افزودن یا حذف حاشیه های یک عنصر استفاده کنید. از بین تمام مرزها یا یکی در یک زمان انتخاب کنید.

عرض حاشیه

.border.border-1

.border.border-2

.border.border-3

.border.border-4

.border.border-5

افزودنی

.border

.border-top

.border-end

.border-bottom

.border-start

تفریق کننده

.border-0

.border-top-0

.border-end-0

.border-bottom-0

.border-start-0

رنگ حاشیه

.border-primary

.border-secondary

.border-success

.border-info

.border-warning

.border-danger

.border-dark

سبک مرزی

.border-dotted

.border-dashed

.border-groove

.border-outset

.border-ridge

.border-inset

افزودنی

.border-start-dashed

.border-top-dashed

.border-end-dashed

.border-bottom-dashed

کدورت مرزی

.border-opacity-10

.border-opacity-25

.border-opacity-50

.border-opacity-75

.border-opacity-100

شعاع مرزی

از کلاس زیر برای یک عنصر استفاده کنید تا گوشه های آن را به راحتی گرد کنید.

گرد شده

.rounded

بالا گرد

.rounded-top

انتهای گرد

.rounded-end

ته گرد

.rounded-bottom

گرد-شروع

.rounded-start

دایره گرد

.rounded-circle

بالا گرد

.rounded-top

قرص گرد

.rounded-pill

اندازه ها
گرد-0

.rounded-0

گرد-1

.rounded-1

گرد-2

.rounded-2

گرد-3

.rounded-3

گرد-4

.rounded-4

گرد-5

.rounded-5

ویژگی نمایش

از کلاس ذکر شده در زیر برای یک عنصر برای نمایش ارزش کامپوننت‌ها و موارد دیگر با ابزارهای نمایش ما استفاده کنید.

نمایش کلاس ها
ویژگی نمایش کلاس
نمایشگر: ندارد .d-none
نمایشگر: درون خطی .d-inline
صفحه نمایش: بلوک درون خطی .d-inline-block
نمایشگر: بلوک .d-block
نمایشگر: جدول .d-table
صفحه نمایش: سلول جدول .d-table-cell
نمایش: ردیف جدول .d-table-row
نمایشگر: انعطاف پذیر .d-flex
صفحه نمایش : inline-flex .d-inline-flex
پنهان کردن عناصر
اندازه صفحه نمایش کلاس
روی همه پنهان شده .d-none
فقط در xs پنهان شده است .d-none .d-sm-block
فقط در اس ام اس پنهان شده است .d-sm-none .d-md-block
پنهان فقط در md .d-md-none .d-lg-block
فقط در ال جی مخفی شده است .d-lg-none .d-xl-block
فقط در xl پنهان شده است .d-xl-none
روی همه قابل مشاهده است .d-block
فقط روی xs قابل مشاهده است .d-block .d-sm-none
فقط روی sm قابل مشاهده است .d-none .d-sm-block .d-md-none
فقط روی md قابل مشاهده است .d-none .d-md-block .d-lg-none
فقط روی lg قابل مشاهده است .d-none .d-lg-block .d-xl-none
فقط روی xl قابل مشاهده است .d-none .d-xl-block
نمایش در چاپ

مقدار نمایش عناصر را هنگام چاپ با کلاس های کاربردی صفحه نمایش چاپ ما تغییر دهید.

  • .d-print-none
  • .d-print-inline
  • .d-print-inline-block
  • .d-print-block
  • .d-print-table
  • .d-print-table-row
  • .d-print-table-cell
  • .d-print-flex
  • .d-print-inline-flex

کلاس سفارشی

از کلاس ذکر شده در زیر برای یک عنصر برای نمایش سفارشی ارزش اجزا و موارد دیگر با ابزارهای نمایش ما استفاده کنید.

اموال کلاس
font-family: 'Poppins', sans-serif; .ff-base
font-family: 'hkgrotesk', sans-serif; .ff-secondary
عرض حداقل: 80 پیکسل؛ .w-xs
حداقل عرض: 95 پیکسل؛ .w-sm
حداقل عرض: 110 پیکسل؛ .w-md
حداقل عرض: 140 پیکسل؛ .w-lg
حداقل عرض: 160 پیکسل؛ .w-xl

پشته ها - عمودی

استفاده کنید vstack کلاس برای ایجاد طرح بندی عمودی. موارد انباشته به طور پیش فرض تمام عرض هستند. استفاده کنید gap- کلاس با تنوع برای اضافه کردن فاصله بین آیتم ها.

مورد اول
مورد دوم
مورد سوم
نمونه های پشته های عمودی
 <!-- Stacks - Vertical -->
<div class="vstack gap-3">
    <div class="bg-light border p-1 px-2">First item</div>
    <div class="bg-light border p-1 px-2">Second item</div>
    <div class="bg-light border p-1 px-2">Third item</div>
</div> 

 <div class="vstack gap-2">
    <button type="button" class="btn btn-primary">Save changes</button>
    <button type="button" class="btn btn-outline-secondary">Cancel</button>
</div>

پشته ها - افقی

استفاده کنید hstack کلاس برای ایجاد طرح بندی افقی. موارد انباشته به طور پیش فرض تمام عرض هستند. استفاده کنید gap- کلاس با تنوع برای اضافه کردن فاصله بین آیتم ها.

مورد اول
مورد دوم
مورد سوم

استفاده از ابزارهای حاشیه افقی مانند ms-auto به عنوان فاصله دهنده:

مورد اول
مورد دوم
مورد سوم
مورد اول
مورد دوم
مورد سوم
نمونه های پشته های افقی
 <!-- Stacks - Horizontal -->
<div class="hstack gap-3">
    <div class="bg-light border p-1 px-2">First item</div>
    <div class="bg-light border p-1 px-2">Second item</div>
    <div class="bg-light border p-1 px-2">Third item</div>
</div> 

 <div class="hstack gap-3">
    <div class="bg-light border p-1 px-2">First item</div>
    <div class="bg-light border p-1 px-2 ms-auto">Second item</div>
    <div class="bg-light border p-1 px-2">Third item</div>
</div>

<div class="hstack gap-3">
    <div class="bg-light border p-1 px-2">First item</div>
    <div class="vr"></div>
    <div class="bg-light border p-1 px-2">Second item</div>
    
    <div class="bg-light border p-1 px-2 ms-auto">Third item</div>
</div> 

 <div class="hstack gap-3"> 
    <input class="form-control me-auto" type="text" placeholder="Add your item here...">
    <button type="button" class="btn btn-primary">Submit</button>
    <div class="vr"></div>
    <button type="button" class="btn btn-outline-secondary">Reset</button>
</div>

انتخاب متن

استفاده کنید user-select-all ، user-select-auto ، یا user-select-none کلاس به محتوایی که هنگام تعامل کاربر با آن انتخاب می شود.

این پاراگراف با کلیک کاربر به طور کامل انتخاب می شود.

این پاراگراف دارای رفتار انتخاب پیش فرض است.

این پاراگراف با کلیک کاربر قابل انتخاب نخواهد بود.

 <!-- Text Selection -->
<p class="user-select-all">This paragraph will be entirely selected when clicked by the user.</p> 

 <p class="user-select-auto">This paragraph has default select behavior.</p> 

 <p class="user-select-none mb-0">This paragraph will not be selectable when clicked by the user.</p>

رویدادهای اشاره گر

استفاده کنید pe-none کلاس برای پیشگیری و pe-auto کلاس برای افزودن فعل و انفعالات عنصر به ترتیب.

این لینکنمی توان کلیک کرد.

این لینکمی توان کلیک کرد (این رفتار پیش فرض است).

این لینکنمی توان کلیک کرد زیرا pointer-events دارایی از پدر و مادرش به ارث می رسد. با این حال،این لینکدارای یک pe-auto کلاس و قابل کلیک کردن است.

 <!-- Pointer events -->
<p><a href="#" class="text-success pe-none" tabindex="-1" aria-disabled="true">This link</a> can not be clicked.</p> 

 <p><a href="#" class="text-success pe-auto">This link</a> can be clicked (this is default behavior).</p> 

 <p class="pe-none mb-0"><a href="#" class="text-success" tabindex="-1" aria-disabled="true">This link</a> can not be clicked because the <code>pointer-events  property is inherited from its parent. However, this link has a  pe-auto  class and can be clicked.

سرریز

استفاده کنید overflow ویژگی در پرواز با چهار مقدار و کلاس پیش فرض.

سرریز خودکار
این یک نمونه از استفاده است .overflow-auto روی یک عنصر با ابعاد تعیین شده عرض و ارتفاع. با طراحی، این محتوا به صورت عمودی حرکت می کند. مشتری باید خیلی خوشحال باشد، مشتری خوبی است. بخت خوب Aenean به درد نیاز دارد. توده یاس. با شرکای متولد و پرورش یافته و
سرریز پنهان
این یک نمونه از استفاده است .overflow-hidden روی یک عنصر با ابعاد تعیین شده عرض و ارتفاع. مراقبت از بیمار مهم است که بیمار دنبالش باشد، اما این اتفاق در زمانی می افتد که کار و درد زیاد است.
سرریز قابل مشاهده است
این یک نمونه از استفاده است .overflow-visible روی یک عنصر با ابعاد تعیین شده عرض و ارتفاع.
اسکرول سرریز
این یک نمونه از استفاده است .overflow-scroll روی یک عنصر با ابعاد تعیین شده عرض و ارتفاع. مراقبت از بیمار مهم است که بیمار دنبالش باشد، اما این اتفاق در زمانی می افتد که کار و درد زیاد است.
 <!-- Overflow -->
<div class="overflow-hidden p-3 mb-0 bg-light" style="height: 100px;">
    This is an example of using <code>.overflow-hidden</code>  on an element with set width and height dimensions. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>  

 <div class="overflow-visible p-3 mb-0 bg-light" style="height: 100px;">
    This is an example of using <code>.overflow-visible</code>  on an element with set width and height dimensions.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>  

 <div class="overflow-scroll p-3 mb-0 bg-light" style="height: 100px;">
    This is an example of using <code>.overflow-scroll</code>  on an element with set width and height dimensions. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>

موقعیت

برای چیدمان آسان عناصر با ابزارهای موقعیت یاب لبه از کلاس های ذکر شده در زیر استفاده کنید. قالب {property}-{position} است.

عناصر را مرتب کنید
عناصر مرکزی
عناصر مرکزی
 <!-- Arrange elements -->
<div class="position-relative p-5 bg-light m-3 border rounded" style="height: 180px;">
    <div class="position-absolute top-0 start-0 avatar-xs bg-dark rounded"></div>
    <div class="position-absolute top-0 end-0 avatar-xs bg-dark rounded"></div>
    <div class="position-absolute top-50 start-50 avatar-xs bg-dark rounded"></div>
    <div class="position-absolute bottom-50 end-50 avatar-xs bg-dark rounded"></div>
    <div class="position-absolute bottom-0 start-0 avatar-xs bg-dark rounded"></div>
    <div class="position-absolute bottom-0 end-0 avatar-xs bg-dark rounded"></div>
</div> 

 <!-- Center elements -->
<div class="position-relative m-3 bg-light border rounded" style="height: 180px;">
    <div class="position-absolute top-0 start-0 translate-middle avatar-xs bg-dark rounded"></div>
    <div class="position-absolute top-0 start-50 translate-middle avatar-xs bg-dark rounded"></div>
    <div class="position-absolute top-0 start-100 translate-middle avatar-xs bg-dark rounded"></div>

    <div class="position-absolute top-50 start-0 translate-middle avatar-xs bg-dark rounded"></div>
    <div class="position-absolute top-50 start-50 translate-middle avatar-xs bg-dark rounded"></div>
    <div class="position-absolute top-50 start-100 translate-middle avatar-xs bg-dark rounded"></div>

    <div class="position-absolute top-100 start-0 translate-middle avatar-xs bg-dark rounded"></div>
    <div class="position-absolute top-100 start-50 translate-middle avatar-xs bg-dark rounded"></div>
    <div class="position-absolute top-100 start-100 translate-middle avatar-xs bg-dark rounded"></div>
</div> 

 <!-- Center elements -->
    <div class="position-relative m-3 bg-light border rounded" style="height: 180px;">
    <div class="position-absolute top-0 start-0 avatar-xs bg-dark rounded "></div>
    <div class="position-absolute top-0 start-50 translate-middle-x avatar-xs bg-dark rounded"></div>
    <div class="position-absolute top-0 end-0 avatar-xs bg-dark rounded"></div>

    <div class="position-absolute top-50 start-0 translate-middle-y avatar-xs bg-dark rounded"></div>
    <div class="position-absolute top-50 start-50 translate-middle avatar-xs bg-dark rounded"></div>
    <div class="position-absolute top-50 end-0 translate-middle-y avatar-xs bg-dark rounded"></div>

    <div class="position-absolute bottom-0 start-0 avatar-xs bg-dark rounded"></div>
    <div class="position-absolute bottom-0 start-50 translate-middle-x avatar-xs bg-dark rounded"></div>
    <div class="position-absolute bottom-0 end-0 avatar-xs bg-dark rounded"></div>
</div>

سایه ها

در حالی که سایه های روی کامپوننت ها به طور پیش فرض در بوت استرپ غیرفعال است و می توان از طریق آن فعال کرد $enable-shadows ، همچنین می توانید به سرعت یک سایه را با ما اضافه یا حذف کنید box-shadow کلاس های سودمند شامل پشتیبانی برای .shadow-none و سه اندازه پیش‌فرض (که دارای متغیرهای مرتبط با هم هستند).

بدون سایه
سایه کوچک
سایه منظم
سایه بزرگتر
 <!-- Shadows -->
<div class="shadow-none p-3 bg-light rounded">No shadow</div> 

 <div class="shadow-sm p-3 bg-light rounded">Small shadow</div> 

 <div class="shadow p-3 bg-light rounded">Regular shadow</div> 

 <div class="shadow-lg p-3 bg-light rounded">Larger shadow</div>

عرض

استفاده کنید w-25 ، w-50 ، w-75 ، w-100 یا w-auto کلاس برای تنظیم عرض 25% ، 50% ، 75% ، 100% ، یا auto به ترتیب به صورت پیش فرض

عرض 25%
عرض 50%
عرض 75%
عرض 100%
عرض خودکار
 <!-- Width -->
<div class="w-25 p-3 bg-light">Width 25%</div> 

 <div class="w-50 p-3 bg-light">Width 50%</div> 

 <div class="w-75 p-3 bg-light">Width 75%</div> 

 <div class="w-100 p-3 bg-light">Width 100%</div> 

 <div class="w-auto p-3 bg-light">Width auto</div>

ارتفاع

استفاده کنید h-25 ، h-50 ، h-75 ، h-100 یا h-auto کلاس برای تنظیم ارتفاع 25% ، 50% ، 75% ، 100% ، یا auto به ترتیب به صورت پیش فرض

قد 25%
قد 50%
قد 75%
قد 100%
ارتفاع خودکار
 <!-- Height -->
<div class="h-25 p-3 bg-light">Height25%</div> 

 <div class="h-50 p-3 bg-light">Height50%</div> 

 <div class="h-75 p-3 bg-light">Height75%</div> 

 <div class="h-100 p-3 bg-light">Height100%</div> 

 <div class="h-auto p-3 bg-light">Height auto</div>
© Velzon.
طراحی و توسعه توسط مرداد