Tạo Breadcrumb trong Bootstrap

Trong bài học Bootstrap trước Taimienphi.vn đã hướng dẫn bạn cách tạo thanh điều hướng trong Bootstrap. Trong bài học tiếp theo dưới đây Taimienphi.vn sẽ hướng dẫn tiếp cho bạn cách tạo Breadcrumb trong Bootstrap.

Hiểu nôm na Breadcrumb là menu điều hướng để người dùng có thể hình dung được vị trí trang web hoặc ứng dụng mà họ đang truy cập hiện tại. Tham khảo tiếp bài viết dưới đây của Taimienphi.vn để tìm hiểu cách tạo Breadcrumb trong Bootstrap.

Tao Breadcrumb trong Bootstrap

Tạo Breadcrumb trong Bootstrap

Tạo Breadcrumb trong Bootstrap

Như đã đề cập ở trên, Breadcrumb là menu điều hướng để người dùng có thể hình dung được vị trí trang web hoặc ứng dụng mà họ truy cập hiện tại.

Để tạo bố cục Breadcrumb tĩnh bằng Bootstrap, chúng ta chỉ cần sử dụng lớp .breadcrumb trên kiểu danh sách sắp xếp (ordered list), như trong ví dụ dưới đây:

tao breadcrumb trong bootstrap

Kết quả đầu ra có dạng như dưới đây:

tao breadcrumb trong bootstrap 2

Dấu phân cách mặc định trong Breadcrumb là /. Tuy nhiên nếu muốn chúng ta có thể thay đổi dấu phân cách này bằng cách tùy chỉnh CSS.

Ví dụ: trong ví dụ dưới đây chúng ta sử dụng > làm dấu phân cách bằng cách áp dụng style rule dưới đây:

tao breadcrumb trong bootstrap 3

Kết quả đầu ra có dạng như dưới đây:

tao breadcrumb trong bootstrap 4

Mẹo: dấu phân cách trong các thành phần Breadcrumb được thêm tự động thông qua pseudo-element ::before trong CSS và thuộc tính content.

Bài học trên đây Taimienphi.vn vừa hướng dẫn bạn cách tạo Breadcrumb trong Bootstrap. Ngoài ra bạn đọc có thể tham khảo thêm một số bài học Bootstrap khác đã có trên Taimienphi.vn để tìm hiểu thêm về cách tạo form (biểu mẫu) tùy chỉnh trong Bootstrap.

https://thuthuat.taimienphi.vn/tao-breadcrumb-trong-bootstrap-51130n.aspx
Trong bài học tiếp theo Taimienphi.vn sẽ giới thiệu tiếp cho bạn về Pagination trong Bootstrap.

Tác giả: Ngọc Thảo     (4.0★- 3 đánh giá)  ĐG của bạn?

  

Bài viết liên quan

Tạo form (biểu mẫu) trong Bootstrap
Spinner trong Bootstrap
Tạo danh sách bằng Bootstrap như thế nào?
Cách tạo và sử dụng Button Group trong Bootstrap
Tạo form (biểu mẫu) tùy chỉnh trong Bootstrap
Từ khoá liên quan:

Tạo Breadcrumb trong Bootstrap

, Breadcrumb trong Bootstrap, Bootstrap,

SOFT LIÊN QUAN
  • Cách tạo robot

    Cách tạo, sử dụng robot

    Cách tạo robot là một cuốn tài liệu được viết bằng ngôn ngữ tiếng việt, nó nói về khái niệm, sơ lược, các vấn đề, sự hiện đại hóa của công nghệ cũng như sự ra đời của các con robot. Với bộ tài liệu này người dùng, người ...

Tin Mới


 Mùa hè tới rồi muốn so sánh giá tìm điều hòa giá rẻ nhất thị trường hãy dùng TopGia để so sanh gia có nhiều mẫu dieu hoa để so sanh sanh, xem dieu hoagiá rẻ để so sánh giá