Thả xuống phản ứng-bootstrap

Question

Các ứng dụng một trang trở nên phổ biến trong vài năm gần đây, vì rất nhiều framework front-end đã được giới thiệu như Angular, React, Vue. js, Ember, v. v. Do đó, jQuery không phải là yêu cầu cần thiết để xây dựng ứng dụng web. Ngày nay, React có khung JavaScript được sử dụng nhiều nhất để xây dựng các ứng dụng web và Bootstrap trở thành khung CSS phổ biến nhất. Vì vậy, cần phải tìm hiểu theo nhiều cách khác nhau để Bootstrap có thể được sử dụng trong các ứng dụng React, đó là mục đích chính của phần này.

Nội dung chính Show

Thêm Bootstrap cho React
Sử dụng Bootstrap CDN
I. Tổng quan về Điều hướng
II. Cài đặt
III. Các cách sử dụng Điều hướng
V. Kết luận

Nội dung chính Hiển thị

Thêm Bootstrap cho React
Sử dụng Bootstrap CDN
I. Tổng quan về Điều hướng
II. Cài đặt
III. Các cách sử dụng Điều hướng
V. Kết luận
Thank you THE THEO THEO DÕI

Các bài viết liên quan

Thêm Bootstrap cho React

Chúng ta có thể thêm Bootstrap vào ứng dụng React theo một số cách. Dưới đây là ba cách phổ biến nhất

Sử dụng Bootstrap CDN
Bootstrap dưới dạng phụ thuộc
Gói React Bootstrap

Sử dụng Bootstrap CDN

Bootstrap dưới dạng phụ thuộc

Gói React Bootstrap

Đã đăng vào ngày 27 tháng 3 năm 2017 3. 33 một. m. 3 phút đọc 3 phút đọc

I. Tổng quan về Điều hướng

<Nav bsStyle="tabs" onSelect={handleSelect} stacked>
  <NavItem eventKey={1} href="/home">NavItem 1 contentNavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 contentNavItem>
  <NavItem eventKey={3} disabled>NavItem 3 contentNavItem>
Nav>

<Nav bsStyle="pills" onSelect={handleSelect} justified>
  <NavItem eventKey={1} href="/home">NavItem 1 contentNavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 contentNavItem>
  <NavItem eventKey={3} disabled>NavItem 3 contentNavItem>
Nav>

5 là một thành phần meta của bootstrap Hỗ trợ tạo menu tiêu đề điều hướng trong ứng dụng hoặc trang web

<Nav bsStyle="tabs" onSelect={handleSelect} stacked>
  <NavItem eventKey={1} href="/home">NavItem 1 contentNavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 contentNavItem>
  <NavItem eventKey={3} disabled>NavItem 3 contentNavItem>
Nav>

<Nav bsStyle="pills" onSelect={handleSelect} justified>
  <NavItem eventKey={1} href="/home">NavItem 1 contentNavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 contentNavItem>
  <NavItem eventKey={3} disabled>NavItem 3 contentNavItem>
Nav>

5 được sử dụng rất dễ dàng bằng cách sử dụng camelCase thay cho lớp css trong thẻ

II. Cài đặt

<Nav bsStyle="tabs" onSelect={handleSelect} stacked>
  <NavItem eventKey={1} href="/home">NavItem 1 contentNavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 contentNavItem>
  <NavItem eventKey={3} disabled>NavItem 3 contentNavItem>
Nav>

<Nav bsStyle="pills" onSelect={handleSelect} justified>
  <NavItem eventKey={1} href="/home">NavItem 1 contentNavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 contentNavItem>
  <NavItem eventKey={3} disabled>NavItem 3 contentNavItem>
Nav>

5 là một thành phần của bootstrap, vì vậy để sử dụng

<Nav bsStyle="tabs" onSelect={handleSelect} stacked>
  <NavItem eventKey={1} href="/home">NavItem 1 contentNavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 contentNavItem>
  <NavItem eventKey={3} disabled>NavItem 3 contentNavItem>
