Bootstrap 시작하기

시작하기

세계에서 가장 인기있는 프레임워크인 Bootstrap으로 반응형, 모바일 우선 사이트를 jsDelivr와 스타터 페이지 템플릿을 통해 시작해보세요.

getbootstrap.kr

CSS 불러오기

<head> 맨 위에 <link> 스타일 시트를 붙여준다. (v5.1)

Bootstrap.css를 불러오고 해당 파일에 정의된 버튼, 레이아웃 등을 가져와서 사용할 수 있다.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

JS 불러오기

컴포넌트들을 작동시키려면 Javascript 플러그인과 Popper가 필요하다. <script>를 </body> 태그가 닫히기 전에 페이지 끝 부분에 넣어 활성화 시켜준다.

Javascript를 요구하는 컴포넌트

경고 닫기
상태 및 체크박스/라디오기능 버튼
캐러셀의 모든 슬라이드 동작, 제어 및 인디케이터
콘텐츠 가시성 접기 전환
드롭다운에서의 표시 및 위치 (Popper도 필요)
모달에서의 표시, 위치, 스크롤 행동
내비게이션바에서의 반응형 동작 구현을 위한 접기 플러그인 확장
표시, 위치, 지정, 스크롤 동작을 위한 오프캔버스
토스트 표시 및 닫기
툴팁과 팝오버에서의 표시 및 위치 (Popper도 필요)
스크롤스파이에서의 스크롤 동작과 내비게이션 갱신

번들

번들을 통해서 모든 Javascript 플러그인과 의존성을 한 번에 포함시킬 수 있다.

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

개별

분리된 스크립트를 사용할 경우 Popper가 먼저 선언되고 다음에 Javascript 플러그인을 넣어주어야 한다. (의존성)

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

레이아웃

화면 사이즈	표현
768px 보다 작을 때	col-xs-
768px 보다 클 때	col-sm-
970px 보다 클 때	col-md-
1170px 보다 클 때	col-lg-

한줄에 12까지 들어가고, 뷰포트의 너비에 따라 레이아웃의 모양이 변한다.

col-sm-4*3=12 한줄에 12이고, sm이므로 뷰포트의 너비가 768px 보다 작아질 때 레이아웃이 한줄로 떨어지게 된다.

⚡ 문제
768px 보다 작을 때는 1
768px 이상에서는 2
970px 이상에서는 3

어떻게 구현할까?

👍 정답
<div class="container"> 
     <div class="col-sm-6 col-md-4">첫번째</div>
     <div class="col-sm-6 col-md-4">두번째</div>
     <div class="col-sm-6 col-md-4">세번째</div>
</div>

Component

버튼

클래스명 btn btn-

btn-default
btn-primary
btn-success
btn-info
btn-warning
btn-danger

테이블

클래스명 table table-

table-bordered: 테이블 테두리선 추가
table-hover: 마우스 올림 선택 효과

패널

클래스명

panel-heading
panel-body

폼(입력그룹)

<input> 태그 클래스명

fom-control: 입력창 너비를 늘려줌(줄바꿈)
form-inline: 요소와 입력창간의 줄바꿈 처리를 한 줄에 들어오게함 (요소와 입력창을 감싼 상위태그에 입력)

체크박스가 아닌 텍스트를 클릭했을 때 체크박스가 같이 활성화되게 하려면 <label>로 묶어서 id를 지정해주면 된다.

<li class="form-inline">
    <input type="checkbox" id="agree" > 
    <label for="agree">약관에 동의하시겠습니까?</label>
</li>

navbar-default: 내비게이션바 기본 (회색)
navbar-inverse: 내비게이션바 반전 (검정)
navbar-nav: 내비게이션바 메뉴들
active: 활성화 상태
collapsed navbar-toggle: 뷰포트 너비가 줄어들었을 때 내비게이션바 메뉴들을 함축시킨 메뉴목록 생성 (토글버튼)
icon-bar: 버튼에 추가한 갯수만큼 = 형식으로 나타나는 선을 생성

뷰포트 너비가 줄어들었을 때 기존에 생성했던 내비게이션바 메뉴들이 펼쳐지게 한다.

이 때 내비게이션바 메뉴들을 생성할 때 만든 전체 메뉴를 감싸는 상위요소의 id값과 data-target값의 id를 맞춰주어야 생성된다.

예제에서는 id="nav_menu"로 맞춰주었다. data-target="#nav_menu"

<div class="navbar-header">
     <!-- 오른쪽 메뉴바 -->
     <button type="button" class="collapsed navbar-toggle" data-toggle="collapse" data-target="#nav_menu" aria-expanded="false">
         <span class="sr-only">Toggle navigation</span>
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span>
     </button>
     <a class="navbar-brand" href="#">
         bootstrap 강의
     </a>
</div>
<div class="collapse navbar-collapse" id="nav_menu">
     <ul class="nav navbar-nav">
        <li>
            <a href="">HTML</a>
        </li>
        <li class="active">
            <a href="">Python</a>
        </li>
        <li>
            <a href="">Javascript</a>
        </li>
        <li>
            <a href="">php</a>
        </li>
     </ul>
</div>

class="icon-bar" 3줄 추가

🔗 출처/참고

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

CSS 불러오기

JS 불러오기

번들

개별

레이아웃

Component

버튼

테이블

패널

폼(입력그룹)

내비게이션

티스토리툴바