برنامه

رنگ پس زمینه

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

.bg-primary

.bg-secondary

.bg-success

.bg-danger

.bg-warning

.bg-info

.bg-light

.bg-dark

.bg-body

.bg-body-secondary

.bg-body-tertiary

.bg-white

.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-light.bg-gradient

.bg-dark.bg-gradient

.bg-black.bg-gradient

پس زمینه روشن

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

.bg-primary-subtle

.bg-secondary-subtle

.bg-success-subtle

.bg-danger-subtle

.bg-warning-subtle

.bg-info-subtle

.bg-light-subtle

.bg-dark-subtle

رنگ و پس زمینه

یاران رنگ و پس زمینه قدرت ما را ترکیب می کنند .text-* آب و برق و .bg-* برنامه های کاربردی در یک کلاس.با استفاده از ماس ما color-contrast() function, ما به طور خودکار تعیین می کنیم متضاد 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)

پیوندهای رنگی

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

اصلی لینک ثانی لینک موفقیت لینک خطر لینک هشدار لینک اطلاعات لینک سبک لینک تاریک لینک

کدوت

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

پیشینه اولیه پیش فرض

75% شفافیت اصلی زمینه

50% شفافیت اصلی زمینه

25% شفافیت اصلی زمینه

10% شفافیت موفقیت زمینه

رنگ متن

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

.text-primary

.text-primary-emphasis

.text-secondary

.text-secondary-emphasis

.text-success

.text-success-emphasis

.text-danger

.text-danger-emphasis

.text-warning

.text-warning-emphasis

.text-info

.text-info-emphasis

.text-light

.text-light-emphasis

.text-dark

.text-dark-emphasis

.text-muted

.text-body

.text-body-emphasis

.text-body-secondary

.text-body-tertiary

.text-black

.text-white

.text-black-50

.text-white-50

رنگ شفافیت متن

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

شفافیت متن اصلی

75% شفافیت متن اصلی

50% شفافیت متن اصلی

25% شفافیت متن اصلی

شفافیت

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

100%

75%

50%

25%

افزودنی (اضافه کردن) مرز

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

مرز کمرنگ (حذف)

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

رنگ مرزی

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

اندازه عرض مرز

کدوی مرزی

از هر یک از.border-opacity برنامه:

مرز موفقیت پیش فرض

75% مرز موفقیت شفافیت

50% مرز موفقیت شفافیت

25% مرز موفقیت شفافیت

10% مرز موفقیت شفافیت

رنگ ظریف مرزی

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

شعاع مرزی

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

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

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

انتخاب متن

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

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

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

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

وقایع اشاره گر

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

این لینک کلیک نمی شود.

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

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

سرریز

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

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

نمونه ای از استفاده .overflow-hidden روس عنصر با ابعاد عرض و ارتفاع تنظیم شده.

نمونه ای از استفاده .overflow-visible روس عنصر با ابعاد عرض و ارتفاع تنظیم شده.

نمونه ای از استفاده .overflow-scroll روس عنصر با ابعاد عرض و ارتفاع تنظیم شده.

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

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

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

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

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

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

سایه

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

بدون سایه

سایه کوچک

سایه متوسط

سایه بزرگتر

عرض

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

عرض 25%

عرض 50%

عرض 75%

عرض 100%

عرض خودکار

قد

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

قد 25%

قد 50%

قد 75%

قد 100%

قد auto

متناسب با جسم

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

.object-fit-contain

.object-fit-cover

.object-fit-fill

.object-fit-scale

.object-fit-none

زد ایندکس

استفاده کردن z-indexبرنامه های کاربردی برای جمع آوری عناصر در بالای یکدیگر.نیاز داردposition مقدار غیر از static, که می تواند با سبک های سفارشی یا با استفاده از ما تنظیم شودبرنامه های کاربردی.

دسترسی نامحدود

کامپوننت ها

اپلیکیشن ها

صفحات بیشتر

نوتیفیکیشن

برنامه

رنگ پس زمینه

رنگ شیب پس زمینه

پس زمینه روشن

رنگ و پس زمینه

پیوندهای رنگی

کدوت

رنگ متن

رنگ شفافیت متن

شفافیت

افزودنی (اضافه کردن) مرز

مرز کمرنگ (حذف)

رنگ مرزی

اندازه عرض مرز

کدوی مرزی

رنگ ظریف مرزی

شعاع مرزی

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

انتخاب متن

وقایع اشاره گر

سرریز

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

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

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

سایه

عرض

قد

متناسب با جسم

زد ایندکس

تنظیمات پوسته

رنگ

روشن

تیره

چینش

منعطف

جدا

رنگ قسمت بالا

روشن

تیره

گردینت

رنگ منو

روشن

تیره

برند

اندازه سایدبار

پیشفرض

فشرده

متراکم

نمای هاور

چینش کامل

مخفی

عرض صفحه

موقعیت چینش