Phản ứng có tích hợp sẵn bootstrap không?

Question

React là khung JS được sử dụng phổ biến nhất để phát triển các ứng dụng web tương tác. Nhưng vì nó là một thư viện dạng xem nên nó không đi kèm với các kỹ thuật để xây dựng các thiết kế đáp ứng và rất trực quan. Để khắc phục điều này chúng ta có thể sử dụng Bootstrap, một framework thiết kế front-end

Nội dung chính Show

Tại sao các thành phần Bootstrap không thể được bao gồm trong React
Cách thiết lập Biểu định kiểu Bootstrap với React
Cách sử dụng các lớp Bootstrap thông thường với React
Sử dụng Thư viện của bên thứ ba cho React và Bootstrap
Cách thiết lập thư viện Reactstrap
Hiểu Lưới Bootstrap
Sử dụng các thành phần Bootstrap với React
Thanh điều hướng
Cửa sổ phương thức
Các hình thức
Danh sáchNhóm
Phần kết luận
Làm cách nào để đưa Bootstrap vào ReactJS?
React Bootstrap có yêu cầu Bootstrap không?
Tôi có thể sử dụng React thay vì Bootstrap không?
React Bootstrap có khác với Bootstrap không?

Tại sao các thành phần Bootstrap không thể được bao gồm trong React

Thêm thẻ HTML như

1.
2├── package.json
3├── public
4│   ├── favicon.ico
5│   ├── index.html
6│   └── manifest.json
7├── README.md
8├── src
9│   ├── App.css
10│   ├── App.js
11│   ├── App.test.js
12│   ├── index.css
13│   ├── index.js
14│   ├── logo.svg
15│   └── registerServiceWorker.js
16└── yarn.lock

6 vào tệp HTML như chỉ mục. html là một nhiệm vụ dễ dàng, nhưng nó không giống như vậy khi thêm Bootstrap vào React. Lý do là Bootstrap dựa vào jQuery để chạy các thành phần giao diện người dùng cụ thể. Và jQuery thao tác trực tiếp với DOM, điều này mâu thuẫn với cách tiếp cận khai báo của React. Chúng ta có thể sử dụng biểu định kiểu Bootstrap vanilla đơn giản cho các ứng dụng web nếu yêu cầu bị giới hạn ở lưới 12 cột dễ tiếp thu hoặc các thành phần không liên quan đến jQuery. Mặt khác, có các thư viện khác nhau có thể cho phép sử dụng Bootstrap cùng với React.

Chúng tôi sẽ kiểm tra cả hai phương pháp để chúng tôi có thể chọn phương pháp nào phù hợp nhất cho một tình huống nhất định. Chúng tôi sẽ tập trung vào các chi tiết triển khai để tích hợp Bootstrap với ứng dụng React

Cách thiết lập Biểu định kiểu Bootstrap với React

Chúng tôi sẽ sử dụng Create React App CLI để bắt đầu với dự án React của chúng tôi. Nó không yêu cầu bất kỳ cấu hình nào để bắt đầu

Các lệnh sau có thể được sử dụng cài đặt Tạo ứng dụng React và khởi động máy chủ ở chế độ phát triển

1$ create-react-app my-bootstrap-react-app
2$ cd my-bootstrap-react-app
3$ npm start

jav

Cấu trúc thư mục được tạo bởi Create React App như bên dưới

1.
2├── package.json
3├── public
4│   ├── favicon.ico
5│   ├── index.html
6│   └── manifest.json
7├── README.md
8├── src
9│   ├── App.css
10│   ├── App.js
11│   ├── App.test.js
12│   ├── index.css
13│   ├── index.js
14│   ├── logo.svg
15│   └── registerServiceWorker.js
16└── yarn.lock

jav

