મુખ્ય સામગ્રી પર જાઓ ડૉક્સ નેવિગેશન પર જાઓ
in English

ઉપયોગિતા API

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

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

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

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

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

કસ્ટમ વર્ગ ઉપસર્ગ

classસંકલિત CSS માં વપરાતા વર્ગ ઉપસર્ગને બદલવા માટે વિકલ્પનો ઉપયોગ કરો :

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

આઉટપુટ:

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

રાજ્યો

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

ઉપયોગિતાઓ બદલવી

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

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

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

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

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

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

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

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@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%),
        ),
      ),
    ),
  )
);

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

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

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

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

આ હવે દરેક બ્રેકપોઇન્ટની .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/utilities";

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

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

જૂથ કીને પર સેટ કરીને કોઈપણ મૂળભૂત ઉપયોગિતાઓને દૂર કરો null. ઉદાહરણ તરીકે, અમારી બધી widthઉપયોગિતાઓને દૂર કરવા માટે, એક બનાવો $utilities map-mergeઅને અંદર ઉમેરો "width": null.

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

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

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નિયંત્રણ નિર્દેશને આભારી છે .