Nav>

<Nav bsStyle="pills" onSelect={handleSelect} justified>
  <NavItem eventKey={1} href="/home">NavItem 1 contentNavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 contentNavItem>
  <NavItem eventKey={3} disabled>NavItem 3 contentNavItem>
Nav>

5 chỉ cần cài đặt

<Nav bsStyle="tabs" onSelect={handleSelect} stacked>
  <NavItem eventKey={1} href="/home">NavItem 1 contentNavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 contentNavItem>
  <NavItem eventKey={3} disabled>NavItem 3 contentNavItem>
Nav>

<Nav bsStyle="pills" onSelect={handleSelect} justified>
  <NavItem eventKey={1} href="/home">NavItem 1 contentNavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 contentNavItem>
  <NavItem eventKey={3} disabled>NavItem 3 contentNavItem>
Nav>

9

<Nav bsStyle="tabs" onSelect={handleSelect} stacked>
  <NavItem eventKey={1} href="/home">NavItem 1 contentNavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 contentNavItem>
  <NavItem eventKey={3} disabled>NavItem 3 contentNavItem>
Nav>

<Nav bsStyle="pills" onSelect={handleSelect} justified>
  <NavItem eventKey={1} href="/home">NavItem 1 contentNavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 contentNavItem>
  <NavItem eventKey={3} disabled>NavItem 3 contentNavItem>
Nav>

9 được cài đặt rất dễ dàng bằng câu lệnh

<Nav bsStyle="tabs" onSelect={handleSelect} stacked>
  <NavItem eventKey={1} href="/home">NavItem 1 contentNavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 contentNavItem>
  <NavItem eventKey={3} disabled>NavItem 3 contentNavItem>
Nav>

<Nav bsStyle="pills" onSelect={handleSelect} justified>
  <NavItem eventKey={1} href="/home">NavItem 1 contentNavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 contentNavItem>
  <NavItem eventKey={3} disabled>NavItem 3 contentNavItem>
Nav>

1 hoặc thêm vào thư viện tệp

<Nav bsStyle="tabs" onSelect={handleSelect} stacked>
  <NavItem eventKey={1} href="/home">NavItem 1 contentNavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 contentNavItem>
  <NavItem eventKey={3} disabled>NavItem 3 contentNavItem>
Nav>

<Nav bsStyle="pills" onSelect={handleSelect} justified>
  <NavItem eventKey={1} href="/home">NavItem 1 contentNavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 contentNavItem>
  <NavItem eventKey={3} disabled>NavItem 3 contentNavItem>
Nav>

2

________số 8

before when running the command

<Nav bsStyle="tabs" onSelect={handleSelect} stacked>
  <NavItem eventKey={1} href="/home">NavItem 1 contentNavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 contentNavItem>
  <NavItem eventKey={3} disabled>NavItem 3 contentNavItem>
Nav>

<Nav bsStyle="pills" onSelect={handleSelect} justified>
  <NavItem eventKey={1} href="/home">NavItem 1 contentNavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 contentNavItem>
  <NavItem eventKey={3} disabled>NavItem 3 contentNavItem>
Nav>

3

III. Các cách sử dụng Điều hướng

1. Sử dụng navs dưới dạng_04 và_05

Sử dụng thẻ__

<Nav bsStyle="tabs" onSelect={handleSelect} stacked>
  <NavItem eventKey={1} href="/home">NavItem 1 contentNavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 contentNavItem>
  <NavItem eventKey={3} disabled>NavItem 3 contentNavItem>
Nav>

<Nav bsStyle="pills" onSelect={handleSelect} justified>
  <NavItem eventKey={1} href="/home">NavItem 1 contentNavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 contentNavItem>
  <NavItem eventKey={3} disabled>NavItem 3 contentNavItem>
Nav>

6 dưới dạng

<Nav bsStyle="tabs" onSelect={handleSelect} stacked>
  <NavItem eventKey={1} href="/home">NavItem 1 contentNavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 contentNavItem>
  <NavItem eventKey={3} disabled>NavItem 3 contentNavItem>
