Bootstrap

0. 부트스트랩 1. 부트스트랩 적용 2. 그리드 3. 이미지 4. 테이블 5. 버튼 6. CARD 7. 캐러셀 8. 마무리하며

0. 부트스트랩

부트스트랩은 웹 프레임 웤 입니다. 프레임 웤은 최소한의 작업으로 빠르게 결과물을 만들 수 있도록 구축해 놓은 종합 공구 세트라고 생각하시면 쉽습니다.

부트스트랩은 큰 모니터 화면으로 보던지 휴대폰처럼 작은 화면으로 보던지 상관 없이 사용자의 시점에 맞춰 최적화 되어 화면을 구성합니다. 이렇게 사용자의 시점에 맞춰 구축되는 사이트를 반영형 사이트라고 하는데 부트스트랩은 반응형 사이트를 구축하기에 최적화 되어 있습니다.

부트스트랩은 form, button, table, navigator가 HTML, CSS로 미리 디자인 되어 있습니다. 부트스트랩 3에서 사용하던 대부분의 태그들이 그대로 살아있지만 많은 부분이 바뀌었기 때문에 새로 공부를 하셔야 합니다.

부트스트랩 4가 나온지 벌써 2년이 넘었고, 이제 부트스트랩 공식 버전(21년)은 5로 넘어갔습니다. 그럼에도 시중에는 부트스트랩 3 책이 있고, 구글에서 한국어로 부트스트랩을 검색하면 아직도 3.0 Ver 번역 페이지가 나오기에 Version에 유의하셔서 개발을 하셔야 합니다.

bootstrap4와 bootstrap5의 가장 큰 차이는 JQeury가 없어졌다는 것입니다.

1. 부트스트랩 적용

https://getbootstrap.com/에서 다운로드 받을 수 있습니다.

• 실습은 다운로드를 받지 않고 진행하니 다운로드를 안받으셔도 됩니다

- 영문 홈페이지 : https://getbootstrap.com/(Ver 5.0.0 )

부트스트랩을 이용한다면 다음과 같은 여러 레이아웃을 만들 수 있습니다. 부트스트랩 공식 홈페이지에서 Examples 탭에서 다양한 레이아웃을 확인해보세요!

유료 템플릿 사이트는 https://wrapbootstrap.com/ 를 참고해보세요.

자, 이제 부트스트랩을 적용시켜 보도록 하겠습니다. 다음과 같이 작성하신 다음 001.html로 저장해주세요. 핵심적인 코드만 넣어두었습니다. 그리고 다음 버전에서는 jQuery가 없어지니 이 점도 유념해주세요.

아래 코드 작성 시점은 21년 1월 27일입니다. 이 버전이 너무 오래되었다면 notion에서 commet 부탁드립니다.


<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js"></script>
    -->
  </body>
</html>

2. 그리드

처음에는 그리드 시스템에 대해 알아볼 것입니다. 아래 공식 홈페이지 글에도 나와 있는 것처럼 부트스트랩은 전체 화면을 12개의 컬럼으로 나눠놓았습니다. 그 나눠놓은 컬럼에 무엇을 배치할 것인지 우리가 정해서 홈페이지를 만들 수 있습니다. 컬럼 12개가 모여 하나의 row가 됩니다.

앞서 말씀드린 것처럼 실습 캡쳐는 <body>와 </body> 안에 있는 태그들 중 <script>…</script> 를 생략하고 작성하도록 하겠습니다. Code와 같이 작성한다음 002.html로 저장을 하고 실행하면 아래와 같이 나옵니다.

빨간색 네모는 이해를 돕기 위해 작성한 것입니다. 1개의 row에 4 컬럼씩 할당했으므로 균등한 넓이로 출력됩니다.


<div class="container">
	<div class="row">
		<div class="col-md-4">
			<h1>hello</h1>
		</div>
		
		<div class="col-md-4">
			<h1>hello</h1>
		</div>
		
		<div class="col-md-4">
			<h1>hello</h1>
		</div>
	</div>
</div>

이번에는 한 개의 row를 더 주어 봤습니다. 빨간색 네모는 이해를 돕기 위한 것입니다. 위에는 4컬럼씩 주었기 때문에 3등분이 되었고 아래는 6컬럼씩 주었기 때문에 2등분이 되었습니다.


<div class="container">
	<div class="row">
		<div class="col-md-4">
			<h1>hello</h1>
		</div>
		<div class="col-md-4">
			<h1>hello</h1>
		</div>
		<div class="col-md-4">
			<h1>hello</h1>
		</div>
	</div>
	<div class="row">
		<div class="col-md-6">
			<h1>hello</h1>
		</div>
		<div class="col-md-6">
			<h1>hello</h1>
		</div>
	</div>
</div>

아래 공식 홈페이지에서 보듯이 하나의 컬럼 단위를 다시 분할하는 것도 가능합니다. 실습은 해보지 않도록 하겠습니다.

그리드 시스템에서 12컬럼을 모두 이용할 때 넓이를 100% 사용하고 싶다면 .container-fluid를 사용합니다.

컬럼 사이에 여백은 .row에 .no-gutters를 적용하면 padding과 margin을 제거할 수 있습니다.

공식 홈페이지에 나와있는 그리드 시스템 기준입니다. Nestable은 컬럼을 또다른 컬럼으로 나눌 수 있다는 얘기입니다.

우리는 주로 md를 사용합니다.

3. 이미지

이미지에 반응형과 스타일을 입히는 방법입니다. 아래 실행 이미지는 가로가 2000px인 이미지입니다. 3버전에서는 img-responsive를 사용했었습니다.


<div class="container">
	<div class="row">
		<div class="col-2">
			<img src="img/temp2000.png" class="img-fluid" alt="img">
		</div>
		<div class="col-2">
			hello
		</div>
		<div class="col-2">
			hello
		</div>
	</div>
</div>

이미지 썸네일입니다. 작은이미지 보다는 큰 이미지에 활용됩니다.


<div class="container">
    <div class="row">
      <div class="col-2">
        <img src="img/temp.png" class="img-thumbnail" alt="img">
      </div>
    <div class="col-2">
      hello
    </div>
    <div class="col-2">
      hello
    </div>
  </div>