Bước tiếp theo là lấy thư viện Bootstrap mới nhất từ trang web chính thức của nó. Gói đã tải xuống bao gồm các phiên bản tệp JavaScript và CSS được biên dịch cũng như thu nhỏ. Cũng có một biểu định kiểu lưới dành riêng cho các ứng dụng chỉ cần sử dụng lưới. Bước tiếp theo là tạo một thư mục mới cho CSS ở chế độ công khai, sao chép bootstrap. tối thiểu. css ở đó, sau đó thêm mã được yêu cầu vào công khai/chỉ mục. html để liên kết nó

1<head>
2<link rel="stylesheet" href="css/bootstrap.min.css">
3head>

html

Một cách khác là sử dụng CDN để tìm nạp CSS đã thu nhỏ

1<link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

html

Cách sử dụng các lớp Bootstrap thông thường với React

Chúng ta có thể sử dụng các lớp Bootstrap với mã JSX sau khi biểu định kiểu Bootstrap đã được thêm vào ứng dụng React. Để xác minh điều này, chúng tôi sẽ sao chép một số mã mẫu ngẫu nhiên từ trang demo Bootstrap

1import React from "react";
2import {render} from "react-dom";
3import Forms from "./Forms";
4import NavBar from "./NavBar";
5
6const App = () => (
7  <div>
8    <NavBar />
9    <br />
10    <div className="container">
11      <div className="row">
12        <div className=" col-lg-offset-4 col-lg-8">
13          <Forms />
14        </div>
15      </div>
16    </div>
17  </div>
18);
19
20render(<App />, document.getElementById("root"));

jav

Sẽ thật tuyệt nếu các lớp Bootstrap có thể được nhập dưới dạng các thành phần React để sử dụng React tốt nhất. Ví dụ: chúng ta có thể có các thành phần lưới, hàng và Cột để sắp xếp trang thay vì các lớp HTML như bên dưới

1
2
3<div class="container">
4  <div class="row">
5    <div class="col-sm">
6      Col 1 of 3
7    div>
8    <div class="col-sm">
9      Col 2 of 3
10    div>
11    <div class="col-sm">
12      Col 3 of 3
13    div>
14  div>
15div>
16
17
18
19<Grid>
20  <Row>
21      <Col sm>
22        Col 1 of 3
23    Col>
24    <Col sm>
25        Col 2 of 3
26    Col>
27     <Col sm>
28        Col 3 of 3
29    Col>
30  Row>
31Grid>

html

May mắn thay, không cần triển khai thư viện của riêng chúng tôi để thực hiện điều này, vì đã có sẵn các thư viện. Hãy khám phá một vài trong số này

Sử dụng Thư viện của bên thứ ba cho React và Bootstrap

Có một số thư viện cố gắng phát triển triển khai Bootstrap dành riêng cho React, cho phép chúng tôi sử dụng các thành phần JSX cũng như làm việc với các kiểu Bootstrap. Sau đây là một số mô-đun Bootstrap phổ biến có thể được sử dụng với các dự án React

React-Bootstrap là một trong những thư viện hàng đầu để thêm các thành phần Bootstrap vào các dự án React. Nhưng triển khai hiện tại của nó được nhắm mục tiêu cho Bootstrap v3 chứ không phải phiên bản mới nhất

Reacstrap là một thư viện khác cho phép chúng ta sử dụng các thành phần Bootstrap trong ứng dụng React. Trái ngược với React-Bootstrap, reactstrap được phát triển để sử dụng với phiên bản Bootstrap mới nhất. Việc triển khai reactstrap có các thành phần cho biểu mẫu, nút, bảng, lưới bố cục và điều hướng. Nó hiện đang được phát triển, nhưng cung cấp một giải pháp thay thế tuyệt vời để phát triển ứng dụng với React và Bootstrap cùng nhau

Có một số lựa chọn thay thế như React-UI và một số mô-đun dành riêng cho miền như CoreUI-React, React-bootstrap-table có sẵn trên GitHub cung cấp các tiện ích mở rộng để phát triển một số giao diện người dùng thú vị cho các ứng dụng sử dụng React

