ઉપયોગિતા API

યુટિલિટી API એ યુટિલિટી ક્લાસ જનરેટ કરવા માટે Sass-આધારિત ટૂલ છે.

આ પૃષ્ઠ પર

બુટસ્ટ્રેપ યુટિલિટીઝ અમારી યુટિલિટી API સાથે જનરેટ થાય છે અને તેનો ઉપયોગ Sass દ્વારા ઉપયોગિતા વર્ગોના અમારા ડિફોલ્ટ સેટને સંશોધિત કરવા અથવા વિસ્તારવા માટે કરી શકાય છે. અમારું યુટિલિટી API વિવિધ વિકલ્પો સાથે વર્ગોના કુટુંબો બનાવવા માટે Sass નકશા અને કાર્યોની શ્રેણી પર આધારિત છે. જો તમે Sass નકશાથી અજાણ હોવ, તો પ્રારંભ કરવા માટે સત્તાવાર Sass દસ્તાવેજો પર વાંચો .

$utilitiesનકશામાં અમારી તમામ ઉપયોગિતાઓ શામેલ છે અને જો હાજર હોય તો પછીથી તમારા કસ્ટમ નકશા સાથે મર્જ કરવામાં આવે છે $utilities. યુટિલિટી મેપમાં યુટિલિટી ગ્રૂપની મુખ્ય યાદી છે જે નીચેના વિકલ્પોને સ્વીકારે છે:

વિકલ્પ	પ્રકાર	ડિફૉલ્ટ મૂલ્ય	વર્ણન
`property`	જરૂરી છે	-	પ્રોપર્ટીનું નામ, આ સ્ટ્રિંગ અથવા સ્ટ્રિંગ્સની એરે હોઈ શકે છે (દા.ત., આડા પેડિંગ્સ અથવા માર્જિન).
`values`	જરૂરી છે	-	મૂલ્યોની સૂચિ, અથવા જો તમે વર્ગનું નામ મૂલ્ય જેવું જ ન હોય તો નકશો. જો `null`નકશા કી તરીકે ઉપયોગ થાય છે, `class`તો વર્ગના નામ સાથે આગળ લખેલ નથી.
`class`	વૈકલ્પિક	નલ	જનરેટ કરેલ વર્ગનું નામ. જો પ્રદાન કરેલ ન હોય અને `property`સ્ટ્રિંગ્સનો એરે છે, `class`તો એરેના પ્રથમ ઘટક પર ડિફોલ્ટ થશે `property`. જો પૂરી પાડવામાં આવેલ નથી અને `property`તે સ્ટ્રિંગ છે, તો `values`કીનો ઉપયોગ `class`નામો માટે થાય છે.
`css-var`	વૈકલ્પિક	`false`	CSS નિયમોને બદલે CSS ચલ જનરેટ કરવા માટે બુલિયન.
`css-variable-name`	વૈકલ્પિક	નલ	નિયમોની અંદર CSS વેરીએબલ માટે કસ્ટમ અન-પ્રીફિક્સ નામ.
`local-vars`	વૈકલ્પિક	નલ	CSS નિયમો ઉપરાંત જનરેટ કરવા માટે સ્થાનિક CSS ચલોનો નકશો.
`state`	વૈકલ્પિક	નલ	જનરેટ કરવા માટે સ્યુડો-ક્લાસ ચલોની યાદી (દા.ત., `:hover`અથવા ).`:focus`
`responsive`	વૈકલ્પિક	`false`	બુલિયન સૂચવે છે કે શું પ્રતિભાવશીલ વર્ગો જનરેટ થવા જોઈએ.
`rfs`	વૈકલ્પિક	`false`	RFS સાથે પ્રવાહી રીસ્કેલિંગને સક્ષમ કરવા માટે બુલિયન .
`print`	વૈકલ્પિક	`false`	બુલિયન સૂચવે છે કે શું પ્રિન્ટ વર્ગો જનરેટ કરવાની જરૂર છે.
`rtl`	વૈકલ્પિક	`true`	બુલિયન સૂચવે છે કે શું ઉપયોગિતા RTL માં રાખવી જોઈએ.

API સમજાવ્યું

$utilitiesબધા ઉપયોગિતા ચલો અમારી _utilities.scssસ્ટાઈલશીટમાં વેરીએબલમાં ઉમેરવામાં આવે છે . ઉપયોગિતાઓનું દરેક જૂથ કંઈક આના જેવું લાગે છે:

$utilities: (
  "opacity": (
    property: opacity,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);

જે નીચેનાને આઉટપુટ કરે છે:

.opacity-0 { opacity: 0; }
.opacity-25 { opacity: .25; }
.opacity-50 { opacity: .5; }
.opacity-75 { opacity: .75; }
.opacity-100 { opacity: 1; }

મિલકત

જરૂરી propertyકી કોઈપણ ઉપયોગિતા માટે સેટ કરેલી હોવી જોઈએ અને તેમાં માન્ય CSS પ્રોપર્ટી હોવી જોઈએ. આ ગુણધર્મનો ઉપયોગ જનરેટ કરેલ ઉપયોગિતાના નિયમોમાં થાય છે. જ્યારે classકી અવગણવામાં આવે છે, ત્યારે તે ડિફોલ્ટ ક્લાસ નામ તરીકે પણ કામ કરે છે. text-decorationઉપયોગિતાને ધ્યાનમાં લો :

$utilities: (
  "text-decoration": (
    property: text-decoration,
    values: none underline line-through
  )
);

આઉટપુટ:

.text-decoration-none { text-decoration: none !important; }
.text-decoration-underline { text-decoration: underline !important; }
.text-decoration-line-through { text-decoration: line-through !important; }

મૂલ્યો

જનરેટ કરેલ વર્ગના નામો અને નિયમોમાં valuesઉલ્લેખિત માટે કયા મૂલ્યોનો ઉપયોગ કરવો જોઈએ તે સ્પષ્ટ કરવા માટે કીનો ઉપયોગ કરો . propertyસૂચિ અથવા નકશો હોઈ શકે છે (ઉપયોગિતાઓમાં અથવા Sass ચલમાં સેટ કરેલ છે).

સૂચિ તરીકે, જેમ કે text-decorationઉપયોગિતાઓ સાથે :

values: none underline line-through

નકશા તરીકે, જેમ કે opacityઉપયોગિતાઓ સાથે :

values: (
  0: 0,
  25: .25,
  50: .5,
  75: .75,
  100: 1,
)

Sass ચલ તરીકે કે જે યાદી અથવા નકશો સેટ કરે છે, જેમ કે અમારી positionઉપયોગિતાઓમાં :

values: $position-values

વર્ગ

classસંકલિત CSS માં વપરાતા વર્ગ ઉપસર્ગને બદલવા માટે વિકલ્પનો ઉપયોગ કરો . ઉદાહરણ તરીકે, માંથી બદલવા .opacity-*માટે .o-*:

$utilities: (
  "opacity": (
    property: opacity,
    class: o,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);

આઉટપુટ:

.o-0 { opacity: 0 !important; }
.o-25 { opacity: .25 !important; }
.o-50 { opacity: .5 !important; }
.o-75 { opacity: .75 !important; }
.o-100 { opacity: 1 !important; }

જો , દરેક કી class: nullમાટે વર્ગો જનરેટ કરે છે :values

$utilities: (
  "visibility": (
    property: visibility,
    class: null,
    values: (
      visible: visible,
      invisible: hidden,
    )
  )
);

આઉટપુટ:

.visible { visibility: visible !important; }
.invisible { visibility: hidden !important; }

CSS ચલ ઉપયોગિતાઓ

css-varબુલિયન વિકલ્પને પર સેટ કરો અને API સામાન્ય નિયમોને trueબદલે આપેલ પસંદગીકાર માટે સ્થાનિક CSS વેરીએબલ્સ જનરેટ કરશે . વર્ગના નામ કરતાં અલગ CSS વેરીએબલ નામ સેટ કરવા માટે property: valueવૈકલ્પિક ઉમેરો .css-variable-name

અમારી .text-opacity-*ઉપયોગિતાઓને ધ્યાનમાં લો. જો આપણે css-variable-nameવિકલ્પ ઉમેરીશું, તો અમને કસ્ટમ આઉટપુટ મળશે.

$utilities: (
  "text-opacity": (
    css-var: true,
    css-variable-name: text-alpha,
    class: text-opacity,
    values: (
      25: .25,
      50: .5,
      75: .75,
      100: 1
    )
  ),
);

આઉટપુટ:

.text-opacity-25 { --bs-text-alpha: .25; }
.text-opacity-50 { --bs-text-alpha: .5; }
.text-opacity-75 { --bs-text-alpha: .75; }
.text-opacity-100 { --bs-text-alpha: 1; }

સ્થાનિક CSS ચલો

Sass નકશાનો ઉલ્લેખ કરવા માટે વિકલ્પનો ઉપયોગ કરો local-varsજે યુટિલિટી ક્લાસના નિયમોમાં સ્થાનિક CSS ચલો જનરેટ કરશે. મહેરબાની કરીને નોંધ કરો કે જનરેટ કરેલા CSS નિયમોમાં તે સ્થાનિક CSS ચલોનો ઉપયોગ કરવા માટે વધારાના કામની જરૂર પડી શકે છે. ઉદાહરણ તરીકે, અમારી .bg-*ઉપયોગિતાઓને ધ્યાનમાં લો:

$utilities: (
  "background-color": (
    property: background-color,
    class: bg,
    local-vars: (
      "bg-opacity": 1
    ),
    values: map-merge(
      $utilities-bg-colors,
      (
        "transparent": transparent
      )
    )
  )
);

આઉટપુટ:

.bg-primary {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important;
}

રાજ્યો

stateસ્યુડો-ક્લાસ ભિન્નતા પેદા કરવા માટે વિકલ્પનો ઉપયોગ કરો . સ્યુડો-ક્લાસનું ઉદાહરણ છે :hoverઅને :focus. જ્યારે રાજ્યોની સૂચિ પ્રદાન કરવામાં આવે છે, ત્યારે તે સ્યુડો-ક્લાસ માટે વર્ગનામો બનાવવામાં આવે છે. ઉદાહરણ તરીકે, હોવર પર અસ્પષ્ટતા બદલવા માટે, ઉમેરો state: hoverઅને તમે .opacity-hover:hoverતમારા સંકલિત CSSમાં મેળવી શકશો.

બહુવિધ સ્યુડો-વર્ગોની જરૂર છે? અવકાશ-વિભાજિત રાજ્યોની સૂચિનો ઉપયોગ કરો: state: hover focus.

$utilities: (
  "opacity": (
    property: opacity,
    class: opacity,
    state: hover,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);

આઉટપુટ:

.opacity-0-hover:hover { opacity: 0 !important; }
.opacity-25-hover:hover { opacity: .25 !important; }
.opacity-50-hover:hover { opacity: .5 !important; }
.opacity-75-hover:hover { opacity: .75 !important; }
.opacity-100-hover:hover { opacity: 1 !important; }

પ્રતિભાવશીલ

તમામ બ્રેકપોઇન્ટresponsive પર પ્રતિભાવશીલ ઉપયોગિતાઓ (દા.ત., .opacity-md-25) બનાવવા માટે બુલિયન ઉમેરો .

$utilities: (
  "opacity": (
    property: opacity,
    responsive: true,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);

આઉટપુટ:

.opacity-0 { opacity: 0 !important; }
.opacity-25 { opacity: .25 !important; }
.opacity-50 { opacity: .5 !important; }
.opacity-75 { opacity: .75 !important; }
.opacity-100 { opacity: 1 !important; }

@media (min-width: 576px) {
  .opacity-sm-0 { opacity: 0 !important; }
  .opacity-sm-25 { opacity: .25 !important; }
  .opacity-sm-50 { opacity: .5 !important; }
  .opacity-sm-75 { opacity: .75 !important; }
  .opacity-sm-100 { opacity: 1 !important; }
}

@media (min-width: 768px) {
  .opacity-md-0 { opacity: 0 !important; }
  .opacity-md-25 { opacity: .25 !important; }
  .opacity-md-50 { opacity: .5 !important; }
  .opacity-md-75 { opacity: .75 !important; }
  .opacity-md-100 { opacity: 1 !important; }
}

@media (min-width: 992px) {
  .opacity-lg-0 { opacity: 0 !important; }
  .opacity-lg-25 { opacity: .25 !important; }
  .opacity-lg-50 { opacity: .5 !important; }
  .opacity-lg-75 { opacity: .75 !important; }
  .opacity-lg-100 { opacity: 1 !important; }
}

@media (min-width: 1200px) {
  .opacity-xl-0 { opacity: 0 !important; }
  .opacity-xl-25 { opacity: .25 !important; }
  .opacity-xl-50 { opacity: .5 !important; }
  .opacity-xl-75 { opacity: .75 !important; }
  .opacity-xl-100 { opacity: 1 !important; }
}

@media (min-width: 1400px) {
  .opacity-xxl-0 { opacity: 0 !important; }
  .opacity-xxl-25 { opacity: .25 !important; }
  .opacity-xxl-50 { opacity: .5 !important; }
  .opacity-xxl-75 { opacity: .75 !important; }
  .opacity-xxl-100 { opacity: 1 !important; }
}

છાપો

printવિકલ્પને સક્ષમ કરવાથી પ્રિન્ટ માટે ઉપયોગિતા વર્ગો પણ જનરેટ થશે, જે ફક્ત @media print { ... }મીડિયા ક્વેરીમાં જ લાગુ થાય છે.

$utilities: (
  "opacity": (
    property: opacity,
    print: true,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);

આઉટપુટ:

.opacity-0 { opacity: 0 !important; }
.opacity-25 { opacity: .25 !important; }
.opacity-50 { opacity: .5 !important; }
.opacity-75 { opacity: .75 !important; }
.opacity-100 { opacity: 1 !important; }

@media print {
  .opacity-print-0 { opacity: 0 !important; }
  .opacity-print-25 { opacity: .25 !important; }
  .opacity-print-50 { opacity: .5 !important; }
  .opacity-print-75 { opacity: .75 !important; }
  .opacity-print-100 { opacity: 1 !important; }
}

મહત્વ

API દ્વારા જનરેટ કરવામાં આવતી તમામ ઉપયોગિતાઓમાં !importantતે સુનિશ્ચિત કરવા માટેનો સમાવેશ થાય છે કે તેઓ હેતુ મુજબ ઘટકો અને મોડિફાયર વર્ગોને ઓવરરાઇડ કરે છે. તમે આ સેટિંગને $enable-important-utilitiesવેરીએબલ સાથે વૈશ્વિક સ્તરે ટૉગલ કરી શકો છો (ડિફોલ્ટ માટે true).

API નો ઉપયોગ કરીને

હવે તમે યુટિલિટી API કેવી રીતે કામ કરે છે તેનાથી પરિચિત છો, તમારા પોતાના કસ્ટમ વર્ગો કેવી રીતે ઉમેરવું અને અમારી ડિફોલ્ટ ઉપયોગિતાઓને કેવી રીતે સંશોધિત કરવી તે શીખો.

ઉપયોગિતાઓને ઓવરરાઇડ કરો

સમાન કીનો ઉપયોગ કરીને હાલની ઉપયોગિતાઓને ઓવરરાઇડ કરો. ઉદાહરણ તરીકે, જો તમને વધારાના રિસ્પોન્સિવ ઓવરફ્લો યુટિલિટી ક્લાસ જોઈએ છે, તો તમે આ કરી શકો છો:

$utilities: (
  "overflow": (
    responsive: true,
    property: overflow,
    values: visible hidden scroll auto,
  ),
);

ઉપયોગિતાઓ ઉમેરો

$utilitiesનવી ઉપયોગિતાઓને ડિફોલ્ટ નકશામાં એક સાથે ઉમેરી શકાય છે map-merge. ખાતરી કરો કે અમારી જરૂરી Sass ફાઇલો અને _utilities.scssપહેલા આયાત કરવામાં આવી છે, પછી map-mergeતમારી વધારાની ઉપયોગિતાઓને ઉમેરવા માટેનો ઉપયોગ કરો. cursorઉદાહરણ તરીકે, ત્રણ મૂલ્યો સાથે પ્રતિભાવશીલ ઉપયોગિતા કેવી રીતે ઉમેરવી તે અહીં છે .

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities,
  (
    "cursor": (
      property: cursor,
      class: cursor,
      responsive: true,
      values: auto pointer grab,
    )
  )
);

@import "bootstrap/scss/utilities/api";

ઉપયોગિતાઓને સંશોધિત કરો

$utilitiesડિફૉલ્ટ નકશામાં map-getઅને map-mergeકાર્યો સાથે હાલની ઉપયોગિતાઓને સંશોધિત કરો . નીચેના ઉદાહરણમાં, અમે widthઉપયોગિતાઓમાં વધારાની કિંમત ઉમેરી રહ્યા છીએ. પ્રારંભિક સાથે પ્રારંભ કરો map-mergeઅને પછી સ્પષ્ટ કરો કે તમે કઈ ઉપયોગિતાને સંશોધિત કરવા માંગો છો. ત્યાંથી, ઉપયોગિતાના વિકલ્પો અને મૂલ્યોને ઍક્સેસ કરવા અને સંશોધિત કરવા માટે નેસ્ટેડ "width"નકશાને આનયન કરો.map-get

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities,
  (
    "width": map-merge(
      map-get($utilities, "width"),
      (
        values: map-merge(
          map-get(map-get($utilities, "width"), "values"),
          (10: 10%),
        ),
      ),
    ),
  )
);

@import "bootstrap/scss/utilities/api";

પ્રતિભાવ સક્ષમ કરો

તમે અસ્તિત્વમાં રહેલા ઉપયોગિતાઓના સેટ માટે રિસ્પોન્સિવ ક્લાસને સક્ષમ કરી શકો છો જે હાલમાં ડિફૉલ્ટ રૂપે રિસ્પોન્સિવ નથી. ઉદાહરણ તરીકે, borderવર્ગોને પ્રતિભાવશીલ બનાવવા માટે:

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities, (
    "border": map-merge(
      map-get($utilities, "border"),
      ( responsive: true ),
    ),
  )
);

@import "bootstrap/scss/utilities/api";

આ હવે દરેક બ્રેકપોઇન્ટની .borderઅને તેના માટે પ્રતિભાવશીલ ભિન્નતા જનરેટ કરશે . .border-0તમારું જનરેટ કરેલ CSS આના જેવું દેખાશે:

.border { ... }
.border-0 { ... }

@media (min-width: 576px) {
  .border-sm { ... }
  .border-sm-0 { ... }
}

@media (min-width: 768px) {
  .border-md { ... }
  .border-md-0 { ... }
}

@media (min-width: 992px) {
  .border-lg { ... }
  .border-lg-0 { ... }
}

@media (min-width: 1200px) {
  .border-xl { ... }
  .border-xl-0 { ... }
}

@media (min-width: 1400px) {
  .border-xxl { ... }
  .border-xxl-0 { ... }
}

ઉપયોગિતાઓનું નામ બદલો

v4 ઉપયોગિતાઓ ખૂટે છે, અથવા અન્ય નામકરણ સંમેલન માટે વપરાય છે? યુટિલિટીઝ API નો ઉપયોગ classઆપેલ યુટિલિટીના પરિણામને ઓવરરાઇડ કરવા માટે કરી શકાય છે-ઉદાહરણ તરીકે, .ms-*ઉપયોગિતાઓનું નામ જૂનામાં બદલવા માટે .ml-*:

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities, (
    "margin-start": map-merge(
      map-get($utilities, "margin-start"),
      ( class: ml ),
    ),
  )
);

@import "bootstrap/scss/utilities/api";

ઉપયોગિતાઓ દૂર કરો

map-remove()Sass ફંક્શન વડે કોઈપણ ડિફોલ્ટ ઉપયોગિતાઓને દૂર કરો .

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

// Remove multiple utilities with a comma-separated list
$utilities: map-remove($utilities, "width", "float");

@import "bootstrap/scss/utilities/api";

તમે map-merge()Sass ફંક્શનનોnull પણ ઉપયોગ કરી શકો છો અને ઉપયોગિતાને દૂર કરવા માટે ગ્રુપ કી સેટ કરી શકો છો.

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities,
  (
    "width": null
  )
);