Nav>

<Nav bsStyle="pills" onSelect={handleSelect} justified>
  <NavItem eventKey={1} href="/home">NavItem 1 contentNavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 contentNavItem>
  <NavItem eventKey={3} disabled>NavItem 3 contentNavItem>
Nav>

4 hoặc

<Nav bsStyle="tabs" onSelect={handleSelect} stacked>
  <NavItem eventKey={1} href="/home">NavItem 1 contentNavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 contentNavItem>
  <NavItem eventKey={3} disabled>NavItem 3 contentNavItem>
Nav>

<Nav bsStyle="pills" onSelect={handleSelect} justified>
  <NavItem eventKey={1} href="/home">NavItem 1 contentNavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 contentNavItem>
  <NavItem eventKey={3} disabled>NavItem 3 contentNavItem>
Nav>

5 bằng các thuộc tính

<Nav bsStyle="tabs" onSelect={handleSelect} stacked>
  <NavItem eventKey={1} href="/home">NavItem 1 contentNavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 contentNavItem>
  <NavItem eventKey={3} disabled>NavItem 3 contentNavItem>
Nav>

<Nav bsStyle="pills" onSelect={handleSelect} justified>
  <NavItem eventKey={1} href="/home">NavItem 1 contentNavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 contentNavItem>
  <NavItem eventKey={3} disabled>NavItem 3 contentNavItem>
Nav>

9 với cấu trúc

<Nav bsStyle="tabs" onSelect={handleSelect} stacked>
  <NavItem eventKey={1} href="/home">NavItem 1 contentNavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 contentNavItem>
  <NavItem eventKey={3} disabled>NavItem 3 contentNavItem>
Nav>

<Nav bsStyle="pills" onSelect={handleSelect} justified>
  <NavItem eventKey={1} href="/home">NavItem 1 contentNavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 contentNavItem>
  <NavItem eventKey={3} disabled>NavItem 3 contentNavItem>
Nav>

Các hành động được tùy chỉnh trong chức năng

<Nav bsStyle="tabs" onSelect={handleSelect} stacked>
  <NavItem eventKey={1} href="/home">NavItem 1 contentNavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 contentNavItem>
  <NavItem eventKey={3} disabled>NavItem 3 contentNavItem>
Nav>

<Nav bsStyle="pills" onSelect={handleSelect} justified>
  <NavItem eventKey={1} href="/home">NavItem 1 contentNavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 contentNavItem>
  <NavItem eventKey={3} disabled>NavItem 3 contentNavItem>
Nav>

10 thuộc tính

<Nav bsStyle="tabs" onSelect={handleSelect} stacked>
  <NavItem eventKey={1} href="/home">NavItem 1 contentNavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 contentNavItem>
  <NavItem eventKey={3} disabled>NavItem 3 contentNavItem>
Nav>

<Nav bsStyle="pills" onSelect={handleSelect} justified>
  <NavItem eventKey={1} href="/home">NavItem 1 contentNavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 contentNavItem>
  <NavItem eventKey={3} disabled>NavItem 3 contentNavItem>
Nav>

11

Có thể vô hiệu hóa các_______012 bằng cách bổ sung thuộc tính_______013 trong thẻ

<Nav bsStyle="tabs" onSelect={handleSelect} stacked>
  <NavItem eventKey={1} href="/home">NavItem 1 contentNavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 contentNavItem>
  <NavItem eventKey={3} disabled>NavItem 3 contentNavItem>
Nav>

<Nav bsStyle="pills" onSelect={handleSelect} justified>
  <NavItem eventKey={1} href="/home">NavItem 1 contentNavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 contentNavItem>
  <NavItem eventKey={3} disabled>NavItem 3 contentNavItem>
Nav>

14

Ta cũng có thể căn chỉnh các tab thành định dạng chiều rộng đầy đủ bằng cách thêm vào thuộc tính_______015 trong thẻ

