Bootstrap 부트스트랩

Day44. 230630

 

Bootstrap 부트스트랩이란?

프론트엔드 개발을 빠르고 쉽게 할 수 있는 프레임워크로

많은 직원들이 프론트엔드 개발 할 때 일관성을 유지하며 개발하는데 도움을 준다.

 

- 프레임워크 : 재사용 가능한 요소의 집합, 구조와 툴 결정, 확장 가능한 기반 코드 등

- HTML과 CSS기반의 템플릿 양식 등을 구성하는 요소를 포함하고 자바스크립트를 선택적으로 확장 할 수 있다.

 

 

• w3 school의 Bootstrap4 Tutorial

https://www.w3schools.com/bootstrap4/default.asp

Bootstrap 4 Tutorial

 

 

 

Bootstrap 부트스트랩 사용법

https://getbootstrap.com/docs/4.0/getting-started/download/

Download

 

1) css와 js 코드를 다운받아 프로젝트에 추가해 사용

 

 

 

2) CDN방식

• css

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

 

• JS

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>