முக்கிய உள்ளடக்கத்திற்கு செல்க டாக்ஸ் வழிசெலுத்தலுக்குச் செல்லவும்
in English

அளவிடுதல்

எங்கள் அகலம் மற்றும் உயரம் பயன்பாடுகள் மூலம் எளிதாக ஒரு உறுப்பை அகலமாக அல்லது உயரமாக உருவாக்கவும்.

பெற்றோரின் உறவினர்

அகலம் மற்றும் உயரம் பயன்பாடுகள் API இல் இருந்து உருவாக்கப்படுகின்றன _utilities.scss. 25%, 50%, 75%, 100%மற்றும் autoமுன்னிருப்பாக ஆதரவு அடங்கும் . வெவ்வேறு பயன்பாடுகளை இங்கே உருவாக்க வேண்டியிருப்பதால், அந்த மதிப்புகளை மாற்றவும்.

அகலம் 25%
அகலம் 50%
அகலம் 75%
அகலம் 100%
அகலம் தானாக
<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>
உயரம் 25%
உயரம் 50%
உயரம் 75%
உயரம் 100%
உயரம் ஆட்டோ
<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>

தேவைக்கேற்ப நீங்கள் பயன்படுத்தலாம் max-width: 100%;மற்றும் பயன்பாடுகள்.max-height: 100%;

Placeholder Max-width 100%
<img src="..." class="mw-100" alt="...">
அதிகபட்ச உயரம் 100%
<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>

காட்சித் துறையுடன் தொடர்புடையது

வியூபோர்ட்டுடன் தொடர்புடைய அகலத்தையும் உயரத்தையும் அமைக்க நீங்கள் பயன்பாடுகளைப் பயன்படுத்தலாம்.

<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>

சாஸ்

பயன்பாடுகள் API

அளவீட்டு ���யன்பாடுகள் எங்கள் பயன்பாடுகள் API இல் அறிவிக்கப்படுகின்றன scss/_utilities.scss. பயன்பாடுகள் API ஐ எவ்வாறு பயன்படுத்துவது என்பதை அறிக.

    "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)
    ),