Sử Dụng Bootstrap 4 Trong React Bằng React Bootstrap

Trang chủ » Cách Dùng Bootstrap Trong Reactjs » Sử Dụng Bootstrap 4 Trong React Bằng React Bootstrap

Có thể bạn quan tâm

Mục lục

  • React Bootstrap là gì?
    • Cài đặt
    • Thêm component
    • Các biến toàn cục
    • CSS
    • Sass
    • Tùy biến 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";

Từ khóa » Cách Dùng Bootstrap Trong Reactjs