جعبه

یک box سفید شامل المان های دیگر

رنگ ندارد
اندازه ندارد
متغیر ندارد

المان box به سادگی یک بخش است که داری shadow، border، radius و padding است.
به عنوان مثال، می توانید یک شی رسانه ای در آن قرار دهید:

Image

John Smith @johnsmith 31m
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است.


<div class="box">
  <article class="media">
    <div class="media-left">
      <figure class="image is-64x64">
        <img src="https://bulma.io/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>
          لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است.
        </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>

متغیرها #

برای شخصی سازی این کامپوننت می توانید از این متغیرها استفاده کنید. قبل از وارد کردن Bulma یک یا چند متغیر مورد از متغیر هارا به سادگی تنظیم کنید.یاد بگیرید چگونه.

نام نوع مقدار پیش فرض مقدار محاسبه شده
نام نوع مقدار پیش فرض مقدار محاسبه شده
$box-color color $text hsl(0, 0%, 29%)
$box-background-color color $scheme-main hsl(0, 0%, 100%)
$box-radius size $radius-large 6px
$box-shadow size 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02)
$box-padding size 1.25rem
$box-link-hover-shadow size 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0 0 1px $link
$box-link-active-shadow size inset 0 1px 2px rgba($scheme-invert, 0.2), 0 0 0 1px $link