Կոմունալ API
Կոմունալ API-ն Sass-ի վրա հիմնված գործիք է՝ օգտակար դասեր ստեղծելու համար:
Bootstrap կոմունալ ծառայությունները ստեղծվում են մեր օգտակար API-ի միջոցով և կարող են օգտագործվել Sass-ի միջոցով փոփոխելու կամ ընդլայնելու մեր լռելյայն կոմունալ դասերի հավաքածուն: Մեր օգտակար API-ն հիմնված է Sass-ի մի շարք քարտեզների և գործառույթների վրա՝ տարբեր տարբերակներով դասերի ընտանիքներ ստեղծելու համար: Եթե դուք ծանոթ չեք Sass քարտեզներին, սկսեք կարդալ Sass-ի պաշտոնական փաստաթղթերը :
Քարտեզը $utilities
պարունակում է մեր բոլոր կոմունալ ծառայությունները և հետագայում միաձուլվում է ձեր հատուկ $utilities
քարտեզի հետ, եթե առկա է: Կոմունալ քարտեզը պարունակում է կոմունալ ծառայությունների խմբերի ստեղնավորված ցանկ, որն ընդունում է հետևյալ ընտրանքները.
Տարբերակ | Տիպ | Կանխադրված արժեք | Նկարագրություն |
---|---|---|---|
property |
Պահանջվում է | – | Սեփականության անվանումը, սա կարող է լինել տող կամ տողերի զանգված (օրինակ՝ հորիզոնական ներդիրներ կամ լուսանցքներ): |
values |
Պահանջվում է | – | Արժեքների ցանկ կամ քարտեզ, եթե չեք ցանկանում, որ դասի անվանումը նույնը լինի արժեքի հետ: Եթե null օգտագործվում է որպես քարտեզի բանալին, այն չի կազմվում: |
class |
Ընտրովի | դատարկ | Ստեղծված դասի անվանումը. Եթե տրամադրված չէ և property տողերի զանգված է, class ապա լռելյայն կլինի property զանգվածի առաջին տարրը: |
css-var |
Ընտրովի | false |
Բուլյան՝ CSS կանոնների փոխարեն 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
Դասարան
Կազմված CSS-ում օգտագործվող class
դասի նախածանցը փոխելու ընտրանքը: Օրինակ՝ փոխելու .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; }
CSS փոփոխական կոմունալ ծառայություններ
Սահմանեք css-var
բուլյան տարբերակը true
և API-ն կստեղծի տեղական CSS փոփոխականներ տվյալ ընտրիչի համար սովորական property: value
կանոնների փոխարեն: Դիտարկենք մեր .text-opacity-*
կոմունալ ծառայությունները.
$utilities: (
"text-opacity": (
css-var: true,
class: text-opacity,
values: (
25: .25,
50: .5,
75: .75,
100: 1
)
),
);
Արդյունք:
.text-opacity-25 { --bs-text-opacity: .25; }
.text-opacity-50 { --bs-text-opacity: .5; }
.text-opacity-75 { --bs-text-opacity: .75; }
.text-opacity-100 { --bs-text-opacity: 1; }
Տեղական CSS փոփոխականներ
Օգտագործեք local-vars
տարբերակը՝ նշելու Sass քարտեզը, որը կստեղծի տեղական 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/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
կառավարման հրահանգի :