<Nav bsStyle="tabs" onSelect={handleSelect} stacked>
  <NavItem eventKey={1} href="/home">NavItem 1 contentNavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 contentNavItem>
  <NavItem eventKey={3} disabled>NavItem 3 contentNavItem>
Nav>

<Nav bsStyle="pills" onSelect={handleSelect} justified>
  <NavItem eventKey={1} href="/home">NavItem 1 contentNavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 contentNavItem>
  <NavItem eventKey={3} disabled>NavItem 3 contentNavItem>
Nav>

6

Với

<Nav bsStyle="tabs" onSelect={handleSelect} stacked>
  <NavItem eventKey={1} href="/home">NavItem 1 contentNavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 contentNavItem>
  <NavItem eventKey={3} disabled>NavItem 3 contentNavItem>
Nav>

<Nav bsStyle="pills" onSelect={handleSelect} justified>
  <NavItem eventKey={1} href="/home">NavItem 1 contentNavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 contentNavItem>
  <NavItem eventKey={3} disabled>NavItem 3 contentNavItem>
Nav>

17, ta dễ dàng định kiểu tab theo chiều dọc bằng cách bổ sung thêm vào thẻ

<Nav bsStyle="tabs" onSelect={handleSelect} stacked>
  <NavItem eventKey={1} href="/home">NavItem 1 contentNavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 contentNavItem>
  <NavItem eventKey={3} disabled>NavItem 3 contentNavItem>
Nav>

<Nav bsStyle="pills" onSelect={handleSelect} justified>
  <NavItem eventKey={1} href="/home">NavItem 1 contentNavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 contentNavItem>
  <NavItem eventKey={3} disabled>NavItem 3 contentNavItem>
Nav>

6 thuộc tính

<Nav bsStyle="tabs" onSelect={handleSelect} stacked>
  <NavItem eventKey={1} href="/home">NavItem 1 contentNavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 contentNavItem>
  <NavItem eventKey={3} disabled>NavItem 3 contentNavItem>
Nav>

<Nav bsStyle="pills" onSelect={handleSelect} justified>
  <NavItem eventKey={1} href="/home">NavItem 1 contentNavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 contentNavItem>
  <NavItem eventKey={3} disabled>NavItem 3 contentNavItem>
Nav>

19

Ngoài ra, với các tab có thêm

{
    "dependencies": {
        "react-bootstrap": "0.30.0"
    }
}

10 dưới dạng

{
    "dependencies": {
        "react-bootstrap": "0.30.0"
    }
}

11, ta có thể sử dụng thẻ

{
    "dependencies": {
        "react-bootstrap": "0.30.0"
    }
}

12 với cấu trúc

<Nav bsStyle="tabs" onSelect={handleSelect} stacked>
  <NavItem eventKey={1} href="/home">NavItem 1 contentNavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 contentNavItem>
  <NavItem eventKey={3} disabled>NavItem 3 contentNavItem>
Nav>

<Nav bsStyle="pills" onSelect={handleSelect} justified>
  <NavItem eventKey={1} href="/home">NavItem 1 contentNavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 contentNavItem>
  <NavItem eventKey={3} disabled>NavItem 3 contentNavItem>
Nav>

1

2. Sử dụng Navbars để tạo menu tiêu đề

Ta có thể dễ dàng tạo ra một

{
    "dependencies": {
        "react-bootstrap": "0.30.0"
    }
}

13 bằng cách sử dụng thẻ

{
    "dependencies": {
        "react-bootstrap": "0.30.0"
    }
}

14 với cấu trúc

{
    "dependencies": {
        "react-bootstrap": "0.30.0"
    }
}

1

Có thể thêm thuộc tính

{
    "dependencies": {
        "react-bootstrap": "0.30.0"
    }
}

15 trong thẻ

{
    "dependencies": {
        "react-bootstrap": "0.30.0"
    }
}

16 để chuyển menu màu sang màu đen

Thẻ

