Thanh điều hướng Bootstrap

Thanh điều hướng

Thanh điều hướng là một tiêu đề điều hướng được đặt ở đầu trang:

Với Bootstrap, một thanh điều hướng có thể mở rộng hoặc thu gọn, tùy thuộc vào kích thước màn hình.

Một thanh điều hướng tiêu chuẩn được tạo với <nav class="navbar navbar-default">.

Ví dụ sau cho thấy cách thêm thanh điều hướng vào đầu trang:

Thí dụ

<nav class="navbar navbar-default">
<div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
</div>
</nav>
...

Lưu ý: Tất cả các ví dụ trên trang này sẽ hiển thị một thanh điều hướng chiếm quá nhiều không gian trên màn hình nhỏ (tuy nhiên, thanh điều hướng sẽ nằm trên một dòng duy nhất trên màn hình lớn - vì Bootstrap là phản hồi). Vấn đề này (với màn hình nhỏ) sẽ được giải quyết trong ví dụ cuối cùng trên trang này.

Thanh điều hướng đảo ngược

Nếu bạn không thích phong cách của thanh điều hướng mặc định, Bootstrap cung cấp một thanh điều hướng màu đen thay thế:

Chỉ cần thay đổi .navbar-defaultlớp thành .navbar-inverse:

Thí dụ

Thanh điều hướng có thả xuống

Các thanh điều hướng cũng có thể chứa các menu thả xuống.

Ví dụ sau thêm trình đơn thả xuống cho nút "Trang 1":

Thí dụ

<nav class="navbar navbar-inverse">
<div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
        <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">Page 1-1</a></li>
          <li><a href="#">Page 1-2</a></li>
          <li><a href="#">Page 1-3</a></li>
        </ul>
      </li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
</div>
</nav>

Thanh điều hướng được căn phải

Lớp .navbar-rightnày được sử dụng để căn phải các nút trên thanh điều hướng.

Trong ví dụ sau, chúng tôi chèn nút "Đăng ký" và nút "Đăng nhập" vào bên phải trong thanh điều hướng. Chúng tôi cũng thêm một glyphicon trên mỗi nút trong số hai nút mới:

Thí dụ

<nav class="navbar navbar-inverse">
<div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
      <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
    </ul>
</div>
</nav>

Các nút điều hướng

Để thêm các nút bên trong thanh điều hướng, hãy thêm .navbar-btnlớp vào nút Bootstrap:

Thí dụ

<nav class="navbar navbar-inverse">
<div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
    </ul>
    <button class="btn btn-danger navbar-btn">Button</button>
</div>
</nav>

Biểu mẫu Navbar

Để thêm các phần tử biểu mẫu bên trong thanh điều hướng, hãy thêm .navbar-formlớp vào một phần tử biểu mẫu và thêm (các) đầu vào. Lưu ý rằng chúng ta đã thêm một .form-grouplớp vào vùng chứa div chứa đầu vào. Điều này thêm phần đệm thích hợp nếu bạn có nhiều hơn một đầu vào (bạn sẽ tìm hiểu thêm về điều này trong chương Biểu mẫu).

Thí dụ

<nav class="navbar navbar-inverse">
<div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
    </ul>
    <form class="navbar-form navbar-left" action="/action_page.php">
      <div class="form-group">
        <input type="text" class="form-control" placeholder="Search">
      </div>
      <button type="submit" class="btn btn-default">Submit</button>
    </form>
</div>
</nav>

Bạn cũng có thể sử dụng .input-groupvà .input-group-addoncác lớp để đính kèm biểu tượng hoặc văn bản trợ giúp bên cạnh trường nhập. Bạn sẽ tìm hiểu thêm về các lớp này trong chương Đầu vào của Bootstrap.

Thí dụ

Văn bản trên thanh điều hướng

Sử dụng .navbar-textlớp để căn chỉnh theo chiều dọc bất kỳ phần tử nào bên trong thanh điều hướng không phải là liên kết (đảm bảo đệm và màu văn bản phù hợp).

Thí dụ

Thanh điều hướng cố định

Thanh điều hướng cũng có thể được cố định ở đầu hoặc cuối trang.

Thanh điều hướng cố định vẫn hiển thị ở một vị trí cố định (trên cùng hoặc dưới cùng) độc lập với cuộn trang.

Lớp .navbar-fixed-toplàm cho thanh điều hướng được cố định ở trên cùng:

Thí dụ

<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
</div>
</nav>

Lớp .navbar-fixed-bottomlàm cho thanh điều hướng ở dưới cùng:

Thí dụ

<nav class="navbar navbar-inverse navbar-fixed-bottom">
<div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
</div>
</nav>

Thu gọn thanh điều hướng

Thanh điều hướng thường chiếm quá nhiều dung lượng trên màn hình nhỏ.

Chúng ta nên ẩn thanh điều hướng; và chỉ hiển thị khi cần thiết.

Trong ví dụ sau, thanh điều hướng được thay thế bằng một nút ở góc trên cùng bên phải. Chỉ khi nút được nhấp, thanh điều hướng sẽ được hiển thị:

Thí dụ

<nav class="navbar navbar-inverse">
<div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
      </ul>
    </div>
</div>
</nav>

❮ Trước Kế tiếp ❯

Hướng dẫn Bootstrap 3

Lưới Bootstrap

Chủ đề Bootstrap

Ví dụ về Bootstrap

Tham chiếu CSS Bootstrap

Tham chiếu Bootstrap JS

Thanh điều hướng Bootstrap