Import
#HelloFront-end #HelloErmine #HelloWorld2021
การ import Bootstrap เข้า Project
คือ การเชื่อมไฟล์เพื่อให้ใช้งาน Bootstrap ได้
โดยมีวิธีดังนี้
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 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
Last updated
Was this helpful?