Trong hướng dẫn này, chúng tôi sẽ tập trung vào Reacstrap vì nó phổ biến nhất và sử dụng phiên bản Bootstrap mới nhất

Cách thiết lập thư viện Reactstrap

Để bắt đầu, chúng tôi cài đặt thư viện reactstrap bằng npm

1npm install --save [email protected]

jav

Bây giờ, các thành phần có liên quan từ mô-đun có thể được nhập như bên dưới

________số 8

jav

Ở giai đoạn này, thư viện sẽ không hoạt động như mong đợi vì nó không bao gồm Bootstrap CSS. Chúng tôi sẽ cần thêm nó theo cách thủ công như hình bên dưới

1npm install --save bootstrap

jav

Bước tiếp theo là nhập Bootstrap CSS vào tệp

1.
2├── package.json
3├── public
4│   ├── favicon.ico
5│   ├── index.html
6│   └── manifest.json
7├── README.md
8├── src
9│   ├── App.css
10│   ├── App.js
11│   ├── App.test.js
12│   ├── index.css
13│   ├── index.js
14│   ├── logo.svg
15│   └── registerServiceWorker.js
16└── yarn.lock

7 của chúng tôi.

1$ create-react-app my-bootstrap-react-app
2$ cd my-bootstrap-react-app
3$ npm start

1

jav

Hiểu Lưới Bootstrap

Bootstrap được phát triển với hệ thống lưới di động ưu tiên đáp ứng, cho phép sử dụng 12 cột trên mỗi trang. Chúng tôi sẽ cần nhập

1.
2├── package.json
3├── public
4│   ├── favicon.ico
5│   ├── index.html
6│   └── manifest.json
7├── README.md
8├── src
9│   ├── App.css
10│   ├── App.js
11│   ├── App.test.js
12│   ├── index.css
13│   ├── index.js
14│   ├── logo.svg
15│   └── registerServiceWorker.js
16└── yarn.lock

8 ,

1.
2├── package.json
3├── public
4│   ├── favicon.ico
5│   ├── index.html
6│   └── manifest.json
7├── README.md
8├── src
9│   ├── App.css
10│   ├── App.js
11│   ├── App.test.js
12│   ├── index.css
13│   ├── index.js
14│   ├── logo.svg
15│   └── registerServiceWorker.js
16└── yarn.lock

9 và

1<head>
2<link rel="stylesheet" href="css/bootstrap.min.css">
3head>

0 components in order to use the grid. The

1.
2├── package.json
3├── public
4│   ├── favicon.ico
5│   ├── index.html
6│   └── manifest.json
7├── README.md
8├── src
9│   ├── App.css
10│   ├── App.js
11│   ├── App.test.js
12│   ├── index.css
13│   ├── index.js
14│   ├── logo.svg
15│   └── registerServiceWorker.js
16└── yarn.lock

8 có thuộc tính linh hoạt thay đổi bố cục có chiều rộng cố định thành bố cục có chiều rộng đầy đủ. Về cơ bản, nó thêm lớp khởi động ______32 vào lưới. Thành phần Col có thể được cấu hình để hoạt động với các thuộc tính như

1<head>
2<link rel="stylesheet" href="css/bootstrap.min.css">
3head>

3 ,

1<head>
2<link rel="stylesheet" href="css/bootstrap.min.css">
3head>

4 . g. ,

1<head>
2<link rel="stylesheet" href="css/bootstrap.min.css">
3head>

5 and

1<head>
2<link rel="stylesheet" href="css/bootstrap.min.css">
3head>

6 that work the same way as the

1<head>
2<link rel="stylesheet" href="css/bootstrap.min.css">
3head>

7 classes in Bootstrap, e.g.,

1<head>
2<link rel="stylesheet" href="css/bootstrap.min.css">
3head>

8 . Một cách khác để thực hiện điều này là truyền một đối tượng vào props với các thuộc tính tùy chọn như

