이것은 로그인창을 만들때 굉장히 유용하다.
panel-heading과 panel-body로 나누어져서 작성이 된다.
콤포넌트 · 부트스트랩
Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
bootstrapk.com
여기서 panel 부분을 찾아서 참고하면 된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>부트스트랩</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
<div class="container" style="padding-top:100px;">
<div class="panel panel-default">
<div class="panel-heading">
bootstrap 수업
</div>
<div class="panel-body">
안녕하세요 <br />
안녕하세요 <br />
안녕하세요 <br />
안녕하세요 <br />
안녕하세요 <br />
안녕하세요
</div>
</div>
</div>
</body>
</html>
'부트스트랩 > 컴포넌트' 카테고리의 다른 글
| 컴포넌트 - 네비게이션 (jQuery cnd + Bootstrap Legacy + 부트스트랩 컴포넌트) (0) | 2021.01.18 |
|---|---|
| 컴포넌트 - 폼 (0) | 2021.01.18 |
| 컴포넌트 - 테이블 (0) | 2021.01.18 |
| 컴포넌트 - 버튼 (0) | 2021.01.18 |