Bootstrap 4 – Navs

Class .nav trong Bootstrap giúp xây dựng list có chức năng điều hướng như nav pill, tab

Để tạo nav pill hay Tab bạn cần thêm .nav-pills hay .nav-tabs vào trong thẻ ul chứa list điều hướng.

Thẻ ul không nhất thiết phải dùng, có thể sử dụng element khác cũng được.

Nav Cơ bản

Bootstrap 4 cung cấp style cơ bản cho item của nav, bạn có thể thêm các class khác của bootstrap hay custom lại css.

Để tạo Nav cơ bạn, bạn dùng class nav trong của phần tử điêu hướng bên ngoài như ul, nav

Ví dụ ul

<!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="nav">

      <li class="nav-item">
        <a class="nav-link active" href="#">HTML</a>
      </li>

      <li class="nav-item">
        <a class="nav-link" href="#">CSS</a>
      </li>

      <li class="nav-item">
        <a class="nav-link" href="#">JavaScript</a>
      </li>

      <li class="nav-item">
        <a class="nav-link" href="#">Preview</a>
      </li>

    </ul>
  </div>

</body>

</html>

Vi dụ nav

<!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">
    <nav class="nav">
        <a class="nav-link active" href="#">HTML</a>
        <a class="nav-link" href="#">CSS</a>
        <a class="nav-link" href="#">JavaScript</a>
        <a class="nav-link" href="#">Preview</a>
    </nav>
  </div>

</body>

</html>

Chú ý:

Bootstrap 4 yêu cầu class .nav-item trong tất cả thẻ li
Dùng .nav-link trong tất cả thẻ a và thêm class .active vào thẻ a để tạo item được chọn. Class active này bạn sẽ được thấy rõ hơn ở phần sau.

Vertical Navs

Sử dụng class flex-column cùng với nav để tạo menu dọc.

<!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">
    <nav class="nav flex-column">
        <a class="nav-link active" href="#">HTML</a>
        <a class="nav-link" href="#">CSS</a>
        <a class="nav-link" href="#">JavaScript</a>
        <a class="nav-link" href="#">Preview</a>
    </nav>
  </div>

</body>

</html>

Tabs

Thêm nav-tabs vào cùng nav trong thẻ ul để tạo nav tab. Vớ class active cho item được chọn.

<!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="nav nav-tabs">

      <li class="nav-item">
        <a class="nav-link active" href="#">HTML</a>
      </li>

      <li class="nav-item">
        <a class="nav-link" href="#">CSS</a>
      </li>

      <li class="nav-item">
        <a class="nav-link" href="#">JavaScript</a>
      </li>

      <li class="nav-item">
        <a class="nav-link" href="#">Preview</a>
      </li>

    </ul>
  </div>

</body>

</html>

Pills

Thay nav-tabs bằng nav-pills để tạo nav pill

<!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="nav nav-pills">

      <li class="nav-item">
        <a class="nav-link active" href="#">HTML</a>
      </li>

      <li class="nav-item">
        <a class="nav-link" href="#">CSS</a>
      </li>

      <li class="nav-item">
        <a class="nav-link" href="#">JavaScript</a>
      </li>

      <li class="nav-item">
        <a class="nav-link" href="#">Preview</a>
      </li>

    </ul>
  </div>

</body>

</html>

Vertical Pills

Tương tự thêm .flex-column vào để tạo nav pill dọc.

<!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="nav nav-pills flex-column">

      <li class="nav-item">
        <a class="nav-link active" href="#">HTML</a>
      </li>

      <li class="nav-item">
        <a class="nav-link" href="#">CSS</a>
      </li>

      <li class="nav-item">
        <a class="nav-link" href="#">JavaScript</a>
      </li>

      <li class="nav-item">
        <a class="nav-link" href="#">Preview</a>
      </li>

    </ul>
  </div>

</body>

</html>

Disabled Links

Bạn có thể dùng class disabled để disabled link trong tab hay pill.

<!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="nav nav-pills">

      <li class="nav-item">
        <a class="nav-link" href="#">HTML</a>
      </li>

      <li class="nav-item">
        <a class="nav-link" href="#">CSS</a>
      </li>

      <li class="nav-item">
        <a class="nav-link" href="#">JavaScript</a>
      </li>

      <li class="nav-item">
        <a class="nav-link disabled" href="#">Preview</a>
      </li>

    </ul>
  </div>

</body>

</html>

Chú ý là class disabled chỉ style link trong nav giống như disabled. Chức năng link vẫn không đổi nếu click vào. Để disabled luôn link bạn cần dùng phương pháp khác như JavaScript.

