Bootstrap4 기본 튜토리얼

Bootstrap4 카드(Card)

Bootstrap4기존의 panel, well, thumbnail 컴포넌트를 대체할 새로운 유연하고 확장 가능한 내용 컨테이너 컴포넌트인 card 컴포넌트를 도입했습니다. 이는 헤더와 푸터 옵션, 다양한 내용, 컨텍스트 배경 색상 및 강력한 표시 옵션을 포함하고 있습니다. 다음 부분에서 card 컴포넌트를 사용하는 방법을 보여드리겠습니다.

간단한 카드

Bootstrap를 통해4 의 .card와 .card-body 클래스를 사용하여 간단한 카드를 생성합니다，예를 들어:

예제

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　예제</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>간단한 카드</h2>
　　<div　class="card">
　　　　<div class="card-body">간단한 카드</div>
　　</div>
</div>
</body>
</html>

테스트 봐봅시다 ‹/›

Bootstrap4 의 카드는 Bootstrap과 유사합니다 3 의 패널、이미지 축소판、well.

헤더 및 하단

.card-header 클래스는 카드 헤더 스타일을 생성하는 데 사용됩니다，.card-footer 클래스는 카드 하단 스타일을 생성하는 데 사용됩니다：

예제

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　예제</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>카드 헤더 및 하단</h2>
　　<div　class="card">
　　　　<div class="card-header">헤더</div>
　　　　<div class="card-body">내용</div>　
　　　　<div class="card-footer">하단</div>
　　</div>
</div>
</body>
</html>

테스트 봐봅시다 ‹/›

다양한 색상 카드

Bootstrap 4 다양한 카드 배경 색상 클래스를 제공합니다： .bg-기본, .bg-성공, .bg-정보, .bg-경고, .bg-위험, .bg-두 번째, .bg-다크 및 .bg-가벼운。

예제

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　예제</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>다양한 색상 카드</h2>
　　<div　class="card">
　　　　<div class="card-body">기본 카드</div>
　　</div>
　　<br>
　　<div　class="card　bg-기본 텍스트-white">
　　　　<div class="card-body">기본 카드</div>
　　</div>
　　<br>
　　<div　class="card　bg-성공 텍스트-white">
　　　　<div class="card-body">성공 카드</div>
　　</div>
　　<br>
　　<div　class="card　bg-정보 텍스트-white">
　　　　<div class="card-body">정보 카드</div>
　　</div>
　　<br>
　　<div　class="card　bg-경고 텍스트-white">
　　　　<div class="card-body">경고 카드</div>
　　</div>
　　<br>
　　<div　class="card　bg-위험 텍스트-white">
　　　　<div class="card-body">위험 카드</div>
　　</div>
　　<br>
　　<div　class="card　bg-두 번째 텍스트-white">
　　　　<div class="card-body">두 번째 카드</div>
　　</div>
　　<br>
　　<div　class="card　bg-다크 텍스트-white">
　　　　<div class="card-body">다크 카드</div>
　　</div>
　　<br>
　　<div　class="card　bg-가벼운 텍스트-dark">
　　　　<div class="card-body">가벼운 카드</div>
　　</div>
</div>
</body>
</html>

테스트 봐봅시다 ‹/›

제목、텍스트 및 링크

头来의 요소에 .card를 사용할 수 있습니다.-title 클래스를 사용하여 카드 제목을 설정합니다. .card-text 클래스는 카드 본문의 내용을 설정하는 데 사용됩니다. .card-link 클래스는 링크의 색상을 설정하는 데 사용됩니다。

예제

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　예제</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>제목、텍스트 및 링크</h2>
　　<div　class="card">
　　　　<div class="card-body">
　　　　　　<h4　class="card-title">Card　title</h4>
　　　　　　<p class="card-text">Some　example　text.　Some　example　text.</p>
　　　　　　<a　href="#"　class="card-link">Card　link</a>
　　　　　　<a　href="#"　class="card-link">Another　link</a>
　　　　</div>
　　</div>
</div>
</body>
</html>

테스트 봐봅시다 ‹/›

이미지 카드

우리는 <img> .card 추가-img-top（图片在文字上方） 또는 .card-img-bottom（图片在文字下方来设置图片卡片：

예제

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　예제</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>이미지 카드</h2>
　　<p>이미지가 상단에 있음　(card-img-top):</p>
　　<div　class="card"　style="width:400px">
　　　　<img　class="card-img-top"　src="https://static.oldtoolbag.com/images/mix/img_avatar.png"　alt="카드 이미지"　style="width:100%">
　　　　<div class="card-body">
　　　　　　<h4　class="card-title">John Doe</h4>
　　　　　　<p class="card-text">Some　example　text　some　example　text.　John　Doe　is　an　architect　and　engineer</p>
　　　　　　<a href="#" class="btn btn-primary">프로필 보기</a>
　　　　</div>
　　</div>
　　<br>
　　
　　<p>이미지가 하단에 있음(card-img-bottom):</p>
　　<div　class="card"　style="width:400px">
　　　　<div class="card-body">
　　　　　　<h4　class="card-title">Jane　Doe</h4>
　　　　　　<p class="card-text">Some　example　text　some　example　text.　Jane　Doe　is　an　architect　and　engineer</p>
　　　　　　<a href="#" class="btn btn-primary">프로필 보기</a>
　　　　</div>
　　　　<img　class="card-img-bottom"　src="https://static.oldtoolbag.com/images/mix/img_avatar.png"　alt="카드 이미지"　style="width:100%">
　　</div>
</div>
</body>
</html>

테스트 봐봅시다 ‹/›

이미지를 배경으로 설정하려면 사용할 수 있습니다 .card-img-overlay class:

예제

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　예제</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>이미지 위에 텍스트覆盖</h2>
　　<p>이미지를 배경으로 설정하려면 사용할 수 있습니다　.card-img-overlay　class:</p>
　　<div　class="card　img-fluid"　style="width:500px">
　　　　<img　class="card-img-top"　src="https://static.oldtoolbag.com/images/mix/img_avatar.png"　alt="카드 이미지"　style="width:100%">
　　　　<div class="card-img-overlay">
　　　　　　<h4　class="card-title">John Doe</h4>
　　　　　　<p class="card-text">일부 예제 텍스트 일부 예제 텍스트. 일부 예제 텍스트 일부 예제 텍스트. 일부 예제 텍스트 일부 예제 텍스트.</p>
　　　　　　<a href="#" class="btn btn-primary">프로필 보기</a>
　　　　</div>
　　</div>
</div>
</body>
</html>

테스트 봐봅시다 ‹/›

Bootstrap4 드롭다운 메뉴 Bootstrap4 목록 그룹