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, 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.
Thanh điều hướng tiêu chuẩn được tạo bằng <nav class="navbar navbar-default"> .
Ví dụ sau đây cho thấy cách thêm thanh điều hướng vào đầu trang:
Ví 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>
...Hãy tự mình thử »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 trên màn hình lớn - vì Bootstrap có khả năng phản hồi nhanh). 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 kiểu 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 lớp .navbar-default thành .navbar-inverse :
Ví 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>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
Hãy tự mình thử » Thanh điều hướng có thả xuống
Thanh điều hướng cũng có thể chứa các menu thả xuống.
Ví dụ sau thêm menu thả xuống cho nút "Trang 1":
Ví 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> Hãy tự mình thử »Thanh điều hướng căn phải
Lớp .navbar-right được sử dụng để căn chỉnh các nút trên thanh điều hướng sang phải.
Trong ví dụ sau, chúng tôi chèn nút "Đăng ký" và nút "Đăng nhập" ở bên phải 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:
Ví 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> Hãy tự mình thử »Nút thanh điều hướng
Để thêm các nút bên trong thanh điều hướng, hãy thêm lớp .navbar-btn trên nút Bootstrap:
Ví 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> Hãy tự mình thử »Biểu mẫu thanh điều hướng
Để thêm các thành phần biểu mẫu bên trong thanh điều hướng, hãy thêm lớp .navbar-form vào thành phần biểu mẫu và thêm (các) đầu vào. Lưu ý rằng chúng tôi đã thêm lớp .form-group vào vùng chứa div chứa dữ liệu đầu vào. Điều này sẽ 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).
Ví 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> Hãy tự mình thử » Bạn cũng có thể sử dụng các lớp .input-group và .input-group-addon để đính kèm biểu tượng hoặc văn bản trợ giúp bên cạnh trường nhập liệu. Bạn sẽ tìm hiểu thêm về các lớp này trong chương Đầu vào Bootstrap.
Ví dụ
<form class="navbar-form navbar-left" action="/action_page.php">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<div class="input-group-btn">
<button class="btn btn-default" type="submit">
<i class="glyphicon glyphicon-search"></i>
</button>
</div>
</div>
</form> Hãy tự mình thử »Văn bản thanh điều hướng
Sử dụng lớp .navbar-text để 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 phần đệm và màu văn bản phù hợp).
Ví dụ
<nav class="navbar navbar-inverse">
<ul class="nav navbar-nav">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
<p class="navbar-text">Some text</p>
</nav> Hãy tự mình thử »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ị ở vị trí cố định (trên cùng hoặc dưới cùng) độc lập với thao tác cuộn trang.
Lớp .navbar-fixed-top làm cho thanh điều hướng được cố định ở trên cùng:
Ví 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> Hãy tự mình thử » Lớp .navbar-fixed-bottom làm cho thanh điều hướng ở dưới cùng:
Ví 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>
Hãy tự mình thử »Thu gọn thanh điều hướng
Thanh điều hướng thường chiếm quá nhiều không gian trên màn hình nhỏ.
Chúng ta nên ẩn thanh điều hướng; và chỉ hiển thị nó 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 bên phải. Chỉ khi nhấp vào nút, thanh điều hướng mới được hiển thị:
Ví 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> Hãy tự mình thử » 