반응형
현재 운영중인 웹사이트나 새로 만들 웹 페이지에 미리 만들어 놓은 예쁜 스타일을 바로 적용할 수 있는 부트스트랩 사용법을 소개하겠습니다.
1. 부트스트랩 사이트에 접속합니다.
Bootstrap
Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.
getbootstrap.com
2. Quick start 에 따라서 필요한 라이브러리 불러오기
https://getbootstrap.com/docs/5.3/getting-started/introduction/
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
3. 다양한 예시들이 나와있는데 필요한 부분을 찾아서 소스코드를 적용한다.
4. 좀 더 다양한 예제를 확인하고 싶다면 examples 메뉴에서 확인할 수 있다.
https://getbootstrap.com/docs/5.3/examples/
반응형