Хэрэглээний API
Хэрэглээний API нь хэрэглээний анги үүсгэх Sass дээр суурилсан хэрэгсэл юм.
Bootstrap хэрэглүүрүүд нь манай хэрэглүүрийн API-ээр үүсгэгддэг бөгөөд Sass-ээр дамжуулан бидний анхдагч хэрэглээний ангиудыг өөрчлөх эсвэл өргөтгөхөд ашиглаж болно. Манай хэрэглүүрийн API нь төрөл бүрийн сонголт бүхий ангиудын гэр бүлүүдийг үүсгэх хэд хэдэн Sass газрын зураг, функцууд дээр суурилдаг. Хэрэв та Sass газрын зургийн талаар сайн мэдэхгүй байгаа бол Sass-н албан ёсны баримт бичгүүдийг уншина уу .
Газрын зураг нь манай бүх хэрэгслийг агуулсан бөгөөд хэрэв байгаа $utilities
бол дараа нь таны захиалгат газрын зурагтай нэгтгэгдэнэ . $utilities
Хэрэглээний газрын зураг нь дараах сонголтуудыг хүлээн авах хэрэгслүүдийн бүлгүүдийн үндсэн жагсаалтыг агуулна.
Сонголт | Төрөл | Өгөгдмөл утга | Тодорхойлолт |
---|---|---|---|
property |
Шаардлагатай | – | Үл хөдлөх хөрөнгийн нэр, энэ нь мөр эсвэл мөрийн массив байж болно (жишээ нь, хэвтээ дэвсгэр эсвэл захын зай). |
values |
Шаардлагатай | – | Утгын жагсаалт эсвэл ангийн нэр нь утгатай ижил байхыг хүсэхгүй бол газрын зураг. null Газрын зургийн түлхүүр болгон ашиглавал эмхэтгээгүй болно . |
class |
Нэмэлт | null | Үүсгэсэн ангийн нэр. Хэрэв өгөөгүй property бөгөөд мөрийн массив бол массивын class эхний элементийг өгөгдмөл болгоно property . |
css-var |
Нэмэлт | false |
CSS дүрмийн оронд CSS хувьсагчийг үүсгэхийн тулд Boolean. |
local-vars |
Нэмэлт | null | CSS дүрмээс гадна үүсгэх орон нутгийн CSS хувьсагчийн газрын зураг. |
state |
Нэмэлт | null | Үүсгэх псевдо ангиллын хувилбаруудын жагсаалт (жишээ нь, :hover эсвэл :focus ). |
responsive |
Нэмэлт | false |
Хариуцлагатай анги үүсгэх эсэхийг заадаг логик. |
rfs |
Нэмэлт | false |
RFS ашиглан шингэний хэмжээг өөрчлөхийг идэвхжүүлэхийн тулд Boolean . |
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,
)
Манай position
хэрэгслүүдийн адил жагсаалт эсвэл газрын зургийг тохируулдаг Sass хувьсагчийн хувьд :
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; }
CSS хувьсах хэрэгслүүд
Боолийн css-var
сонголтыг тохируулснаар API нь ердийн дүрмийн true
оронд тухайн сонгогчийн хувьд локал 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
ангийн дүрмийн багц дотор локал CSS хувьсагчийг үүсгэх Sass газрын зургийг зааж өгөх сонголтыг ашиглана уу. Үүсгэсэн 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-*
хэрэгслүүдийн нэрийг oldish болгон өөрчлөх .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
хэрэгслийг устгахын тулд a үүсгэж $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 */
Энэ нь RTLCSS remove
хяналтын удирдамжийн ачаар RTL дээр юу ч гаргадаггүй .