کامپوننت ها را کاوش کنید

Utilities

The utility API is a Sass-based tool to generate utility classes.

Colored links جدید

You can use the .link-* classes to colorize links. these classes have a :hover and :focus state.

Text selection جدید

Change the way in which the content is selected when the user interacts with it.

This paragraph will be entirely selected when clicked by the user.

This paragraph has default select behavior.

This paragraph will not be selectable when clicked by the user.

Line height جدید

Change the line height with .lh-* utilities.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Cras mattis pannenkoek purus sit amet fermentum.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Cras mattis pannenkoek purus sit amet fermentum.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Cras mattis pannenkoek purus sit amet fermentum.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Cras mattis pannenkoek purus sit amet fermentum.

Pointer events جدید

Bootstrap provides pe-none and pe-auto classes to prevent or add element interactions.

This link can not be clicked.

This link can be clicked (this is default behaviour).

This link can not be clicked because the pointer-events property is inherited from its parent. However, this link has a pe-auto class and can be clicked.

Position values جدید

Arrange elements easily with the edge positioning utilities, The format is {property}-{position}.


Center elements

In addition, you can also center the elements with the transform utility class .translate-middle.


Examples

Here are some real life examples of these classes.


You can use these classes with existing components to create new ones. Remember that you can extend its functionality by adding entries to the $position-values variable.

Border
Border color

Additive

Subtractive

Border width

Border radius Sizes

Border-radius

Utility class
Margin

Margin top

Margin bottom

Margin left

Margin right

Padding

Padding top

Padding bottom

Padding left

Padding right

Width

Height

Font-size

Font weight

Border width

Shadows
No shadow
Small shadow
Regular shadow
Larger shadow
Embeds
Aspect Ratios
Aspect Ratios 21 by 9

Aspect Ratios 16 by 9

Aspect Ratios 4 by 3

Aspect Ratios 1 by 1

تنظیمات
  • حالت تم

    حالت روشن یا تاریک یا خودکار را انتخاب کنید

  • تم نوار کناری

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

  • رنگ تاکیدی

    رنگ تم اصلی خود را انتخاب کنید

  • عنوان نوار کناری

    عنوان نوار کناری پنهان/نمایش

  • طرح تم

    LTR/RTL

  • عرض طرح

    طرح بندی کامل یا کانتینری را انتخاب کنید