본문 바로가기
개발자 도전기

[Bootstrap] 설치 방법 (리눅스OS Ubuntu 기준)

by 개발하는아빠 2022. 10. 28.

설치방법 3가지

1. 소스파일 다운로드

  - 개발 공부하기 전에 가장 익숙한 방식

  - 윈도우OS에는 적합하나, 리눅스OS에는 적합하지 않음.

2. CDN

  - 태그만 추가하면 되는 방식

  - 그러나 추후에 속도가 느리기 때문에 현업에서 사용하지 않는 듯

3. npm 사용

  - 리눅스OS를 사용하는 경우에 간편히 설치할 수 있는 프로그램

 

실제 사용한 설치 방법 → npm

리눅스OS를 사용하고 있다면, npm으로 설치하는 방법이 가장 편하다.

 

1. npm 설치 (터미널 명령어 사용)

npm install // npm 설치, Node Pakage Manager의 약자로 자바스크립트 프로그래밍 언어를 위한 패키지 관리자

 

2. 패키지 설치 (package.json 생성됨)

npm init // 패키지 설치 명령어

 

3. 부트스트랩 설치

npm install bootstrap // 부트스트랩설치

아래 이미지처럼 node_modules 폴더가 생성됨.

필요한 모든 파일이 포함됨.

 

4. 링크 연결

!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="node_modules/bootstrap/dist/css/bootstrap.css"
    />
  </head>
  <body>
    <div class="container-md border">Content</div>
    
    <script src="node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>
    
  </body>
</html>

<head> 태그 안에 bootstrap.css 추가

<body> 태그 안에 bootstrap.bundle.js 추가