</div>

화면에는 보이지 않지만 이미지가 컬럼의 가장 오른쪽에 붙어있습니다. 또한 테두리가 미묘하게 깎여 있는 것을 볼 수 있습니다. 추가로 이미지를 둥그렇게 만드는 class는 rounded-circle입니다. 3 이전의 버전에서는 img-circle을 사용했었습니다.


<div class="container">
      <div class="row">
        <div class="col-6">
          <img src="img/temp.png" class="rounded float-right" alt="img">
        </div>
        <div class="col-2">
          hello
        </div>
        <div class="col-2">
          hello
        </div>
      </div>
    </div>

이제부터는 Code와 Output 위주로 보도록 하겠습니다.


<img src="...", class="img_field" alt="Responsive image">


<img src="..." alt="..." class="img-thubnail">


	<img src="cinqueterre.jpg" class="rounded-circle alt="Cinque Terre">

4. 테이블

다음으로는 부트스트랩에서 기본적으로 제공하고 있는 Table에 대하여 알아보도록 하겠습니다. Thead에는 thead-dark나 thead-light를 주어 thead를 부각시킬 수 있습니다. table-striped를 주면 테이블이 중간중간 강조된 격자무늬로 볼 수 있습니다.


<table class="table">
      <thead>
        <tr>
          <th scope="col">구분</th>
          <th scope="col">책이름</th>
          <th scope="col">판매량</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>해리포터</td>
          <td>100권</td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>해리포터2</td>
          <td>200권</td>
        </tr>
      </tbody>
    </table>

기본 테이블과 마찬가지로 table-striped를 주면 테이블이 중간중간 강조된 격자무늬로 볼 수 있습니다.


<table class="table table-dark">
      <thead>
        <tr>
          <th scope="col">구분</th>
          <th scope="col">책이름</th>
          <th scope="col">판매량</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>해리포터</td>
          <td>100권</td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>해리포터2</td>
          <td>200권</td>
        </tr>
      </tbody>
    </table>

기본 테이블과 마찬가지로 table-striped를 주면 테이블이 중간중간 강조된 격자무늬로 볼 수 있습니다. table-dark에도 사용할 수 있습니다. table-borderless를 사용하면 테두리를 없앨 수 있습니다.


<table class="table table-bordered">
      <thead>
        <tr>
          <th scope="col">구분</th>
          <th scope="col">책이름</th>
          <th scope="col">판매량</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>해리포터</td>
          <td>100권</td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>해리포터2</td>
          <td>200권</td>
        </tr>
      </tbody>
    </table>

Table을 꾸밀 수 있는 전체 색입니다. 필요에 따라 활용하시면 됩니다.


<tbody>
        <tr class="table-active"><td>hello</td></tr>
        <tr class="table-primary"><td>hello</td></tr>
        <tr class="table-secondary"><td>hello</td></tr>
        <tr class="table-success"><td>hello</td></tr>
        <tr class="table-danger"><td>hello</td></tr>
        <tr class="table-warning"><td>hello</td></tr>
        <tr class="table-info"><td>hello</td></tr>
        <tr class="table-light"><td>hello</td></tr>
        <tr class="table-dark"><td>hello</td></tr>
        <tr class="bg-primary"><td>hello</td></tr>
        <tr class="bg-success"><td>hello</td></tr>
        <tr class="bg-warning"><td>hello</td></tr>
        <tr class="bg-danger"><td>hello</td></tr>
        <tr class="bg-info"><td>hello</td></tr>
      </tbody>
    </table>

5. 버튼

부트스트랩에 버튼은 다양한 크기와 색을 지원합니다. 아래는 부트스트랩에서 기본적으로 제공하고 있는 버튼입니다.


<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>

버튼은 <button> 요소와 함께 사용하도록 설계되었지만 다른 요소에도 사용할 수 있습니다. 아래 다양한 예제를 참고하여 홈페이지를 작성하시면 좋을 것 같습니다. 모두 동일한 모양의 버튼을 만들어줍니다.


<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">

아웃라인만 들어간 버튼을 만들 수도 있습니다. 기본 클래스를 .btn-outline-*로 바꾸면 버튼의 배경 이미지와 색상이 제거된 아웃라인 버튼을 만들 수 있습니다.


<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button> 
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

부트스트랩은 버튼의 사이즈를 빠르게 변경하기 위한 클래스를 제공합니다. .btn-lg (큰 버튼)또는 .btn-sm(작은 버튼)을 추가하면 아래처럼 버튼의 크기가 조정됩니다.


<button type="button" class="btn btn-primary btn-lg">큰 버튼</button>
<button type="button" class="btn btn-secondary btn-lg">큰 버튼</button>

<button type="button" class="btn btn-primary btn-sm">작은 버튼</button>
<button type="button" class="btn btn-secondary btn-sm">작은 버튼</button>

.btn-block을 추가하면 부모의 전체 넓이만한 버튼을 만들 수도 있습니다.


<button type="button" class="btn btn-primary btn-lg btn-block">블록 레벨 버튼</button>
<button type="button" class="btn btn-secondary btn-lg btn-block">블록 레벨 버튼</button>

부트스트랩 버튼에는 활성과 비활성을 제공하고 있습니다. 버튼이 Acrive(활성)상태가 되면 버튼이 눌러져 보입니다.


<a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Link</a>

버튼의 비활성 상태는 기존의 색 그대로를 나타냅니다. disabled 속성을 <button> 요소에 추가하여 버튼을 비활성 상태로 만들 수 있습니다. 활성화된 상태는 .active입니다.


<button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>
<button type="button" class="btn btn-secondary btn-lg" disabled>Button</button>

<a> 요소를 사용하는 비활성 버튼은 조금 다르게 동작합니다.

<a>는 disabled 속성을 지원하지 않으므로 비활성화 된 것으로 보이게 하려면 .disabled 클래스를 추가 해야 합니다.

anchor 버튼의 모든 pointer-events를 비활성화 합니다. 해당 속성을 지원하는 브라우저에서는 비활성화 된 커서가 전혀 표시되지 않습니다.

