Bootstrap 4 có rất nhiều lớp tiện ích (Utilities), 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. Trong bài học này chúng ta sẽ lần lượt nghiên cứu các lớp tiện ích trong Bootstrap 4 đó nhé các bạn.
Đường viền ( Border) trong Boostral 4
Sử dụng các lớp đường viền để thêm hoặc xóa đường viền khỏi một phần tử:
Ví 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 viền theo ngữ cảnh nào:
Ví 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>
Kết quả:
Bo góc
Thêm các góc tròn vào một phần tử với các lớp rounded
Ví 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ử ở bên phải với lớp .float-right hoặc ở bên trái với .float-left và clear float với lớp .clearfix:
<div class="clearfix"> <span class="float-left">Float left</span> <span class="float-right">Float right</span> </div>
Float đá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) với * là sm (> = 576px), md (> = 768px), lg (> = 992px) hoặc xl (> = 1200px):
Ví 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 (Center Align)
Căn giữa một phần tử với lớp .mx-auto (thêm margin-left và margin-right: auto):
<div class="mx-auto bg-warning" style="width:150px">Centered</div>
Chiều rộng (Width)
Đặ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):
Ví 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 (Height)
Đặ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):
<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>
Spacing (Khoảng cách)
Bootstrap 4 có một loạt các lớp margin và padding để căn chỉnh lề và vị trí.
Các lớp được sử dụng ở định dạng:
- {property}{sides}-{size} cho xs
- {property}{sides}-{breakpoint} cho sm, md, lg và xl.
Trong đó {property} có thể là
- m - dùng để đặt margin
- p - dùng để đặt padding
{sides}
- t - đặt margin-top hoặc padding-top
- b - đặt margin-bottom hoặc padding-bottom
- l - đặt margin-left hoặc padding-left
- r - đặt margin-right hoặc padding-right
- x - đặt cả 2 padding-left và padding-right hoặc margin-left và margin-right
- y - đặt cả 2 padding-top và padding-bottom hoặc margin-top vàmargin-bottom
- blank - đặt margin hoặc paddind trên cả 4 mặt ( trên dưới trái phải của phần tử)
{size}
- 0 - đặt margin hoặc padding bằng 0
- 1 - đặt margin hoặc padding bằng .25rem (4px nếu font-size là 16px)
- 2 - đặt margin hoặc padding bằng .5rem (8px nếu font-size là 16px)
- 3 - đặt margin hoặc padding bằng 1rem (16px nếu font-size là 16px)
- 4 - đặt margin hoặc padding bằng 1.5rem (24px nếu font-size là 16px)
- 5 - đặt margin hoặc padding bằng 3rem (48px nếu font-size là 16px)
- auto - đặt margin là auto
Lưu ý: lề (margin) cũng có thể là số âm, bằng cách thêm chữ "n" vào trước kích thước:
Ví dụ :
- n1 - đặt margin bằng -.25rem (-4px nếu font-size là 16px)
- n2 - đặt margin bằng -.5rem (-8px nếu font-size là 16px)
- n3 - đặt margin bằng -1rem (-16px nếu font-size là 16px)
- n4 - đặt margin bằng -1.5rem (-24px nếu font-size là 16px)
- n5 - đặt margin bằng -3rem (-48px nếu font-size là 16px)
Ví dụ:
<div class="container"> <h1>Spacing Utilities</h1> <p>Set the spacing of an element with the {property}{sides}-{breakpoint}-{size} classes. Omit breakpoint if you want the padding or margin to work on all screen sizes.</p> <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> </div>
Thêm các ví dụ về khoảng cách:
Bóng đổ (Shadows)
Sử dụng các lớp shadow- để thêm bóng vào một phần tử:
Ví 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 (Vertical Align)
Sử dụng các lớp align- để thay đổi sự căn chỉnh của các phần tử (chỉ hoạt động trên các phần tử inline, inline-block, inline-table và table cell):
Ví 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>
Responsive Embeds (Phần tử nhúng đáp ứng)
Tạo phần tử nhúng như video hoặc trình chiếu đáp ứng dựa trên chiều rộng của trang gốc.
Thêm .embed-responsive-item vào bất kỳ phần tử nhúng nào (như <iframe> hoặc <video>) trong phần tử mẹ có .embed-responsive và tỷ lệ khung hình bạn chọn:
Ví dụ :
<div class="container mt-3"> <h2>Responsive Embed</h2> <p>Create a responsive video and scale it nicely to the parent element.</p> <h2>Aspect ratio 1:1</h2> <div class="embed-responsive embed-responsive-1by1"> <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe> </div> <br> <h2>Aspect ratio 4:3</h2> <div class="embed-responsive embed-responsive-4by3"> <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe> </div> <br> <h2>Aspect ratio 16:9</h2> <div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe> </div> <br> <h2>Aspect ratio 21:9</h2> <div class="embed-responsive embed-responsive-21by9"> <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe> </div> </div>
Visible (Hiển thị)
Sử dụng các lớp .visible hoặc .invisible để 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. Chúng chỉ thêm khả năng hiển thị: hiển thị hoặc hiển thị: ẩn:
<div class="visible">I am visible</div> <div class="invisible">I am invisible</div>
Position
Sử dụng lớp .fixed-top để làm cho bất kỳ phần tử nào cố định / ở trên đầu trang:
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top"> <a class="navbar-brand" href="#">HocTV</a> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">HTML</a> </li> <li class="nav-item"> <a class="nav-link" href="#">CSS</a> </li> </ul> </nav>
Sử dụng lớp .fixed-bottom để làm cho bất kỳ phần tử nào cố định / nằm ở cuối trang:
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom"> ... </nav>
Sử dụng lớp .sticky-top để làm cho bất kỳ phần tử nào được cố định / ở trên đầu trang khi bạn cuộn qua nó. Lưu ý: Lớp này không hoạt động trong IE11 trở về trước (sẽ coi nó là vị trí: tương đối).
<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top"> ... </nav>
Biểu tượng đóng ( Close icon)
Sử dụng lớp .close để tạo kiểu cho biểu tượng đóng. Điều này thường được sử dụng cho các cảnh báo và phương thức. Lưu ý rằng chúng tôi sử dụng dấu & times; biểu tượng để tạo biểu tượng thực tế ("x" trông đẹp hơn). Cũng lưu ý rằng nó trôi sang bên phải theo mặc định:
<button type="button" class="close">×</button>
Trình đọc màn hình (Screenreaders)
Sử dụng lớp .sr-only để ẩn một phần tử trên tất cả các thiết bị, ngoại trừ trình đọc màn hình:
<span class="sr-only">I will be hidden on all screens except for screen readers.</span>
Màu sắc (Color)
Như được mô tả trong chương Color, đây là danh sách tất cả các lớp màu văn bản và màu nền:
Các lớp cho màu văn bản là: .text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-risk, .text-Secondary, .text-white, .text- dark, .text-body (màu nội dung mặc định / thường là màu đen) và .text-light:
Ví dụ :
<div class="container"> <h2>Contextual Colors</h2> <p>Use the contextual classes to provide "meaning through colors":</p> <p class="text-muted">This text is muted.</p> <p class="text-primary">This text is important.</p> <p class="text-success">This text indicates success.</p> <p class="text-info">This text represents some information.</p> <p class="text-warning">This text represents a warning.</p> <p class="text-danger">This text represents danger.</p> <p class="text-secondary">Secondary text.</p> <p class="text-dark">This text is dark grey.</p> <p class="text-body">Default body color (often black).</p> <p class="text-light">This text is light grey (on white background).</p> <p class="text-white">This text is white (on white background).</p> </div>
Các lớp văn bản theo ngữ cảnh cũng có thể được sử dụng trên các liên kết, các lớp này sẽ thêm màu di chuột tối hơn:
Bạn cũng có thể thêm độ mờ 50% cho văn bản đen hoặc trắng với các lớp .text-black-50 hoặc .text-white-50:
<p class="text-black-50">Black text with 50% opacity on white background</p> <p class="text-white-50 bg-dark">White text with 50% opacity on black background</p>
Background Colors (Màu nền)
Các lớp cho màu nền là: .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-risk, .bg-Secondary, .bg-dark và .bg-light.
Lưu ý rằng màu nền không đặt màu văn bản, vì vậy trong một số trường hợp, bạn sẽ muốn sử dụng chúng cùng với lớp .text- * để đặt màu văn bản
<p class="bg-primary text-white">This text is important.</p> <p class="bg-success text-white">This text indicates success.</p> <p class="bg-info text-white">This text represents some information.</p> <p class="bg-warning text-white">This text represents a warning.</p> <p class="bg-danger text-white">This text represents danger.</p> <p class="bg-secondary text-white">Secondary background color.</p> <p class="bg-dark text-white">Dark grey background color.</p> <p class="bg-light text-dark">Light grey background color.</p>
Các lớp kiểu chữ (Typography) và văn bản (Text)
Dưới đây là bảng các lớp kiểu chữ
Phần tử khối
Để biến một phần tử thành một phần tử khối, hãy thêm lớp .d-block. Sử dụng bất kỳ lớp d-*-block nào để điều khiển KHI phần tử phải là phần tử khối trên một chiều rộng màn hình cụ thể:
Ví dụ :
<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>
Các lớp hiển thị khác
Các lớp hiển thị khác cũng có sẵn:
| Lớp | Mô tả |
|---|---|
Flex
Sử dụng các lớp .flex- * để điều khiển bố cục bằng flexbox.
Flex trong Bootstrap 4 sẽ được trình bày chi tiết ở chương tiếp theo nhé các bạn.
Lời kết:
Trên đây là các tiện ích cung cấp sẵn trong Bootstrap 4. Đa số đều được trình bày ở các bài học trước, bài học này chúng ta chỉ tổng hợp lại và giới thiệu thêm 1 số tiện ích mà thôi, chi tiết hơn các bạn tìm đọc ở các bài viết cũ hơn nhé. Cảm ơn các bạn đã theo dõi bài viết.