1<head>
2<link rel="stylesheet" href="css/bootstrap.min.css">
3head>

9 ,

1<link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

0, and

1<link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

1. The

1<head>
2<link rel="stylesheet" href="css/bootstrap.min.css">
3head>

9 cho biết có bao nhiêu cột trong lưới, trong khi

1<link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

0 enables us to arrange the columns and works with values from 1 to 12. The columns can be moved to the right by using the

1<link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

1 . Đoạn mã sau giải thích một số tính năng của

1<link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

5 trong Reacstrap.

1.
2├── package.json
3├── public
4│   ├── favicon.ico
5│   ├── index.html
6│   └── manifest.json
7├── README.md
8├── src
9│   ├── App.css
10│   ├── App.js
11│   ├── App.test.js
12│   ├── index.css
13│   ├── index.js
14│   ├── logo.svg
15│   └── registerServiceWorker.js
16└── yarn.lock

0

jav

Sử dụng các thành phần Bootstrap với React

Bây giờ chúng ta đã quen thuộc với reactstrap và cách thức hoạt động của nó, có rất nhiều thành phần của Bootstrap 4 có thể được sử dụng với React bằng cách sử dụng reactstrap. Chúng ta sẽ xem xét một số thành phần quan trọng trong hướng dẫn này

Thanh điều hướng

reactstrap

1<link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

6 có thể được sử dụng cho các thanh điều hướng và cung cấp khả năng phản hồi. Để tổ chức các liên kết điều hướng hiệu quả hơn, một Thanh điều hướng bao gồm các thành phần con như

1<link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

7 ,

1<link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

8,

1<link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

9, etc . A responsive Navbar can created by adding a

1import React from "react";
2import {render} from "react-dom";
3import Forms from "./Forms";
4import NavBar from "./NavBar";
5
6const App = () => (
7  <div>
8    <NavBar />
9    <br />
10    <div className="container">
11      <div className="row">
12        <div className=" col-lg-offset-4 col-lg-8">
13          <Forms />
14        </div>
15      </div>
16    </div>
17  </div>
18);
19
20render(<App />, document.getElementById("root"));

0 bên trong thành phần

1import React from "react";
2import {render} from "react-dom";
3import Forms from "./Forms";
4import NavBar from "./NavBar";
5
6const App = () => (
7  <div>
8    <NavBar />
9    <br />
10    <div className="container">
11      <div className="row">
12        <div className=" col-lg-offset-4 col-lg-8">
13          <Forms />
14        </div>
15      </div>
16    </div>
17  </div>
18);
19
20render(<App />, document.getElementById("root"));

1 của chúng tôi và . Chúng ta sẽ xem đoạn mã sau để xem cách

1import React from "react";
2import {render} from "react-dom";
3import Forms from "./Forms";
4import NavBar from "./NavBar";
5
6const App = () => (
7  <div>
8    <NavBar />
9    <br />
10    <div className="container">
11      <div className="row">
12        <div className=" col-lg-offset-4 col-lg-8">
13          <Forms />
14        </div>
15      </div>
16    </div>
17  </div>
18);
19
20render(<App />, document.getElementById("root"));

2 into a

1import React from "react";
2import {render} from "react-dom";
3import Forms from "./Forms";
4import NavBar from "./NavBar";
5
6const App = () => (
7  <div>
8    <NavBar />
9    <br />
10    <div className="container">
11      <div className="row">
12        <div className=" col-lg-offset-4 col-lg-8">
13          <Forms />
14        </div>
15      </div>
16    </div>
17  </div>
18);
19
20render(<App />, document.getElementById("root"));

3 component. We'll look at the following code to see how the

1import React from "react";
2import {render} from "react-dom";
3import Forms from "./Forms";
4import NavBar from "./NavBar";
5
6const App = () => (
7  <div>
8    <NavBar />
9    <br />
10    <div className="container">
11      <div className="row">
12        <div className=" col-lg-offset-4 col-lg-8">
13          <Forms />
14        </div>
15      </div>
16    </div>
17  </div>
18);
19
20render(<App />, document.getElementById("root"));