Disabled buttons(비활성상태 버튼)은 aria-disabled="true" 속성을 포함해야 합니다.

비활성화 된 버튼에는 요소의 상태를 표시하기 위해 aria-disabled=“true” 속성을 포함합니다.


<a href="#" class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Link</a>

버튼 플러그인을 사용하면 버튼으로 더 많은 작업을 할 수 있게 됩니다. 토글 상태를 알기 위해서는 data-toggle="button"을 추가하여 버튼 active 상태를 토글합니다.

버튼을 미리 토글할 경우에는 .active 클래스와 aria-pressed=“true”를 수동으로 <button>에 추가해야 합니다.


<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
    Single toggle
</button>

체크박스와 라디오 버튼에 부트스트랩에서 제공하고 있는 플러그인을 사용해보도록 하겠습니다. 부트스트랩의 .button 스타일은 <label>과 같은 요소에 적용되어 checkbo나 radio에 버튼토글을 지정할 수 있습니다. 각각의 스타일에서 토글링할 수 있도록 변경된 버튼이 포함된.btn-group에 data-toggle="buttons"를 추가할 수 있습니다.

버튼들의 체크상태는 버튼의 클릭 이벤트를 통해서만 업데이트됩니다. 다른 방법을 사용하여<input type="reset"> 또는 input의 checked 속성을 적용하여 입력을 업데이트하는 경우 <label>을 수동으로 토글해야 합니다.

기본 선택된 버튼은 적용하려면 .active 클래스를 input의 <label>에 수동으로 추가해야 합니다.


<div class="btn-group" data-toggle="buttons">
	<label class="btn btn-secondary active">
		<input type="checkbox" checked autocomplete="off"> 체크박스 1 (기본선택)
	</label>
	<label class="btn btn-secondary">
		<input type="checkbox" autocomplete="off"> 체크박스 2
	</label>
	<label class="btn btn-secondary">
		<input type="checkbox" autocomplete="off"> 체크박스 3
	</label>
</div>


<div class="btn-group" data-toggle="buttons">
	<label class="btn btn-secondary active">
		<input type="radio" name="options" id="option1" autocomplete="off" checked> 라디오 1 (기본선택)
	</label>
	<label class="btn btn-secondary">
		<input type="radio" name="options" id="option2" autocomplete="off"> 라디오 2
	</label>
	<label class="btn btn-secondary">
		<input type="radio" name="options" id="option3" autocomplete="off"> 라디오 3
	</label>
</div>

Methods(메소드):


$().button('toggle')

푸시 상태를 토글할 수 있습니다. 버튼에 활성화된 상태를 지정해보세요.

6. CARD

부트스트랩의 Card(카드)는 다양한 컨텐츠를 포함할 수 있는 확장성을 지니고 있습니다. 부트스트랩 버전 3에 익숙하시다면 panel(패널)이나 well(웰), thumbnail(텀브네일)로 대체가 가능합니다. Card(카드)는 Flexbox(플렉스박스)로 제작되어 쉽게 정렬할 수 있으며 다른 부트스트랩 컴포넌트와 잘 섞일 수 있습니다.


<div class="card" style="width: 20rem;">
	<img class="card-img-top" src="...." alt="Card image cap">
	<div class="card-body">
		<h4 class="card-title">Card title</h4>
		<p class="card-text">
Some quick example text to build on the card title 
and make up the bulk of the card's content.
		</p>
		<a href="#" class="btn btn-primary">Go somewhere</a>
	</div>
</div>

카드의 body를 작성하기 위해서는 .card-body 클래스를 사용하면 됩니다. 아래 보이는 것이 기본 골격입니다.


<div class="card">
	<div class="card-body">
		This is some text within a card body.
	</div>
</div>

다음은 공식 홈페이지에서 제공하고 있는 Card에 타이틀, 텍스트 링크 작성 방법입니다.

Titles, text, and links(타이틀, 텍스트, 링크):

타이틀은 <h*> 태그에 .card-title을 추가

서브타이틀은 <h*> 태그에 .card-subtitle을 추가

*.card-body item에 .card-title과 .card-subtitle을 배치하면 알맞게 정렬

링크는 <a> 태그에 .card-link를 추가하면 사용할 수 있음


<div class="card" style="width: 20rem;">
	<div class="card-body">
		<h4 class="card-title">Card title</h4>
		<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
		<p class="card-text"> 
		Some quick example text to build on the card title
		and make up the bulk of the card's content
		</p>
		<a href="#" class="card-link">Card link</a>
		<a href="#" class="card-link">Another link</a>
	</div> 
</div>

Card안에서 이미지를 사용하는 방법입니다.

.card-img-top은 이미지를 카드의 윗 부분에 놓아줍니다.

.card-text를 이용하여 텍스트는 카드에 추가될 수 있습니다.

.card-text안의 텍스트는 HTML 태그로 꾸밀 수 있습니다.


<div class="card" style="width: 20rem;">
	<div class="card-img-top" src="..." alt="Card image cap">
		<div class="card-body">
		<p class="card-text"> 
			Some quick example text to build on the card title
			and make up the bulk of the card's content
		</p>
	</div> 
</div>

Card안에도 리스트 그룹을 만들 수 있습니다. Flush list group(플러시 리스트 그룹)을 이용해서 아래와 같이 카드 안에 컨텐츠 리스트를 만들어 보세요.


<div class="card" style="width: 20rem;">
	<ul class="list-group list-group-flush">
		<li class="list-group-item">Cras justo odio</li>
		<li class="list-group-item">Dapibus ac facilisis in</li>
		<li class="list-group-item">Vestibulum at eros</li>
	</ul>
</div>


<div class="card" style="width: 18rem;">
	<div class="card-header">
		Featured 
	</div>
	<ul class="list-group list-group-flush">
		<li class="list-group-item">Cras justo odio</li> 
		<li class="list-group-item">Dapibus ac facilisis in</li>
		<li class="list-group-item">Vestibulum at eros</li> 
	</ul> 
</div>

