Ngăn xếp
Ngườ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.
Theo chiều dọc
Cá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 gap
prop để thêm không gian giữa các mục.
Nằm ngang
Sử dụng direction="horizontal"
cho bố cục ngang. Các mặt hàng xếp chồng được tập trung theo chiều dọc theo mặc định và chỉ chiếm chiều rộng cần thiết của chúng. Sử dụng gap
prop để thêm không gian giữa các mục.
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:
API
Mã 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
khoảng cách | responsivePropType[PropTypes.number] | Đặt khoảng cách giữa mỗi mục. Giá trị hợp lệ là import Button from 'react-bootstrap/Button'; import { Button } from 'react-bootstrap';5. | |
BSPREFIX | sợi dây | import Button from 'react-bootstrap/Button'; import { Button } from 'react-bootstrap';6 | Thay đổi thành phần cơ bản CSS Base Class và công cụ sửa đổi tên lớp Tiền tố. Đây là một cửa thoát hiểm để làm việc với CSS Bootstrap tùy chỉnh nặng.This is an escape hatch for working with heavily customized bootstrap css. Mặc định là import Button from 'react-bootstrap/Button'; import { Button } from 'react-bootstrap';7 nếu hướng là import Button from 'react-bootstrap/Button'; import { Button } from 'react-bootstrap';8 hoặc import Button from 'react-bootstrap/Button'; import { Button } from 'react-bootstrap';9 nếu hướng là
var Alert = ReactBootstrap.Alert; 0.
|
Giới thiệu
Tìm hiểu làm thế nào để bao gồm React Bootstrap trong dự án của bạn.
Cài đặt
Cá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
var Alert = ReactBootstrap.Alert;
1 [hoặc
var Alert = ReactBootstrap.Alert;
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 bootstrap
Nhập các thành phần
Bạn nên nhập các thành phần riêng lẻ như:
var Alert = ReactBootstrap.Alert;
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 Globals
Chúng tôi cung cấp các gói
var Alert = ReactBootstrap.Alert;
4 và
var Alert = ReactBootstrap.Alert;
5 với tất cả các thành phần được xuất trên đối tượng
var Alert = ReactBootstrap.Alert;
6. Các gói này có sẵn trên JSDELIVR, cũng như trong gói NPM.
var Alert = ReactBootstrap.Alert;
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áng
Vì 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.
Sass
Trong 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
var Alert = ReactBootstrap.Alert;
7 hoặc
var Alert = ReactBootstrap.Alert;
8 của bạn. Điều này áp dụng cho một ứng dụng
var Alert = ReactBootstrap.Alert;
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
var Alert = ReactBootstrap.Alert;
7 or
var Alert = ReactBootstrap.Alert;
8 file. This applies to a typical
var Alert = ReactBootstrap.Alert;
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 bootstrap
Nế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 cao
Xem 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 prop
Vớ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ệt
Chú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.