RFS
Bootstrap-ning o'lchamini o'zgartirish mexanizmi ko'rish oynalari va qurilmalarda mavjud bo'sh joydan yaxshiroq foydalanish uchun umumiy CSS xususiyatlarini sezgir tarzda o'lchaydi.
RFS nima?
Bootstrap-ning RFS yon loyihasi - bu dastlab shrift o'lchamlarini o'zgartirish uchun ishlab chiqilgan birlik o'lchamini o'zgartirish mexanizmi (shuning uchun uning qisqartmasi "Responsive Shrift Sizes"). Hozirgi vaqtda RFS ko'pgina CSS xususiyatlarini margin
, padding
, border-radius
, yoki hatto kabi birlik qiymatlari bilan o'zgartirishga qodir box-shadow
.
Mexanizm avtomatik ravishda brauzer ko'rish oynasining o'lchamlari asosida tegishli qiymatlarni hisoblab chiqadi. U sezgir masshtablash xatti-harakatini ta'minlash uchun ko'rish va ko'rish birliklari calc()
aralashmasi bilan funktsiyalarga kompilyatsiya qilinadi .rem
RFS dan foydalanish
Miksinlar Bootstrap-ga kiritilgan va siz Bootstrap-ni qo'shganingizdan so'ng mavjud bo'ladi scss
. Agar kerak bo'lsa , RFS mustaqil ravishda o'rnatilishi mumkin .
Aralashmalardan foydalanish
rfs()
Miksinda , font-size
, margin
, margin-top
, margin-right
, margin-bottom
, margin-left
, padding
, padding-top
, padding-right
va padding-bottom
ning qisqartmalari mavjud padding-left
. Sass manbasi va kompilyatsiya qilingan CSS uchun quyidagi misolga qarang.
.title {
@include font-size(4rem);
}
.title {
font-size: calc(1.525rem + 3.3vw);
}
@media (min-width: 1200px) {
.title {
font-size: 4rem;
}
}
Har qanday boshqa xususiyat rfs()
miksinga shunday o'tkazilishi mumkin:
.selector {
@include rfs(4rem, border-radius);
}
!important
Siz xohlagan qiymatga qo'shishingiz mumkin:
.selector {
@include padding(2.5rem !important);
}
Funktsiyalardan foydalanish
Qo'shimchalardan foydalanishni istamasangiz, ikkita funktsiya ham mavjud:
rfs-value()
rem
agar qiymat o'tkazilsa, qiymatni qiymatga aylantiradi,px
boshqa hollarda u xuddi shu natijani qaytaradi.rfs-fluid-value()
mulkni qayta o'zgartirish kerak bo'lsa, qiymatning suyuq versiyasini qaytaradi.
Ushbu misolda biz faqat to'xtash nuqtasi ostidagi uslubni qo'llash uchun Bootstrap-ning o'rnatilgan javob beruvchi to'xtash nuqtasi miksinlaridanlg
birini ishlatamiz .
.selector {
@include media-breakpoint-down(lg) {
padding: rfs-fluid-value(2rem);
font-size: rfs-fluid-value(1.125rem);
}
}
@media (max-width: 991.98px) {
.selector {
padding: calc(1.325rem + 0.9vw);
font-size: 1.125rem; /* 1.125rem is small enough, so RFS won't rescale this */
}
}
Kengaytirilgan hujjatlar
RFS Bootstrap tashkiloti ostidagi alohida loyihadir. RFS va uning konfiguratsiyasi haqida ko'proq ma'lumotni uning GitHub omborida topish mumkin .