Thanh điều hướng Bootstrap 4
Thanh điều hướng
Thanh điều hướng là một tiêu đề điều hướng được đặt ở đầu trang:
Thanh điều hướng cơ bản
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.
Một thanh điều hướng tiêu chuẩn được tạo bằng lớp .navbar , theo sau là lớp thu gọn đáp ứng: .navbar-expand-xl|lg|md|sm (xếp thanh điều hướng theo chiều dọc trên các màn hình cực lớn, lớn, vừa hoặc nhỏ).
Để thêm liên kết bên trong thanh điều hướng, hãy sử dụng phần tử <ul> với class="navbar-nav" . Sau đó thêm các phần tử <li> với lớp .nav-item , theo sau là phần tử <a> với lớp .nav-link :
Ví dụ
<!-- A grey horizontal navbar that becomes
vertical on small screens -->
<nav class="navbar navbar-expand-sm
bg-light">
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link
1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link
2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link
3</a>
</li>
</ul>
</nav>Hãy tự mình thử »Thanh điều hướng dọc
Xóa lớp .navbar-expand-xl|lg|md|sm để tạo thanh điều hướng dọc:
Ví dụ
<!-- A vertical navbar -->
<nav class="navbar bg-light">
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link
1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link
2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link
3</a>
</li>
</ul>
</nav> Hãy tự mình thử » Thanh điều hướng ở giữa
Thêm lớp .justify-content-center để căn giữa thanh điều hướng.
Ví dụ sau đây sẽ căn giữa thanh điều hướng trên màn hình vừa, lớn và cực lớn. Trên màn hình nhỏ, nó sẽ được hiển thị theo chiều dọc và căn trái (vì lớp .navbar-expand-sm):
Ví dụ
<nav class="navbar navbar-expand-sm
bg-light justify-content-center">
...
</nav> Hãy tự mình thử »Thanh điều hướng màu
Sử dụng bất kỳ lớp .bg-color nào để thay đổi màu nền của thanh điều hướng ( .bg-primary , .bg-success , .bg-info , .bg-warning , .bg-danger , .bg-secondary , .bg-dark và .bg-light )
Mẹo: Thêm màu văn bản màu trắng cho tất cả các liên kết trong thanh điều hướng bằng lớp .navbar-dark hoặc sử dụng lớp .navbar-light để thêm màu văn bản đen .
Ví dụ
<!-- Grey with black text -->
<nav class="navbar navbar-expand-sm bg-light navbar-light">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link"
href="#">Active</a>
</li>
<li
class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link
disabled" href="#">Disabled</a>
</li>
</ul>
</nav>
<!-- Black with white text -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">...</nav>
<!-- Blue with white text -->
<nav class="navbar navbar-expand-sm
bg-primary navbar-dark">...</nav>
Hãy tự mình thử » Trạng thái hoạt động/bị vô hiệu hóa : Thêm lớp .active vào phần tử <a> để đánh dấu liên kết hiện tại hoặc lớp .disabled để cho biết rằng liên kết không thể nhấp vào được.
Biểu tượng thương hiệu
Lớp .navbar-brand được sử dụng để làm nổi bật thương hiệu/logo/tên dự án trên trang của bạn:
Ví dụ
<nav class="navbar navbar-expand-sm
bg-dark navbar-dark">
<a
class="navbar-brand" href="#">Logo</a>
...
</nav> Hãy tự mình thử » Khi sử dụng lớp .navbar-brand trên hình ảnh, Bootstrap 4 sẽ tự động định kiểu hình ảnh cho vừa với thanh điều hướng theo chiều dọc.
Ví dụ
<nav class="navbar navbar-expand-sm
bg-dark navbar-dark">
<a class="navbar-brand" href="#">
<img src="bird.jpg"
alt="Logo" style="width:40px;">
</a>
...
</nav> Hãy tự mình thử »Thu gọn thanh điều hướng
Rất thường xuyên, đặc biệt là trên màn hình nhỏ, bạn muốn ẩn các liên kết điều hướng và thay thế chúng bằng một nút sẽ hiển thị chúng khi nhấp vào.
Để tạo thanh điều hướng có thể thu gọn, hãy sử dụng nút có class="navbar-toggler", data-toggle="collapse" and data-target="# thetarget " . Sau đó, bọc nội dung thanh điều hướng (liên kết, v.v.) bên trong phần tử div bằng class="collapse navbar-collapse" , theo sau là id khớp với data-target của nút: " thetarget ".
Ví dụ
<nav class="navbar navbar-expand-md bg-dark
navbar-dark">
<!-- Brand -->
<a class="navbar-brand" href="#">Navbar</a>
<!-- Toggler/collapsibe Button -->
<button
class="navbar-toggler" type="button"
data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse"
id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link"
href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="#">Link</a>
</li>
</ul>
</div>
</nav> Hãy tự mình thử »Mẹo: Bạn cũng có thể xóa lớp .navbar-expand-md để LUÔN ẩn các liên kết thanh điều hướng và hiển thị nút bật tắt.
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ụ
<nav class="navbar navbar-expand-sm
bg-dark navbar-dark">
<!-- Brand -->
<a class="navbar-brand" href="#">Logo</a>
<!-- Links -->
<ul class="navbar-nav">
<li
class="nav-item">
<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>
</nav> Hãy tự mình thử »Biểu mẫu và nút điều hướng
Thêm phần tử <form> với class="form-inline" để nhóm các đầu vào và nút cạnh nhau:
Ví dụ
<nav class="navbar navbar-expand-sm
bg-dark navbar-dark">
<form class="form-inline" action="/action_page.php">
<input class="form-control
mr-sm-2"
type="text" placeholder="Search">
<button class="btn btn-success" type="submit">Search</button>
</form>
</nav> Hãy tự mình thử » Bạn cũng có thể sử dụng các lớp đầu vào khác, chẳng hạn như .input-group-prepend hoặc .input-group-append để đí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ụ
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<form class="form-inline" action="/action_page.php">
<div class="input-group">
<div
class="input-group-prepend">
<span class="input-group-text">@</span>
</div>
<input type="text"
class="form-control" placeholder="Username">
</div>
</form>
</nav> 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-expand-sm bg-dark navbar-dark">
<!--
Links -->
<ul class="navbar-nav">
<li
class="nav-item">
<a class="nav-link" href="#">Link
1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
</ul>
<!-- Navbar text-->
<span class="navbar-text">
Navbar text
</span>
</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 .fixed-top làm cho thanh điều hướng được cố định ở trên cùng :
Ví dụ
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
...
</nav> Hãy tự mình thử » Sử dụng lớp .fixed-bottom để đặt thanh điều hướng ở cuối trang:
Ví dụ
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom">
...
</nav> Hãy tự mình thử » Sử dụng lớp .sticky-top để cố định thanh điều hướng/giữ ở đầu trang khi bạn cuộn qua nó. Lưu ý: Lớp này không hoạt động trong IE11 trở về trước (sẽ coi nó là position:relative ).
Ví dụ
<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
...
</nav> Hãy tự mình thử »