카드를 보다 더 다체롭게 꾸미기 위해 여러 컨텐츠를 믹스해보세요. 아래 예제는 한번 타이핑을 해보시길 추천해 드립니다.


<div class="card" style="width: 18rem;">
	<img class="card-img-top" src=".../100px180/?text=Image cap" alt="Card image cap"> 
	<div class="card-body"> 
	<h5 class="card-title">Card title</h5> 
	<p class="card-text">
		Some quick example text to build on the card title
		and make up the bulk of the card's content. 
	</p> 
	</div> 
	<ul class="list-group list-group-flush"> 
		<li class="list-group-item">Cras justo odio</li> 
		<li class="list-group-item">Dapibus ac facilisis in</li> 
		<li class="list-group-item">Vestibulum at eros</li> 
	</ul> 
	<div class="card-body">
		<a href="#" class="card-link">Card link</a>
		<a href="#" class="card-link">Another link</a> 
	</div> 
</div>

카드 안에 해더와 푸터를 추가할 수 있습니다.


<div class="card"> 
	<div class="card-header">
		Featured 
	</div> 
	<div class="card-body"> 
		<h5 class="card-title">
			Special title treatment 
		</h5> 
		<p class="card-text"> 
			With supporting text below
			as a natural lead-in to additional content. 
		</p> 
		<a href="#" class="btn btn-primary">
			Go somewhere 
		</a> 
	</div> 
</div>

Card header(카드 헤더)는 <h*> 요소에 .card-header를 추가하여 스타일링 할 수 있습니다.


<div class="card"> 
	<h5 class="card-header">
		Featured 
	</h5> 
	<div class="card-body"> 
		<h5 class="card-title">
			Special title treatment 
		</h5> 
		<p class="card-text"> 
			With supporting text below
			as a natural lead-in to additional content. 
		</p> 
		<a href="#" class="btn btn-primary">
			Go somewhere 
		</a> 
	</div> 
</div>

Header and footer(헤더와 풋터)


<div class="card"> 
	<div class="card-header"
		Quote 
	</div> 
	<div class="card-body"> 
		<blockquote class="blockquote mb-0"> 
			<p> 
				Lorem ipsum dolor sit amet, 
				consectetur adipiscing elit.
				Integer posuere erat a ante. 
			</p>
			<footer class="blockquote-footer">
				Someone famous in 
			<cite title="Source Title">
				Source Title</cite> 
			</footer> 
		</blockquote> 
	</div>
</div>


<div class="card text-center"> 
	<div class="card-header">
		Featured 
	</div> 
	<div class="card-body"> 
		<h5 class="card-title">
			Special title treatment 
		</h5> 
		<p class="card-text">
			With supporting text below
			as a natural lead-in
			to additional content. 
		</p> 
		<a href="#" class="btn btn-primary">
			Go somewhere 
		</a> 
	</div> 
	<div class="card-footer text-muted">
		2 days ago 
	</div> 
</div>

Sizing(크기 조정)

2. Using utilities(유틸리티 사용하기):

빠르게 카드의 너비를 맞출 수 있는 sizing utilities를 사용해 보세요.


<div class="card w-75"> 
	<div class="card-body"> 
		<h4 class="card-title">
			Card title 
		</h4> 
		<p class="card-text">
			With supporting text below
			as a natural lead-in
			to additional content. 
		</p> 
		<a href="#" class="btn btn-primary">
			Button 
		</a> 
	</div> 
</div>


<div class="card w-50"> 
	<div class="card-body"> 
		<h4 class="card-title">
			Card title 
		</h4> 
		<p class="card-text">
			with supporting text below 
			as a natural lead-in
			to additional content. 
		</p> 
		<a href="#" class="btn btn-primary">
			Button 
		</a> 
	</div>
</div>

3. Using custon CSS(사용자 정의 CSS 사용하기):

너비를 맞추기 위해 stylesheets(스타일시트)나 inline style(인라인 스타일)을 통해 사용자 정의 CSS를 사용해 보세요.


<div class="card" style="width: 20rem;"> 
	<div class="card-body"> 
		<h4 class="card-title">
			Special title treatment 
		</h4> 
		<p class="card-text">
			With supporting text below 
			as a natural lead-in 
			to additional content. 
		</p> 
		<a href="#" class="btn btn-primary">
			Go somewhere 
		</a> 
	</div> 
</div>

Text alignment(텍스트 정렬):

Text align classes를 통해 전체 혹은 일부분에서 텍스트 정렬을 빠르게 바꿀 수 있습니다.


<div class="card" style="width: 20rem;"> 
	<div class="card-body"> 
		<h4 class="card-title">
			Special title treatment 
		</h4> 
		<p class="card-text">
			With supporting text below 
			as a natural lead-in
			to additional content. 
		</p> 
		<a href="#" class="btn btn-primary">
			Go somewhere 
		</a>
	</div>
</div>


<div class="card text-center" style="width: 20rem;"> 
	<div class="card-body">
		<h4 class="card-title">
			Special title treatment
		</h4>
		<p class="card-text">
			With supporting text below
			as a natural lead-in 
			to additional content. 
		</p> 
		<a href="#" class="btn btn-primary">
			Go somewhere </a>
	</div> 
</div>


<div class="card text-right" style="width: 20rem;">
	<div class="card-body"> 
		<h4 class="card-title"> 
			Special title treatment
		</h4> 
		<p class="card-text"> 
			With supporting text below 
			as a natural lead-in
			to additional content. 
		</p>  
		<a href="#" class="btn btn-primary"> 
			Go somewhere
		</a>
	</div> 
</div>

부트스트랩은 카드 내 네비게이션을 허용하고 있습니다. nav components를 이용해서 카드의 header(헤더)나 block(블록)에 네비게이션을 추가해보세요. (예제 계속)


<div class="card text-center"> 
	<div class="card-header"> 
		<ul class="nav nav-tabs card-header-tabs"> 
			<li class="nav-item"> <a class="nav-link active" href="#"> Active </a> </li> 
			<li class="nav-item"> <a class="nav-link" href="#">Link </a> </li> 
			<li class="nav-item"> <a class="nav-link disabled" href="#"> Disabled </a> </li> 
		</ul> 
	</div>
	<div class="card-body"> 
		<h5 class="card-title"> Special title treatment </h5> 
		<p class="card-text"> With supporting text below as a natural lead-into additional content. </p> 
		<a href="#" class="btn btn-primary">Go somewhere </a> 
	</div> 
