Bootstrap: Thanh điều hướng (Navbar)

Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực

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

Thanh điều hướng là thành phần responsive thường được sử dụng trong phần header trong website của bạn. Thông thường, ban đầu chúng được thu gọn lại (và mở ra khi kích hoạt) trên khung nhìn của điện thoại di động và sẽ được mở rộng ra khi chiều rộng của khung nhìn tăng lên.

Nội dung bị tràn

Vì Bootstrap không biết lượng không gian mà nội dung của bạn cần trong thanh điều hướng, có thể bạn sẽ gặp lỗi nội dung bị tràn xuống dòng thứ hai. Để sửa lỗi này, bạn có thể:

  1. Giảm số lượng thành phần hoặc giảm chiều rộng của các thành phần trong thanh điều hướng
  2. Ẩn đi một số thành phần trong thanh điều hướng khi khung nhìn ở một kích thước nhất định bằng cách sử dụng các class responsive tiện ích.
  3. Thay đổi điểm mốc mà ở đó thanh điều hướng của bạn chuyển từ trạng thái mở rộng sang trạng thái thu gọn và ngược lại. Hãy tùy chỉnh biến số @grid-float-breakpoint hoặc thêm media query của riêng bạn.

Đòi hỏi JavaScript

Nếu như JavaScript bị vô hiệu hóa và kích thước khung nhìn đủ nhỏ để thanh điều hướng chuyển sang trạng thái thu gọn thì bạn sẽ không thể mở rộng thanh điều hướng và xem nội dung bên trong .navbar-collapse.

Thay đổi mốc chuyển đổi trạng thái của thanh điều hướng

Thanh điều hướng sẽ tự động chuyển về trạng thái thu gọn khi chiều rộng khung nhìn nhỏ hơn @grid-float-breakpoint, và sẽ tự động mở rộng ra như bình thường khi chiều rộng khung nhìn lớn hơn hoặc bằng @grid-float-breakpoint. Hãy điều chỉnh giá trị này trong mã nguồn Less để thay đổi mốc chuyển đổi trạng thái thu gọn/mở rộng. Giá trị mặc định là 768px (màn hình máy tính bảng).

<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

Tính phụ thuộc của plugin

Thanh điều hướng responsive yêu cầu plugin thu gọn phải được tích hợp trong phiên bản Bootstrap mà bạn sử dụng.

Thân thiện với người khuyết tật

Hãy thêm role="navigation" vào tất cả các thanh điều hướng để hỗ trợ sử dụng cho người khuyết tật.

Forms

Đặt nội dung của form vào bên trong .navbar-form để form được căn theo chiều dọc và có thể thu gọn khi kích thước khung nhìn đủ hẹp. Hãy sử dụng các tùy chọn căn chỉnh để xác định vị trí mà form nằm bên trong nội dung của thanh điều hướng.

.navbar-form và .form-inline được viết khá giống nhau dựa trên mixin. Một số form-control như nhóm input có thể yêu cầu việc thiết lập chiều rộng cố định để hiển thị một cách tốt nhất bên tron thanh điều hướng.

<form class="navbar-form navbar-left" role="search">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Search">
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

Vấn đề với các thiết bị di động

Có một số vấn đề liên quan đến việc sử dụng form-control bên trong các phần tử cố định trên các thiết bị di động. Hãy tham khảo tài liệu hỗ trợ trình duyệt của chúng tôi để biết thêm chi tiết.

Hãy luôn luôn thêm nhãn

Các trình đọc màn hình sẽ gặp lỗi với form của bạn nếu bạn không sử dụng nhãn cho tất cả các input. Đối với các form cùng dòng nằm trong thanh điều hướng, bạn có thể ẩn các nhãn đi bằng cách sử dụng .sr-only class.

Nút

Hãy thêm class .navbar-btn vào phần tử <button> không nằm bên trong <form> để tự động căn giữa chúng theo chiều dọc bên trong thanh điều hướng.

<button type="button" class="btn btn-default navbar-btn">Sign in</button>

Sử dụng theo ngữ cảnh cụ thể

