콤포넌트 · 부트스트랩
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
이곳에서 컴포넌트를 어떻게 사용하는지 확인해본다.
일단, 가장 기본인 버튼을 사용하는걸 보겠다.
우선 link태그에서 bootstrap 3.4.1 버전을 들고 온다.
부트스트랩에서 스타일을 입히려면 css에서 수정하는 것이 아닌, class 이름을 바꾸면 되는것이다.
<!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:50px">
<a href="" class="btn btn-default">default</a>
<a href="" class="btn btn-primary">primary</a>
<a href="" class="btn btn-success">success</a>
<a href="" class="btn btn-info">info</a>
<a href="" class="btn btn-warning">warning</a>
<a href="" class="btn btn-danger">danger</a>
</div>
</body>
</html>
'부트스트랩 > 컴포넌트' 카테고리의 다른 글
| 컴포넌트 - 네비게이션 (jQuery cnd + Bootstrap Legacy + 부트스트랩 컴포넌트) (0) | 2021.01.18 |
|---|---|
| 컴포넌트 - 폼 (0) | 2021.01.18 |
| 컴포넌트 - 패널 (0) | 2021.01.18 |
| 컴포넌트 - 테이블 (0) | 2021.01.18 |