Bootstrap 4 – Breadcrumbs

Breadcrumb (tập hợp các đường link phân cấp giúp khách truy cập biết mình đang ở vị trí nào của website).

Bootstrap cung cấp class .breadcrumb để style list thành breadcrumb.

Bootstrap dùng ::before với content để tạo dấu phân cách (/) bạn cũng có thể custum lại theo ý mình.

Bootstrap thêm display: inline-block để list dạng inline.

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">
    <ul class="breadcrumb">
      <li class="breadcrumb-item">
        <a href="#">Home</a> 
      </li>
      <li class="breadcrumb-item">
        <a href="#">Fruit</a>
      </li>
      <li class="breadcrumb-item active">Pears</li>
    </ul>

  </div>
</body>

</html>

Tạo Breadcrumb

Thêm class=”breadcrumb” vào ul.

Thêm .breadcrumb-item vào mỗi element li trong breadcrumb.

Thêm class=”active” vào li trang hiện tại. Thường là li cuối cùng.

Non-List Breadcrumbs

Breadcrumbs không nhất thiết phải dùng với list, bạn có thẻ sử dụng các class này cho element khác như ví dụ:

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">
    <div class="breadcrumb">
      <a class="breadcrumb-item" href="#">Home</a>
      <a class="breadcrumb-item" href="#">Fruit</a>
      <span class="breadcrumb-item active">Pears</span>
    </div>

  </div>
</body>

</html>