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