Bootstrap

개념과 세팅

---

Bootstrap이란

웹페이지에 필요한 버튼, 메뉴, 탭, 모달, 카드 등 필수 요소들을 모아놓은 일종의 CSS파일이다.

이걸 사용하면 편하게 복붙해서 CSS개발이 가능하다.

 

Bootstrap

사이트에 들어가서 npm install을 하거나 HTML 파일에 첨부하면 된다.

<!-- head 태그 안에 CSS 첨부 -->
<link href="bootstrap.min.css 경로" rel="stylesheet">

<!-- body 태그 끝나기 직전에 js 첨부 -->
<script src="bootstrap.어쩌구.js 경로"></script>

 

 

 

사용법

---

컴포넌트

 

사이트에 들어가서 버전을 확인 후에 문서 탭에 들어가서 복붙해서 사용하면 된다.

 

예를들어 버튼을 만들고자 할 때

 

버튼을 검색해서 맘에 드는 버튼이 있으면 아래 코드를 복붙하면 사용가능하다.

 

유틸리티

이런 컴포넌트를 가져오는 것뿐만 아니라 레이아웃을 잡을 때도 많이 사용된다.

 

예를 들어 그리드를 이용하여 레이아웃을 만들고자 할 때 아래의 코드처럼 class명을 입력하는 것만으로 레이아웃이 잡힌다.

그리드는 12개의 세로선이 있으므로 col-6 이런식으로 작성해서 레이아웃을 조정할 수 있다.

<div class="row">
  <div class="col"> 안녕 </div>
  <div class="col"> 안녕 </div>
  <div class="col"> 안녕 </div>
</div>

// 반반 
<div class="row">
  <div class="col-6"> 안녕 </div>
  <div class="col-6"> 안녕 </div>
</div>

//4대8
<div class="row">
  <div class="col-4"> 안녕 </div>
  <div class="col-8"> 안녕 </div>
</div>

 

중간에 sm, md, lg, xl, xxl 등을 입력해서 반응형을 만들수도 있다.

 

밑의 코드는 sm = 576px보다 작다면 비율이 8대4비율이 되는거다

  <div class="row">
    <div class="col-sm-8">col-sm-8</div>
    <div class="col-sm-4">col-sm-4</div>
  </div>

 

그외에도 CSS로 가능한거 모두 있으니 공식사이트에서 공부하길 바란다.