Tiêu đề điều hướng mạnh mẽ, nhạy bén, thanh điều hướng. Bao gồm hỗ trợ xây dựng thương hiệu, điều hướng, v.v.
Tổng quan
Đây là những gì bạn cần biết trước khi bắt đầu với Navbar
- Sử dụng giá đỡ
3 để cho phép thu gọnimport Container from 'react-bootstrap/Container';
import Navbar from 'react-bootstrap/Navbar';
Brand link
Brand text
className="d-inline-block align-top"
alt="React Bootstrap logo"
className="d-inline-block align-top"
export default BrandExample;
4 tại các điểm dừng thấp hơnimport Container from 'react-bootstrap/Container';
import Navbar from 'react-bootstrap/Navbar';
Brand link
Brand text
className="d-inline-block align-top"
alt="React Bootstrap logo"
className="d-inline-block align-top"
export default BrandExample;
4s và nội dung của chúng trôi chảy theo mặc định. Sử dụng tùy chọn để giới hạn chiều ngang của chúngimport Container from 'react-bootstrap/Container';
import Navbar from 'react-bootstrap/Navbar';
Brand link
Brand text
className="d-inline-block align-top"
alt="React Bootstrap logo"
className="d-inline-block align-top"
export default BrandExample;
- Sử dụng các tiện ích giãn cách và linh hoạt để định kích thước và định vị nội dung
Tiêu đề điều hướng đáp ứng, bao gồm hỗ trợ xây dựng thương hiệu, điều hướng, v.v. Dưới đây là ví dụ về tất cả các thành phần phụ được bao gồm trong thanh điều hướng theo chủ đề ánh sáng đáp ứng tự động thu gọn tại điểm ngắt lg [lớn]
import Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
import NavDropdown from 'react-bootstrap/NavDropdown';
React-Bootstrap
Home
Link
Action
Something
export default BasicExample;
Nhãn hiệu
Một thành phần thương hiệu linh hoạt đơn giản. Hình ảnh được hỗ trợ nhưng có thể sẽ yêu cầu kiểu dáng tùy chỉnh để hoạt động tốt
import Container from 'react-bootstrap/Container';
import Navbar from 'react-bootstrap/Navbar';
Brand link
Brand text
className="d-inline-block align-top"
alt="React Bootstrap logo"
className="d-inline-block align-top"
export default BrandExample;
Các hình thức
Liên kết văn bản và không điều hướng
Văn bản và liên kết lỏng lẻo có thể được bao bọc __________6 để căn chỉnh chính xác theo chiều dọc
import Container from 'react-bootstrap/Container';
import Navbar from 'react-bootstrap/Navbar';
function TextLinkExample[] {
Navbar with text
Signed in as: Mark Otto
export default TextLinkExample;
Phối màu
Tạo chủ đề cho thanh điều hướng chưa bao giờ dễ dàng hơn nhờ sự kết hợp của các lớp tạo chủ đề và tiện ích màu nền. Chọn từ
7 để sử dụng với màu nền sáng hoặcimport Container from 'react-bootstrap/Container';
import Navbar from 'react-bootstrap/Navbar';
Brand link
Brand text
className="d-inline-block align-top"
alt="React Bootstrap logo"
className="d-inline-block align-top"
export default BrandExample;
8 cho màu nền tối. Sau đó, tùy chỉnh với prop0_______9 prop hoặc bất kỳ css tùy chỉnh nàoimport Container from 'react-bootstrap/Container';
import Navbar from 'react-bootstrap/Navbar';
Brand link
Brand text
className="d-inline-block align-top"
alt="React Bootstrap logo"
className="d-inline-block align-top"
export default BrandExample;
import Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
function ColorSchemesExample[] {
Navbar
Home
Features
Pricing
Navbar
Home
Features
Pricing
Navbar
Home
Features
Pricing
export default ColorSchemesExample;
Hộp đựng
Mặc dù không bắt buộc, nhưng bạn có thể bọc Thanh điều hướng trong thành phần
0 để căn giữa nó trên một trang hoặc thêm một thanh bên trong để chỉ căn giữa nội dung của một trang.import Container from 'react-bootstrap/Container';
import Navbar from 'react-bootstrap/Navbar';
function TextLinkExample[] {
Navbar with text
Signed in as: Mark Otto
export default TextLinkExample;
import Container from 'react-bootstrap/Container';
import Navbar from 'react-bootstrap/Navbar';
function ContainerOutsideExample[] {
Navbar
export default ContainerOutsideExample;
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ị xóa tại các điểm dừng thấp hơn giá trị
1 đã chỉ định của bạn. Điều này đảm bảo rằng 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 chế độ xem thấp hơn khi thanh điều hướng của bạn bị thu gọnimport Container from 'react-bootstrap/Container';
import Navbar from 'react-bootstrap/Navbar';
function TextLinkExample[] {
Navbar with text
Signed in as: Mark Otto
export default TextLinkExample;
import Container from 'react-bootstrap/Container';
import Navbar from 'react-bootstrap/Navbar';
function ContainerInsideExample[] {
Navbar
export default ContainerInsideExample;
vị trí
Bạn có thể sử dụng các tiện ích vị trí Bootstrap để đặ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 với trang cho đến khi lên đến trên cùng rồi giữ nguyên ở đó]. Các thanh điều hướng cố định sử dụng
2, nghĩa là chúng được lấy từ quy trình bình thường của DOM và có thể yêu cầu CSS tùy chỉnh [e. g. , padding-top trên ] để tránh trùng lặp với các phần tử khác. Cũng lưu ý rằngimport Container from 'react-bootstrap/Container';
import Navbar from 'react-bootstrap/Navbar';
function TextLinkExample[] {
Navbar with text
Signed in as: Mark Otto
export default TextLinkExample;
3 sử dụngimport Container from 'react-bootstrap/Container';
import Navbar from 'react-bootstrap/Navbar';
function TextLinkExample[] {
Navbar with text
Signed in as: Mark Otto
export default TextLinkExample;
4, màimport Container from 'react-bootstrap/Container';
import Navbar from 'react-bootstrap/Navbar';
function TextLinkExample[] {
Navbar with text
Signed in as: Mark Otto
export default TextLinkExample;
Vì những nhu cầu định vị này rất phổ biến đối với Thanh điều hướng nên chúng tôi đã thêm các công cụ tiện lợi cho chúng
cố định hàng đầu
Đáy cố định
đầu dính
Bạn có thể sử dụng giá đỡ
5 trong mộtđể bật cuộn dọc trong nội dung có thể chuyển đổi của thanh điều hướng được thu gọn. Xem tài liệu Bootstrap để biết thêm thông tinimport Container from 'react-bootstrap/Container';
import Navbar from 'react-bootstrap/Navbar';
function TextLinkExample[] {
Navbar with text
Signed in as: Mark Otto
export default TextLinkExample;
import Button from 'react-bootstrap/Button';
import Container from 'react-bootstrap/Container';
import Form from 'react-bootstrap/Form';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
import NavDropdown from 'react-bootstrap/NavDropdown';
function NavScrollExample[] {
Navbar scroll
className="me-auto my-2 my-lg-0"
style={{ maxHeight: '100px' }}
Home
Link
Action
Search
export default NavScrollExample;
hành vi đáp ứng
Sử dụng phần chống đỡ
3 cũng như các thành phầnimport Container from 'react-bootstrap/Container';
import Navbar from 'react-bootstrap/Navbar';
Brand link
Brand text
className="d-inline-block align-top"
alt="React Bootstrap logo"
className="d-inline-block align-top"
export default BrandExample;
7 vàimport Container from 'react-bootstrap/Container';
import Navbar from 'react-bootstrap/Navbar';
function TextLinkExample[] {
Navbar with text
Signed in as: Mark Otto
export default TextLinkExample;
8 để kiểm soát thời điểm nội dung thu gọn sau một nútimport Container from 'react-bootstrap/Container';
import Navbar from 'react-bootstrap/Navbar';
function TextLinkExample[] {
Navbar with text
Signed in as: Mark Otto
export default TextLinkExample;
Đặt giá đỡ
9 để bắt đầu mở rộng Thanh điều hướng. Đặtimport Container from 'react-bootstrap/Container';
import Navbar from 'react-bootstrap/Navbar';
function TextLinkExample[] {
Navbar with text
Signed in as: Mark Otto
export default TextLinkExample;
0 để làm cho Thanh điều hướng tự động thu gọn khi người dùng chọn một mục. Bạn cũng có thể kiểm soát tốt hành vi sụp đổ bằng cách sử dụng đạo cụimport Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
function ColorSchemesExample[] {
Navbar
Home
Features
Pricing
Navbar
Home
Features
Pricing
Navbar
Home
Features
Pricing
export default ColorSchemesExample;
1 vàimport Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
function ColorSchemesExample[] {
Navbar
Home
Features
Pricing
Navbar
Home
Features
Pricing
Navbar
Home
Features
Pricing
export default ColorSchemesExample;
2import Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
function ColorSchemesExample[] {
Navbar
Home
Features
Pricing
Navbar
Home
Features
Pricing
Navbar
Home
Features
Pricing
export default ColorSchemesExample;
0import Container from 'react-bootstrap/Container';
import Navbar from 'react-bootstrap/Navbar';
Brand link
Brand text
className="d-inline-block align-top"
alt="React Bootstrap logo"
className="d-inline-block align-top"
export default BrandExample;
vải bố
Chuyển đổi thanh điều hướng mở rộng và thu gọn của bạn thành ngăn kéo offcanvas với thành phần offcanvas. Chúng tôi mở rộng cả hai kiểu mặc định của offcanvas và sử dụng giá trị
3 để tạo thanh bên điều hướng động và linh hoạtimport Container from 'react-bootstrap/Container';
import Navbar from 'react-bootstrap/Navbar';
Brand link
Brand text
className="d-inline-block align-top"
alt="React Bootstrap logo"
className="d-inline-block align-top"
export default BrandExample;
Trong ví dụ bên dưới, để tạo một thanh điều hướng offcanvas luôn được thu gọn trên tất cả các điểm dừng, hãy đặt giá trị
3 thànhimport Container from 'react-bootstrap/Container';
import Navbar from 'react-bootstrap/Navbar';
Brand link
Brand text
className="d-inline-block align-top"
alt="React Bootstrap logo"
className="d-inline-block align-top"
export default BrandExample;
5import Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
function ColorSchemesExample[] {
Navbar
Home
Features
Pricing
Navbar
Home
Features
Pricing
Navbar
Home
Features
Pricing
export default ColorSchemesExample;
1import Container from 'react-bootstrap/Container';
import Navbar from 'react-bootstrap/Navbar';
Brand link
Brand text
className="d-inline-block align-top"
alt="React Bootstrap logo"
className="d-inline-block align-top"
export default BrandExample;
API
6Sao chép mã nhập cho thành phần Thanh điều hướngimport Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
function ColorSchemesExample[] {
Navbar
Home
Features
Pricing
Navbar
Home
Features
Pricing
Navbar
Home
Features
Pricing
export default ColorSchemesExample;
TênLoạiMặc địnhMô tả
Đặt một yếu tố tùy chỉnh cho thành phần này
bgMột chỗ dựa tiện lợi để thêm
7 lớp tiện ích vì chúng thường được sử dụng ở đây.import Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
function ColorSchemesExample[] {
Navbar
Home
Features
Pricing
Navbar
Home
Features
Pricing
Navbar
Home
Features
Pricing
export default ColorSchemesExample;
8 vàimport Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
function ColorSchemesExample[] {
Navbar
Home
Features
Pricing
Navbar
Home
Features
Pricing
Navbar
Home
Features
Pricing
export default ColorSchemesExample;
9 là những lựa chọn phổ biến nhưng mọi lớpimport Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
function ColorSchemesExample[] {
Navbar
Home
Features
Pricing
Navbar
Home
Features
Pricing
Navbar
Home
Features
Pricing
export default ColorSchemesExample;
7 đều được hỗ trợ, bao gồm bất kỳ lớp tùy chỉnh nào bạn có thể xác địnhimport Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
function ColorSchemesExample[] {
Navbar
Home
Features
Pricing
Navbar
Home
Features
Pricing
Navbar
Home
Features
Pricing
export default ColorSchemesExample;
Kết hợp độc đáo với giá đỡ
1crashOnSelectimport Container from 'react-bootstrap/Container';
import Navbar from 'react-bootstrap/Navbar';
function ContainerOutsideExample[] {
Navbar
export default ContainerOutsideExample;
5import Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
function ColorSchemesExample[] {
Navbar
Home
Features
Pricing
Navbar
Home
Features
Pricing
Navbar
Home
Features
Pricing
export default ColorSchemesExample;
Chuyển đổi
1 thànhimport Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
function ColorSchemesExample[] {
Navbar
Home
Features
Pricing
Navbar
Home
Features
Pricing
Navbar
Home
Features
Pricing
export default ColorSchemesExample;
5 sau sự kiện onSelect của hậu duệ của một đứa trẻimport Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
function ColorSchemesExample[] {
Navbar
Home
Features
Pricing
Navbar
Home
Features
Pricing
Navbar
Home
Features
Pricing
export default ColorSchemesExample;
Thay vào đó, nên kiểm soát thủ công
1 thông qua lệnh gọi lại onSelect, đối với các hoạt động phức tạp hơn cần được thực hiện sau sự kiệnimport Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
function ColorSchemesExample[] {
Navbar
Home
Features
Pricing
Navbar
Home
Features
Pricing
Navbar
Home
Features
Pricing
export default ColorSchemesExample;
6 củahậu duệmở rộngimport Container from 'react-bootstrap/Container';
import Navbar from 'react-bootstrap/Navbar';
function ContainerOutsideExample[] {
Navbar
export default ContainerOutsideExample;
7import Container from 'react-bootstrap/Container';
import Navbar from 'react-bootstrap/Navbar';
function ContainerOutsideExample[] {
Navbar
export default ContainerOutsideExample;
Điểm dừng, bên dưới đó, Thanh điều hướng sẽ sụp đổ. Khi
7, Thanh điều hướng sẽ luôn được mở rộng bất kể kích thước màn hìnhmở rộngimport Container from 'react-bootstrap/Container';
import Navbar from 'react-bootstrap/Navbar';
function ContainerOutsideExample[] {
Navbar
export default ContainerOutsideExample;
điều khiển bởi.
2, chỗ dựa ban đầu.import Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
function ColorSchemesExample[] {
Navbar
Home
Features
Pricing
Navbar
Home
Features
Pricing
Navbar
Home
Features
Pricing
export default ColorSchemesExample;
9import Container from 'react-bootstrap/Container';
import Navbar from 'react-bootstrap/Navbar';
function TextLinkExample[] {
Navbar with text
Signed in as: Mark Otto
export default TextLinkExample;
Kiểm soát khả năng hiển thị của nội dung thanh điều hướng
đã sửaTạo một thanh điều hướng cố định dọc theo đầu hoặc cuối màn hình để cuộn theo trang. Một chỗ dựa tiện lợi cho các lớp định vị
1onSelectimport Container from 'react-bootstrap/Container';
import Navbar from 'react-bootstrap/Navbar';
function ContainerInsideExample[] {
Navbar
export default ContainerInsideExample;
Một cuộc gọi lại được kích hoạt khi một hậu duệ của một đứa trẻ
đã được chọn. Nên được sử dụng để thực hiện thao tác đóng phức tạp hoặc các hành động linh tinh khác mong muốn sau khi chọn một hậu duệ của. Không có gì nếu không có hoặc hậu duệ tồn tại. Cuộc gọi lại được gọi với một eventKey, là một chỗ dựa từ hậu duệ đã chọn và một sự kiện2import Container from 'react-bootstrap/Container';
import Navbar from 'react-bootstrap/Navbar';
Brand link
Brand text
className="d-inline-block align-top"
alt="React Bootstrap logo"
className="d-inline-block align-top"
export default BrandExample;
Rốt cuộc, đối với hành vi đóng cơ bản
hậu duệ của các sự kiện onSelect trong chế độ xem trên thiết bị di động, hãy thử sử dụng crashOnSelectGhi chú. Nếu bạn đang đóng thanh điều hướng theo cách thủ công bằng cách sử dụng giá trị
2 này, hãy đảm bảo rằng bạn đang đặtimport Container from 'react-bootstrap/Container';
import Navbar from 'react-bootstrap/Navbar';
function ContainerInsideExample[] {
Navbar
export default ContainerInsideExample;
1 thành false và không chuyển đổi giữa true và falsebậtToggleimport Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
function ColorSchemesExample[] {
Navbar
Home
Features
Pricing
Navbar
Home
Features
Pricing
Navbar
Home
Features
Pricing
export default ColorSchemesExample;
Một cuộc gọi lại được kích hoạt khi phần thân
0 sụp đổ hoặc mở rộng. Được kích hoạt khi nhấp vào mộtimport Container from 'react-bootstrap/Container';
import Navbar from 'react-bootstrap/Navbar';
function TextLinkExample[] {
Navbar with text
Signed in as: Mark Otto
export default TextLinkExample;
0 và được gọi với giá trị booleanimport Container from 'react-bootstrap/Container';
import Navbar from 'react-bootstrap/Navbar';
function TextLinkExample[] {
Navbar with text
Signed in as: Mark Otto
export default TextLinkExample;
1 mớivai tròimport Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
function ColorSchemesExample[] {
Navbar
Home
Features
Pricing
Navbar
Home
Features
Pricing
Navbar
Home
Features
Pricing
export default ColorSchemesExample;
7import Container from 'react-bootstrap/Container';
import Navbar from 'react-bootstrap/Navbar';
function ContainerInsideExample[] {
Navbar
export default ContainerInsideExample;
Vai trò ARIA cho thanh điều hướng, sẽ mặc định là 'điều hướng' cho các Thanh điều hướng có
8 không phải là.dínhimport Container from 'react-bootstrap/Container';
import Navbar from 'react-bootstrap/Navbar';
function ContainerInsideExample[] {
Navbar
export default ContainerInsideExample;
Định vị thanh điều hướng ở trên cùng của chế độ xem, nhưng chỉ sau khi cuộn qua nó. Một chỗ dựa tiện lợi cho lớp định vị
9import Container from 'react-bootstrap/Container';
import Navbar from 'react-bootstrap/Navbar';
function ContainerInsideExample[] {
Navbar
export default ContainerInsideExample;
Không được hỗ trợ trong