هلپرها توضیح هدر در این قسمت قرار دارد...
خط ها
از ابزارهای خط برای استایل سریع حاشیه و شعاع حاشیه یک عنصر استفاده کنید. برای تصاویر، دکمه ها یا هر عنصر دیگری عالی است. لطفا. مستندات رسمی برای لیست کامل گزینه ها را بخوانید.
<!-- additive example -->
<span class="border"></span>
<!-- subtractive example -->
<span class="border-0"></span>
<!-- border color example -->
<span class="border border-primary"></span>گوشه گرد
کلاس ها را به یک عنصر اضافه کنید تا به راحتی گوشه های خود را گرد کنید. لطفا مستندات رسمی برای لیست کامل گزینه ها بخوانید.
<!-- border-radius example -->
<img src="" alt="" class="rounded" />
<!-- border-radius sizes example -->
<img src="" alt="" class="rounded-sm" />
رنگ متن
معنی را از طریق رنگ با تعداد انگشت شماری از کلاس های ابزار رنگی انتقال دهید.شامل پشتیبانی از لینک های یک ظاهر طراحی شده با حالت های شناور نیز می شود.لطفا مستندات رسمی برای لیست کامل گزینه ها را بخوانید.
<!-- example -->
<p class="text-theme"></p>رنگ متن شفاف
ما در حال حاضر متن شفاف از 10٪ تا 90٪ شفاف پشتیبانی می کنیم.همچنین برای هر کلاس
متن دیگر نیز قابل استفاده است .text-teal-transparent-*.
<!-- example -->
<p class="text-theme text-opacity-50"></p>رنگ پشت زمینه
شبیه به کلاس های رنگ متن متنی، به راحتی پس زمینه یک عنصر را به هر کلاس متنی تنظیم
کنید.کامپوننت های انکر، درست مانند کلاس های متن، تاریک می شوند.پس زمینه
خدماترنگ را تنظیم نکنید,بنابراین در برخی موارد شما می خواهید استفاده کنید
.text-* امکانات . لطفا مستندات رسمی برای لیست کامل گزینه ها بخوانید.
<!-- example -->
<div class="bg-primary w-30px h-30px rounded"></div>رنگ گرادیانت پس زمینه
ما هر گرادیانت رنگی را بر اساس متغیر رنگ تعریف شده در فایل های سی اس اس ایجاد
کرده ایم /scss/_variables.scss.شما می توانید کد رنگ و کلاس بیشتری
را که می خواهید نیز اضافه کنید.
<!-- example -->
<div class="bg-gradient-primary w-30px h-30px rounded"></div>رنگ پس زمینه گرادیانت فانتزی
ما گرادیانت خطی مختلفی را براساس متغیر رنگی که ما داریم، ایجاد کرده ایم.شما ممکن
است ترکیب بیشتری را اضافه کنید/css/app.css
<!-- example -->
<div class="bg-gradient-orange-red w-30px h-30px rounded "></div>ویژگی های نمایش
با ابزارهای نمایشگر ما به سرعت و پاسخگو ارزش نمایش اجزا و موارد دیگر را تغییر دهید. شامل پشتیبانی از برخی از مقادیر رایج تر، و همچنین برخی موارد اضافی برای کنترل نمایشگر هنگام چاپ می شود. لطفا مستندات رسمی برای لیست کامل گزینه ها بخوانید.
نمایش کلاس های ابزاری که برای همه نقاط شکست اعمال می شوند، از
xs تا xl.به همین ترتیب، کلاس ها با استفاده از
فرمت نامگذاری شده اند:
.d-{value}برایxs.d-{breakpoint}-{value}برایsm,md,lg, وxl.
جایی که {value} از موارد زیر است:
noneinlineinline-blockblockمیزمیز-cellمیز-rowflexinline-flex
<!-- example -->
<div class="d-none d-md-block"></div>ریتیو
از عناصر شبه تولید شده استفاده کنید تا یک عنصر نسبت ابعاد انتخابی شما را حفظ کند. ایده آل برای مدیریت پاسخگو ویدیو یا جاسازی های نمایش اسلاید بر اساس عرض والد. لطفاً بخوانیدمستندات رسمی برای لیست کامل گزینه ها بخوانید.
برای مدیریت نسبت ابعاد محتوای خارجی مانند کمک کننده نسبت استفاده کنید
<iframe>ها, <embed>ها,
<video>ها, و <object>. این
کمک‌کننده‌ها همچنین می‌توانند روی هر عنصر فرزند استاندارد HTML (به عنوان
مثال، یک <div> or <img>).سبک ها از
والدین استفاده می شود .ratio کلاس به طور مستقیم به فرزند.
<!-- example -->
<div class="ratio ratio-16x9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/3Kf-FlECN7M?rel=0" allowfullscreen></iframe>
</div>فلکس
به سرعت طرح بندی، تراز کردن و اندازه گیری ستون های شبکه، ناوبری، اجزای، و موارد دیگر را با یک مجموعه کامل از نرم افزار فلکس باکس پاسخگو مدیریت کنید.برای پیاده سازی پیچیده تر، سی اس اس سفارشی ممکن است ضروری باشد.لطفا مستندات رسمی برای لیست کامل گزینه ها را بخوانید.
| فلکس | تراز کردن | پر / بزرگ / پیچیدن |
|---|---|---|
.d-flex.d-inline-flex.d-sm-flex.d-sm-inline-flex.d-md-flex.d-md-inline-flex.d-lg-flex.d-lg-inline-flex.d-xl-flex.d-xl-inline-flex |
.align-items-start.align-items-end.align-items-center.align-items-baseline.align-items-stretch.align-self-start.align-self-end.align-self-center.align-self-baseline.align-self-stretch.align-content-start.align-content-end.align-content-center.align-content-between.align-content-around.align-content-stretch |
.flex-fill.flex-grow-0.flex-shrink-0.flex-nowrap.flex-wrap.flex-wrap-reverse.order-{1|2|3|4|5|6
|
<!-- example -->
<div class="d-flex align-items-center">
<div class="flex-fill"></div>
</div>فلوت / موقعیت/ اورفلو
با استفاده از ابزارهای شناور پاسخگو، شناورها را روی هر عنصر، در هر نقطه شکست، تغییر دهید.
| فلوت | موقعیت | اورفلو |
|---|---|---|
.float-start.float-sm-start.float-md-start.float-lg-start.float-xl-start.float-end.float-sm-end.float-md-end.float-lg-end.float-xl-end.float-none.float-sm-none.float-md-none.float-lg-none.float-xl-none |
.position-static.position-relative.position-absolute.position-fixed.position-sticky.fixed-top.fixed-bottom.desktop-sticky-top.top-0.end-0.bottom-0.start-0.top-auto.end-auto.bottom-auto.start-auto |
.overflow-auto.overflow-hidden |
سایه
سایه ها را به عناصر با نرم افزار Box-Shadow اضافه یا حذف کنید. لطفا مستندات رسمی برای لیست کامل گزینه ها بخوانید.
<!-- example -->
<div class="shadow-none"></div>عرض و ارتفاع
با ابزارهای عرض و ارتفاع خود، به راحتی یک عنصر به عرض یا بلندی بسازید. لطفاً بخوانید مستندات رسمی برای لیست کامل گزینه ها بخوانید.
| عرض | ارتفاع |
|---|---|
.w-25.w-50.w-75.w-100.w-auto.ms-100.w-{10|20|30|40|50}px.w-{60|70|80|50|90|100}px.w-{100|150|200|250|300|350}px.w-{400|450|500|550|600}px |
.h-25.h-50.h-75.h-100.h-auto.mh-100.h-{10|20|30|40|50}px.h-{60|70|80|50|90|100}px.h-{100|150|200|250|300|350}px.h-{400|450|500|550|600}px |
<!-- example -->
<img src="" class="ms-100 mh-100" />مارجین و پدینگ
بوت استرپ شامل طیف گسترده ای از کلاس های کاربردی مارجین و پدینگ پاسخگو برای تغییر ظاهر یک عنصر است. لطفاً بخوانید مستندات رسمی برای لیست کامل گزینه ها بخوانید.
| مارجین | پدینگ |
|---|---|
.mt-{1|2|3|4|5}.me-{1|2|3|4|5}.mb-{1|2|3|4|5}.ms-{1|2|3|4|5}.mx-{1|2|3|4|5}.my-{1|2|3|4|5}.mt-{1~20}px.me-{1~20}px.mb-{1~20}px.ms-{1~20}px |
.pt-{1|2|3|4|5}.pe-{1|2|3|4|5}.pb-{1|2|3|4|5}.ps-{1|2|3|4|5}.px-{1|2|3|4|5}.py-{1|2|3|4|5}.pt-{1~20}px.pe-{1~20}px.pb-{1~20}px.ps-{1~20}px |
<!-- example -->
<div class="me-3"></div>متن
مستندات و نمونه هایی برای ابزارهای متنی رایج برای کنترل تراز، بسته بندی، وزن و موارد دیگر. لطفاً بخوانیدمستندات رسمی برای لیست کامل گزینه ها بخوانید.
| چیدمان و دکوراسیون | بستن و تبدیل | سبک فونت |
|---|---|---|
.text-justify.text-start.text-center.text-end.text-reset.text-decoration-none.text-decoration-underline.text-gradient.line-height-1 |
.text-wrap.text-nowrap.text-truncate.text-break.text-lowercase.text-uppercase.text-capitalize |
.fw-bold.fw-bolder.fw-normal.fw-light.fw-lighter.fst-italic.fw-100.fw-200.fw-300.fw-400.fw-500.fw-600.fw-700.fw-800 |
<!-- example -->
<div class="fw-bold"></div>شفافیت / دید / تراز عمودی
با استفاده از ابزارهای بوت استرپ، دید، شفافیت و تراز عمودی را کنترل کنید. لطفاً بخوانید مستندات رسمی برای لیست کامل گزینه ها بخوانید.
| شفافیت | دید، | تراز عمودی |
|---|---|---|
.opacity-10.opacity-9.opacity-8.opacity-7.opacity-6.opacity-5.opacity-4.opacity-3.opacity-2.opacity-1.opacity-0 |
.visible.invisible |
.align-baseline.align-top.align-middle.align-bottom.align-text-top.align-text-bottom |
<!-- example -->
<div class="opacity-5"></div>