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

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

Có thể bạn quan tâm

Skip to content Menu

Trang chủ » Khái niệm » Sử dụng bootstrap 4 trong React bằng React Bootstrap

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

Khái niệm, Thư viện HTML Bootstrap, Bootstrap 4, ReactJS

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"; Sử dụng ngx-bootstrap Bootstrap 3 và 4 trong Angular CLI Generic type trong Typescript

Related Posts

Khái niệm

Cloud Server vs Serverless – Lựa chọn thế nào cho đúng?

Khái niệm

Lập trình PLC là gì? Tất cả những thông tin về công việc và mức lương của các kỹ sư PLC

Khái niệm

OCaml là gì? Tại sao lại chọn OCaml?

Leave a Reply Cancel reply

You must be logged in to post a comment.

Tags

.htaccess .net core AI - Trí tuệ nhân tạo angular angular cli asp.net core AWS AWS Lambda BA big data blockchain Bootstrap Business Analyst C# C++ cloud computing CSS elasticsearch ES6 Flutter git html Học lập trình Java javascript Laravel lập trình PLC Lập trình web Ngôn ngữ lập trình Ngôn ngữ lập trình web NodeJS NPM php python react ReactJS React Native search engine ServBay Serverless sql typescript Tự học Lập trình vue wordpress

Các website blog IT

Từ khóa » Sử Dụng Bootstrap Trong Reactjs