</div>


<div class="card text-center"> 
	<div class="card-header"> 
		<ul class="nav nav-pills card-header-pills"> 
			<li class="nav-item"> <a class="nav-link active" href="#"> Active </a> </li> 
			<li class="nav-item"> <a class="nav-link" href="#">Link </a> </li> 
			<li class="nav-item"> 34 <a class="nav-link disabled" href="#">Disabled </a> </li> 
		</ul> 
	</div>
	<div class="card-body"> 
		<h5 class="card-title"> Special title treatment </h5> 
		<p class="card-text"> With supporting text below as a natural lead-into additional content. </p> 
		<a href="#" class="btn btn-primary"> Go somewhere </a>
	</div> 
</div>

부트스트랩에는 카드에 이미지 작업을 위한 몇가지 옵션이 있습니다. 예를 들어 카드의 양쪽 끝에 image caps를 추가하거나 카드 내용으로 이미지를 겹치거나 이미지를 카드에 간단하게 끼워 넣기를 할 수 있습니다.

Header(헤더), footer(풋터)와 마찬가지로 card(카드)는 상단 및 하단에 "image caps"이 포함될 수 있습니다.


<div class="card mb-3">  
	<img class="card-img-top" src="..." alt="Card image cap">22 
	<div class="card-body"> 
		<h4 class="card-title"> Card title </h4> 
		<p class="card-text">
			This is a wider card with supporting text below as a natural 
			lead-in to additional content. This content is a little bit longer. 
		</p> 
		<p class="card-text">
			<small class="text-muted"> Last updated 3 mins ago</small> 
		</p> 
	</div> 
</div>

<div class="card"> 
	<div class="card-body"> 
		<h4 class="card-title"> Card title </h4> 
		<p class="card-text">
			This is a wider card with supporting text below as a natural 
			lead-in to additional content. This content is a little bit longer. 
		</p> 
		<p class="card-text"> 
			<small class="text-muted">
				Last updated 3 mins ago 
			</small> 
		</p> 
	</div>
	<img class="card-img-bottom" src="..." alt="Card image cap"> 
</div>

부트스트랩에서는 이미지를 카드 배경으로 바꾸고 카드의 텍스트를 오버레이할 수 있는 방법을 제공하고 있습니다.


<div class="card bg-dark text-white">
	<img class="card-img" 
	src=".../100px270/#55595c:#373a3c/text:Card image" 
	alt="Card image"> 
	<div class="card-img-overlay"> 
		<h5 class="card-title"> Card title </h5> 
		<p class="card-text">
			This is a wider card 
			with supporting text 
			below as a natural 
			lead-in to additional content. 
			This content is a little bit longer. 
		</p> 
		<p class="card-text">
			Last updated 3 mins ago 
		</p> 
	</div> 
</div>

카드는 배경, 테두리, 색깔을 바꿀 수 있습니다. 아래 내용을 참고하세요.


<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
	<div class="card-header">Header</div> 
		<div class="card-body"> 
			<h5 class="card-title">Primary card title</h5> 
			<p class="card-text">
				Some quick example text to build on the card title
				and make up the bulk of the card's content.</p> 
		</div> 
</div> 
<div class="card text-white bg-secondary mb-3" style="max-width: 18rem;">
	<div class="card-header">Header </div> 
	<div class="card-body">
		<h5 class="card-title">Secondary card title</h5> 
		<p class="card-text">
			Some quick example text to build on the card title
			and make up the bulk of the card's content.
		</p> 
	</div> 
</div> 
<div class="card text-white bg-success mb-3" style="max-width: 18rem;">
	<div class="card-header">Header</div> 
	<div class="card-body">
		<h5 class="card-title">Success card title</h5> 
		<p class="card-text">
			Some quick example text to build on the card title
			and make up the bulk of the card's content.
		</p> 
	</div> 
</div> 
<div class="card text-white bg-danger mb-3" style="max-width: 18rem;">
	<div class="card-header">Header</div> 
	<div class="card-body">
		<h5 class="card-title">Danger card title</h5> 
		<p class="card-text"> 
			Some quick example text to build on the card title
			and make up the bulk of the card's content.
		</p> 
	</div> 
</div>


<div class="card text-white bg-warning mb-3" style="max-width: 18rem;">
	<div class="card-header">Header</div> 
	<div class="card-body">
		<h5 class="card-title">Warning card title</h5> 
		<p class="card-text">
			Some quick example text to build on the card title
			and make up the bulk of the card's content.
		</p> 
	</div> 
</div> 
<div class="card text-white bg-info mb-3" style="max-width: 18rem;">
	<div class="card-header">Header</div> 
	<div class="card-body">
		<h5 class="card-title">Info card title</h5> 
		<p class="card-text">
			Some quick example text to build on the card title
			and make up the bulk of the card's content.
		</p> 
	</div> 
</div> 
<div class="card bg-light mb-3" style="max-width: 18rem;">
	<div class="card-header">Header</div> 
	<div class="card-body">
		<h5 class="card-title">Light card title</h5> 
		<p class="card-text">
			Some quick example text to build on the card title
			and make up the bulk of the card's content.
		</p> 
	</div> 
</div> 
<div class="card text-white bg-dark mb-3" style="max-width: 18rem;">
	<div class="card-header">Header</div> 
	<div class="card-body">
		<h5 class="card-title">Dark card title</h5> 
		<p class="card-text">
			Some quick example text to build on the card title
			and make up the bulk of the card's content.
		</p> 
	</div> 
</div>

카드에도 테두리를 줄 수 있습니다. border-color를 바꾸기 위해서는 border utilities를 사용하면 됩니다. 부모요소의 카드나 카드 컨텐츠에 .text-{color} 클래스를 추가하면 됩니다.


