Thanh điều hướng
Tài liệu và ví dụ về tiêu đề điều hướng mạnh mẽ, đáp ứng của Bootstrap, thanh điều hướng. Bao gồm hỗ trợ xây dựng thương hiệu, điều hướng, plugin thu gọn và hơn thế nữa.
Làm thế nào nó hoạt động
Đây là những điều bạn cần biết trước khi bắt đầu với thanh điều hướng:
- Navbars yêu cầu một gói
.navbarcho các lớp.navbar-expand{-sm|-md|-lg|-xl}thu gọn và phối màu đáp ứng . - Các thanh điều hướng và nội dung của chúng là linh hoạt theo mặc định. Sử dụng các vùng chứa tùy chọn để giới hạn chiều ngang của chúng.
- Sử dụng các lớp tiện ích giãn cách và linh hoạt của chúng tôi để kiểm soát khoảng cách và căn chỉnh trong các thanh điều hướng.
- Các thanh điều hướng phản hồi theo mặc định, nhưng bạn có thể dễ dàng sửa đổi chúng để thay đổi điều đó. Hành vi đáp ứng phụ thuộc vào plugin Thu gọn JavaScript của chúng tôi.
- Các thanh điều hướng được ẩn theo mặc định khi in. Buộc chúng phải được in bằng cách thêm
.d-printvào.navbar. Xem lớp tiện ích hiển thị . - Đảm bảo khả năng truy cập bằng cách sử dụng một
<nav>phần tử hoặc, nếu sử dụng một phần tử chung chung hơn chẳng hạn như a<div>, hãy thêm arole="navigation"vào mọi thanh điều hướng để xác định rõ ràng nó là vùng mốc cho người dùng công nghệ hỗ trợ.
prefers-reduced-motiontruy vấn phương tiện. Xem phần
chuyển động giảm trong tài liệu hỗ trợ tiếp cận của chúng tôi .
Nội dung được hỗ trợ
Navbars đi kèm với hỗ trợ tích hợp cho một số thành phần phụ. Chọn trong số các tùy chọn sau nếu cần:
.navbar-brandcho tên công ty, sản phẩm hoặc dự án của bạn..navbar-navđể có điều hướng đủ độ cao và nhẹ (bao gồm hỗ trợ trình đơn thả xuống)..navbar-togglerđể sử dụng với plugin thu gọn của chúng tôi và các hành vi chuyển đổi điều hướng khác..form-inlinecho bất kỳ điều khiển và hành động biểu mẫu nào..navbar-textđể thêm các chuỗi văn bản căn giữa theo chiều dọc..collapse.navbar-collapseđể nhóm và ẩn nội dung thanh điều hướng bằng điểm ngắt chính.
Dưới đây là ví dụ về tất cả các thành phần phụ có trong thanh điều hướng theo chủ đề ánh sáng đáp ứng tự động thu gọn tại lgđiểm ngắt (lớn).
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>Ví dụ này sử dụng các lớp tiện ích color ( bg-light) và spacing ( my-2,, my-lg-0) mr-sm-0.my-sm-0
Nhãn hiệu
Có .navbar-brandthể áp dụng cho hầu hết các phần tử, nhưng một neo hoạt động tốt nhất, vì một số phần tử có thể yêu cầu các lớp tiện ích hoặc kiểu tùy chỉnh.
<!-- As a link -->
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
</nav>
<!-- As a heading -->
<nav class="navbar navbar-light bg-light">
<span class="navbar-brand mb-0 h1">Navbar</span>
</nav>Việc thêm hình ảnh vào .navbar-brandsẽ luôn yêu cầu các kiểu hoặc tiện ích tùy chỉnh để có kích thước phù hợp. Dưới đây là một số ví dụ để minh chứng.
<!-- Just an image -->
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">
<img src="/docs/4.6/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="">
</a>
</nav><!-- Image and text -->
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">
<img src="/docs/4.6/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
Bootstrap
</a>
</nav>Điều hướng
Các liên kết điều hướng trên thanh điều hướng xây dựng dựa trên các .navtùy chọn của chúng tôi với lớp bổ trợ của riêng chúng và yêu cầu sử dụng các lớp chuyển đổi để tạo kiểu đáp ứng thích hợp. Điều hướng trong thanh điều hướng cũng sẽ phát triển để chiếm nhiều không gian theo chiều ngang nhất có thể để giữ cho nội dung thanh điều hướng của bạn được căn chỉnh an toàn.
Trạng thái đang hoạt động — với .active—để cho biết trang hiện tại có thể được áp dụng trực tiếp cho .nav-links hoặc cha mẹ trực tiếp của chúng .nav-item.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
</div>
</nav>Và bởi vì chúng tôi sử dụng các lớp cho nav của chúng tôi, bạn có thể tránh hoàn toàn cách tiếp cận dựa trên danh sách nếu bạn muốn.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-link" href="#">Features</a>
<a class="nav-link" href="#">Pricing</a>
<a class="nav-link disabled">Disabled</a>
</div>
</div>
</nav>Bạn cũng có thể sử dụng danh sách thả xuống trong thanh điều hướng của mình. Menu thả xuống yêu cầu một phần tử bao bọc để định vị, vì vậy hãy đảm bảo sử dụng các phần tử riêng biệt và lồng nhau cho .nav-itemvà .nav-linknhư được hiển thị bên dưới.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>Các hình thức
Đặt các thành phần và điều khiển biểu mẫu khác nhau trong thanh điều hướng với .form-inline.
<nav class="navbar navbar-light bg-light">
<form class="form-inline">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</nav>Các phần tử con ngay lập tức của .navbarviệc sử dụng bố cục flex và sẽ mặc định thành justify-content: space-between. Sử dụng các tiện ích flex bổ sung nếu cần để điều chỉnh hành vi này.
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand">Navbar</a>
<form class="form-inline">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</nav>Nhóm đầu vào cũng hoạt động:
<nav class="navbar navbar-light bg-light">
<form class="form-inline">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">@</span>
</div>
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>
</form>
</nav>Các nút khác nhau cũng được hỗ trợ như một phần của các biểu mẫu thanh điều hướng này. Đây cũng là một lời nhắc nhở tuyệt vời rằng các tiện ích căn chỉnh theo chiều dọc có thể được sử dụng để căn chỉnh các phần tử có kích thước khác nhau.
<nav class="navbar navbar-light bg-light">
<form class="form-inline">
<button class="btn btn-outline-success" type="button">Main button</button>
<button class="btn btn-sm btn-outline-secondary" type="button">Smaller button</button>
</form>
</nav>Chữ
Navbars có thể chứa các bit văn bản với sự trợ giúp của .navbar-text. Lớp này điều chỉnh căn chỉnh theo chiều dọc và khoảng cách theo chiều ngang cho các chuỗi văn bản.
<nav class="navbar navbar-light bg-light">
<span class="navbar-text">
Navbar text with an inline element
</span>
</nav>Trộn và kết hợp với các thành phần và tiện ích khác khi cần thiết.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar w/ text</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
<span class="navbar-text">
Navbar text with an inline element
</span>
</div>
</nav>Phối màu
Tạo điều hướng cho thanh điều hướng chưa bao giờ dễ dàng hơn thế nhờ sự kết hợp của các lớp chủ đề và background-colorcác tiện ích. Chọn .navbar-lightđể sử dụng với màu nền sáng hoặc .navbar-darkmàu nền tối. Sau đó, tùy chỉnh bằng .bg-*các tiện ích.
<nav class="navbar navbar-dark bg-dark">
<!-- Navbar content -->
</nav>
<nav class="navbar navbar-dark bg-primary">
<!-- Navbar content -->
</nav>
<nav class="navbar navbar-light" style="background-color: #e3f2fd;">
<!-- Navbar content -->
</nav>
Hộp đựng
Mặc dù nó không bắt buộc, nhưng bạn có thể quấn thanh điều hướng vào .containergiữa để căn giữa nó trên một trang. Hoặc bạn có thể thêm một vùng chứa bên trong .navbarđể chỉ căn giữa nội dung của thanh điều hướng trên cùng cố định hoặc tĩnh .
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
</nav>
</div>Khi vùng chứa nằm trong thanh điều hướng của bạn, phần đệm ngang của nó sẽ bị loại bỏ tại các điểm ngắt thấp hơn .navbar-expand{-sm|-md|-lg|-xl}lớp được chỉ định của bạn. Điều này đảm bảo chúng tôi không tăng gấp đôi phần đệm một cách không cần thiết trên các cửa sổ xem thấp hơn khi thanh điều hướng của bạn bị thu gọn.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">Navbar</a>
</div>
</nav>Vị trí
Sử dụng các tiện ích định vị của chúng tôi để đặt các thanh điều hướng ở các vị trí không tĩnh. Chọn từ cố định ở trên cùng, cố định ở dưới cùng hoặc cố định ở trên cùng (cuộn trang cho đến khi trang lên đến đầu, sau đó giữ nguyên ở đó). Đã sửa lỗi sử dụng thanh điều hướng position: fixed, nghĩa là chúng được kéo từ luồng thông thường của DOM và có thể yêu cầu CSS tùy chỉnh (ví dụ: padding-toptrên <body>) để ngăn chồng chéo với các phần tử khác.
Cũng lưu ý rằng cách .sticky-topsử dụng position: stickykhông được hỗ trợ đầy đủ trong mọi trình duyệt .
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">Default</a>
</nav><nav class="navbar fixed-top navbar-light bg-light">
<a class="navbar-brand" href="#">Fixed top</a>
</nav><nav class="navbar fixed-bottom navbar-light bg-light">
<a class="navbar-brand" href="#">Fixed bottom</a>
</nav><nav class="navbar sticky-top navbar-light bg-light">
<a class="navbar-brand" href="#">Sticky top</a>
</nav>Cuộn
Thêm .navbar-nav-scrollvào .navbar-collapse(hoặc thành phần phụ khác của thanh điều hướng) để cho phép cuộn dọc trong nội dung có thể chuyển đổi của thanh điều hướng được thu gọn. Theo mặc định, cuộn sẽ bắt đầu ở 75vh(hoặc 75% chiều cao của khung nhìn), nhưng bạn có thể ghi đè điều đó bằng các kiểu nội tuyến hoặc tùy chỉnh. Tại các cửa sổ xem lớn hơn khi thanh điều hướng được mở rộng, nội dung sẽ xuất hiện như trong thanh điều hướng mặc định.
Xin lưu ý rằng hành vi này đi kèm với một nhược điểm tiềm ẩn là overflow— khi cài đặt overflow-y: auto(bắt buộc để cuộn nội dung ở đây), overflow-xtương đương với auto, sẽ cắt một số nội dung theo chiều ngang.
Đây là một ví dụ về thanh điều hướng sử dụng .navbar-nav-scrollwith style="max-height: 100px;", với một số tiện ích lề bổ sung để có khoảng cách tối ưu.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar scroll</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarScroll">
<ul class="navbar-nav mr-auto my-2 my-lg-0 navbar-nav-scroll" style="max-height: 100px;">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
Link
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled">Link</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control mr-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</nav>Hành vi đáp ứng
Các thanh điều hướng có thể sử dụng .navbar-togglervà .navbar-collapsecác .navbar-expand{-sm|-md|-lg|-xl}lớp để xác định thời điểm nội dung của chúng bị thu gọn sau một nút. Kết hợp với các tiện ích khác, bạn có thể dễ dàng chọn thời điểm hiển thị hoặc ẩn các phần tử cụ thể.
Đối với các thanh điều hướng không bao giờ thu gọn, hãy thêm .navbar-expandlớp trên thanh điều hướng. Đối với các thanh điều hướng luôn thu gọn, không thêm bất kỳ .navbar-expandlớp nào.
Người chuyển đổi
Các trình chuyển đổi của thanh điều hướng được căn trái theo mặc định, nhưng nếu chúng đi theo một phần tử anh em như a .navbar-brand, chúng sẽ tự động được căn chỉnh về phía ngoài cùng bên phải. Đảo ngược đánh dấu của bạn sẽ đảo ngược vị trí của trình chuyển đổi. Dưới đây là ví dụ về các kiểu chuyển đổi khác nhau.
Không .navbar-brandhiển thị ở điểm ngắt nhỏ nhất:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<a class="navbar-brand" href="#">Hidden brand</a>
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>Với tên thương hiệu được hiển thị ở bên trái và nút chuyển đổi ở bên phải:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>Với một nút xoay ở bên trái và tên thương hiệu ở bên phải:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarTogglerDemo03">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>Nội dung bên ngoài
Đôi khi bạn muốn sử dụng plugin thu gọn để kích hoạt phần tử vùng chứa cho nội dung có cấu trúc nằm bên ngoài .navbar. Bởi vì plugin của chúng tôi hoạt động dựa trên idvà data-targetđối sánh, điều đó dễ dàng được thực hiện!
<div class="fixed-top">
<div class="collapse" id="navbarToggleExternalContent">
<div class="bg-dark p-4">
<h5 class="text-white h4">Collapsed content</h5>
<span class="text-muted">Toggleable via the navbar brand.</span>
</div>
</div>
<nav class="navbar navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
</div>Khi bạn làm điều này, chúng tôi khuyên bạn nên bao gồm JavaScript bổ sung để di chuyển tiêu điểm theo chương trình đến vùng chứa khi nó được mở. Nếu không, người dùng bàn phím và người dùng công nghệ hỗ trợ có thể sẽ gặp khó khăn trong việc tìm kiếm nội dung mới được tiết lộ - đặc biệt nếu vùng chứa được mở ra trước trình chuyển đổi trong cấu trúc của tài liệu. Chúng tôi cũng khuyên bạn nên đảm bảo rằng trình chuyển đổi có aria-controlsthuộc tính, trỏ đến vùng idchứa nội dung. Về lý thuyết, điều này cho phép người dùng công nghệ hỗ trợ chuyển trực tiếp từ bộ chuyển đổi sang bộ chứa mà nó kiểm soát - nhưng việc hỗ trợ cho việc này hiện khá chắp vá.