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, 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 .navbar
lớp, 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 <ul>phần tử với class="navbar-nav". Sau đó, thêm <li>các phần tử với một .nav-itemlớp theo sau là một <a>phần tử có một .nav-linklớp:
Thí 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>
Thanh điều hướng dọc
Xóa .navbar-expand-xl|lg|md|smlớp để tạo thanh điều hướng dọc:
Thí 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>
Thanh điều hướng ở giữa
Thêm .justify-content-centerlớp vào giữa thanh điều hướng.
Ví dụ sau 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):
Thí dụ
<nav class="navbar navbar-expand-sm
bg-light justify-content-center">
...
</nav>
Thanh điều hướng màu
Sử dụng bất kỳ .bg-colorlớp nào để thay đổi màu nền của thanh điều hướng ( .bg-primary,,,
.bg-successvà .bg-info).bg-warning.bg-danger.bg-secondary.bg-dark.bg-light
Mẹo: Thêm màu văn bản trắng vào tất cả các liên kết trong thanh điều hướng với .navbar-darklớp hoặc sử dụng .navbar-lightlớp để thêm
màu văn bản đen .
Thí 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>
Trạng thái hoạt động / bị vô hiệu hóa : Thêm .activelớp vào một
<a>phần tử để đánh dấu liên kết hiện tại hoặc .disabledlớp để chỉ ra rằng liên kết không thể nhấp được.
Biểu tượng thương hiệu
Lớp .navbar-brandnày đượ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:
Thí dụ
<nav class="navbar navbar-expand-sm
bg-dark navbar-dark">
<a
class="navbar-brand" href="#">Logo</a>
...
</nav>
Khi sử dụng .navbar-brandlớp trên hình ảnh, Bootstrap 4 sẽ tự động tạo kiểu cho hình ảnh để vừa với thanh điều hướng theo chiều dọc.
Thí 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>
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ó . Sau đó, bọc nội dung thanh điều hướng (liên kết, v.v.) bên trong phần tử div , theo sau là id khớp với nút: " thetarget ".class="navbar-toggler",
data-toggle="collapse" and data-target="#thetarget"class="collapse navbar-collapse"data-target
Thí 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>
Mẹo: Bạn cũng có thể xóa lớp .navbar-expand-md để LUÔN LUÔN ẩn các liên kết điều hướng và hiển thị nút bật tắt.
Navbar With Dropdown
Navbars cũng có thể giữ các menu thả xuống:
Thí 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>
Các biểu mẫu và nút điều hướng
Thêm một <form>phần tử với class="form-inline"vào nhóm đầu vào và các nút cạnh nhau:
Thí 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>
Bạn cũng có thể sử dụng các lớp nhập liệu khác, chẳng hạn như .input-group-prependhoặ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 của Bootstrap.
Thí 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>
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ụ
<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>
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 .fixed-toplàm cho thanh điều hướng được cố định ở trên cùng :
Thí dụ
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
...
</nav>
Sử dụng .fixed-bottomlớp này để làm cho thanh điều hướng nằm ở cuối trang:
Thí dụ
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom">
...
</nav>
Use the .sticky-top class to make the navbar fixed/stay at
the top of the page when you scroll past it. Note:
This class does not work in IE11 and earlier (will treat it as position:relative).
Example
<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
...
</nav>