<div class="card border-primary mb-3" style="max-width: 18rem;">
	<div class="card-header">Header</div> 
	<div class="card-body text-primary">
		<h5 class="card-title">Primary card title</h5> 
		<p class="card-text">
			Some quick example text to build on the card title
			and make up the bulk of the card's content. 
		</p> 
	</div> 
</div> 
<div class="card border-secondary mb-3" style="max-width: 18rem;">
	<div class="card-header">Header</div> 
	<div class="card-body text-secondary">
		<h5 class="card-title">Secondary card title</h5> 
		<p class="card-text">
			Some quick example text to build on the card title
			and make up the bulk of the card's content. 
		</p> 
	</div> 
</div> 
<div class="card border-success mb-3" style="max-width: 18rem;">
	<div class="card-header">Header</div> 
	<div class="card-body text-success">
		<h5 class="card-title">Success card title</h5> 
		<p class="card-text">
			Some quick example text to build on the card title
			and make up the bulk of the card's content. </p> 
	</div> 
</div> 
<div class="card border-danger mb-3" style="max-width: 18rem;">
	<div class="card-header">Header</div> 
	<div class="card-body text-danger">
		<h5 class="card-title">Danger card title</h5> 
		<p class="card-text"> 
			Some quick example text to build on the card title
			and make up the bulk of the card's content. 
		</p> 
	</div> 
</div>

카드 헤더와 풋터 테두리를 바꾸거나 지우면 좀 더 세련된 카드를 구현할 수 있습니다. .bg-transparent를 이용해서 background-color를 제거할 수도 있습니다.


<div class="card border-success mb-3" style="max-width: 20rem;">
	<div class="card-header bg-transparent border-success">Header</div> 
	<div class="card-body text-success">
		<h4 class="card-title">Success card title</h4> 
		<p class="card-text">
			Some quick example text to build on the card title
			and make up the bulk of the card's content. 
		</p> 
	</div>
	<div class="card-footer bg-transparent border-success">Footer</div> 
</div>

카드 안에 컨텐츠를 추가하기 위해서 부트스트랩은 카드의 레이아웃작업의 옵션들을 포함하고 있습니다.

그룹의 카드들을 같은 너비와 높이의 붙어있는 columns(열)로 바꿔줄 수 있습니다.

카드 그룹은 동일한 사이즈로 만들기 위해 display: flex;를 사용할 수 있습니다. 풋터를 사용해서 카드 그룹을 사용할 경우, 컨텐츠는 자동적으로 정렬됩니다. 코드는 다음장에 넣어두었습니다.

Card groups(카드 그룹) (예시 계속)


<div class="card-group"> 
	<div class="card">
		<img class="card-img-top" src="..." alt="Card image cap"> 
		<div class="card-body">
			<h4 class="card-title">Card title</h4> 
			<p class="card-text">
				This is a wider card with supporting text below as a natural 
				lead-in to additional content. This content is a little bit longer. 
			</p> 
			<p class="card-text">
				<small class="text-muted"> Last updated 3 mins ago </small> 
			</p> 
		</div> 
	</div> 
	<div class="card">
		<img class="card-img-top" src="..." alt="Card image cap"> 
		<div class="card-body">
			<h4 class="card-title">Card title</h4> 
			<p class="card-text">
				This card has supporting text below as a natural lead-in
				to additional content.
			</p> 
			<p class="card-text">
				<small class="text-muted"> Last updated 3 mins ago</small> 
			</p> 
		</div> 
	</div> 
	<div class="card">
		<img class="card-img-top" src="..." alt="Card image cap"> 
		<div class="card-body">
			<h4 class="card-title">Card title</h4> 
			<p class="card-text">
				This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action. 
			</p> 
			<p class="card-text">
				<small class="text-muted">
					Last updated 3 mins ago
				</small> 
			</p> 
		</div> 
	</div> 
</div>


<div class="card-group"> 
	<div class="card">
		<img class="card-img-top" src="..." alt="Card image cap"> 
		<div class="card-body">
			<h4 class="card-title">Card title</h4> 
			<p class="card-text">
				This is a wider card 
				with supporting text 
				below as a natural lead-in to 
				additional content.
				This content is a little bit longer. 
			</p> 
		</div> 
		<div class="card-footer">
			<small class="text-muted">Last updated 3 mins ago</small> 
		</div> 
	</div>
	<div class="card">
		<img class="card-img-top" src="..." alt="Card image cap"> 
		<div class="card-body">
			<h4 class="card-title">Card title</h4> 
			<p class="card-text">
				This card has supporting text 
				below as a natural lead-in
				to additional content. 
			</p> 
		</div> 
		<div class="card-footer">
			<small class="text-muted">Last updated 3 mins ago</small> 
		</div> 
	</div> 
	<div class="card">
		<img class="card-img-top" src="..." alt="Card image cap"> 
		<div class="card-body">
			<h4 class="card-title">Card title</h4> 
			<p class="card-text">
				This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action. 
			</p> 
		</div> 
		<div class="card-footer">
			<small class="text-muted">Last updated 3 mins ago</small> 
		</div> 
	</div> 
</div>

너비와 높이가 동일하지만 붙어있지 않은 것을 카드 데크라고 말합니다. 푸터를 사용해서 카드 그룹을 사용할 경우 컨텐츠는 자동으로 정렬됩니다.

Card decks(카드 데크) (예제 계속)


<div class="card-deck"> 
	<div class="card">
		<img class="card-img-top" src="..." alt="Card image cap"> 
		<div class="card-body">
			<h4 class="card-title">Card title</h4> 
			<p class="card-text">
				This is a longer card with supporting text 
				below as a natural lead-in to additional content.
				This content is a little bit longer. 
			</p> 
			<p class="card-text">
			<small class="text-muted">Last updated 3 mins ago</small> 
			</p> 
		</div> 
	</div> 
	<div class="card">
		<img class="card-img-top" src="..." alt="Card image cap"> 
		<div class="card-body">
			<h4 class="card-title">Card title</h4> 
			<p class="card-text">
			This card has supporting text below as a natural lead-in to additional content. 
			</p> 
			<p class="card-text">
				<small class="text-muted">Last updated 3 mins ago</small> 
			</p> 
		</div> 
	</div> 
	<div class="card">
		<img class="card-img-top" src="..." alt="Card image cap"> 
		<div class="card-body">
			<h4 class="card-title">Card title</h4> 
			<p class="card-text">
				This is a wider card with supporting text 
				below as a natural lead-in to additional content. 
				This card has even longer content than the first 
				to show that equal height action.
			</p>
			<p class="card-text">
				<small class="text-muted">Last updated 3 mins ago</small> 
			</p>
		</div>
	</div> 