<Nav bsStyle="tabs" onSelect={handleSelect} stacked>
  <NavItem eventKey={1} href="/home">NavItem 1 contentNavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 contentNavItem>
  <NavItem eventKey={3} disabled>NavItem 3 contentNavItem>
Nav>

<Nav bsStyle="pills" onSelect={handleSelect} justified>
  <NavItem eventKey={1} href="/home">NavItem 1 contentNavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 contentNavItem>
  <NavItem eventKey={3} disabled>NavItem 3 contentNavItem>
Nav>

6 trong

{
    "dependencies": {
        "react-bootstrap": "0.30.0"
    }
}

18 được sử dụng như một phần trên

With

{
    "dependencies": {
        "react-bootstrap": "0.30.0"
    }
}

19 to display logo and link to home web or app. Trong

{
    "dependencies": {
        "react-bootstrap": "0.30.0"
    }
}

19, ta có thể sử dụng thẻ

<Nav bsStyle="tabs" onSelect={handleSelect} stacked>
  <NavItem eventKey={1} href="/home">NavItem 1 contentNavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 contentNavItem>
  <NavItem eventKey={3} disabled>NavItem 3 contentNavItem>
Nav>

<Nav bsStyle="pills" onSelect={handleSelect} justified>
  <NavItem eventKey={1} href="/home">NavItem 1 contentNavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 contentNavItem>
  <NavItem eventKey={3} disabled>NavItem 3 contentNavItem>
Nav>

41 để tùy chỉnh menu nút cho trên điện thoại di động và sử dụng thẻ

<Nav bsStyle="tabs" onSelect={handleSelect} stacked>
  <NavItem eventKey={1} href="/home">NavItem 1 contentNavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 contentNavItem>
  <NavItem eventKey={3} disabled>NavItem 3 contentNavItem>
Nav>

<Nav bsStyle="pills" onSelect={handleSelect} justified>
  <NavItem eventKey={1} href="/home">NavItem 1 contentNavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 contentNavItem>
  <NavItem eventKey={3} disabled>NavItem 3 contentNavItem>
Nav>

42 để tùy chỉnh logo và liên kết đến trang chủ

Khi không có thẻ

<Nav bsStyle="tabs" onSelect={handleSelect} stacked>
  <NavItem eventKey={1} href="/home">NavItem 1 contentNavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 contentNavItem>
  <NavItem eventKey={3} disabled>NavItem 3 contentNavItem>
Nav>

<Nav bsStyle="pills" onSelect={handleSelect} justified>
  <NavItem eventKey={1} href="/home">NavItem 1 contentNavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 contentNavItem>
  <NavItem eventKey={3} disabled>NavItem 3 contentNavItem>
Nav>

43, các mục trong menu sẽ không thay đổi khi chuyển sang chế độ di động, đảo ngược, khi chúng ta thêm thẻ

<Nav bsStyle="tabs" onSelect={handleSelect} stacked>
  <NavItem eventKey={1} href="/home">NavItem 1 contentNavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 contentNavItem>
  <NavItem eventKey={3} disabled>NavItem 3 contentNavItem>
Nav>

<Nav bsStyle="pills" onSelect={handleSelect} justified>
  <NavItem eventKey={1} href="/home">NavItem 1 contentNavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 contentNavItem>
  <NavItem eventKey={3} disabled>NavItem 3 contentNavItem>
Nav>

43 trong

{
    "dependencies": {
        "react-bootstrap": "0.30.0"
    }
}

19 như ví dụ trên, các mục trong thẻ

<Nav bsStyle="tabs" onSelect={handleSelect} stacked>
  <NavItem eventKey={1} href="/home">NavItem 1 contentNavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 contentNavItem>
  <NavItem eventKey={3} disabled>NavItem 3 contentNavItem>
Nav>

<Nav bsStyle="pills" onSelect={handleSelect} justified>
  <NavItem eventKey={1} href="/home">NavItem 1 contentNavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 contentNavItem>
  <NavItem eventKey={3} disabled>NavItem 3 contentNavItem>
Nav>

