Tsallake zuwa babban abun ciki Tsallake zuwa kewayawa na takardu
Check
in English

Girman girma

A sauƙaƙe yi wani kashi mai faɗi ko tsayi tare da faɗin mu da tsayin kayan aikin mu.

Dangi ga iyaye

Ana samar da abubuwan amfani masu faɗi da tsayi daga API mai amfani a cikin _utilities.scss. Ya haɗa da tallafi don 25%, 50%, 75%, 100%, da autota tsohuwa. Gyara waɗannan dabi'u kamar yadda kuke buƙatar ƙirƙirar abubuwan amfani daban-daban anan.

Nisa 25%
Nisa 50%
Nisa 75%
Nisa 100%
Nisa auto
html
<div class="w-25 p-3" style="background-color: #eee;">Width 25%</div>
<div class="w-50 p-3" style="background-color: #eee;">Width 50%</div>
<div class="w-75 p-3" style="background-color: #eee;">Width 75%</div>
<div class="w-100 p-3" style="background-color: #eee;">Width 100%</div>
<div class="w-auto p-3" style="background-color: #eee;">Width auto</div>
Tsayi 25%
Tsayi 50%
Tsawo 75%
Tsayi 100%
Tsawon mota
html
<div style="height: 100px; background-color: rgba(255,0,0,0.1);">
  <div class="h-25 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 25%</div>
  <div class="h-50 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 50%</div>
  <div class="h-75 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 75%</div>
  <div class="h-100 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 100%</div>
  <div class="h-auto d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height auto</div>
</div>

Hakanan zaka iya amfani max-width: 100%;da max-height: 100%;kayan aiki da kayan aiki kamar yadda ake buƙata.

Placeholder Max-width 100%
html
<img src="..." class="mw-100" alt="...">
Matsakaicin tsayi 100%
html
<div style="height: 100px; background-color: rgba(255,0,0,.1);">
  <div class="mh-100" style="width: 100px; height: 200px; background-color: rgba(0,0,255,.1);">Max-height 100%</div>
</div>

Dangantaka da kallon kallo

Hakanan zaka iya amfani da kayan aiki don saita faɗi da tsayi dangane da wurin kallo.

<div class="min-vw-100">Min-width 100vw</div>
<div class="min-vh-100">Min-height 100vh</div>
<div class="vw-100">Width 100vw</div>
<div class="vh-100">Height 100vh</div>

Sass

API ɗin Utilities

An ayyana girman abubuwan amfani a cikin API ɗin mu a cikin scss/_utilities.scss. Koyi yadda ake amfani da API ɗin abubuwan amfani.

    "width": (
      property: width,
      class: w,
      values: (
        25: 25%,
        50: 50%,
        75: 75%,
        100: 100%,
        auto: auto
      )
    ),
    "max-width": (
      property: max-width,
      class: mw,
      values: (100: 100%)
    ),
    "viewport-width": (
      property: width,
      class: vw,
      values: (100: 100vw)
    ),
    "min-viewport-width": (
      property: min-width,
      class: min-vw,
      values: (100: 100vw)
    ),
    "height": (
      property: height,
      class: h,
      values: (
        25: 25%,
        50: 50%,
        75: 75%,
        100: 100%,
        auto: auto
      )
    ),
    "max-height": (
      property: max-height,
      class: mh,
      values: (100: 100%)
    ),
    "viewport-height": (
      property: height,
      class: vh,
      values: (100: 100vh)
    ),
    "min-viewport-height": (
      property: min-height,
      class: min-vh,
      values: (100: 100vh)
    ),