RFS

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-rightva padding-bottomning 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);
}

!importantSiz xohlagan qiymatga qo'shishingiz mumkin:

.selector {
  @include padding(2.5rem !important);
}

Funktsiyalardan foydalanish

Qo'shimchalardan foydalanishni istamasangiz, ikkita funktsiya ham mavjud:

• rfs-value()remagar qiymat o'tkazilsa, qiymatni qiymatga aylantiradi, pxboshqa 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 .