6 sẽ được thu gọn vào 1

<Nav bsStyle="tabs" onSelect={handleSelect} stacked>
  <NavItem eventKey={1} href="/home">NavItem 1 contentNavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 contentNavItem>
  <NavItem eventKey={3} disabled>NavItem 3 contentNavItem>
Nav>

<Nav bsStyle="pills" onSelect={handleSelect} justified>
  <NavItem eventKey={1} href="/home">NavItem 1 contentNavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 contentNavItem>
  <NavItem eventKey={3} disabled>NavItem 3 contentNavItem>
Nav>

47 khi chuyển sang chế độ di động

Khi sử dụng thẻ

<Nav bsStyle="tabs" onSelect={handleSelect} stacked>
  <NavItem eventKey={1} href="/home">NavItem 1 contentNavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 contentNavItem>
  <NavItem eventKey={3} disabled>NavItem 3 contentNavItem>
Nav>

<Nav bsStyle="pills" onSelect={handleSelect} justified>
  <NavItem eventKey={1} href="/home">NavItem 1 contentNavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 contentNavItem>
  <NavItem eventKey={3} disabled>NavItem 3 contentNavItem>
Nav>

43, tất cả các mục còn lại được bảo vệ trong thẻ

<Nav bsStyle="tabs" onSelect={handleSelect} stacked>
  <NavItem eventKey={1} href="/home">NavItem 1 contentNavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 contentNavItem>
  <NavItem eventKey={3} disabled>NavItem 3 contentNavItem>
Nav>

<Nav bsStyle="pills" onSelect={handleSelect} justified>
  <NavItem eventKey={1} href="/home">NavItem 1 contentNavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 contentNavItem>
  <NavItem eventKey={3} disabled>NavItem 3 contentNavItem>
Nav>

49. Trong đó, ta có thể tùy chỉnh các_______017 bằng thuộc tính

<Nav bsStyle="tabs" onSelect={handleSelect} stacked>
  <NavItem eventKey={1} href="/home">NavItem 1 contentNavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 contentNavItem>
  <NavItem eventKey={3} disabled>NavItem 3 contentNavItem>
Nav>

<Nav bsStyle="pills" onSelect={handleSelect} justified>
  <NavItem eventKey={1} href="/home">NavItem 1 contentNavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 contentNavItem>
  <NavItem eventKey={3} disabled>NavItem 3 contentNavItem>
Nav>

51 để tạo các mục được căn lề phải và

<Nav bsStyle="tabs" onSelect={handleSelect} stacked>
  <NavItem eventKey={1} href="/home">NavItem 1 contentNavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 contentNavItem>
  <NavItem eventKey={3} disabled>NavItem 3 contentNavItem>
Nav>

<Nav bsStyle="pills" onSelect={handleSelect} justified>
  <NavItem eventKey={1} href="/home">NavItem 1 contentNavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 contentNavItem>
  <NavItem eventKey={3} disabled>NavItem 3 contentNavItem>
Nav>

52 để căn lề trái

Ngoài các mục dưới dạng liên kết, ta cũng có thể tạo các biểu mẫu trong menu tiêu đề bằng thẻ

<Nav bsStyle="tabs" onSelect={handleSelect} stacked>
  <NavItem eventKey={1} href="/home">NavItem 1 contentNavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 contentNavItem>
  <NavItem eventKey={3} disabled>NavItem 3 contentNavItem>
Nav>

<Nav bsStyle="pills" onSelect={handleSelect} justified>
  <NavItem eventKey={1} href="/home">NavItem 1 contentNavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 contentNavItem>
  <NavItem eventKey={3} disabled>NavItem 3 contentNavItem>
Nav>

53 với cấu trúc

<Nav bsStyle="tabs" onSelect={handleSelect} stacked>
  <NavItem eventKey={1} href="/home">NavItem 1 contentNavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 contentNavItem>
  <NavItem eventKey={3} disabled>NavItem 3 contentNavItem>
Nav>

