날아라쩡글이의 블로그입니다.
grid-sample2 본문
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
<title>부트스트랩</title>
</head>
<body>
<div class ="container">
<div class="row">
<div class="col">
<div class="d-flex justify-content-between py-2 border-bottm">
<div>
<a href="">고객센터</a>
<a href="">빠른메뉴</a>
</div>
<div>
<a href="">마이샵</a>
<a href="">로그인</a>
<a href="">회원가입</a>
<a href="">주문조회</a>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="d-flex justify-content-between py-2 border-bottm">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">홈</a></li>
<li class="breadcrumb active" aria-current="page">드레스</li>
</ol>
</nav>
</div>
<div>
<a href="">MY</a> | <a href="">HELP</a> | <a href="">QUICK</a>
</div>
</div>
</div>
<div class="row mb-3">
<div class="col text-center">
<div>
<strong class="display-5">Dress</strong>
<small><i class="bi bi-hand-thumbs-up"></i></small>
<small><span class="badge rounded-pill bg-success">0</span></small>
</div>
</div>
</div>
<div class="row mb-3">
<div class="col-3 col md-4 col-sm-6 col-xs-12">
<div class="card mb-3">
<img class="card-img-top" src="resources/KakaoTalk_20211117_113831597.jpg">
<div class="card-body">
<h5 class="card-title border-bottom">[프리미엄]롤렌 실키 롱 원피스</h5>
<div class="mb-2">
<!-- 글자를 흐릿하게 만든다. -->
<button class="btn btn-ontline-dark btn-sm">Q & A</button>
<button class="btn btn-ontline-dark btn-sm">REVIEW</button>
</div>
<p class="card-text text-muted mb-2">부드러움과 촉촉함, 고급스러움을 모두 갖춘 원피스에요</p>
<p class="card-text mb2"><strong>157,000원</strong></p>
<div>
<span class="border p-1 bg-success text-white">당일 배송</span>
<span class="border p-1 text-danger">New</span>
</div>
</div>
</div>
</div>
<div class="col-3 col md-4 col-sm-6 col-xs-12">
<div class="card mb-3">
<img class="card-img-top" src="resources/KakaoTalk_20211117_113831597.jpg">
<div class="card-body">
<h5 class="card-title border-bottom">[프리미엄]롤렌 실키 롱 원피스</h5>
<div class="mb-2">
<!-- 글자를 흐릿하게 만든다. -->
<button class="btn btn-ontline-dark btn-sm">Q & A</button>
<button class="btn btn-ontline-dark btn-sm">REVIEW</button>
</div>
<p class="card-text text-muted mb-2">부드러움과 촉촉함, 고급스러움을 모두 갖춘 원피스에요</p>
<p class="card-text mb2"><strong>157,000원</strong></p>
<div>
<span class="border p-1 bg-success text-white">당일 배송</span>
<span class="border p-1 text-danger">New</span>
</div>
</div>
</div>
</div>
<div class="col-3 col md-4 col-sm-6 col-xs-12">
<div class="card mb-3">
<img class="card-img-top" src="resources/KakaoTalk_20211117_113831597.jpg">
<div class="card-body">
<h5 class="card-title border-bottom">[프리미엄]롤렌 실키 롱 원피스</h5>
<div class="mb-2">
<!-- 글자를 흐릿하게 만든다. -->
<button class="btn btn-ontline-dark btn-sm">Q & A</button>
<button class="btn btn-ontline-dark btn-sm">REVIEW</button>
</div>
<p class="card-text text-muted mb-2">부드러움과 촉촉함, 고급스러움을 모두 갖춘 원피스에요</p>
<p class="card-text mb2"><strong>157,000원</strong></p>
<div>
<span class="border p-1 bg-success text-white">당일 배송</span>
<span class="border p-1 text-danger">New</span>
</div>
</div>
</div>
</div>
<div class="col-3 col md-4 col-sm-6 col-xs-12">
<div class="card mb-3">
<img class="card-img-top" src="resources/KakaoTalk_20211117_113831597.jpg">
<div class="card-body">
<h5 class="card-title border-bottom">[프리미엄]롤렌 실키 롱 원피스</h5>
<div class="mb-2">
<!-- 글자를 흐릿하게 만든다. -->
<button class="btn btn-ontline-dark btn-sm">Q & A</button>
<button class="btn btn-ontline-dark btn-sm">REVIEW</button>
</div>
<p class="card-text text-muted mb-2">부드러움과 촉촉함, 고급스러움을 모두 갖춘 원피스에요</p>
<p class="card-text mb2"><strong>157,000원</strong></p>
<div>
<span class="border p-1 bg-success text-white">당일 배송</span>
<span class="border p-1 text-danger">New</span>
</div>
</div>
</div>
</div>
<div class="col-3 col md-4 col-sm-6 col-xs-12">
<!-- row안에는 복사를 해주어야한다. -->
<div class="card mb-3">
<img class="card-img-top" src="resources/KakaoTalk_20211117_113831597.jpg">
<div class="card-body">
<h5 class="card-title border-bottom">[프리미엄]롤렌 실키 롱 원피스</h5>
<div class="mb-2">
<!-- 글자를 흐릿하게 만든다. -->
<button class="btn btn-ontline-dark btn-sm">Q & A</button>
<button class="btn btn-ontline-dark btn-sm">REVIEW</button>
</div>
<p class="card-text text-muted mb-2">부드러움과 촉촉함, 고급스러움을 모두 갖춘 원피스에요</p>
<p class="card-text mb2"><strong>157,000원</strong></p>
<div>
<span class="border p-1 bg-success text-white">당일 배송</span>
<span class="border p-1 text-danger">New</span>
</div>
</div>
</div>
</div>
<div class="col-3">
<div class="card mb-3">
<img class="card-img-top" src="resources/KakaoTalk_20211117_113831597.jpg">
<div class="card-body">
<h5 class="card-title border-bottom">[프리미엄]롤렌 실키 롱 원피스</h5>
<div class="mb-2">
<!-- 글자를 흐릿하게 만든다. -->
<button class="btn btn-ontline-dark btn-sm">Q & A</button>
<button class="btn btn-ontline-dark btn-sm">REVIEW</button>
</div>
<p class="card-text text-muted mb-2">부드러움과 촉촉함, 고급스러움을 모두 갖춘 원피스에요</p>
<p class="card-text mb2"><strong>157,000원</strong></p>
<div>
<span class="border p-1 bg-success text-white">당일 배송</span>
<span class="border p-1 text-danger">New</span>
</div>
</div>
</div>
</div>
<div class="col-3">
<div class="card mb-3">
<img class="card-img-top" src="resources/KakaoTalk_20211117_113831597.jpg">
<div class="card-body">
<h5 class="card-title border-bottom">[프리미엄]롤렌 실키 롱 원피스</h5>
<div class="mb-2">
<!-- 글자를 흐릿하게 만든다. -->
<button class="btn btn-ontline-dark btn-sm">Q & A</button>
<button class="btn btn-ontline-dark btn-sm">REVIEW</button>
</div>
<p class="card-text text-muted mb-2">부드러움과 촉촉함, 고급스러움을 모두 갖춘 원피스에요</p>
<p class="card-text mb2"><strong>157,000원</strong></p>
<div>
<span class="border p-1 bg-success text-white">당일 배송</span>
<span class="border p-1 text-danger">New</span>
</div>
</div>
</div>
</div> <div class="col-3">
<div class="card mb-3">
<img class="card-img-top" src="resources/KakaoTalk_20211117_113831597.jpg">
<div class="card-body">
<h5 class="card-title border-bottom">[프리미엄]롤렌 실키 롱 원피스</h5>
<div class="mb-2">
<!-- 글자를 흐릿하게 만든다. -->
<button class="btn btn-ontline-dark btn-sm">Q & A</button>
<button class="btn btn-ontline-dark btn-sm">REVIEW</button>
</div>
<p class="card-text text-muted mb-2">부드러움과 촉촉함, 고급스러움을 모두 갖춘 원피스에요</p>
<p class="card-text mb2"><strong>157,000원</strong></p>
<div>
<span class="border p-1 bg-success text-white">당일 배송</span>
<span class="border p-1 text-danger">New</span>
</div>
</div>
</div>
</div>
<div class="col-3">
<div class="card mb-3">
<img class="card-img-top" src="resources/KakaoTalk_20211117_113831597.jpg">
<div class="card-body">
<h5 class="card-title border-bottom">[프리미엄]롤렌 실키 롱 원피스</h5>
<div class="mb-2">
<!-- 글자를 흐릿하게 만든다. -->
<button class="btn btn-ontline-dark btn-sm">Q & A</button>
<button class="btn btn-ontline-dark btn-sm">REVIEW</button>
</div>
<p class="card-text text-muted mb-2">부드러움과 촉촉함, 고급스러움을 모두 갖춘 원피스에요</p>
<p class="card-text mb2"><strong>157,000원</strong></p>
<div>
<span class="border p-1 bg-success text-white">당일 배송</span>
<span class="border p-1 text-danger">New</span>
</div>
</div>
</div>
</div>
<div class="col-3">
<div class="card mb-3">
<img class="card-img-top" src="resources/KakaoTalk_20211117_113831597.jpg">
<div class="card-body">
<h5 class="card-title border-bottom">[프리미엄]롤렌 실키 롱 원피스</h5>
<div class="mb-2">
<!-- 글자를 흐릿하게 만든다. -->
<button class="btn btn-ontline-dark btn-sm">Q & A</button>
<button class="btn btn-ontline-dark btn-sm">REVIEW</button>
</div>
<p class="card-text text-muted mb-2">부드러움과 촉촉함, 고급스러움을 모두 갖춘 원피스에요</p>
<p class="card-text mb2"><strong>157,000원</strong></p>
<div>
<span class="border p-1 bg-success text-white">당일 배송</span>
<span class="border p-1 text-danger">New</span>
</div>
</div>
</div>
</div>
</div>
<div class="row mb-3">
<!--
xs<576px sm>= 576px md>=768px lg>=992px xl >= 1200px xxl>=1400px
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
col-lg-3 : 뷰 포트의 너비가 992px 이상일 때는 한 행에 4개씩 배치되게 된다.
col-md-4 : 뷰 포트의 너비가 768px 이상일 때는 한 행에 3개씩 배치되게 된다.
col-sm-6 : 뷰 포트의 너비가 576px 이상일 때는 한 행에 2개씩 배치되게 된다.
col-xs-12 : 뷰 포트의 너비가 576px 미만일 때는 한 행에 1개씩 배치되게 된다.
-->
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="card mb-3">
<img class="card-img-top" src="resources/KakaoTalk_20211117_113831597.jpg">
<div class="card-body">
<h5 class="card-title border-bottom">[프리미엄]롤렌 실키 롱 원피스</h5>
<div class="mb-2">
<!-- 글자를 흐릿하게 만든다. -->
<button class="btn btn-ontline-dark btn-sm">Q & A</button>
<button class="btn btn-ontline-dark btn-sm">REVIEW</button>
</div>
<p class="card-text text-muted mb-2">부드러움과 촉촉함, 고급스러움을 모두 갖춘 원피스에요</p>
<p class="card-text mb2"><strong>157,000원</strong></p>
<div>
<span class="border p-1 bg-success text-white">당일 배송</span>
<span class="border p-1 text-danger">New</span>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
'중앙 HTA (2106기) story > bootstrap story' 카테고리의 다른 글
| form2(레이아웃) (0) | 2021.11.17 |
|---|---|
| form1(기본폼) (0) | 2021.11.17 |
| grid-sample1 (0) | 2021.11.17 |
| grid (0) | 2021.11.17 |
| listgroup (0) | 2021.11.17 |
