Bootstrap

Bootstrap 구성과 시작

akasha.park 2023. 4. 11. 08:25

Bootstrap은  반응형 웹 어플리케이션 제작에 특화된 풀스택 웹 프론트엔드 프레임워크입니다.
Bootstrap은 무료로 사용 가능한 오픈 소스 (상업적 용도도 사용 가능)
Bootstrap은  각종 버튼, 테이블, 입력창 등 여러가지의 css style과 레이아웃 정렬을 class만으로 제어할 수 있습니다.

Bootstrap은 트위터의 직원이였던 'Mark Otto'와 'Jacob Thornton'가 프로젝트의 일관성을 위해 만들었습니다.
Bootstrap은 반응형도 지원하기 때문에 휴대폰, 태블릿, PC 모두 사용이 가능합니다.

 

 

Bootstrap은 모바일 우선으로 개발되기 때문에 모바일 기기에 먼저 코드를 최적화한 다음 CSS 미디어 쿼리를 사용해서 필요에 따라 컴포넌트를 확장하고 있습니다. 모든 장치에서 올바를 렌더링 및 터치 확대 조절을 보장하려면 <head> 내에 반응형 뷰포트 메타 태그를 추가합니다.

 

Bootstrap의  CSS를 위해서 <head> 내에 <link> 태그를 추가합니다.
Bootstrap의 JavaScript 번들 (드롭다운, 팝오버 및 툴팁 위치 지정을 위한 Popper 포함)을 위해서 </body> 전에 <script> 태그를 삽입합니다.

 

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
  </body>
</html>

 

드롭다운, 팝오버 또는 툴팁을 사용할 경우, Popper와 JS를 개별로 포함시킵니다. 

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous"></script>

 

파일을 다운로드 받은 뒤 프로젝트에 삽입하여 구성하는 것도 가능합니다
https://getbootstrap.kr/docs/5.2/getting-started/download/

다운로드받은 파일의 압축을 풀어주면
JS의 경로는 bootstrap/dist/js/bootstarp.js 혹은  bootstrap/dist/js/bootstarp.min.js 입니다.
CSS의 경로는 bootstrap/dist/css/bootstarp.css 혹은  bootstrap/dist/js/bootstarp.min.css 입니다.