Button
이번시간은 버튼에 대해서 알아보겠습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Bulma Button</title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css"
/>
</head>
<body>
<section class="section">
<div class="container">
<h1 class="title">Button</h1>
<p class="subtitle"><strong>Bulma</strong> Button</p>
<h2 class="title">색상</h2>
<a class="button">기본버튼: button</a> <br /><br />
<a class="button is-primary">button is-primary</a>
<a class="button is-link">button is-link</a>
<a class="button is-info">button is-info</a>
<a class="button is-success">button is-success</a>
<a class="button is-warning">button is-warning</a>
<a class="button is-danger">button is-danger</a>
</div>
<div class="container">
<h2 class="title">크기</h2>
<div>
<a class="button is-small">button is-small</a>
<a class="button">button</a>
<a class="button is-medium">button is-medium</a>
<a class="button is-large">button is-large</a>
</div>
</div>
<div class="container">
<h2 class="title">상태</h2>
<div>
<a class="button is-primary is-outlined"
>button is-primary is-outlined</a
>
<a class="button is-loading">로딩중</a>
<a class="button" disabled>"button" disabled</a>
</div>
</div>
</section>
</body>
</html>
이렇게 필요한 클래스를 적어주는 것만으로 손쉽게 버튼 구현이 가능합니다.
728x90
'프로그램 강좌' 카테고리의 다른 글
| [javascript]reduce 배열 합계, 다양한 수식 계산 (0) | 2021.02.22 |
|---|---|
| [javascript]배열에서 제거 splice (0) | 2021.02.22 |
| [Bulma]Hello World (0) | 2020.12.12 |
| [Bulma]벌마 CSS 프레임워크 (0) | 2020.12.11 |
| [윈도우]Yarn 설치방법 (0) | 2020.12.08 |
