Bootstrap: Thanh điều hướng (Navbar)
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.
Đò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 .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.
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>
Giải phóng thời gian, khai phóng năng lực