Box
Box (박스)
흰색 배경과 패딩, 그리고 박스 그림자(box shadow)를 가진 아주 간단한 컨테이너예요. 다른 요소들을 담는 흰색 박스로 사용해요.
출처: 문서
본문
box 요소는 흰색 배경, 약간의 패딩, 그리고 그림자를 가진 간단한 컨테이너예요.
Example
<div class="box">I'm in a box.</div>
컨테이너 역할을 하기 때문에 form 요소 같은 다른 컴포넌트도 쉽게 담을 수 있어요.
Example
<form class="box">
<div class="field">
<label class="label">Email</label>
<div class="control">
<input class="input" type="email" placeholder="e.g. [email protected]" />
</div>
</div>
<div class="field">
<label class="label">Password</label>
<div class="control">
<input class="input" type="password" placeholder="********" />
</div>
</div>
<button class="button is-primary">Sign in</button>
</form>
또는 media 객체처럼 사용할 수도 있어요.
Example
<div class="box">
<article class="media">
<div class="media-left">
<figure class="image is-64x64">
<img src="https://bulma.io/assets/images/placeholders/128x128.png" alt="Image" />
</figure>
</div>
<div class="media-content">
<div class="content">
<p>
<strong>John Smith</strong> <small>@johnsmith</small>
<small>31m</small>
<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean
efficitur sit amet massa fringilla egestas. Nullam condimentum luctus
turpis.
</p>
</div>
<nav class="level is-mobile">
<div class="level-left">
<a class="level-item" aria-label="reply">
<span class="icon is-small">
<i class="fas fa-reply" aria-hidden="true"></i>
</span>
</a>
<a class="level-item" aria-label="retweet">
<span class="icon is-small">
<i class="fas fa-retweet" aria-hidden="true"></i>
</span>
</a>
<a class="level-item" aria-label="like">
<span class="icon is-small">
<i class="fas fa-heart" aria-hidden="true"></i>
</span>
</a>
</div>
</nav>
</div>
</article>
</div>
Sass와 CSS 변수
| Sass Variable | CSS Variable | Value |
|---|---|---|
$box-background-color |
var(--bulma-box-background-color) |
var(--bulma-scheme-main) |
$box-color |
var(--bulma-box-color) |
var(--bulma-text) |
$box-radius |
var(--bulma-box-radius) |
var(--bulma-radius-large) |
$box-shadow |
var(--bulma-box-shadow) |
var(--bulma-shadow) |
$box-padding |
var(--bulma-box-padding) |
1.25rem |
$box-link-hover-shadow |
var(--bulma-box-link-hover-shadow) |
0 0.5em 1em -0.125em hsla(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-invert-l), 0.1), 0 0 0 1px var(--bulma-link) |
$box-link-active-shadow |
var(--bulma-box-link-active-shadow) |
inset 0 1px 2px hsla(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-invert-l), 0.2), 0 0 0 1px var(--bulma-link) |