4 thành phần và trạng thái React có thể được sử dụng để lưu dữ liệu chuyển đổi;.

1.
2├── package.json
3├── public
4│   ├── favicon.ico
5│   ├── index.html
6│   └── manifest.json
7├── README.md
8├── src
9│   ├── App.css
10│   ├── App.js
11│   ├── App.test.js
12│   ├── index.css
13│   ├── index.js
14│   ├── logo.svg
15│   └── registerServiceWorker.js
16└── yarn.lock

1

jav

Cửa sổ phương thức

Thành phần Reacstrap

1import React from "react";
2import {render} from "react-dom";
3import Forms from "./Forms";
4import NavBar from "./NavBar";
5
6const App = () => (
7  <div>
8    <NavBar />
9    <br />
10    <div className="container">
11      <div className="row">
12        <div className=" col-lg-offset-4 col-lg-8">
13          <Forms />
14        </div>
15      </div>
16    </div>
17  </div>
18);
19
20render(<App />, document.getElementById("root"));

5 có thể được sử dụng để tạo phương thức Bootstrap với tiêu đề, nội dung và chân trang. Một thành phần phương thức có thể được sử dụng với một số đạo cụ và gọi lại để có cửa sổ tương tác và cũng để đóng cửa sổ. Để quyết định xem phương thức có hiển thị hay không, thuộc tính

1import React from "react";
2import {render} from "react-dom";
3import Forms from "./Forms";
4import NavBar from "./NavBar";
5
6const App = () => (
7  <div>
8    <NavBar />
9    <br />
10    <div className="container">
11      <div className="row">
12        <div className=" col-lg-offset-4 col-lg-8">
13          <Forms />
14        </div>
15      </div>
16    </div>
17  </div>
18);
19
20render(<App />, document.getElementById("root"));

6 được sử dụng. Gọi lại chuyển đổi được sử dụng để chuyển đổi giá trị của

1import React from "react";
2import {render} from "react-dom";
3import Forms from "./Forms";
4import NavBar from "./NavBar";
5
6const App = () => (
7  <div>
8    <NavBar />
9    <br />
10    <div className="container">
11      <div className="row">
12        <div className=" col-lg-offset-4 col-lg-8">
13          <Forms />
14        </div>
15      </div>
16    </div>
17  </div>
18);
19
20render(<App />, document.getElementById("root"));

6 trong thành phần. Có thêm một số đạo cụ được sử dụng để tạo hiệu ứng chuyển tiếp. Các cuộc gọi lại có sẵn bao gồm

1import React from "react";
2import {render} from "react-dom";
3import Forms from "./Forms";
4import NavBar from "./NavBar";
5
6const App = () => (
7  <div>
8    <NavBar />
9    <br />
10    <div className="container">
11      <div className="row">
12        <div className=" col-lg-offset-4 col-lg-8">
13          <Forms />
14        </div>
15      </div>
16    </div>
17  </div>
18);
19
20render(<App />, document.getElementById("root"));

8 ,

1import React from "react";
2import {render} from "react-dom";
3import Forms from "./Forms";
4import NavBar from "./NavBar";
5
6const App = () => (
7  <div>
8    <NavBar />
9    <br />
10    <div className="container">
11      <div className="row">
12        <div className=" col-lg-offset-4 col-lg-8">
13          <Forms />
14        </div>
15      </div>
16    </div>
17  </div>
18);
19
20render(<App />, document.getElementById("root"));

9 ,

