Là một website được viết trên công nghệ web Flutter vì vậy hỗ trợ rất tốt cho người học, kể cả những người học khó tính nhất.
Hiện tại website đang tiếp tục được cập nhập nội dung cho phong phú và đầy đủ hơn. Mong các bạn nghé thăm và ủng hộ website mới của chúng tôi.
1- Border Utility
Border Utility [Tiện ích Border] là một phần trong Bootstrap, nó xây dựng sẵn các lớp giúp người dùng thiết lập border [Viền] cho các phần tử. [Tiện ích Border] là một phần trong Bootstrap, nó xây dựng sẵn các lớp giúp người dùng thiết lập border [Viền] cho các phần tử.
Lớp | Mô tả |
.border | Thiết lập border cho 4 cạnh của phần tử. border cho 4 cạnh của phần tử. |
.border-left | Thiết lập border cho cạnh bên trái của phần tử. border cho cạnh bên trái của phần tử. |
.border-right | Thiết lập border cho cạnh bên phải của phần tử. border cho cạnh bên phải của phần tử. |
.border-top | Thiết lập border cho cạnh bên trên [top] của phần tử. border cho cạnh bên trên [top] của phần tử. |
.border-bottom | Thiết lập border cho cạnh bên dưới [bottom] của phần tử. border cho cạnh bên dưới [bottom] của phần tử. |
.border-left-0 | Thiết lập border cho tất cả các cạnh, ngoại trừ cạnh bên trái. border cho tất cả các cạnh, ngoại trừ cạnh bên trái. |
.border-right-0 | Thiết lập border cho tất cả các cạnh, ngoại trừ cạnh bên phải. border cho tất cả các cạnh, ngoại trừ cạnh bên phải. |
.border-top-0 | Thiết lập border cho tất cả các cạnh, ngoại trừ cạnh phía trên [top]. border cho tất cả các cạnh, ngoại trừ cạnh phía trên [top]. |
.border-bottom-0 | Thiết lập border cho tất cả các cạnh, ngoại trừ cạnh phía dưới [bottom]. border cho tất cả các cạnh, ngoại trừ cạnh phía dưới [bottom]. |
border-example.html
Border Example
.container div {
margin: 10px;
padding :10px;
background: #fbfcfc;
}
.border
.border-left
.border-right
.border-top
.border-bottom
2- Border color [Mầu viền]
Có một vài lớp để thiết lập mầu sắc cho border được Bootstrap xây dựng sẵn, bạn có thể sử dụng nó trong ngữ cảnh phù hợp: border được Bootstrap xây dựng sẵn, bạn có thể sử dụng nó trong ngữ cảnh phù hợp:
- .border-primary
- .border-secondary
- .border-success
- .border-danger
- .border-warning
- .border-info
- .border-light
- .border-dark
- .border-muted
- .border-white
border-color-example.html
Border Example
.container div {
margin: 10px;
padding :10px;
background: #ebf5fb;
}
.border .border-primary
.border-left .border-danger
.border-right .border-danger
.border-top .border-success
.border-bottom .border-info
3- Border width [Chiều rộng Border]
Bootstrap không định nghĩa lớp nào để thiết lập chiều rộng [width] của border. Nhưng bạn có thể tự định nghĩa các lớp như vậy, chẳng hạn .border-* [* = 1, 2, 3, ...]. không định nghĩa lớp nào để thiết lập chiều rộng [width] của border. Nhưng bạn có thể tự định nghĩa các lớp như vậy, chẳng hạn .border-* [* = 1, 2, 3, ...].
.border-5 {
border-width:5px !important;
}
.border-2 {
border-width:2px !important;
}
border-width-example.html
Border Example
.container div {
margin: 10px;
padding :10px;
background: #fbfcfc;
}
.border-5 {
border-width:5px !important;
}
.border-2 {
border-width:2px !important;
}
.border .border-2
.border-left .border-5
.border-right .border-2
.border-top .border-5
.border-bottom .border-5
4- Border-Radius
Một số lớp bổ xung giúp bạn làm tròn [round] các góc của phần tử.
- .rounded
- .rounded-left
- .rounded-right
- .rounded-top
- .rounded-bottom
- .rounded-0
round-example
.border .rounded
.border-left .rounded-left
.border .rounded-right
.border .rounded-top
.border .rounded-bottom
.border-bottom .rounded-circle
.border-bottom .rounded-0