📘
HelloErmine
  • CONTENTS
  • Front-End
    • Setup environment
      • Visual Studio Code
      • Node.js
      • Yarn
      • Git
    • HTML
      • What is HTML?
      • What are Elements and Tags?
        • Close Elements
        • Empty Elements
      • What are Attributes?
        • Attributes
      • HTML Structure
    • CSS
      • What is CSS?
      • Selectors
      • Properties
      • Combinators
    • Bootstrap
      • What is Framework and Library?
      • What is Bootstrap?
      • Installation
      • Import
      • Different of Bootstrap in HTML and React
      • Bootstrap Layout
    • JavaScript
      • What is JavaScript?
      • Variables
      • Types
      • Operators
      • Conditions
      • Loops
      • Functions
      • Destructuring
      • Template Literals
      • DOM
      • Node.js
    • React
      • Create React Project
      • Introduction
        • JSX
        • export/import
      • Components
      • Props
      • Rendering
      • Handling Events
      • State
      • Hooks
        • useState
        • useEffect
    • Git
      • ทำความรู้จักกับ Version Control
      • Git คืออะไร ?
      • คำสั่งต่าง ๆ ของ Git
    • Styled-Components
      • What are styled-components
      • How to use styled-component
      • Styled-Components with props
  • Web Design
    • Website Elements
      • Accessibility
      • Speed
      • Attractiveness
      • Simplicity
      • Credibility
    • Copyright
      • ลิขสิทธิ์คืออะไร ?
      • สิ่งที่เป็นการละเมิดลิขสิทธิ์มีอะไรบ้าง ?
      • สิ่งที่ต้องคำนึงถึงในการออกแบบโลโก้
      • ประเภทลิขสิทธิ์ที่เจอบ่อย ๆ
      • การใช้ผลงานลิขสิทธิ์
      • รูปแบบลิขสิทธิ์ที่ใช้ฟรีแต่มีข้อยกเว้น
    • Ai (Adobe Illustrator)
      • Adobe Illustrator คืออะไร ?
      • สิทธิ์ให้การเข้าถึง Adobe Illustrator ใน KMUTT
      • RGB และ CMYK คืออะไร ?
      • วิธีใช้งาน Adobe Illustrator
        • ตั้งค่า ArtWork
        • เครื่องมือใน Adobe Illustrator
        • วิธีการ Save & Export ?
    • UX/UI
      • UX (User Experience)
        • กระบวนการออกแบบ UX
      • UI (User Interface)
        • Responsive Web Design
        • Layout Website
        • UI Design
      • ความแตกต่างระหว่าง UX กับ UI
    • Figma
      • เครื่องมือต่าง ๆ ใน Figma
      • ขั้นตอนการเริ่มทำงาน
    • Grid System
      • Grid คืออะไร ?
      • ประเภทของ Grid
        • Manuscript grid
        • Column grid
        • Modular grid
        • Hierarchical grid
      • Grid System คืออะไร ?
      • ข้อดีในการออกแบบโดยใช้ Grid System
    • Design System
      • Design System คืออะไร ?
      • ทำไมต้องใช้ Design System ?
      • Design Principles
      • Style Guide
      • Component
      • Share Language
  • GAME DESIGN
    • Good Game Elements
      • เป้าหมาย
      • ความลึก
      • ความซับซ้อน
      • ความสมดุล
      • ความท้าทาย
      • การเดินเกม
      • รางวัล
    • UX/UI
      • UX คืออะไร ?
      • UI คืออะไร ?
      • ความแตกต่างระหว่าง UI กับ UX
      • ขั้นตอนหลักของการออกแบบ UX / UI
    • Color & Background
      • ทฤษฎีสี
      • สีกับความรู้สึก
      • พื้นหลัง
      • วัตถุ
    • Character
      • Character คืออะไร ?
      • หลักการออกแบบตัวละคร
      • เส้นกับอารมณ์
      • สีกับ ความรู้สึก
      • การออกแบบตัวละครให้น่าสนใจ
      • หลักการพื้นฐานสำหรับการออกแบบ Character
    • Animation
      • Animation พื้นฐาน
      • การกระดอน
      • การสะบัด
      • การเดินและวิ่ง
      • Sprite Sheets
  • GAME DEVELOPMENT
    • Setup Environment
      • Node.js
      • Yarn
      • Visual Studio Code
      • GitHub Desktop
        • วิธีการสมัคร GitHub
        • การรับผลประโยชน์ของนักศึกษา
      • Cmder
    • Game Overview
      • Game คืออะไร ?
      • Game Computer 🎮
      • องค์ประกอบของเกม 🎲
      • 5 สิ่งที่เกมควรมี 🏆
    • Git Basic
      • สิ่งที่ควรรู้ก่อนใช้งาน Git
        • Repository
        • Clone
        • Unstaged & Staged
        • Commit
        • Push & Pull
        • Fetch
        • Merge commit
        • Conflict
        • Branch & Merge Branch
        • Git Flow
        • Fork
        • Pull Request
      • สรุปการใช้ Git แบบ Basic
    • Basic Phaser
      • Command Line Interface (CLI)
        • คำสั่ง Cmder
      • Game Engine
      • Framework
      • JavaScript
        • Variable
      • Phaser
      • Phaser Function
        • Preload()
        • Create()
        • Update()
        • ภาพรวมของ 3 Main methods
    • Object
      • ประเภทของ Object
        • Image
        • Sprite
        • TileSprite
        • Group Object
      • Object Collide
        • Collider
        • Overlap
        • การประยุกต์ใช้งาน Collider & Overlap
      • Layer
      • HitBox
      • การสร้าง Animation จาก Sprite sheet
    • Input
      • การรับ Input
        • Pointer input
        • Cursor input
        • Key input
      • Link Scene
        • การสร้างหน้า Scene
        • คำสั่งเปลี่ยนหน้า Scene
        • การสร้างปุ่มเปลี่ยน Scene
    • Timer Event
      • Timer Event คืออะไร ?
      • Loop คืออะไร ?
      • Time Object กับ Phaser 3
      • Members & Function
      • หลักการเขียน Timer Event
        • Monster Creation
        • Bullet
  • Infrastructure
    • Command-line interface
    • Version Control System
    • Protocol & DNS
    • NGINX
    • Docker
Powered by GitBook
On this page
  • วิธีการติดตั้ง Bootstrap
  • วิธีการติดตั้ง Bootstrap ใน React

Was this helpful?

  1. Front-End
  2. Bootstrap

Installation

#HelloFront-end #HelloErmine #HelloWorld2021

PreviousWhat is Bootstrap?NextImport

Last updated 3 years ago

Was this helpful?

วิธีการติดตั้ง Bootstrap

การติดตั้ง มีอยู่ 3 รูปแบบ คือ

Bootstrap CDN (CDN = Content Delivery Network)

คือ การที่เรานำลิงก์จากหน้าเว็บไซต์ของ bootstrap มาใส่ไว้ในส่วนของ Head ซึ่งลิงก์นี้จะมีทั้ง CSS และ JavaScript

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>

Install package management

คือ การติดตั้ง Bootstrap ผ่าน Terminal โดยสามารถทำได้ 2 วิธี

yarn add bootstrap

หรือ

npm install bootstrap

ติดตั้งผ่านเว็บไซต์ Bootstrap

วิธีการติดตั้ง Bootstrap ใน React

การติดตั้ง มีอยู่ 2 รูปแบบ คือ 

yarn add react-bootstrap bootstrap

หรือ

npm install react-bootstrap bootstrap
LogoDownloadgetbootstrap