Dropdown Menus

Bạn có thể dùng class .dropdown trong thẻ li của nav pill hay tab để tạo dropdown.

Tabs

<!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="nav nav-tabs">

      <li class="nav-item">
        <a class="nav-link active" href="#">HTML</a>
      </li>

      <li class="nav-item">
        <a class="nav-link" href="#">CSS</a>
      </li>

      <li class="nav-item">
        <a class="nav-link" href="#">JavaScript</a>
      </li>

      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
          Preview
        </a>
        <div class="dropdown-menu" aria-labelledby="Preview">
          <a class="dropdown-item" href="#">Mobile Phone</a>
          <a class="dropdown-item" href="#">Tablet</a>
          <a class="dropdown-item" href="#">Laptop</a>
          <a class="dropdown-item" href="#">Desktop</a>
        </div>
      </li>

    </ul>
  </div>

</body>

</html>

Pills

<!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="nav nav-pills">

      <li class="nav-item">
        <a class="nav-link active" href="#">HTML</a>
      </li>

      <li class="nav-item">
        <a class="nav-link" href="#">CSS</a>
      </li>

      <li class="nav-item">
        <a class="nav-link" href="#">JavaScript</a>
      </li>

      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
          Preview
        </a>
        <div class="dropdown-menu" aria-labelledby="Preview">
          <a class="dropdown-item" href="#">Mobile Phone</a>
          <a class="dropdown-item" href="#">Tablet</a>
          <a class="dropdown-item" href="#">Laptop</a>
          <a class="dropdown-item" href="#">Desktop</a>
        </div>
      </li>

    </ul>
  </div>

</body>

</html>

Tabbable Panes

Bạn cũng có thể dùng Bootstrap để tạo Tabbable Panes cho phần nội dung.

Thêm vào mỗi thẻ a trong navigation thuộc tính data-toggle=”tab” hay data-toggle=”pill” (tùy bạn dùng nav tab hay pill).

Sau đó, bên dưới nav, thêm thẻ div với .tab-content để chứa nội dung. Trong thẻ div này, mỗi nội dung được chứa trong thẻ div với class là .tab-pane.

Bạn có thể dùng class .fade cho mỗi .tab-pane để tạo hiệu ứng mờ đi. Và tab đầu tiên (Hay tab active mặc đinh) cần thêm class .show để hiển thị ngay từ đầu.

<!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 id="clothing-nav" class="nav nav-tabs" role="tablist">

      <li class="nav-item">
        <a class="nav-link active" href="#home" id="home-tab" role="tab" data-toggle="tab" aria-controls="home" aria-expanded="true">Home</a>
      </li>

      <li class="nav-item">
        <a class="nav-link" href="#hats" role="tab" id="hats-tab" data-toggle="tab" aria-controls="hats">Hats</a>
      </li>

      <!-- Dropdown -->
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
          Footwear
        </a>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#dropdown-shoes" role="tab" id="dropdown-shoes-tab" data-toggle="tab" aria-controls="dropdownShoes">Shoes</a>
          <a class="dropdown-item" href="#dropdown-boots" role="tab" id="dropdown-boots-tab" data-toggle="tab" aria-controls="dropdownBoots">Boots</a>
        </div>
      </li>

    </ul>

    <!-- Content Panel -->
    <div id="clothing-nav-content" class="tab-content">

      <div role="tabpanel" class="tab-pane fade show active" id="home" aria-labelledby="home-tab">
        <p>Welcome home! Click on the tabs to see the content change.</p>
      </div>

      <div role="tabpanel" class="tab-pane fade" id="hats" aria-labelledby="hats-tab">
        <p>A hat is a head covering. It can be worn for protection against the elements, ceremonial reasons, religious reasons,
          safety, or as a fashion accessory.</p>
      </div>

      <div role="tabpanel" class="tab-pane fade" id="dropdown-shoes" aria-labelledby="dropdown-shoes-tab">
        <p>A shoe is an item of footwear intended to protect and comfort the human foot while doing various activities. Shoes
          are also used as an item of decoration.</p>
      </div>

      <div role="tabpanel" class="tab-pane fade" id="dropdown-boots" aria-labelledby="dropdown-boots-tab">
        <p>A boot is a type of footwear and a specific type of shoe. Most boots mainly cover the foot and the ankle, while some
          also cover some part of the lower calf. Some boots extend up the leg, sometimes as far as the knee or even the
          hip.</p>
      </div>

    </div>
  </div>

</body>

</html>