Sử dụng bootstrap 4 trong React bằng React Bootstrap

React Bootstrap là gì?

React Bootstrap là Bootstrap được xây dựng lại bằng React.

Link: https://react-bootstrap.github.io/getting-started/introduction

React-Bootstrap thay thế Bootstrap JavaScript. Mỗi thành phần đã được xây dựng từ đầu như một thành phần React thực sự, không có các phụ thuộc không cần thiết như jQuery.

Là một trong những thư viện React lâu đời nhất, React-Bootstrap đã phát triển và phát triển cùng với React, khiến nó trở thành một lựa chọn tuyệt vời làm nền tảng giao diện người dùng của bạn.

Cài đặt

npm install react-bootstrap bootstrap

Thêm component

import Button from 'react-bootstrap/Button';

// or less ideally
import { Button } from 'react-bootstrap';

Các biến toàn cục

<script src="https://unpkg.com/react/umd/react.production.min.js" crossorigin></script>

<script
  src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"
  crossorigin></script>

<script
  src="https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js"
  crossorigin></script>

<script>var Alert = ReactBootstrap.Alert;</script>

CSS

{/* The following line can be included in your src/index.js or App.js file*/}

import 'bootstrap/dist/css/bootstrap.min.css';
<link
  rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
  integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
  crossorigin="anonymous"
/>

Sass

/* The following line can be included in a src/App.scss */

@import "~bootstrap/scss/bootstrap";

/* The following line can be included in your src/index.js or App.js file */

import './App.scss';

Tùy biến Bootstrap

/* The following block can be included in a custom.scss */

/* make the customizations */
$theme-colors: (
    "info": tomato,
    "danger": teal
);

/* import bootstrap to set changes */
@import "~bootstrap/scss/bootstrap";
/* The following line can be included in a src/App.scss */

@import "custom";

Viết một bình luận