آب و برق

رنگ پس زمینه

مشابه کلاس‌های رنگ متن متنی، پس‌زمینه یک عنصر را روی هر کلاس متنی تنظیم کنید. پس زمینه آب و برقتنظیم نکنیدcolor، بنابراین در برخی موارد می خواهید استفاده کنید.text-*ابزارهای رنگی

.bg-primary
.bg-ثانویه
.bg-موفقیت
.bg خطر
.bg-warning
.bg-info
.bg-صورتی
.bg-بنفش
.bg-light
.bg-dark
.bg-body
.bg-body-secondary
.bg-body-tertiary
.bg-سفید
.bg-black
.bg-transparent

رنگ گرادیان پس زمینه

با افزودن الف.bg-gradientکلاس، یک گرادیان خطی به عنوان تصویر پس زمینه به پس زمینه ها اضافه می شود. این گرادیان با یک سفید نیمه شفاف شروع می شود که به سمت پایین محو می شود.

.bg-gradient.bg-primary
.bg-secondary.bg-gradient
.bg-success.bg-gradient
.bg-danger.bg-gradient
.bg-warning.bg-gradient
.bg-info.bg-gradient
.bg-pink.bg-gradient
.bg-بنفش.bg-gradient
.bg-light.bg-gradient
.bg-dark.bg-gradient
.bg-black.bg-gradient

پس زمینه نرم

مشابه کلاس‌های رنگ متن متنی، پس‌زمینه یک عنصر را روی هر کلاس متنی تنظیم کنید. ابزارهای پس زمینه تنظیم نمی شوندcolor، بنابراین در برخی موارد می خواهید استفاده کنید.text-* ابزارهای رنگی.

.text-primary-subtle
.bg-secondary-subtle
.bg-success-subtle
.bg-danger-subtle
.bg-warning-subtle
.bg-info-subtle
.bg-pink-subtle
.bg-purple-subtle
.bg-light-subtle
.bg-dark-subtle

رنگ و پس زمینه

کمک های رنگ و پس زمینه قدرت ما را با هم ترکیب می کنند.text-*آب و برق و.bg-*آب و برق در یک کلاس با استفاده از Sass ماcolor-contrast()تابع، ما به طور خودکار یک متضاد را تعیین می کنیمcolorبرای یک خاصbackground-color.

اصلی با رنگ متضاد (text-bg-primary.)
ثانویه با رنگ متضاد (text-bg-secondary.)
موفقیت با رنگ متضاد (text-bg-success.)
خطر با رنگ متضاد (text-bg-danger.)
هشدار با رنگ متضاد (text-bg-warning.)
اطلاعات با رنگ متضاد (text-bg-info.)
نور با رنگ متضاد (text-bg-light)
تیره با رنگ متضاد (text-bg-dark.)

کدورت پس زمینه

background-colorابزارهای کمکی با Sass با استفاده از متغیرهای CSS تولید می شوند. این امکان تغییر رنگ در زمان واقعی بدون کامپایل و تغییرات شفافیت آلفای پویا را فراهم می کند.

این پس‌زمینه اولیه پیش‌فرض است
این پس‌زمینه اولیه با کدورت ۷۵ درصد است
این پس‌زمینه اولیه با کدورت 50 درصد است
این پس‌زمینه اولیه با کدورت 25 درصد است
این پس زمینه موفقیت 10 درصد کدورت است

رنگ متن

متن را با ابزارهای رنگی رنگی کنید. اگر می خواهید پیوندها را رنگی کنید، می توانید از آن استفاده کنید.link-*کلاس های کمکی که دارند:hoverو:focusایالت ها

.text-primary

متن-اولیه-تاکید

.text-secondary

.متن-ثانویه-تاکید

.text-موفقیت

.متن-موفقیت-تاکید

.متن خطر

.متن-خطر-تاکید

متن-اطلاعات

متن-اطلاعات-تاکید

.text-pink

.متن-صورتی-تاکید

متن-بنفش

متن-بنفش-تاکید

متن هشدار

.تکست-هشدار-تاکید

.text-light

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

.text-dark

.تکست-تاریک-تاکید

متن قطع شده است

.text-body

.متن-بدن-تاکید

.text-body-secondary

.text-body-tertiary

.text-black

متن-سفید

.text-black-50

.text-white-50

رنگ کدورت متن

ابزارهای رنگ متن با Sass با استفاده از متغیرهای CSS تولید می شوند. این امکان رنگ در زمان واقعی را فراهم می کند تغییرات بدون کامپایل و تغییر شفافیت آلفای پویا.

این متن اصلی پیش فرض است
این متن اصلی 75 درصد کدورت است
این متن اصلی 50 درصد کدورت است
این متن اصلی 25 درصد کدورت است