</div>

Card decks(카드 데크)(예제계속)


<div class="card-deck"> 
	<div class="card">
		<img class="card-img-top" src="..." alt="Card image cap"> 
		<div class="card-body">
			<h4 class="card-title">Card title</h4> 
			<p class="card-text">
				This is a wider card with supporting text below as a natural lead-in 
				to additional content. This content is a little bit longer. 
			</p> 
		</div> 
		<div class="card-footer">
			<small class="text-muted">Last updated 3 mins ago</small> 
		</div> 
	</div> 
	<div class="card">
		<img class="card-img-top" src="..." alt="Card image cap"> 
		<div class="card-body">
			<h4 class="card-title">Card title</h4> 
			<p class="card-text">
				This card has supporting text
				below as a natural lead-in to additional content. 
			</p> 
		</div> 
		<div class="card-footer">
			<small class="text-muted">Last updated 3 mins ago</small> 
		</div> 
	</div> 
	<div class="card">
		<img class="card-img-top" src="..." alt="Card image cap"> 
		<div class="card-body">
			<h4 class="card-title">Card title</h4> 
			<p class="card-text">
				This is a wider card with supporting text below as a natural lead-in 
				to additional content. This card has even longer content than the first
				to show that equal height action. 
			</p> 
		</div> 
		<div class="card-footer">
			<small class="text-muted">Last updated 3 mins ago</small> 
		</div> 
	</div> 
</div>

카드는 .card-columns에서 CSS를 이용해 감싸주면 벽돌 형으로 정렬된 열을 구성 할 수 있습니다. 카드는 flexbox(플렉스 박스)가 아닌 CSS 열 속성을 사용하여 쉽게 정렬 할 수 있습니다. 카드는 위에서 아래로, 왼쪽에서 오른쪽으로 정렬됩니다.

카드 열이 있는 마일리지는 다를 수 있습니다. 카드가 열을 가로 지르지 못하게 하려면

display: inline-block에 column-break-inside: avoid로써 설정해야 합니다.


<div class="card-columns"> 
	<div class="card">
		<img class="card-img-top" src="..." alt="Card image cap"> 
		<div class="card-body">
			<h4 class="card-title">Card title</h4> 
			<p class="card-text">
				This card has supporting text below as a natural lead-in to additional content.
			</p> 
			<p class="card-text"> <small class="text-muted">
				Last updated 3 mins ago</small></p> 
		</div> 
	</div>
	<div class="card bg-primary text-white text-center p-3"> 
		<blockquote class="blockquote mb-6"> 
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p> 
			<footer class="blockquote-footer"> 
				<small> Someone famous in 
					<cite title="Source Title">
						Source Title</cite> 
				</small> 
			</footer> 
		</blockquote> 
	</div> 
	<div class="card text-center"> 
		<div class="card-body">
			<h4 class="card-title">Card title</h4> 
			<p class="card-text">
				This card has supporting text 
				below as a natural lead-in
				to additional content.</p> 
			<p class="card-text">
				<small class="text-muted">
					Last updated 3 mins ago
				</small>
			</p> 
		</div>
	</div> 
	<div class="card">
		<img class="card-img" src="..." alt="Card image">
	</div> 
	<div class="card p-3 text-right"> 
		<blockquote class="blockquote mb-8"> 
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> 
			<footer class="blockquote-footer"> 
				<small class="text-muted"> Someone famous in 
					<cite title="Source Title">Source Title</cite> 
				</small> 
			</footer> 
		</blockquote> 
	</div> 
	<div class="card"> 
		<div class="card-body">
			<h4 class="card-title">Card title</h4> 
			<p class="card-text">
				This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p> 
			<p class="card-text">ht
				<small class="text-muted">
					Last updated 3 mins ago
				</small>
			</p> 
		</div> 
	</div> 
</div>

추가적인 코드를 이용해서 카드를 커스터마이징할 수 있습니다. CSS의 .card-columns를 이용해서 커스터 마이징 해보세요.


.card-columns{ @include media-breakpoint-only(lg) { column-count: 4; } @include media-breakpoint-only(xl) { column-count: 5; }}

7. 캐러셀

캐러셀은 이미지나 텍스트 슬라이드를 구성하는 슬라이드 쇼 입니다. 마지막 캐러셀 이미지에서는 다시 처음 슬라이드로 돌아오게 됩니다.

부트스트랩 공식 홈페이지에서는 캐러셀을 ‘CSS 3D 트랜스폼과 약간의 자바스크립트로 제작된 시리즈 컨텐츠를 순환하는 슬라이드 쇼’라고 말하고 있습니다. 주의하셔야 할 부분은 캐러셀은 중첩을 허락하지 않으며 웹 접근성 표준을 준수하지 않는다는 것입니다. 또한 소스에서 JS를 빌드하는 경우 util.js가 필요합니다.

캐러셀은 자동으로 슬라이드 크기를 표준화하지 않습니다. 따라서 컨텐츠의 크기를 적절하게 조정하려면 추가 유틸리티 또는 사용자 정의 스타일을 사용해야 할 수도 있습니다.

.active 클래스 슬라이드당 하나씩 추가되어야 합니다. 그렇지 않으면 캐러셀이 보이지 않습니다. 하나의 페이지에 다양한 캐러셀을 사용할 경우, 선택적인 컨트롤을 위해 .carousel에 각각의 고유한 아이디를 부여해주세요. 컨트롤과 인디케이터 요소들의 경우 반드시 .carousel요소의 아이디를 맞추는 데이터 맞춤 속성을 가져야 합니다.