Tương tự như các class cho nút.navbar-btn có thể được sử dụng trên các phần tử <a> và <input>. Tuy nhiên, cả.navbar-btn và các class cho nút không nên sử dụng trên phần tử <a> nằm bên trong .navbar-nav.

Text

Hãy bọc chuỗi các text bằng một phần tử có class .navbar-text, phần tử đó thường là thẻ <p> để hiển thị được tốt.

<p class="navbar-text">Signed in as Mark Otto</p>

Các liên kết không điều hướng

Nếu bạn muốn thêm một liên kết vào bên trong thanh điều hướng nhưng không dùng để điều hướng, hãy sử dụng class .navbar-link để hiển thị màu mặc định của một liên kết phân biệt với các thành phần điều hướng.

<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>

Căn chỉnh các thành phần

Căn chỉnh các liên kết, form, nút, hoặc text trong thanh điều hướng bằng cách sử dụng các class .navbar-left hoặc .navbar-right. Cả hai class sẽ thêm thêm các thuộc tính CSS float theo các hướng cụ thể. Ví dụ, để căn chỉnh các liên kết điều hướng, hãy đặt chúng vào bên trong một <ul> riêng biệt và áp dụng các class căn chỉnh lên thẻ <ul> đó.

These classes are mixin-ed versions of .pull-left and .pull-right, but they're scoped to media queries for easier handling of navbar components across device sizes.

Căn phải nhiều thành phần

Thanh điều hướng hiện tại có một số hạn chế khi sử dụng nhiều class .navbar-right. Để nội dung được hiển thị tốt, chúng tôi sử dụng margin âm trên phần tử .navbar-right cuối cùng. Khi có nhiều phần tử sử dụng class đó, các margin này sẽ không làm việc như mong đợi.

Chúng tôi sẽ cân nhắc vấn đề này khi chúng tôi viết lại thành phần đó trong phiên bản v4.

Cố định bên trên

Hãy thêm class .navbar-fixed-top và sử dụng .container hoặc .container-fluid để căn giữa và tạo khoảng đệm cho nội dung của thanh điều hướng.

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    ...
  </div>
</nav>

Yêu cầu padding cho body

Thanh điều hướng cố định sẽ hiển thị đè lên trên các nội dung khác của bạn, trừ khi bạn thêm padding trên vào <body>. Hãy thử sử dụng các giá trị của bạn hoặc sử dụng đoạn mã ngắn bên dưới của chúng tôi. Lưu ý: Mặc định, thanh điều hướng có chiều cao là 50px.

body { padding-top: 70px; }

Hãy thêm đoạn mã này vào sau mã CSS lõi của Bootstrap.

Cố định bên dưới

Hãy thêm class .navbar-fixed-bottom và sử dụng .container hoặc .container-fluid để căn giữa và tạo khoảng đệm cho nội dung của thanh điều hướng.

<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
  <div class="container">
    ...
  </div>
</nav>

Yêu cầu padding cho body

Thanh điều hướng cố định sẽ hiển thị đè lên trên các nội dung khác của bạn, trừ khi bạn thêm padding dưới vào <body>. Hãy thử sử dụng các giá trị của bạn hoặc sử dụng đoạn mã ngắn bên dưới của chúng tôi. Lưu ý: Mặc định, thanh điều hướng có chiều cao là 50px.

body { padding-bottom: 70px; }

Hãy thêm đoạn mã này vào sau mã CSS lõi của Bootstrap.

Không cố định

Nếu bạn muốn tạo ra một thanh điều hướng không cố định khi cuộn trang, hãy thêm .navbar-static-top và sử dụng .containerhoặc .container-fluid để căn giữa và tạo khoảng đệm cho nội dung của thanh điều hướng.

Không giống như các class .navbar-fixed-*, bạn sẽ không cần phải thay đổi padding của body.

<nav class="navbar navbar-default navbar-static-top" role="navigation">
  <div class="container">
    ...
  </div>
</nav>

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

Bạn có thể thay đổi hình thức của thanh điều hướng bằng cách sử dụng class .navbar-inverse.

<nav class="navbar navbar-inverse" role="navigation">
  ...
</nav>
» Tiếp: Breadcrumbs
« Trước: Thành phần điều hướng (Navs)
Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực
Copied !!!