<Nav bsStyle="pills" onSelect={handleSelect} justified>
  <NavItem eventKey={1} href="/home">NavItem 1 contentNavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 contentNavItem>
  <NavItem eventKey={3} disabled>NavItem 3 contentNavItem>
Nav>

4

V. Kết luận

Trên đây là những ví dụ cơ bản nhất trong việc sử dụng

<Nav bsStyle="tabs" onSelect={handleSelect} stacked>
  <NavItem eventKey={1} href="/home">NavItem 1 contentNavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 contentNavItem>
  <NavItem eventKey={3} disabled>NavItem 3 contentNavItem>
Nav>

<Nav bsStyle="pills" onSelect={handleSelect} justified>
  <NavItem eventKey={1} href="/home">NavItem 1 contentNavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 contentNavItem>
  <NavItem eventKey={3} disabled>NavItem 3 contentNavItem>
Nav>

5 của

<Nav bsStyle="tabs" onSelect={handleSelect} stacked>
  <NavItem eventKey={1} href="/home">NavItem 1 contentNavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 contentNavItem>
  <NavItem eventKey={3} disabled>NavItem 3 contentNavItem>
Nav>

<Nav bsStyle="pills" onSelect={handleSelect} justified>
  <NavItem eventKey={1} href="/home">NavItem 1 contentNavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 contentNavItem>
  <NavItem eventKey={3} disabled>NavItem 3 contentNavItem>
Nav>

9 để tạo ra các menu điều hướng trang. Hi vọng bài viết có thể cung cấp cách nhìn tổng thể, dễ hiểu nhất cho những bạn mới tiếp xúc với các thành phần đơn giản của thư viện

<Nav bsStyle="tabs" onSelect={handleSelect} stacked>
  <NavItem eventKey={1} href="/home">NavItem 1 contentNavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 contentNavItem>
  <NavItem eventKey={3} disabled>NavItem 3 contentNavItem>
Nav>

<Nav bsStyle="pills" onSelect={handleSelect} justified>
  <NavItem eventKey={1} href="/home">NavItem 1 contentNavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 contentNavItem>
  <NavItem eventKey={3} disabled>NavItem 3 contentNavItem>
Nav>

9. Chúng ta có thể tìm hiểu rất nhiều thành phần khác nhau, rất tiện dụng trong thư viện

<Nav bsStyle="tabs" onSelect={handleSelect} stacked>
  <NavItem eventKey={1} href="/home">NavItem 1 contentNavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 contentNavItem>
  <NavItem eventKey={3} disabled>NavItem 3 contentNavItem>
Nav>

<Nav bsStyle="pills" onSelect={handleSelect} justified>
  <NavItem eventKey={1} href="/home">NavItem 1 contentNavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 contentNavItem>
  <NavItem eventKey={3} disabled>NavItem 3 contentNavItem>
Nav>

9 của

<Nav bsStyle="tabs" onSelect={handleSelect} stacked>
  <NavItem eventKey={1} href="/home">NavItem 1 contentNavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 contentNavItem>
  <NavItem eventKey={3} disabled>NavItem 3 contentNavItem>
Nav>

<Nav bsStyle="pills" onSelect={handleSelect} justified>
  <NavItem eventKey={1} href="/home">NavItem 1 contentNavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 contentNavItem>
  <NavItem eventKey={3} disabled>NavItem 3 contentNavItem>
Nav>

58 qua trang chính thức. https. //reac-bootstrap. github. io/thành phần. htmlTài liệu tham khảo. https. //reac-bootstrap. github. io/thành phần. html#navigation

programming bootstrap

Thả xuống phản ứng-bootstrap

Thêm Bootstrap cho React

Sử dụng Bootstrap CDN

I. Tổng quan về Điều hướng

II. Cài đặt

III. Các cách sử dụng Điều hướng

1. Sử dụng navs dưới dạng_______04 và_______05

2. Sử dụng Navbars để tạo menu tiêu đề

V. Kết luận

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội

1. Sử dụng navs dưới dạng_04 và_05