RFS
Bidh einnsean ath-mheudachadh Bootstrap gu freagairteach a’ sgèile thogalaichean CSS cumanta gus an àite a tha ri fhaighinn a chleachdadh nas fheàrr thairis air puirt-seallaidh agus innealan.
Dè a th' ann an RFS?
Tha pròiseact taobh Bootstrap RFS na einnsean ath-mheudachadh aonad a chaidh a leasachadh an toiseach gus meudan cruth-clò ath-mheudachadh (mar sin an giorrachadh airson Meudan Cruth Responsive). An-diugh tha RFS comasach air a’ mhòr-chuid de thogalaichean CSS ath-sgèileadh le luachan aonad mar margin
, padding
, , border-radius
, no eadhon box-shadow
.
Bidh an uidheamachd gu fèin-obrachail a’ tomhas nan luachan iomchaidh stèidhichte air tomhasan sealladh-seallaidh a’ bhrobhsair. Bidh e air a chur ri chèile ann an calc()
gnìomhan le measgachadh de rem
dh'aonadan sealladh agus sealladh gus an giùlan sgèile freagairteach a chomasachadh.
A 'cleachdadh RFS
Tha na measgachaidhean air an toirt a-steach do Bootstrap agus tha iad rim faighinn aon uair ‘s gu bheil thu a’ toirt a-steach Bootstrap's scss
. Faodar RFS a chuir a-steach leis fhèin cuideachd ma tha feum air.
A 'cleachdadh measgachadh
Tha rfs()
làmhan-goirid aig a’ mheasgachadh airson font-size
, margin
, margin-top
, margin-right
, margin-bottom
, margin-left
, padding
, padding-top
, padding-right
, padding-bottom
, agus padding-left
. Faic an eisimpleir gu h-ìosal airson stòr Sass agus CSS air a chur ri chèile.
.title {
@include font-size(4rem);
}
.title {
font-size: calc(1.525rem + 3.3vw);
}
@media (min-width: 1200px) {
.title {
font-size: 4rem;
}
}
Faodar seilbh sam bith eile a thoirt don rfs()
mheasgachadh mar seo:
.selector {
@include rfs(4rem, border-radius);
}
!important
faodar cuideachd a chur ris ge bith dè an luach a tha thu ag iarraidh:
.selector {
@include padding(2.5rem !important);
}
A 'cleachdadh ghnìomhan
Nuair nach eil thu airson na in-ghabhail a chleachdadh, tha dà ghnìomh ann cuideachd:
rfs-value()
tionndaidh luach gurem
luach ma thèidpx
luach seachad, ann an cùisean eile tillidh e an aon toradh.rfs-fluid-value()
a’ tilleadh an tionndadh siùbhlach de luach ma tha feum air an togalach ath-sgèile.
San eisimpleir seo, bidh sinn a’ cleachdadh aon de na measgachaidhean brisidh freagairteach togte Bootstrap gus dìreach stoidhle a chuir an sàs fon àite lg
brisidh.
.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 */
}
}
Sgrìobhainnean leudaichte
Tha RFS na phròiseact air leth fon bhuidheann Bootstrap. Gheibhear barrachd mu RFS agus an rèiteachadh aige air an stòr GitHub aige .