[ Bootstrap ] Bootstrap 개념 및 설정

Bootstrap 🎨

부트스트랩은 트위터(Twiter)에서 공개한 웹 프론트엔드 개발도구이다.

공식 홈페이지 : http://getbootstrap.com/ 

Bootstrap

번역본 홈페이지 : http://bootstrapk.com/ 

부트스트랩 · 세상에서 가장 인기있는 모바일 우선이며, 반응형인 프론트엔드 프레임워크.

 

부트스트랩에 포함되어 있는 플러그인들은 제이쿼리 기반으로 동작한다.

따라서 이 플로그인이 정상적으로 작동하기 위해서는 제이쿼리를 링크시켜야 한다.

 

현재 부트스트랩은 MIT 라이센스를 따르고 있다.

MIT 라인센스는 메사추세츠 공과대학교(MIT)를 기원으로 하는 소프트웨어 라이센스 중 가장 대표적인 것이다.

 

부트스트랩 사용 목적

- 생산성 : 반응형 디자인 적용 용이, 브라우저 환경에 따라 복잡한 corss browsing 작업 부담 경감

- 디자인 향상 : 적은 노력으로 특정 수준의 화면 구성이 가능 (CSS → 기본 태그 + 클래스 제공)

- 웹 표준 준수

 

부트스트랩 특징

- 스크립트 제어 

  JQuery UI 기능 겹침(단, API가 다름)

  선언적 방식 (HTML5 새로 추가된 속성과 유사 : 사용자 정의 속성 → data-데이터명)

 

환경 구성

CDN 방식

<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.7/dist/umd/popper.min.js" integrity="sha384-zYPOMqeu1DAVkHiLqWBUTcbYfZ8osu1Nd6Z89ify25QV9guujx43ITvfi12/QExE" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.min.js" integrity="sha384-Y4oOpwW3duJdCWv5ly8SCFYWqFDsfob/3GkgExXKV4idmbt98QcxXYs9UoXAB7BZ" crossorigin="anonymous"></script>

 

Local Down 방식

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

Download

부트스트랩 홈페이지에서 다운 후 압축을 풀고, 구현할 프로젝트의 css, js 폴더에 

- bootstrap

- bootstrap.min 

파일을 각각 넣어주면 된다.