Thanh điều hướng Bootstrap bị thu gọn theo mặc định

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á đỡ

    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;

    3 để cho phép thu gọn

    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;

    4 tại các điểm dừng thấp hơn
  • 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;

    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úng
  • 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ừ

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;

7 để sử dụng với màu nền sáng hoặc

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;

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ào

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

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;

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 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ị

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;

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ọn

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

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;

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ằng

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;

3 sử dụng

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;

4, mà

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á đỡ

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;

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 tin

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 đỡ

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;

3 cũng như các thành phần

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;

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út

Đặt giá đỡ

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;

9 để bắt đầu mở rộng Thanh điều hướng. Đặt

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;

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;

2

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;

0

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ị

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;

3 để tạo thanh bên điều hướng động và linh hoạt

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ị

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;

3 thành

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;

5

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;

1

API

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;

6Sao chép mã nhập cho thành phần Thanh điều hướng

TênLoạiMặc địnhMô tả

Đặt một yếu tố tùy chỉnh cho thành phần này

bg

Một chỗ dựa tiện lợi để thêm

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;

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ớp

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;

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 định

Kết hợp độc đáo với giá đỡ

import Container from 'react-bootstrap/Container';

import Navbar from 'react-bootstrap/Navbar';

function ContainerOutsideExample() {

Navbar

export default ContainerOutsideExample;

1

crashOnSelect

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;

5

Chuyển đổi

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 thành

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;

5 sau sự kiện onSelect của hậu duệ của một đứa trẻ

hỏa hoạn. Không có gì nếu không có hoặc hậu duệ tồn tại

Thay vào đó, nên kiểm soát thủ công

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 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ện

import Container from 'react-bootstrap/Container';

import Navbar from 'react-bootstrap/Navbar';

function ContainerOutsideExample() {

Navbar

export default ContainerOutsideExample;

6 của

hậu duệ

mở rộng

import Container from 'react-bootstrap/Container';

import Navbar from 'react-bootstrap/Navbar';

function ContainerOutsideExample() {

Navbar

export default ContainerOutsideExample;

7

Điểm dừng, bên dưới đó, Thanh điều hướng sẽ sụp đổ. Khi

import Container from 'react-bootstrap/Container';

import Navbar from 'react-bootstrap/Navbar';

function ContainerOutsideExample() {

Navbar

export default ContainerOutsideExample;

7, Thanh điều hướng sẽ luôn được mở rộng bất kể kích thước màn hình

mở rộng

điều khiển bởi.

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;

2, chỗ dựa ban đầu.

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;

9

Kiểm soát khả năng hiển thị của nội dung thanh điều hướng

đã sửa

Tạ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ị

import Container from 'react-bootstrap/Container';

import Navbar from 'react-bootstrap/Navbar';

function ContainerInsideExample() {

Navbar

export default ContainerInsideExample;

1

onSelect

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ện

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;

2

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 crashOnSelect

Ghi 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ị

import Container from 'react-bootstrap/Container';

import Navbar from 'react-bootstrap/Navbar';

function ContainerInsideExample() {

Navbar

export default ContainerInsideExample;

2 này, hãy đảm bảo rằng bạn đang đặt

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 thành false và không chuyển đổi giữa true và false

bậtToggle

Một cuộc gọi lại được kích hoạt khi phần thân

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;

0 sụp đổ hoặc mở rộng. Được kích hoạt khi nhấp vào một

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;

0 và được gọi với giá trị boolean

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 mới

vai trò

import Container from 'react-bootstrap/Container';

import Navbar from 'react-bootstrap/Navbar';

function ContainerInsideExample() {

Navbar

export default ContainerInsideExample;

7

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ó

import Container from 'react-bootstrap/Container';

import Navbar from 'react-bootstrap/Navbar';

function ContainerInsideExample() {

Navbar

export default ContainerInsideExample;

8 không phải là

.

dính

Đị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ị

import Container from 'react-bootstrap/Container';

import Navbar from 'react-bootstrap/Navbar';

function ContainerInsideExample() {

Navbar

export default ContainerInsideExample;

9

Không được hỗ trợ trong <= IE11 và các trình duyệt cũ khác không có polyfill

biến thể
0

Biến thể hình ảnh chung a Navbar. Sử dụng kết hợp với các tiện ích

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;

9 prop,
2 hoặc kiểu nền của riêng bạn

bsPrefix
3

Thay đổi tên lớp cơ sở CSS thành phần cơ bản và tiền tố tên lớp sửa đổi. Đây là một lối thoát hiểm để làm việc với css bootstrap được tùy chỉnh nhiều

Làm cách nào để cố định thanh điều hướng trong Bootstrap?

Đặt cố định thanh điều hướng lên trên cùng, thêm lớp. navbar-fixed-top đến. lớp thanh điều hướng.

Thanh điều hướng thu gọn là gì?

Thu gọn thanh điều hướng đề cập đến menu ở chế độ xem trên thiết bị di động có thanh điều hướng (chứa liên kết và nội dung thân thiện với chuyển đổi). Chúng nằm trong CSS bootstrap (xem tại đây). Xem phần này để biết tóm tắt đầy đủ về cách thanh điều hướng và thu gọn hoạt động cùng nhau.

Tại sao thanh điều hướng của tôi không phản hồi?

Bạn đã đặt cho biểu trưng một kích thước nhất định trong Cài đặt hình ảnh . Bạn nên xóa cái này trước, chiều cao và chiều rộng. Sau đó, bên dưới Kích thước cũng xóa 70px và 100% chiều rộng. Sau đó, bạn chỉ cung cấp cho logo chiều cao 50px trong Kích thước.

Làm cách nào để cố định thanh điều hướng trong Bootstrap 5?

Sử dụng. lớp dính trên cùng để làm cho thanh điều hướng cố định/ở đầu trang khi bạn cuộn qua nó.