کدورت

راopacityویژگی سطح کدورت یک عنصر را تعیین می کند. سطح کدورت شفافیت را توصیف می کند سطح، جایی که1اصلا شفاف نیست.550% قابل مشاهده است و0است کاملا شفاف را تنظیم کنیدopacityیک عنصر با استفاده از.opacity-{value}آب و برق

100%
75%
50%
25%

افزودنی (افزودن) حاشیه

از ابزارهای مرزی استفاده کنیداضافه کردنمرزهای یک عنصر از بین تمام مرزها یا یکی در یک زمان انتخاب کنید.

حاشیه تفریق (حذف).

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

رنگ حاشیه

رنگ حاشیه را با استفاده از ابزارهای ساخته شده بر روی رنگ های موضوع ما تغییر دهید.

اندازه پهنای حاشیه

کدورت مرزی

از هر کدام را انتخاب کنید.border-opacityآب و برق:

این مرز موفقیت پیش‌فرض است
این مرز موفقیت 75 درصد کدورت است
این مرز موفقیت کدورت 50 درصد است
این مرز موفقیت 25 درصد کدورت است
این مرز موفقیت 10 درصد کدورت است

رنگ ظریف حاشیه

رنگ حاشیه را با استفاده از ابزارهای ساخته شده بر روی رنگ های موضوع ما تغییر دهید.

شعاع مرزی

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

گرد شدهبالا گردانتهای گردته گردگرد-شروعدایره گردقرص گرد

اندازه شعاع مرزی

از کلاس های مقیاس بندی برای گوشه های گرد بزرگتر یا کوچکتر استفاده کنید. اندازه ها از0به5.

گرد-0گرد-1گرد-2گرد-3گرد-4گرد-5

انتخاب متن

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

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

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

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

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

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

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

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

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

سرریز

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

این یک نمونه از استفاده است.overflow-autoروی یک عنصر با ابعاد تعیین شده عرض و ارتفاع. توسط طراحی، این محتوا به صورت عمودی اسکرول می شود.
این یک نمونه از استفاده است.overflow-hiddenروی یک عنصر با ابعاد تعیین شده عرض و ارتفاع.
این یک نمونه از استفاده است.overflow-visibleروی یک عنصر با ابعاد تعیین شده عرض و ارتفاع.
این یک نمونه از استفاده است.overflow-scrollروی یک عنصر با ابعاد تعیین شده عرض و ارتفاع.

موقعیت در Arrange

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

موقعیت در مرکز

علاوه بر این، می توانید عناصر را با کلاس transform utility مرکز کنید.translate-middle.

موقعیت در محور

با اضافه کردن.translate-middle-xیا.translate-middle-yطبقات، عناصر را می توان فقط در جهت افقی یا عمودی قرار داد.

سایه ها

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

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

عرض

ابزارهای Width از API ابزار در تولید می شوند_utilities.scss. شامل پشتیبانی برای25%, 50%, 75%, 100%، وautoبه طور پیش فرض اصلاح کنید این مقادیر برای تولید ابزارهای مختلف در اینجا نیاز دارید.

عرض 25%
عرض 50%
عرض 75%
عرض 100%
عرض خودکار

ارتفاع

ابزارهای ارتفاع از API ابزار در تولید می شوند_utilities.scss. شامل پشتیبانی برای25%, 50%, 75%, 100%، وautoبه طور پیش فرض اصلاح کنید این مقادیر برای تولید ابزارهای مختلف در اینجا نیاز دارید.

قد 25%
ارتفاع 50%
ارتفاع 75%
ارتفاع 100%
ارتفاع خودکار

تناسب شی

مقدار را تغییر دهیدobject-fitداراییبا پاسخگوی ماobject-fitکلاس های سودمند این ویژگی به محتوا می‌گوید که محفظه اصلی را به روش‌های مختلفی پر کند، مانند حفظ نسبت ابعاد یا کشش برای اشغال فضای بیشتر.

...

.object-fit-contain

...

.object-fit-cover

...

.object-fit-fill

...

.object-fit-scale

...

.object-fit-none

تناسب شی

مقدار را تغییر دهیدobject-fitداراییبا پاسخگوی ماobject-fitکلاس های سودمند این ویژگی به محتوا می‌گوید که محفظه اصلی را به روش‌های مختلفی پر کند، مانند حفظ نسبت ابعاد یا کشش برای اشغال فضای بیشتر.

تنظیمات تم
طرح رنگ
نور
تاریک
حالت چیدمان
مایع
جعبه دار
رنگ نوار بالای صفحه
نور
تاریک
رنگ منو
نور
تاریک
موقعیت چیدمان