1
2
3<div class="container">
4  <div class="row">
5    <div class="col-sm">
6      Col 1 of 3
7    div>
8    <div class="col-sm">
9      Col 2 of 3
10    div>
11    <div class="col-sm">
12      Col 3 of 3
13    div>
14  div>
15div>
16
17
18
19<Grid>
20  <Row>
21      <Col sm>
22        Col 1 of 3
23    Col>
24    <Col sm>
25        Col 2 of 3
26    Col>
27     <Col sm>
28        Col 3 of 3
29    Col>
30  Row>
31Grid>

0, and

1
2
3<div class="container">
4  <div class="row">
5    <div class="col-sm">
6      Col 1 of 3
7    div>
8    <div class="col-sm">
9      Col 2 of 3
10    div>
11    <div class="col-sm">
12      Col 3 of 3
13    div>
14  div>
15div>
16
17
18
19<Grid>
20  <Row>
21      <Col sm>
22        Col 1 of 3
23    Col>
24    <Col sm>
25        Col 2 of 3
26    Col>
27     <Col sm>
28        Col 3 of 3
29    Col>
30  Row>
31Grid>

1:

1.
2├── package.json
3├── public
4│   ├── favicon.ico
5│   ├── index.html
6│   └── manifest.json
7├── README.md
8├── src
9│   ├── App.css
10│   ├── App.js
11│   ├── App.test.js
12│   ├── index.css
13│   ├── index.js
14│   ├── logo.svg
15│   └── registerServiceWorker.js
16└── yarn.lock

2

html

Các hình thức

Biểu mẫu phản ứng có thể ở trong dòng hoặc nằm ngang. Phần tử đầu vào được hiển thị bởi một thành phần

1
2
3<div class="container">
4  <div class="row">
5    <div class="col-sm">
6      Col 1 of 3
7    div>
8    <div class="col-sm">
9      Col 2 of 3
10    div>
11    <div class="col-sm">
12      Col 3 of 3
13    div>
14  div>
15div>
16
17
18
19<Grid>
20  <Row>
21      <Col sm>
22        Col 1 of 3
23    Col>
24    <Col sm>
25        Col 2 of 3
26    Col>
27     <Col sm>
28        Col 3 of 3
29    Col>
30  Row>
31Grid>

2 . Nhiều thành phần _______62 có thể được bao bọc trong một

1
2
3<div class="container">
4  <div class="row">
5    <div class="col-sm">
6      Col 1 of 3
7    div>
8    <div class="col-sm">
9      Col 2 of 3
10    div>
11    <div class="col-sm">
12      Col 3 of 3
13    div>
14  div>
15div>
16
17
18
19<Grid>
20  <Row>
21      <Col sm>
22        Col 1 of 3
23    Col>
24    <Col sm>
25        Col 2 of 3
26    Col>
27     <Col sm>
28        Col 3 of 3
29    Col>
30  Row>
31Grid>

4 để xác thực trạng thái, phù hợp . Để đặt bất kỳ nhãn nào, chúng tôi có thể thực hiện việc đó bằng cách sử dụng

1
2
3<div class="container">
4  <div class="row">
5    <div class="col-sm">
6      Col 1 of 3
7    div>
8    <div class="col-sm">
9      Col 2 of 3
10    div>
11    <div class="col-sm">
12      Col 3 of 3
13    div>
14  div>
15div>
16
17
18
19<Grid>
20  <Row>
21      <Col sm>
22        Col 1 of 3
23    Col>
24    <Col sm>
25        Col 2 of 3
26    Col>
27     <Col sm>
28        Col 3 of 3
29    Col>
30  Row>
31Grid>

4 features. To set any label, we can do that using

1
2
3<div class="container">
4  <div class="row">
5    <div class="col-sm">
6      Col 1 of 3
7    div>
8    <div class="col-sm">
9      Col 2 of 3
10    div>
11    <div class="col-sm">
12      Col 3 of 3
13    div>
14  div>
15div>
16
17
18
19<Grid>
20  <Row>
21      <Col sm>
22        Col 1 of 3
23    Col>
24    <Col sm>
25        Col 2 of 3
26    Col>
27     <Col sm>
28        Col 3 of 3
29    Col>
30  Row>
31Grid>

