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 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
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 webNavItem 1 content NavItem 2 content NavItem 3 content NavItem 1 content NavItem 2 content NavItem 3 content
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ẻNavItem 1 content NavItem 2 content NavItem 3 content NavItem 1 content NavItem 2 content NavItem 3 content
II. Cài đặt
5 là một thành phần của bootstrap, vì vậy để sử dụngNavItem 1 content NavItem 2 content NavItem 3 content NavItem 1 content NavItem 2 content NavItem 3 content
5 chỉ cần cài đặtNavItem 1 content NavItem 2 content NavItem 3 content NavItem 1 content NavItem 2 content NavItem 3 content
9NavItem 1 content NavItem 2 content NavItem 3 content NavItem 1 content NavItem 2 content NavItem 3 content
9 được cài đặt rất dễ dàng bằng câu lệnhNavItem 1 content NavItem 2 content NavItem 3 content NavItem 1 content NavItem 2 content NavItem 3 content
1 hoặc thêm vào thư viện tệpNavItem 1 content NavItem 2 content NavItem 3 content NavItem 1 content NavItem 2 content NavItem 3 content
2NavItem 1 content NavItem 2 content NavItem 3 content NavItem 1 content NavItem 2 content NavItem 3 content
before when running the command
NavItem 1 content
NavItem 2 content
NavItem 3 content
NavItem 1 content
NavItem 2 content
NavItem 3 content
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ẻ__
6 dưới dạngNavItem 1 content NavItem 2 content NavItem 3 content NavItem 1 content NavItem 2 content NavItem 3 content
4 hoặcNavItem 1 content NavItem 2 content NavItem 3 content NavItem 1 content NavItem 2 content NavItem 3 content
5 bằng các thuộc tínhNavItem 1 content NavItem 2 content NavItem 3 content NavItem 1 content NavItem 2 content NavItem 3 content
9 với cấu trúcNavItem 1 content NavItem 2 content NavItem 3 content NavItem 1 content NavItem 2 content NavItem 3 content
NavItem 1 content
NavItem 2 content
NavItem 3 content
NavItem 1 content
NavItem 2 content
NavItem 3 content
- Các hành động được tùy chỉnh trong chức năng
10 thuộc tínhNavItem 1 content NavItem 2 content NavItem 3 content NavItem 1 content NavItem 2 content NavItem 3 content
11NavItem 1 content NavItem 2 content NavItem 3 content NavItem 1 content NavItem 2 content NavItem 3 content - Có thể vô hiệu hóa các_______012 bằng cách bổ sung thuộc tính_______013 trong thẻ
14NavItem 1 content NavItem 2 content NavItem 3 content NavItem 1 content NavItem 2 content NavItem 3 content - 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ẻ
6NavItem 1 content NavItem 2 content NavItem 3 content NavItem 1 content NavItem 2 content NavItem 3 content - Với
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ẻNavItem 1 content NavItem 2 content NavItem 3 content NavItem 1 content NavItem 2 content NavItem 3 content
6 thuộc tínhNavItem 1 content NavItem 2 content NavItem 3 content NavItem 1 content NavItem 2 content NavItem 3 content
19NavItem 1 content NavItem 2 content NavItem 3 content NavItem 1 content NavItem 2 content NavItem 3 content - Ngoài ra, với các tab có thêm
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{ "dependencies": { "react-bootstrap": "0.30.0" } }
NavItem 1 content
NavItem 2 content
NavItem 3 content
NavItem 1 content
NavItem 2 content
NavItem 3 content
2. Sử dụng Navbars để tạo menu tiêu đề
- Ta có thể dễ dàng tạo ra một
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" } }
{
"dependencies": {
"react-bootstrap": "0.30.0"
}
}
- Có thể thêm thuộc tính
15 trong thẻ{ "dependencies": { "react-bootstrap": "0.30.0" } }
16 để chuyển menu màu sang màu đen{ "dependencies": { "react-bootstrap": "0.30.0" } } - Thẻ
6 trongNavItem 1 content NavItem 2 content NavItem 3 content NavItem 1 content NavItem 2 content NavItem 3 content
18 được sử dụng như một phần trên{ "dependencies": { "react-bootstrap": "0.30.0" } } - With
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ẻ{ "dependencies": { "react-bootstrap": "0.30.0" } }
41 để tùy chỉnh menu nút cho trên điện thoại di động và sử dụng thẻNavItem 1 content NavItem 2 content NavItem 3 content NavItem 1 content NavItem 2 content NavItem 3 content
42 để tùy chỉnh logo và liên kết đến trang chủNavItem 1 content NavItem 2 content NavItem 3 content NavItem 1 content NavItem 2 content NavItem 3 content - Khi không có thẻ
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ẻNavItem 1 content NavItem 2 content NavItem 3 content NavItem 1 content NavItem 2 content NavItem 3 content
43 trongNavItem 1 content NavItem 2 content NavItem 3 content NavItem 1 content NavItem 2 content NavItem 3 content
19 như ví dụ trên, các mục trong thẻ{ "dependencies": { "react-bootstrap": "0.30.0" } }
6 sẽ được thu gọn vào 1NavItem 1 content NavItem 2 content NavItem 3 content NavItem 1 content NavItem 2 content NavItem 3 content
47 khi chuyển sang chế độ di độngNavItem 1 content NavItem 2 content NavItem 3 content NavItem 1 content NavItem 2 content NavItem 3 content - Khi sử dụng thẻ
43, tất cả các mục còn lại được bảo vệ trong thẻNavItem 1 content NavItem 2 content NavItem 3 content NavItem 1 content NavItem 2 content NavItem 3 content
49. Trong đó, ta có thể tùy chỉnh các_______017 bằng thuộc tínhNavItem 1 content NavItem 2 content NavItem 3 content NavItem 1 content NavItem 2 content NavItem 3 content
51 để tạo các mục được căn lề phải vàNavItem 1 content NavItem 2 content NavItem 3 content NavItem 1 content NavItem 2 content NavItem 3 content
52 để căn lề tráiNavItem 1 content NavItem 2 content NavItem 3 content NavItem 1 content NavItem 2 content NavItem 3 content - 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ẻ
53 với cấu trúcNavItem 1 content NavItem 2 content NavItem 3 content NavItem 1 content NavItem 2 content NavItem 3 content
NavItem 1 content
NavItem 2 content
NavItem 3 content
NavItem 1 content
NavItem 2 content
NavItem 3 content
V. Kết luận
Trên đây là những ví dụ cơ bản nhất trong việc sử dụng
NavItem 1 content
NavItem 2 content
NavItem 3 content
NavItem 1 content
NavItem 2 content
NavItem 3 content
NavItem 1 content
NavItem 2 content
NavItem 3 content
NavItem 1 content
NavItem 2 content
NavItem 3 content
NavItem 1 content
NavItem 2 content
NavItem 3 content
NavItem 1 content
NavItem 2 content
NavItem 3 content
NavItem 1 content
NavItem 2 content
NavItem 3 content
NavItem 1 content
NavItem 2 content
NavItem 3 content
NavItem 1 content
NavItem 2 content
NavItem 3 content
NavItem 1 content
NavItem 2 content
NavItem 3 content