다음은 슬라이드만 있는 캐러셀입니다.


<div id="carouselExampleSlidesOnly" 
class="carousel slide" data-ride="carousel"> 
	<div class="carousel-inner"> 
		<div class="carousel-item active">
			<img class="d-block w-100" src="..." alt="첫번째 슬라이드"> 
		</div> 
		<div class="carousel-item">
			<img class="d-block w-100" src="..." alt="두번째 슬라이드"> 
		</div> 
	</div> 
</div>

이전과 다음 컨트롤이 필요한 경우 아래와 같이 사용할 수 있습니다.


<div id="carouselExampleControls" 
class="carousel slide" data-ride="carousel"> 
	<div class="carousel-inner"> 
		<div class="carousel-item active">
			<img class="d-block w-100" src="..." alt="첫번째 슬라이드"> 
		</div> 
	</div> 
	<a class="carousel-control-prev" 
	href="#carouselExampleControls"
	role="button" data-slide-"prev">
		<span class="carousel-control-prev-icon" 
		aria-hidden="true"></span>
		<span class="sr-only">이전 </span> 
	</a> 
	<a class="carousel-control-next 
	href="#carouselExampleControls" 
	role="button" data-slide="next">
		<span class="carousel-control-next-icon" 
		aria-hidden="true"></span>
		<span class="sr-only">다음 </span> 
	</a> 
</div>

컨트롤과 함께 인디케이터를 캐러셀에 추가할 수 있습니다. 슬라이드 하단에 보이는 것이 인디케이터 입니다.


<div id="carouselExample Indicators" 
class="carousel slide" data-ride-"carousel"> 
	<ol class="carousel-indicators">
		<li data-target="#carouselExample Indicators"
		data-slide-to="0" class="active"></li> 
		<li data-target="#carouselExample Indicators"
		data-slide-to="1"></li> 
		<li data-target="#carouselExample Indicators"
		data-slide-to="2"></li> 
	</ol> 
	<div class="carousel-inner"> 
		<div class="carousel-item active">
			<img class="d-block w-100"
			src="..." alt="첫번째 슬라이드"> 
		</div>
		<div class="carousel-item"> 
		<img class="d-block w-100" src="..." alt="두번째 슬라이드">
		</div> 
	</div> 
	<a class="carousel-control-prev" 
	href="#carouselExample Indicators" 
	role="button" data-slide="prev">
		<span class="carousel-control-prev-icon" 
		aria-hidden="true"></span>
		<span class="sr-only">이전</span> 
		</a> 
	<a class="carousel-control-next" 
	href="#carousel Example Indicators" 
	role="button" data-slide="next">
			<span class="carousel-control-next-icon" 
			aria-hidden="true"></span>
			<span class="sr-only">다음</span> 
	</a> 
</div>

.carousel-item 내에 .carousel-caption 요소를 사용하여 슬라이드에 캡션을 추가할 수 있습니다. 선택적으로 display utilites를 사용하여 작은 뷰포트에 숨길 수 있습니다. 처음에는 .d-none으로 숨기고 .d-md-block으로 중각 크기의 디바이스에서 다시 가져옵니다.


<div class="carousel-item">
	<img src="..." alt="..."> 
	<div class="carousel-caption d-none d-md-block">
		<h3>...</h3>
		<p>...</p> 
	</div> 
</div>

부트스트랩에 Crossfade(크로스 페이드)는 이미지가 animate(애니메이트)되는 대신 fadein fadeout되는 fade transition(페이드 트랜지션)을 사용하는 방법입니다. 캐러셀에 .carousel-fade 를 추가하면 됩니다.


<div id="carousel ExampleFade" 
class="carousel slide carousel-fade" 
data-ride="carousel">
	<div class="carousel-inner">
		<div class="carousel-item active">
			<img class="d-block w-100" 
			src=".../800x400?auto=yes&bg=777&fg=555&text=First slide"
			alt="First slide"> 
		</div> 
	</div> 
	<a class="carousel-control-prev" 
	href="#carouselExampleFade" 
	role="button" data-slide-"prev">
		<span class="carousel-control-prev-icon"
		aria-hidden="true"></span>
		<span class="sr-only">Previous</span> 
	</a> 
	<a class="carousel-control-next" 
	href="#carouselExampleFade" 
	role="button" data-slide="next">
		<span class="carousel-control-next-icon" 
		aria-hidden="true"></span>
		<span class="sr-only">Next</span> 
	</a> 
</div>

데이터 속성을 사용하여 캐러셀의 위치를 쉽게 제어할 수 있습니다. data-slide는 prev 또는 next 키워드를 사용하여 현재 위치를 기준으로 슬라이드 위치를 변경합니다. 또는 data-slide-to를 사용해서 슬라이드 포인터를 0으로 시작하는 특정 인덱스로 이동하는 슬라이드 포인터 data-slide-to=“2”에 원시 슬라이드 인덱스를 전달합니다.

data-ride="carousel" 속성은 캐러셀 페이지 로드시 애니메이션으로 표시하는데 사용됩니다. 동일한 캐러셀을 JavaScript 초기화 (중복 및 불필요한)방식과 함께 사용할 수는 없습니다.

Via JavaScript(JavaScript 방식):

$('.carousel').carousel() 를 사용해서 수동으로 캐러셀을 호출할 수 있습니다.

8. 마무리하며

부트스트랩에 모든 기능을, 모든 문법을 다 익히고 숙련되야만 부트스트랩을 잘 사용할 수 있을까요? 그렇지 않습니다. 부트스트랩 유무료 템플릿을 다운로드 받는 방법이 있고, 그 방법을 더 추천해 드립니다. 아무리 잘 사용하더라도, 전문가의 손길보다 뛰어나게 홈페이지를 작성할 수 없습니다. 기회비용을 고려하여, 2만원 ~ 3만원에 부트스트랩 템플릿을 다운로드 받는 다는 것은 훌륭한 대안이 될 것이에요.

그래도 처음부터 끝까지 직접 만들고 싶으시다면, 부트스트랩 보다는 직접 한땀한땀 처음부터 끝까지 만들어보시길 권해드립니다.