-
Bootstrap 시작하기Framework/Bootstrap 2019. 4. 8. 14:23
Bootstrap
부스트랩은 트위터의 마크 오토 (Mark Otto)와 제이콥 손튼 (Jacob Thornton)이 개발했으며, 2011년 8월 깃허브(GitHub)에서 오픈소스로 출시했습니다. 부트스트랩은 웹 개발을 단순화 시키기 위해 개발된 웹 프레임워크입니다. 프로젝트에 추가하면 모든 HTML 요소에 대한 기본 스타일을 제공하고 부트스트랩에 정의된 CSS 클래스를 활용하여 추가로 스타일을 적용할 수 있습니다. 또한 부트스트랩은 Javascript 플러그인(모달, 툴팁 등)에 jQuery를 사용합니다. 부트스트랩의 CSS만 사용한다면 굳이 jQuery를 쓸 필요는 없습니다.
Bootstrap CDN
부트스트랩을 직접 다운로드 하거나 CDN (Content Delivery Network) 방식으로 로드할 수 있습니다.
CDN
<!-- Bootstrap CSS CDN, minified --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <!-- jQuery library --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <!-- popper.js and bootstrap --> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>CSS 링크는 head 안에, js는 body 안에 둡니다.
Bootstrap으로 웹 페이지 만들기
-
마크업
<!-- bootstrap은 doctype 5를 사용합니다. --> <!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS CDN --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <title>Hello, world!</title> </head> <body> <div class="container"> <h1>Hello, world!</h1> <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium, quos.</p> </div> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> </body> </html>
* 결과물
'Framework > Bootstrap' 카테고리의 다른 글
Bootstrap Grid (0) 2019.04.08 댓글
-