FirstnameLastnameEmailDefaultDefaultsondef@somemail. comSuccessDoejohn@example. comDangerMoemary@example. comInfoDooleyjuly@example. comWarningRefsbo@example. comActiveActivesonact@example. com
Tự mình thử »Các lớp theo ngữ cảnh có thể được sử dụng là
Mô tả lớp Element content inside of border container.
1Áp dụng màu di chuột cho hàng hoặc ô của bảng Element content inside of border container.
2Cho biết một hành động thành công hoặc tích cực Element content inside of border container.
3Cho biết một hành động hoặc thay đổi thông tin trung lập Element content inside of border container.
4Cho biết một cảnh báo có thể cần được chú ý Element content inside of border container.
50Cho biết một hành động nguy hiểm hoặc có khả năng tiêu cựcBảng đáp ứng
Lớp
Element content inside of border container.
51 tạo một bảng đáp ứng. Sau đó, bảng sẽ cuộn theo chiều ngang trên các thiết bị nhỏ [dưới 768px]. Khi xem trên bất kỳ thứ gì rộng hơn 768px, không có sự khác biệt Thuộc tính
Element content inside of border container.
7 có thể có từ một đến bốn giá trị [đối với đường viền trên cùng, đường viền bên phải, đường viền dưới cùng và đường viền bên trái]Thí dụ
Trình diễn các kiểu đường viền khác nhau
p. chấm {kiểu viền. chấm;}
p. nét đứt {kiểu viền. gạch ngang;}
p. rắn {kiểu viền. vững chắc;}
p. gấp đôi {kiểu viền. gấp đôi;}
p. rãnh {kiểu đường viền. rãnh;}
p. sườn núi {kiểu đường viền. sườn núi;}
p. chèn {kiểu đường viền. hình nhỏ;}
p. bắt đầu {kiểu đường viền. đầu tiên;}
p. không {kiểu viền. không;}
p. ẩn {kiểu viền. ẩn;}
p. trộn {kiểu viền. nét đứt nét đứt kép;}
Kết quả
Đường viền chấm
Đường viền nét đứt
Biên giới vững chắc
Đường viền đôi
Đường viền rãnh. Hiệu ứng phụ thuộc vào giá trị màu viền
Một đường viền sườn núi. Hiệu ứng phụ thuộc vào giá trị màu viền
Một đường viền chèn. Hiệu ứng phụ thuộc vào giá trị màu viền
Đường viền ban đầu. Hiệu ứng phụ thuộc vào giá trị màu viền
không biên giới
Một đường viền ẩn
Biên giới hỗn hợp
Tự mình thử »Ghi chú. Không thuộc tính đường viền CSS KHÁC nào [mà bạn sẽ tìm hiểu thêm trong các chương tiếp theo] sẽ có BẤT KỲ hiệu ứng nào trừ khi thuộc tính
Element content inside of border container.
7 được đặt Bootstrap cung cấp nhiều tiện ích để nâng cao thiết kế và tạo ra một ứng dụng web hấp dẫn. Đường viền bootstrap là một trong những tiện ích để tạo các cạnh xung quanh hình ảnh, vùng chứa và các thành phần. Đường viền làm cho đường viền phần tử theo yêu cầu của người dùng theo kích thước, hình dạng và khả năng hiển thị. Đường viền cung cấp một đường thiết kế ở cuối phần tử được yêu cầu
cú pháp
Bắt đầu khóa học phát triển phần mềm miễn phí của bạn
Phát triển web, ngôn ngữ lập trình, kiểm thử phần mềm và những thứ khác
Cú pháp cơ bản dưới đây
Gói phát triển phần mềm tất cả trong một[hơn 600 khóa học, hơn 50 dự án]
Giá
Xem khóa học
600+ Khóa học trực tuyến. hơn 50 dự án. Hơn 3000 giờ. Giấy chứng nhận có thể kiểm chứng. Truy cập Trọn đời
4. 6 [83.453 xếp hạng]
Element content inside of border container.
- Lớp đường viền được sử dụng để tạo đường viền xung quanh vùng chứa
- Cú pháp biên giới theo ngữ cảnh bên dưới
Element content inside of border container.
- Chính là một trong những cách sử dụng theo ngữ cảnh với lớp viền
- Lớp chính viền được sử dụng cùng với lớp viền để thể hiện đường viền chính
Cú pháp bán kính đường viền bên dưới
Element content inside of border container.
- Người dùng có thể sử dụng lớp bo tròn hoặc lớp vòng tròn để thể hiện hình dạng của đường viền
- lg, sm là kích thước của bán kính đường viền, lớn và nhỏ tương ứng
- Đường viền bị xóa cú pháp bên dưới
Element content inside of border container.
- Lớp border-top-0 được sử dụng để loại bỏ mặt trên của đường viền vùng chứa
Đường viền hoạt động như thế nào trong Bootstrap?
Tệp hỗ trợ bootstrap bao gồm trong phần đầu. Đường dẫn tệp này ở bên dưới
Lớp đường viền bootstrap được sử dụng trong phần nội dung của trang web
Element content inside of border container.
Các bước viền bootstrap cơ bản bên dưới
.border {
display: inline-block;
width: 70px;
height: 70px;
}
Borders
element of container
Lớp đường viền được sử dụng bên trong thẻ span và điều chỉnh kích thước span bằng CSS
Ví dụ về Bootstrap Border
Các ví dụ khác nhau được đề cập dưới đây
Ví dụ 1
Ví dụ về đường viền cơ bản và đầu ra
Mã số
Bootstrap Border Example
.border {
display: inline-block;
width: 300px;
height: 150px;
margin: 6px;
color:yellow;
}
.container{
background-color:purple;
}
Bootstrap Borders
The bootstrap border is one of the utilities to make edges around the image, container, and bootstrap elements.
The bootstrap border makes the element border as per user requirement according to size, shape, and visibility.
đầu ra
Ví dụ #2
Lớp viền bootstrap được sử dụng để loại bỏ các ví dụ về đường viền và đầu ra
Mã số
________số 8đầu ra
Sự mô tả
- Khối đầu tiên là một đường viền cơ bản
- Khối thứ hai là mặt trên của màn hình để loại bỏ viền
- Hiển thị khối thứ ba để loại bỏ đường viền phía dưới
Ví dụ #3
Ví dụ về bán kính đường viền và đầu ra
Mã số
Bootstrap border Example
div {
display: inline-block;
width: 70px;
height: 70px;
margin: 6px;
background-color:grey;
}
Bootstrap border
đầu ra
Sự mô tả
- Vùng chứa đầu tiên là đường viền bán kính tròn
- Vùng chứa thứ hai là đường viền bán kính hình tròn
- Vùng chứa thứ ba đang xóa đường viền bán kính tròn
Ví dụ #4
Ví dụ và đầu ra đường viền theo ngữ cảnh
Mã số
Element content inside of border container.
0Sự mô tả
- Các loại ngữ cảnh khác nhau ở bên dưới trong đầu ra
- Nó đại diện cho một ý nghĩa khác nhau trong các màu sắc khác nhau
đầu ra
Sự kết luận
Nó là một tiện ích hữu ích để tạo ra một ứng dụng web hấp dẫn. Các đường viền hữu ích cho nhiều vùng chứa, hình ảnh để hiển thị phân vùng rõ ràng hơn. Ngoài ra, đường viền giúp ứng dụng web trông trang nhã, thân thiện với người dùng
Bài viết được đề xuất
Đây là hướng dẫn về Bootstrap Border. Ở đây chúng ta thảo luận về cách Border hoạt động trong Bootstrap và các ví dụ, cùng với các mã và kết quả đầu ra. Bạn cũng có thể xem các bài viết sau để tìm hiểu thêm –