6 . Có rất nhiều điều có thể được thực hiện bằng cách sử dụng các biểu mẫu. Bạn có thể xem tài liệu React trên biểu mẫu để biết thêm chi tiết. Dưới đây là mã cho hình thức của chúng tôi.

1.
2├── package.json
3├── public
4│   ├── favicon.ico
5│   ├── index.html
6│   └── manifest.json
7├── README.md
8├── src
9│   ├── App.css
10│   ├── App.js
11│   ├── App.test.js
12│   ├── index.css
13│   ├── index.js
14│   ├── logo.svg
15│   └── registerServiceWorker.js
16└── yarn.lock

3

html

Danh sáchNhóm

Việc tạo kiểu và kiểm soát các mục trong danh sách có thể được thực hiện dễ dàng bằng cách sử dụng reactstrap

1
2
3<div class="container">
4  <div class="row">
5    <div class="col-sm">
6      Col 1 of 3
7    div>
8    <div class="col-sm">
9      Col 2 of 3
10    div>
11    <div class="col-sm">
12      Col 3 of 3
13    div>
14  div>
15div>
16
17
18
19<Grid>
20  <Row>
21      <Col sm>
22        Col 1 of 3
23    Col>
24    <Col sm>
25        Col 2 of 3
26    Col>
27     <Col sm>
28        Col 3 of 3
29    Col>
30  Row>
31Grid>

7 .

1
2
3<div class="container">
4  <div class="row">
5    <div class="col-sm">
6      Col 1 of 3
7    div>
8    <div class="col-sm">
9      Col 2 of 3
10    div>
11    <div class="col-sm">
12      Col 3 of 3
13    div>
14  div>
15div>
16
17
18
19<Grid>
20  <Row>
21      <Col sm>
22        Col 1 of 3
23    Col>
24    <Col sm>
25        Col 2 of 3
26    Col>
27     <Col sm>
28        Col 3 of 3
29    Col>
30  Row>
31Grid>

8 được gói trong

1
2
3<div class="container">
4  <div class="row">
5    <div class="col-sm">
6      Col 1 of 3
7    div>
8    <div class="col-sm">
9      Col 2 of 3
10    div>
11    <div class="col-sm">
12      Col 3 of 3
13    div>
14  div>
15div>
16
17
18
19<Grid>
20  <Row>
21      <Col sm>
22        Col 1 of 3
23    Col>
24    <Col sm>
25        Col 2 of 3
26    Col>
27     <Col sm>
28        Col 3 of 3
29    Col>
30  Row>
31Grid>

7 . Có thể sử dụng lệnh gọi lại

1npm install --save [email protected]

0 để tương tác. Dưới đây là mã cho

1
2
3<div class="container">
4  <div class="row">
5    <div class="col-sm">
6      Col 1 of 3
7    div>
8    <div class="col-sm">
9      Col 2 of 3
10    div>
11    <div class="col-sm">
12      Col 3 of 3
13    div>
14  div>
15div>
16
17
18
19<Grid>
20  <Row>
21      <Col sm>
22        Col 1 of 3
23    Col>
24    <Col sm>
25        Col 2 of 3
26    Col>
27     <Col sm>
28        Col 3 of 3
29    Col>
30  Row>
31Grid>

7 ;

1.
2├── package.json
3├── public
4│   ├── favicon.ico
5│   ├── index.html
6│   └── manifest.json
7├── README.md
8├── src
9│   ├── App.css
10│   ├── App.js
11│   ├── App.test.js
12│   ├── index.css
13│   ├── index.js
14│   ├── logo.svg
15│   └── registerServiceWorker.js
16└── yarn.lock

4

html

nút

Các nút có thể là thành phần quan trọng nhất đối với bất kỳ khung thiết kế nào. Có một thành phần phản ứng

1npm install --save [email protected]

