Import

#HelloFront-end #HelloErmine #HelloWorld2021

การ import Bootstrap เข้า Project

คือ การเชื่อมไฟล์เพื่อให้ใช้งาน Bootstrap ได้

โดยมีวิธีดังนี้

Import เข้าไฟล์ HTML

Import in HTML

เชื่อมโดยการ เชื่อมไฟล์กับ Bootstrap ที่ติดตั้งมา

ถ้าเป็น CSS ของ Bootstrap จะทำการเชื่อมไฟล์ ตามหมายเลข 1

<link rel="stylesheet" href="./css/bootstrap.min.css">

ถ้าเป็น JavaScript ของ Bootstrap จะทำการเชื่อมไฟล์ ตามหมายเลข 2

<script src="./js/bootstrap.min.js"></script>

หลังจากเชื่อมแล้วสามารถใช้งานได้ทันที

Import เข้าไฟล์ React

Import in React

เชื่อมโดยการ import ไฟล์ Bootstrap เข้ากับ React

ถ้าเป็น CSS ของ Bootstrap จะทำการ import ไฟล์ ตามบรรทัดที่ 4

import 'bootstrap/dist/css/bootstrap.min.css';

ถ้าเป็น JavaScript ของ Bootstrap จะทำการ import ไฟล์ ตามบรรทัดที่ 5

import 'bootstrap/dist/js/bootstrap.min.js';

การ import ไฟล์ตามบรรทัดที่ 4, 5 ให้ import ที่ไฟล์ index.js

เวลาจะใช้งานให้ import ตัวที่เราต้องการจะใช้งานขึ้นมา

สามารถ import แบบทีละตัวดังภาพ

import Button from 'react-bootstrap/Button';

หรือ ทีละหลาย ๆ ตัวก็ได้

import {  Alert , Button , Container } from 'react-bootstrap';

การ import tag ที่เราจะใช้งานใน react-bootstrap ให้ import เข้าไฟล์ App.js