@import "bootstrap/scss/utilities/api";

ઉમેરો, દૂર કરો, સંશોધિત કરો

તમે map-merge()Sass ફંક્શન વડે એકસાથે ઘણી બધી ઉપયોગિતાઓને ઉમેરી, દૂર અને સંશોધિત કરી શકો છો . તમે પહેલાનાં ઉદાહરણોને એક મોટા નકશામાં કેવી રીતે જોડી શકો તે અહીં છે.

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities,
  (
    // Remove the `width` utility
    "width": null,

    // Make an existing utility responsive
    "border": map-merge(
      map-get($utilities, "border"),
      ( responsive: true ),
    ),

    // Add new utilities
    "cursor": (
      property: cursor,
      class: cursor,
      responsive: true,
      values: auto pointer grab,
    )
  )
);

@import "bootstrap/scss/utilities/api";

RTL માં ઉપયોગિતા દૂર કરો

કેટલાક કિનારો RTL સ્ટાઇલને મુશ્કેલ બનાવે છે, જેમ કે અરબીમાં લાઇન બ્રેક્સ. rtlઆમ આ વિકલ્પને સેટ કરીને RTL આઉટપુટમાંથી ઉપયોગિતાઓને છોડી શકાય છે false:

$utilities: (
  "word-wrap": (
    property: word-wrap word-break,
    class: text,
    values: (break: break-word),
    rtl: false
  ),
);

આઉટપુટ:

/* rtl:begin:remove */
.text-break {
  word-wrap: break-word !important;
  word-break: break-word !important;
}
/* rtl:end:remove */

આ RTL માં કંઈપણ આઉટપુટ કરતું નથી, RTLCSS removeનિયંત્રણ નિર્દેશને આભારી છે .