Giới thiệu

Bootstrap là thứ không thể thiếu khi các bạn thiết kế website, nó hỗ trợ hầu như mọi thứ để bạn có thể xử lý nhanh chóng mà không phải tốn công ngồi code từng dòng CSS loằng ngoằng nữa. Tài liệu về cách sử dụng nó thì cũng đã có và nhiều vô kể rồi nhưng ở đây.

Những bạn khác sẽ thắc mắc tại sao trên trang tài liệu của Boostrap đã có hướng dẫn rồi mà tại sao bài viết này còn hướng dẫn lại. Đó là bởi vì hiện nay nhiều bạn vẫn chưa có thói quen đọc tài liệu và lười đọc tiếng anh, cho nên bài viết này nhằm nhắm đến những bạn còn yếu hoặc có thói quen như trên.

Nói về Navbar thì có rất nhiều dạng navbar từ đơn giản cho đến phức tạp, bài viết này sẽ không thể đề cập hết những dạng navbar đó. Nhưng bài viết này sẽ giúp các bạn xây dựng những navbar phổ biến hiện nay được nhiều website sử dụng.

Bài viết sử dụng Boostrap 4 trở lên nhé, nếu các bạn sử dụng Boostrap 3 có thể một số code sẽ không hoạt động như ý muốn đó nha.

Cài đặt

Mục này dành cho những bạn chưa biết 😀 . Để có thể sử dụng bootstrap các bạn cần phải nhúng source vào web của mình đã nhé.

Ở đây mình sử dụng CDN cho nhanh. Chỉ cần nhúng những đoạn link bên dưới đây vào phần <head> là được.

//Có đoạn meta này thì Responsive mới chạy được
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Nhúng Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" type="text/css">

<!-- Nhúng jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"  type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"  type="text/javascript"></script>

P/s: Khuyến khích các bạn nên download source về rồi dẫn link trong source của mình nhé.

Hướng dẫn

Menu ngang kiểu 1

Menu này khá đơn giản chỉ bao gôm phần LOGO + MENU, được sử dụng trên hầu hết các website hiện nay.

Demo:

Navbar ngang kiểu 1

Code mẫu:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark w-100">
    <div class="container">
        <!-- Brand -->
        <a class="navbar-brand" href="#">
            LOGO HERE
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <!-- Links -->
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item active">
                <a class="nav-link" href="#">Link 1</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link 2</a>
            </li>
        
            <!-- Dropdown -->
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
                Dropdown link
                </a>
                <div class="dropdown-menu">
                <a class="dropdown-item" href="#">Link 1</a>
                <a class="dropdown-item" href="#">Link 2</a>
                <a class="dropdown-item" href="#">Link 3</a>
                </div>
            </li>
            </ul>
        </div>
    </div>        
</nav>

Menu ngang kiểu 2

Menu này được áp dụng cho các website mua sắm, tin tức, bất động sản,…v…v… mà cần đến thanh công cụ tìm kiếm.

Demo:

Navbar ngang kiểu 2 – với thanh search

Code mẫu:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

Tùy chỉnh:

  1. Thay đổi màu navbar bằng cách thay navbar-dark bg-dark trong class của thẻ <nav> thành navbar-dark bg-light (màu sáng và chữ tối) hoặc navbar-dark bg-primary (màu xanh chính của bootstrap và chữ tối).
  2. Thay đổi vị trí menu bằng cách: thay ml-auto trong navbar-nav ml-auto của thẻ <ul>
    Trong đó:
    ml-auto: Menu nằm bên phải
    mr-auto: Menu nằm bên trái

Kết luận

Tạo nav menu bằng Bootstrap giúp tiết kiệm thời gian và công code rất nhiều. Cho nên, khuyến khích các bạn sử dụng những thứ mà Boostrap 4 đã hỗ trợ để thiết kế web.