Bootstrap 실습2
Bootstrap 홈페이지 예시의 Pricing example 만들어보기
소스코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>
<body>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-lg bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Pricing example</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Enterprise</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Support</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
</div>
</div>
</nav>
<br><br>
<figure class="text-center">
<blockquote class="blockquote">
<h1>Pricing</h1>
</blockquote>
<figcaption class="blockquote-footer">
Quickly build an effective pricing table for your potential customers with <br>this Bootstrap example. It’s built
with default Bootstrap components and <br> utilities with little customization.
</figcaption>
</figure>
<!--그리드 적용해서 카드3개 row 구현-->
<div class="container text-center">
<div class="row">
<div class="col">
<div class="card">
<div class="card-header">
Free
</div>
<img src="images/card-image.png" alt="" />
<div class="card-body">
<h5 class="card-title">$0/mo</h5>
<p class="card-text">
10 users included <br>
2 GB of storage <br>
Email support <br>
Help center access</p>
<a href="#" class="btn btn-primary">Sign up for free</a>
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-header">
Pro
</div>
<img src="images/card-image.png" alt="" />
<div class="card-body">
<h5 class="card-title">$15/mo</h5>
<p class="card-text">
20 users included <br>
10 GB of storage <br>
Priority email support <br>
Help center access
</p>
<a href="#" class="btn btn-primary">Get started</a>
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-header">
Enterprise
</div>
<img src="images/card-image.png" alt="" />
<div class="card-body">
<h5 class="card-title">$29/mo</h5>
<p class="card-text">
30 users included <br>
15 GB of storage <br>
Phone and email support <br>
Help center access</p>
<a href="#" class="btn btn-primary">Contact us</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>