Hướng dẫn stack react bootstrap - ngăn xếp phản ứng bootstrap
Ngăn xếpNgười trợ giúp tốc ký xây dựng trên các tiện ích Flexbox của chúng tôi để làm cho bố cục thành phần nhanh hơn và dễ dàng hơn bao giờ hết. Show Theo chiều dọcCác ngăn xếp theo mặc định theo mặc định và các mục xếp chồng lên nhau theo mặc định. Sử dụng Nằm ngangSử dụng Sử dụng các tiện ích lề ngang như import Button from 'react-bootstrap/Button'; import { Button } from 'react-bootstrap';1 làm miếng đệm: Và với các quy tắc dọc: Ví dụSử dụng một import Button from 'react-bootstrap/Button'; import { Button } from 'react-bootstrap';2 dọc để xếp các nút và các yếu tố khác: Tạo một hình thức nội tuyến với một import Button from 'react-bootstrap/Button'; import { Button } from 'react-bootstrap';2 ngang: APIMã nhậpimport Button from 'react-bootstrap/Button'; import { Button } from 'react-bootstrap';4Copy cho thành phần ngăn xếpCopy import code for the Stack component
Giới thiệuTìm hiểu làm thế nào để bao gồm React Bootstrap trong dự án của bạn. Cài đặtCách tốt nhất để tiêu thụ phản ứng bootstrap là thông qua gói NPM mà bạn có thể cài đặt với <script src="https://cdn.jsdelivr.net/npm/react/umd/react.production.min.js" crossorigin>script> <script src="https://cdn.jsdelivr.net/npm/react-dom/umd/react-dom.production.min.js" crossorigin>script> <script src="https://cdn.jsdelivr.net/npm/react-bootstrap@next/dist/react-bootstrap.min.js" crossorigin>script> <script>var Alert = ReactBootstrap.Alert;script>1 (hoặc <script src="https://cdn.jsdelivr.net/npm/react/umd/react.production.min.js" crossorigin>script> <script src="https://cdn.jsdelivr.net/npm/react-dom/umd/react-dom.production.min.js" crossorigin>script> <script src="https://cdn.jsdelivr.net/npm/react-bootstrap@next/dist/react-bootstrap.min.js" crossorigin>script> <script>var Alert = ReactBootstrap.Alert;script>2 nếu bạn thích). Nếu bạn có kế hoạch tùy chỉnh các tệp SASS Bootstrap hoặc không muốn sử dụng CDN cho bảng kiểu, cũng có thể hữu ích khi cài đặt vani Bootstrap. npm install react-bootstrap bootstrapNhập các thành phầnBạn nên nhập các thành phần riêng lẻ như: <script src="https://cdn.jsdelivr.net/npm/react/umd/react.production.min.js" crossorigin>script> <script src="https://cdn.jsdelivr.net/npm/react-dom/umd/react-dom.production.min.js" crossorigin>script> <script src="https://cdn.jsdelivr.net/npm/react-bootstrap@next/dist/react-bootstrap.min.js" crossorigin>script> <script>var Alert = ReactBootstrap.Alert;script>3 chứ không phải toàn bộ thư viện. Làm như vậy chỉ kéo theo các thành phần cụ thể mà bạn sử dụng, có thể giảm đáng kể lượng mã bạn cuối cùng gửi cho khách hàng. import Button from 'react-bootstrap/Button'; import { Button } from 'react-bootstrap'; Trình duyệt GlobalsChúng tôi cung cấp các gói <script src="https://cdn.jsdelivr.net/npm/react/umd/react.production.min.js" crossorigin>script> <script src="https://cdn.jsdelivr.net/npm/react-dom/umd/react-dom.production.min.js" crossorigin>script> <script src="https://cdn.jsdelivr.net/npm/react-bootstrap@next/dist/react-bootstrap.min.js" crossorigin>script> <script>var Alert = ReactBootstrap.Alert;script>4 và <script src="https://cdn.jsdelivr.net/npm/react/umd/react.production.min.js" crossorigin>script> <script src="https://cdn.jsdelivr.net/npm/react-dom/umd/react-dom.production.min.js" crossorigin>script> <script src="https://cdn.jsdelivr.net/npm/react-bootstrap@next/dist/react-bootstrap.min.js" crossorigin>script> <script>var Alert = ReactBootstrap.Alert;script>5 với tất cả các thành phần được xuất trên đối tượng <script src="https://cdn.jsdelivr.net/npm/react/umd/react.production.min.js" crossorigin>script> <script src="https://cdn.jsdelivr.net/npm/react-dom/umd/react-dom.production.min.js" crossorigin>script> <script src="https://cdn.jsdelivr.net/npm/react-bootstrap@next/dist/react-bootstrap.min.js" crossorigin>script> <script>var Alert = ReactBootstrap.Alert;script>6. Các gói này có sẵn trên JSDELIVR, cũng như trong gói NPM. <script src="https://cdn.jsdelivr.net/npm/react/umd/react.production.min.js" crossorigin>script> <script src="https://cdn.jsdelivr.net/npm/react-dom/umd/react-dom.production.min.js" crossorigin>script> <script src="https://cdn.jsdelivr.net/npm/react-bootstrap@next/dist/react-bootstrap.min.js" crossorigin>script> <script>var Alert = ReactBootstrap.Alert;script> Ví dụReact-BootStrap đã bắt đầu một repo với một vài ví dụ CodeSandbox cơ bản. Nhấn vào đây để kiểm tra chúng. Kiểu dángVì phản ứng bootstrap không phụ thuộc vào phiên bản bootstrap rất chính xác, chúng tôi không giao hàng với bất kỳ CSS nào đi kèm. Tuy nhiên, một số bảng kiểu được yêu cầu sử dụng các thành phần này.is required to use these components. CSS{} import 'bootstrap/dist/css/bootstrap.min.css'; Làm thế nào và những kiểu bootstrap bạn bao gồm là tùy thuộc vào bạn, nhưng cách đơn giản nhất là bao gồm các kiểu mới nhất từ CDN. Thêm một chút thông tin về lợi ích của việc sử dụng CDN có thể được tìm thấy ở đây. <link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm//dist/css/bootstrap.min.css"
integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi"
crossorigin="anonymous"
/>SassTrong trường hợp bạn đang sử dụng SASS, cách đơn giản nhất là bao gồm các tệp SASS nguồn bootstrap, trong tệp SASS chính của bạn và sau đó yêu cầu nó trên tệp <script src="https://cdn.jsdelivr.net/npm/react/umd/react.production.min.js" crossorigin>script> <script src="https://cdn.jsdelivr.net/npm/react-dom/umd/react-dom.production.min.js" crossorigin>script> <script src="https://cdn.jsdelivr.net/npm/react-bootstrap@next/dist/react-bootstrap.min.js" crossorigin>script> <script>var Alert = ReactBootstrap.Alert;script>7 hoặc <script src="https://cdn.jsdelivr.net/npm/react/umd/react.production.min.js" crossorigin>script> <script src="https://cdn.jsdelivr.net/npm/react-dom/umd/react-dom.production.min.js" crossorigin>script> <script src="https://cdn.jsdelivr.net/npm/react-bootstrap@next/dist/react-bootstrap.min.js" crossorigin>script> <script>var Alert = ReactBootstrap.Alert;script>8 của bạn. Điều này áp dụng cho một ứng dụng <script src="https://cdn.jsdelivr.net/npm/react/umd/react.production.min.js" crossorigin>script> <script src="https://cdn.jsdelivr.net/npm/react-dom/umd/react-dom.production.min.js" crossorigin>script> <script src="https://cdn.jsdelivr.net/npm/react-bootstrap@next/dist/react-bootstrap.min.js" crossorigin>script> <script>var Alert = ReactBootstrap.Alert;script>9 điển hình trong các trường hợp sử dụng khác, bạn có thể phải thiết lập Bundler mà bạn chọn để biên dịch các kiểu dáng SASS/SCSS thành CSS.Sass the simplest way is to include the Bootstrap’s source Sass files in your main Sass file and then require it on your <script src="https://cdn.jsdelivr.net/npm/react/umd/react.production.min.js" crossorigin>script> <script src="https://cdn.jsdelivr.net/npm/react-dom/umd/react-dom.production.min.js" crossorigin>script> <script src="https://cdn.jsdelivr.net/npm/react-bootstrap@next/dist/react-bootstrap.min.js" crossorigin>script> <script>var Alert = ReactBootstrap.Alert;script>7 or <script src="https://cdn.jsdelivr.net/npm/react/umd/react.production.min.js" crossorigin>script> <script src="https://cdn.jsdelivr.net/npm/react-dom/umd/react-dom.production.min.js" crossorigin>script> <script src="https://cdn.jsdelivr.net/npm/react-bootstrap@next/dist/react-bootstrap.min.js" crossorigin>script> <script>var Alert = ReactBootstrap.Alert;script>8 file. This applies to a typical <script src="https://cdn.jsdelivr.net/npm/react/umd/react.production.min.js" crossorigin>script> <script src="https://cdn.jsdelivr.net/npm/react-dom/umd/react-dom.production.min.js" crossorigin>script> <script src="https://cdn.jsdelivr.net/npm/react-bootstrap@next/dist/react-bootstrap.min.js" crossorigin>script> <script>var Alert = ReactBootstrap.Alert;script>9 application in other use cases you might have to setup the bundler of your choice to compile Sass/SCSS stylesheets to CSS. @import "~bootstrap/scss/bootstrap"; import './App.scss'; Tùy chỉnh bootstrapNếu bạn muốn tùy chỉnh chủ đề bootstrap hoặc bất kỳ biến bootstrap nào bạn có thể tạo tệp SASS tùy chỉnh: $theme-colors: ( "info": tomato, "danger": teal ); @import "~bootstrap/scss/bootstrap"; ... và nhập nó trên tệp SASS chính. @import "custom"; Sử dụng nâng caoXem các tài liệu Bootstrap để biết các trường hợp sử dụng nâng cao hơn và chi tiết về việc tùy chỉnh các kiểu dáng. {} import 'bootstrap/dist/css/bootstrap.min.css';0 API propVới các thành phần phản ứng bootstrap nhất định, bạn có thể muốn sửa đổi thành phần hoặc thẻ HTML được hiển thị. Nếu bạn muốn giữ tất cả các kiểu dáng của một thành phần Bootstrap phản ứng cụ thể nhưng chuyển đổi thành phần cuối cùng được hiển thị (cho dù đó là thành phần phản ứng khác nhau, một thành phần tùy chỉnh khác hoặc thẻ HTML khác), bạn có thể sử dụng {} import 'bootstrap/dist/css/bootstrap.min.css';0 Prop làm như vậy. Ví dụ dưới đây chuyển một mỏ neo cho {} import 'bootstrap/dist/css/bootstrap.min.css';0 prop trong thành phần {} import 'bootstrap/dist/css/bootstrap.min.css';3. Điều này cuối cùng làm cho thẻ {} import 'bootstrap/dist/css/bootstrap.min.css';4 được hiển thị nhưng có cùng kiểu như thành phần {} import 'bootstrap/dist/css/bootstrap.min.css';3. Dưới đây là một minh họa về việc vượt qua một thành phần phản ứng bootstrap. Nó chứa một thành phần {} import 'bootstrap/dist/css/bootstrap.min.css';6 và thành phần {} import 'bootstrap/dist/css/bootstrap.min.css';3 đã được cung cấp cho {} import 'bootstrap/dist/css/bootstrap.min.css';0 prop. Điều này cuối cùng dẫn đến việc kết xuất một thành phần {} import 'bootstrap/dist/css/bootstrap.min.css';3 có cùng kiểu như thành phần {} import 'bootstrap/dist/css/bootstrap.min.css';6. Chủ đềReact-bootstrap tương thích với các chủ đề bootstrap hiện có. Chỉ cần làm theo hướng dẫn cài đặt cho chủ đề của bạn lựa chọn. Hỗ trợ trình duyệtChúng tôi mong muốn hỗ trợ tất cả các trình duyệt được hỗ trợ bởi cả React và Bootstrap. |
