-
Bootstrap 설치 및 사용하기DEV/javascript 2022. 2. 21. 11:41
* 옛날 버전으로 인해 적용이 안되던 것을 수정함. (2022. 05. 03)
Bootstrap은 웹사이트를 쉽게 만들 수 있게 도와주는 HTML, CSS, JS 프레임워크이다.
다운로드는 하단 링크를 참조하자. 다양한 설치 방법을 제공한다.
1. "최소화된" 이라 그런가 적용 안되는게 있다.
http://bootstrapk.com/getting-started/(그냥 버전이 낮아서 그랬다... 아래 링크를 사용하자...)https://getbootstrap.com/docs/5.1/getting-started/introduction/
Introduction
Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with jsDelivr and a template starter page.
getbootstrap.com
cdn 사용 방법 : 글 최하단에 코드를 따로 작성해 두었으니 참조하자. 2. 직접 다운로드 또는 패키지 매니저 사용
직접 다운받아 사용이 가능하다.
아래 링크를 통해 다운로드가 가능하다.
https://getbootstrap.com/docs/5.1/getting-started/download/
Download
Download Bootstrap to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, RubyGems, and more.
getbootstrap.com
npm을 쓰는 경우 패키지를 다운 받을 수 있으며 그냥 위의 다운로드 링크를 통해 직접 사용이 가능하다.
직접 다운로드 
패키지 매니저 사용하기
1. 샘플 HTML [1] (CDN)
head 태그 내 Bootstrap 관련 css, js를 추가해 주자.
<!DOCTYPE html> <html> <meta charset="utf-8"> <head> <!-- [jQuery] --> <script src="https://code.jquery.com/jquery-latest.min.js"></script> <!-- [Bootstrap] --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script> </head> <body> </body> </html>'DEV > javascript' 카테고리의 다른 글
Bootstrap 기본적인 테이블(Table)사용하기 (0) 2022.02.21 Bootstrap 그리드 시스템 (Grid system : row, col) (0) 2022.02.21 Toast grid 함수 및 이벤트 예시 (0) 2022.02.17 Javascript Toast grid 예시 (1) 2022.02.16 Javascript 물음표 연산자와 물음표 두개 연산자 (? 연산자와 ?? 연산자) (0) 2022.02.15