Bootstrap 4 Tiện ích
Bootstrap 4 Tiện ích
Bootstrap 4 có rất nhiều lớp tiện ích / trợ giúp để nhanh chóng tạo kiểu cho các phần tử mà không cần sử dụng bất kỳ mã CSS nào.
Biên giới
Sử dụng các borderlớp để thêm hoặc xóa đường viền khỏi một phần tử:
Thí dụ
Thí dụ
<span class="border"></span>
<span class="border border-0"></span>
<span class="border border-top-0"></span>
<span class="border border-right-0"></span>
<span
class="border border-bottom-0"></span>
<span class="border border-left-0"></span>
Màu viền
Thêm màu vào đường viền với bất kỳ lớp màu đường viền nào theo ngữ cảnh:
Thí dụ
Thí dụ
<span class="border border-primary"></span>
<span class="border
border-secondary"></span>
<span class="border border-success"></span>
<span class="border border-danger"></span>
<span class="border
border-warning"></span>
<span class="border border-info"></span>
<span class="border border-light"></span>
<span class="border
border-dark"></span>
<span class="border border-white"></span>
Bán kính đường viền
Thêm các góc tròn vào một phần tử với các roundedlớp:
Thí dụ
Thí dụ
<span class="rounded-sm"></span>
<span class="rounded"></span>
<span class="rounded-lg"></span>
<span class="rounded-top"></span>
<span class="rounded-right"></span>
<span
class="rounded-bottom"></span>
<span class="rounded-left"></span>
<span class="rounded-circle"></span>
<span
class="rounded-0"></span>
Float và Clearfix
Làm nổi một phần tử sang bên phải với .float-rightlớp hoặc sang trái với .float-leftvà xóa nổi với .clearfixlớp:
Thí dụ
Thí dụ
<div class="clearfix">
<span class="float-left">Float left</span>
<span
class="float-right">Float right</span>
</div>
Pha nổi đáp ứng
Làm nổi một phần tử sang trái hoặc sang phải tùy thuộc vào chiều rộng màn hình, với các lớp float đáp ứng ( .float-*-left|right- trong đó * là sm(> = 576px), md(> = 768px), lg(> = 992px) hoặc xl(> = 1200px)):
Thí dụ
Thí dụ
<div class="float-sm-right">Float right on small screens or wider</div><br>
<div class="float-md-right">Float right on medium screens or wider</div><br>
<div class="float-lg-right">Float right on large screens or wider</div><br>
<div class="float-xl-right">Float right on extra large screens or
wider</div><br>
<div class="float-none">Float none</div>
Căn giữa
Căn giữa một phần tử với .mx-autolớp (thêm lề trái và lề phải: auto):
Thí dụ
Thí dụ
<div class="mx-auto
bg-warning" style="width:150px">Centered</div>
Chiều rộng
Đặt chiều rộng của một phần tử với các lớp w- * ( .w-25,,, ) .w-50:.w-75.w-100.mw-100
Thí dụ
Thí dụ
<div class="w-25 bg-warning">Width 25%</div>
<div class="w-50 bg-warning">Width
50%</div>
<div class="w-75 bg-warning">Width 75%</div>
<div
class="w-100 bg-warning">Width 100%</div>
<div class="mw-100 bg-warning">Max Width 100%</div>
Chiều cao
Đặt chiều cao của một phần tử với các lớp h- * ( .h-25,,, ) .h-50:.h-75.h-100.mh-100
Thí dụ
Thí dụ
<div style="height:200px;background-color:#ddd">
<div class="h-25 bg-warning">Height 25%</div>
<div class="h-50 bg-warning">Height
50%</div>
<div class="h-75 bg-warning">Height 75%</div>
<div
class="h-100 bg-warning">Height 100%</div>
<div class="mh-100 bg-warning"
style="height:500px">Max Height 100%</div>
</div>
khoảng cách
Bootstrap 4 có một loạt các lớp tiện ích lề và đệm đáp ứng. Chúng hoạt động cho tất cả các điểm ngắt: xs(<= 576px), sm(> = 576px), md(> = 768px), lg(> = 992px) hoặc xl(> = 1200px)):
Các lớp được sử dụng ở định dạng : {property}{sides}-{size}for xsvà {property}{sides}-{breakpoint}-{size}for sm, mdvà lg.xl
Trường hợp tài sản là một trong:
m- bộmarginp- bộpadding
Trường hợp các bên là một trong:
t- bộmargin-tophoặcpadding-topb- bộmargin-bottomhoặcpadding-bottoml- bộmargin-lefthoặcpadding-leftr- bộmargin-righthoặcpadding-rightx- đặt cả haipadding-leftvàpadding-righthoặcmargin-leftvàmargin-righty- đặt cả haipadding-topvàpadding-bottomhoặcmargin-topvàmargin-bottom- trống - đặt a
marginhoặcpaddingtrên cả 4 mặt của phần tử
Trong đó kích thước là một trong:
0- bộmarginhoặcpaddingđể01- bộmarginhoặcpaddingthành.25rem(4px nếu kích thước phông chữ là 16px)2- bộmarginhoặcpaddingthành.5rem(8px nếu kích thước phông chữ là 16px)3- đặtmarginhoặcpaddingthành1rem(16px nếu kích thước phông chữ là 16px)4- đặtmarginhoặcpaddingthành1.5rem(24px nếu kích thước phông chữ là 16px)5- đặtmarginhoặcpaddingthành3rem(48px nếu kích thước phông chữ là 16px)auto- đặtmarginthành tự động
Lưu ý: lề cũng có thể là số âm, bằng cách thêm "n" vào trước kích thước :
n1- đặtmarginthành-.25rem(-4px nếu kích thước phông chữ là 16px)n2- đặtmarginthành-.5rem(-8px nếu kích thước phông chữ là 16px)n3- đặtmarginthành-1rem(-16px nếu kích thước phông chữ là 16px)n4- đặtmarginthành-1.5rem(-24px nếu kích thước phông chữ là 16px)n5- đặtmarginthành-3rem(-48px nếu kích thước phông chữ là 16px)
Thí dụ
Thí dụ
<div class="pt-4 bg-warning">I only have a top padding (1.5rem =
24px)</div>
<div class="p-5 bg-success">I have a padding on all sides
(3rem = 48px)</div>
<div class="m-5 pb-5 bg-info">I have a margin on
all sides (3rem = 48px) and a bottom padding (3rem = 48px)</div>
Thêm các ví dụ về khoảng cách
.m-# / m-*-# |
lợi nhuận trên tất cả các bên | |
.mt-# / mt-*-# |
lề đầu | |
.mb-# / mb-*-# |
lề đáy | |
.ml-# / ml-*-# |
lề trái | |
.mr-# / mr-*-# |
lề phải | |
.mx-# / mx-*-# |
lề trái và phải | |
.my-# / my-*-# |
lề trên và dưới | |
.p-# / p-*-# |
đệm ở tất cả các bên | |
.pt-# / pt-*-# |
đệm đầu | |
.pb-# / pb-*-# |
đệm đáy | |
.pl-# / pl-*-# |
đệm bên trái | |
.pr-# / pr-*-# |
đệm bên phải | |
.py-# / py-*-# |
đệm trên và dưới | |
.px-# / px-*-# |
đệm trái và phải |
Bóng đổ
Sử dụng các shadow-lớp để thêm bóng vào một phần tử:
Thí dụ
Thí dụ
<div class="shadow-none p-4 mb-4 bg-light">No shadow</div>
<div
class="shadow-sm p-4 mb-4 bg-white">Small
shadow</div>
<div class="shadow p-4 mb-4 bg-white">Default
shadow</div>
<div class="shadow-lg p-4 mb-4 bg-white">Large
shadow</div>
Căn chỉnh theo chiều dọc
Sử dụng các align-lớp để thay đổi căn chỉnh của các phần tử (chỉ hoạt động trên các phần tử nội tuyến, khối nội tuyến, bảng nội dòng và ô bảng):
Thí dụ
Thí dụ
<span class="align-baseline">baseline</span>
<span
class="align-top">top</span>
<span class="align-middle">middle</span>
<span class="align-bottom">bottom</span>
<span
class="align-text-top">text-top</span>
<span
class="align-text-bottom">text-bottom</span>
Nhúng đáp ứng
Tạo bản nhúng video hoặc trình chiếu đáp ứng dựa trên chiều rộng của trang gốc.
Thêm vào .embed-responsive-itembất kỳ phần tử nhúng nào (như <iframe> hoặc <video>) trong phần tử mẹ với .embed-responsivevà tỷ lệ khung hình bạn chọn:
Thí dụ
Thí dụ
<!-- 21:9 aspect ratio -->
<div class="embed-responsive
embed-responsive-21by9">
<iframe class="embed-responsive-item"
src="..."></iframe>
</div>
<!-- 16:9 aspect ratio -->
<div class="embed-responsive
embed-responsive-16by9">
<iframe class="embed-responsive-item"
src="..."></iframe>
</div>
<!-- 4:3 aspect ratio -->
<div class="embed-responsive
embed-responsive-4by3">
<iframe class="embed-responsive-item"
src="..."></iframe>
</div>
<!-- 1:1 aspect ratio -->
<div class="embed-responsive
embed-responsive-1by1">
<iframe class="embed-responsive-item"
src="..."></iframe>
</div>
Hiển thị
Sử dụng .visiblehoặc .invisiblecác lớp để kiểm soát khả năng hiển thị của các phần tử. Lưu ý: Các lớp này không thay đổi giá trị hiển thị CSS. Họ chỉ thêm visibility:visiblehoặc visibility:hidden:
Thí dụ
Thí dụ
<div class="visible">I am visible</div>
<div class="invisible">I am
invisible</div>
Chức vụ
Sử dụng .fixed-toplớp để làm cho bất kỳ phần tử nào được cố định / ở đầu trang:
Thí dụ
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
...
</nav>
Use the .fixed-bottom class to make any element fixed/stay at
the bottom of the page:
Example
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom">
...
</nav>
Use the .sticky-top class to make any element fixed/stay at
the top of the page when you scroll past it. Note:
This class does not work in IE11 and earlier (will treat it as position:relative).
Example
<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
...
</nav>
Close icon
Use the .close class to style a close icon. This is often used for alerts and modals. Note that we use the × symbol to create the actual icon (a better looking
"x"). Also note that it floats right by default:
Example
Example
<button type="button" class="close">×</button>
Screenreaders
Use the .sr-only class to hide an element on all devices, except screen readers:
Example
<span class="sr-only">I will be hidden on all screens except for screen
readers.</span>
Colors
As described in the Colors chapter, here is a list of all text and background color classes:
The classes for text colors are: .text-muted,
.text-primary, .text-success, .text-info,
.text-warning, .text-danger, .text-secondary, .text-white,
.text-dark, .text-body (default body color/often black) and .text-light:
Example
This text is muted.
This text is important.
This text indicates success.
This text represents some information.
This text represents a warning.
This text represents danger.
Secondary text.
Dark grey text.
Body text.
Light grey text.
Contextual text classes can also be used on links, which will add a darker hover color:
Example
You can also add 50% opacity for black or white text with the .text-black-50 or .text-white-50 classes:
Example
Black text with 50% opacity on white background
White text with 50% opacity on black background
Background Colors
The classes for background colors are: .bg-primary,
.bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark and .bg-light.
Note that background colors do not set the text color, so in some cases you'll want to use them together with a .text-* class.
Example
This text is important.
This text indicates success.
This text represents some information.
This text represents a warning.
This text represents danger.
Secondary background color.
Dark grey background color.
Light grey background color.
Typography/Text Classes
As described in the Typography chapter, here is a list of all typography/text classes:
| Class | Description | Example |
|---|---|---|
.display-* |
Display headings are used to stand out more than normal headings (larger font-size and lighter font-weight), and there are four classes to choose from: .display-1, .display-2, .display-3, .display-4 |
|
.font-weight-bold |
Bold text | |
.font-weight-bolder |
Bolder bold text | |
.font-weight-normal |
Normal text | |
.font-weight-light |
Light weight text | |
.font-weight-lighter |
Lighter weight text | |
.font-italic |
Italic text | |
.lead |
Makes a paragraph stand out | |
.small |
Indicates smaller text (set to 85% of the size of the parent) | |
.text-break |
Prevents long text from breaking layout | |
.text-center |
Indicates center-aligned text | |
.text-decoration-none |
Removes the underline from a link | |
.text-left |
Indicates left-aligned text | |
.text-justify |
Indicates justified text | |
.text-monospace |
Monospaced text | |
.text-nowrap |
Indicates no wrap text | |
.text-lowercase |
Indicates lowercased text | |
.text-reset |
Resets the color of a text or a link (inherits the color from its parent) | |
.text-right |
Indicates right-aligned text | |
.text-uppercase |
Indicates uppercased text | |
.text-capitalize |
Indicates capitalized text | |
.initialism |
Displays the text inside an <abbr> element in a slightly smaller font size |
|
.list-unstyled |
Removes the default list-style and left margin on list items (works on both <ul> and <ol>). This class only applies to immediate children list items (to remove the default list-style from any nested lists, apply this class to any nested lists as well) |
|
.list-inline |
Places all list items on a single line (used together with
.list-inline-item on each <li> elements) |
|
.pre-scrollable |
Makes a <pre> element scrollable |
Block Elements
To make an element into a block element, add the .d-block class. Use any of the d-*-block classes to control WHEN the element should be a block element on a specific screen width:
Example
Example
<span class="d-block bg-success">d-block</span>
<span class="d-sm-block
bg-success">d-sm-block</span>
<span class="d-md-block bg-success">d-md-block</span>
<span class="d-lg-block bg-success">d-lg-block</span>
<span
class="d-xl-block bg-success">d-xl-block</span>
Other Display Classes
Other display classes are also available:
| Class | Description | Example |
|---|---|---|
.d-none |
Hides an element | |
.d-*-none |
Hides an element on a specific screen size | |
.d-inline |
Makes an element inline | |
.d-*-inline |
Makes an element inline on a specific screen size | |
.d-inline-block |
Makes an element inline block | |
.d-*-inline-block |
Makes an element inline block on a specific screen size | |
.d-table |
Makes an element display as a table | |
.d-*-table |
Makes an element display as a table on a specific screen size | |
.d-table-cell |
Makes an element display as a table cell | |
.d-*-table-cell |
Makes an element display as a table cell on a specific screen size | |
.d-table-row |
Makes an element display as a table row | |
.d-*-table-row |
Makes an element display as a table row on a specific screen size | |
.d-flex |
Creates a flexbox container and transforms direct children into flex items | |
.d-*-flex |
Creates a flexbox container on a specific screen size | |
.d-inline-flex |
Creates an inline flexbox container | |
.d-*-inline-flex |
Creates an inline flexbox container on a specific screen size |
Flex
Use .flex-* classes to control the layout with flexbox.
Read more about Bootstrap 4 Flex, in our next chapter.
Example
Horizontal:
Vertical: