Hướng dẫn border-bottom bootstrap - bootstrap đáy viền

Sử dụng các tiện ích biên giới để nhanh chóng tạo kiểu cho biên giới và biên giới của một yếu tố. Tuyệt vời cho hình ảnh, nút hoặc bất kỳ yếu tố nào khác.

Biên giới

Sử dụng các tiện ích biên giới để thêm hoặc loại bỏ một phần tử biên giới. Chọn từ tất cả các biên giới hoặc một tại một thời điểm.

Phụ gia

 class="border">
 class="border-top">
 class="border-right">
 class="border-bottom">
 class="border-left">

Trừ

 class="border-0">
 class="border-top-0">
 class="border-right-0">
 class="border-bottom-0">
 class="border-left-0">

Màu viền

Thay đổi màu viền bằng cách sử dụng các tiện ích được xây dựng trên màu chủ đề của chúng tôi.

 class="border border-primary">
 class="border border-secondary">
 class="border border-success">
 class="border border-danger">
 class="border border-warning">
 class="border border-info">
 class="border border-light">
 class="border border-dark">
 class="border border-white">

Border-radius

Thêm các lớp vào một phần tử để dễ dàng làm tròn các góc của nó.

 src="..." alt="..." class="rounded">
 src="..." alt="..." class="rounded-top">
 src="..." alt="..." class="rounded-right">
 src="..." alt="..." class="rounded-bottom">
 src="..." alt="..." class="rounded-left">
 src="..." alt="..." class="rounded-circle">
 src="..." alt="..." class="rounded-0">

Biên giới

Sử dụng các tiện ích biên giới để thêm hoặc loại bỏ một phần tử biên giới. Chọn từ tất cả các biên giới hoặc một tại một thời điểm.

Phụ gia

<span class="border">span>
<span class="border-top">span>
<span class="border-end">span>
<span class="border-bottom">span>
<span class="border-start">span>

Trừ

<span class="border-0">span>
<span class="border-top-0">span>
<span class="border-end-0">span>
<span class="border-bottom-0">span>
<span class="border-start-0">span>

Màu viền

Thay đổi màu viền bằng cách sử dụng các tiện ích được xây dựng trên màu chủ đề của chúng tôi.

<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>

Border-width

<span class="border border-1">span>
<span class="border border-2">span>
<span class="border border-3">span>
<span class="border border-4">span>
<span class="border border-5">span>

Border-radius

Thêm các lớp vào một phần tử để dễ dàng làm tròn các góc của nó.

Ví dụ hình ảnh tròn75x75 Ví dụ hình ảnh tròn trên cùng hình ảnh tròn75x75 Ví dụ hình ảnh tròn bên phải75x75 Ví dụ hình ảnh tròn dưới cùng hình ảnh tròn75x75 Ví dụ hình ảnh tròn trái

<img src="..." class="rounded" alt="...">
<img src="..." class="rounded-top" alt="...">
<img src="..." class="rounded-end" alt="...">
<img src="..." class="rounded-bottom" alt="...">
<img src="..." class="rounded-start" alt="...">
<img src="..." class="rounded-circle" alt="...">
<img src="..." class="rounded-pill" alt="...">

Kích thước

Sử dụng các lớp tỷ lệ cho các góc tròn lớn hơn hoặc nhỏ hơn. Kích thước dao động từ

 class="border-0">
 class="border-top-0">
 class="border-right-0">
 class="border-bottom-0">
 class="border-left-0">

5 đến

 class="border-0">
 class="border-top-0">
 class="border-right-0">
 class="border-bottom-0">
 class="border-left-0">

6 và có thể được cấu hình bằng cách sửa đổi API tiện ích.

Ví dụ Image không tròn75x75 Ví dụ Image tròn nhỏ75x75 Ví dụ hình ảnh tròn mặc định75x75 Ví dụ hình ảnh tròn lớn75x75

<img src="..." class="rounded-0" alt="...">
<img src="..." class="rounded-1" alt="...">
<img src="..." class="rounded-2" alt="...">
<img src="..." class="rounded-3" alt="...">

Sass

Biến

 class="border-0">
 class="border-top-0">
 class="border-right-0">
 class="border-bottom-0">
 class="border-left-0">

0

 class="border-0">
 class="border-top-0">
 class="border-right-0">
 class="border-bottom-0">
 class="border-left-0">

1

Mixins

 class="border-0">
 class="border-top-0">
 class="border-right-0">
 class="border-bottom-0">
 class="border-left-0">

2

API tiện ích

Các tiện ích biên giới được khai báo trong API tiện ích của chúng tôi trong

 class="border-0">
 class="border-top-0">
 class="border-right-0">
 class="border-bottom-0">
 class="border-left-0">

7. Tìm hiểu cách sử dụng API Tiện ích.

 class="border-0">
 class="border-top-0">
 class="border-right-0">
 class="border-bottom-0">
 class="border-left-0">

3

 class="border-0">
 class="border-top-0">
 class="border-right-0">
 class="border-bottom-0">
 class="border-left-0">

4