2 cho các nút. Ngoài các thuộc tính đang hoạt động và bị vô hiệu hóa chung, chúng tôi có thể sử dụng

1npm install --save [email protected]

3 và

1<head>
2<link rel="stylesheet" href="css/bootstrap.min.css">
3head>

9 to set the style (

1npm install --save [email protected]

5,

1npm install --save [email protected]

6, etc.) and size (

1<head>
2<link rel="stylesheet" href="css/bootstrap.min.css">
3head>

6 ,

1<head>
2<link rel="stylesheet" href="css/bootstrap.min.css">
3head>

5 , v.v. ) của các nút.

1.
2├── package.json
3├── public
4│   ├── favicon.ico
5│   ├── index.html
6│   └── manifest.json
7├── README.md
8├── src
9│   ├── App.css
10│   ├── App.js
11│   ├── App.test.js
12│   ├── index.css
13│   ├── index.js
14│   ├── logo.svg
15│   └── registerServiceWorker.js
16└── yarn.lock

5

html

Phần kết luận

Mọi thứ chúng ta cần để tích hợp Bootstrap với ứng dụng React đã được trình bày trong hướng dẫn này. Có rất nhiều thư viện để tích hợp Bootstrap với ứng dụng React và chúng tôi đã thảo luận về một số thư viện nổi tiếng nhất. Chúng tôi cũng đã làm việc với một trong những thư viện được sử dụng phổ biến nhất, reactstrap

Làm cách nào để đưa Bootstrap vào ReactJS?

Thêm Bootstrap .

npm cài đặt bootstrap

sợi thêm bootstrap. Nhập CSS Bootstrap và CSS chủ đề Bootstrap tùy chọn vào đầu src/index của bạn. tập tin js

nhập 'bootstrap/dist/css/bootstrap. css';.

npm cài đặt sass

sợi thêm sass. .

// Ghi đè các biến mặc định trước khi nhập

React Bootstrap có yêu cầu Bootstrap không?

Biểu định kiểu. Bởi vì React-Bootstrap không phụ thuộc vào phiên bản Bootstrap rất chính xác nên chúng tôi không gửi kèm theo bất kỳ CSS đi kèm nào. Tuy nhiên, một số biểu định kiểu được yêu cầu để sử dụng các thành phần này.

Tôi có thể sử dụng React thay vì Bootstrap không?

So sánh Bootstrap và React trong nháy mắt. Trong khi React được biết đến với việc nâng cao trải nghiệm người dùng bằng cách tải trang web nhanh hơn, Bootstrap giúp xây dựng các trang web thân thiện với thiết bị di động, thiết kế CSS, bố cục HTML và các chức năng JavaScript hoạt động tốt

React Bootstrap có khác với Bootstrap không?

Đây là sự khác biệt giữa Bootstrap và React. Bootstrap là một khung CSS giúp cải thiện khả năng phản hồi. React là một thư viện JavaScript và được dùng để cải thiện giao diện người dùng . Bootstrap dựa trên hệ thống lưới CSS, CSS flexbox, để cải thiện khả năng phản hồi.

programming bootstrap

Phản ứng có tích hợp sẵn bootstrap không?

Tại sao các thành phần Bootstrap không thể được bao gồm trong React

Cách thiết lập Biểu định kiểu Bootstrap với React

Cách sử dụng các lớp Bootstrap thông thường với React

Sử dụng Thư viện của bên thứ ba cho React và Bootstrap

Cách thiết lập thư viện Reactstrap

Hiểu Lưới Bootstrap

Sử dụng các thành phần Bootstrap với React

Thanh điều hướng

Cửa sổ phương thức

Các hình thức

Danh sáchNhóm

nút

Phần kết luận

Làm cách nào để đưa Bootstrap vào ReactJS?

React Bootstrap có yêu cầu Bootstrap không?

Tôi có thể sử dụng React thay vì Bootstrap không?

React Bootstrap có khác với Bootstrap không?

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