আৰ এফ এছ

আৰ এফ এছ কি?

বুটষ্ট্ৰেপৰ পাৰ্শ্ব প্ৰকল্প RFS এটা একক আকাৰ সলনি কৰা ইঞ্জিন যি প্ৰথমতে আখৰৰ আকাৰ সলনি কৰিবলে বিকশিত কৰা হৈছিল (সেয়েহে ইয়াক প্ৰতিক্ৰিয়াশীল আখৰৰ আকাৰৰ বাবে সংক্ষিপ্ত ৰূপ দিয়া হৈছিল) । আজিকালি RFS এ বেছিভাগ CSS বৈশিষ্ট্যসমূহক একক মানসমূহৰ সৈতে পুনৰ স্কেলিং কৰিবলৈ সক্ষম যেনে margin, padding, border-radius, বা আনকি box-shadow।

ব্ৰাউজাৰ ভিউপৰ্টৰ মাত্ৰাৰ ওপৰত ভিত্তি কৰি ব্যৱস্থাটোৱে স্বয়ংক্ৰিয়ভাৱে উপযুক্ত মানসমূহ গণনা কৰে। ইয়াক প্ৰতিক্ৰিয়াশীল স্কেলিং আচৰণ সামৰ্থবান কৰিবলে আৰু দৰ্শনপৰ্ট এককসমূহৰ calc()মিশ্ৰণৰ সৈতে ফাংচনসমূহত কম্পাইল কৰা হ'ব ।rem

RFS ব্যৱহাৰ কৰি

মিক্সিনসমূহ Bootstrap ত অন্তৰ্ভুক্ত কৰা হৈছে আৰু আপুনি Bootstrap সমূহ অন্তৰ্ভুক্ত কৰিলে উপলব্ধ হয় scss। প্ৰয়োজন হ'লে RFS স্বতন্ত্ৰ সংস্থাপন কৰিব পাৰি ।

মিক্সিন ব্যৱহাৰ কৰি

মিক্সিনৰ rfs()চৰ্টহেণ্ড আছে font-size, margin, margin-top, margin-right, margin-bottom, margin-left, padding, padding-top, padding-right, padding-bottom, আৰু padding-left. উৎস Sass আৰু কম্পাইল কৰা CSS ৰ বাবে তলৰ উদাহৰণ চাওক।

.title {
  @include font-size(4rem);
}

.title {
  font-size: calc(1.525rem + 3.3vw);
}

@media (min-width: 1200px) {
  .title {
    font-size: 4rem;
  }
}

rfs()আন যিকোনো বৈশিষ্ট্য মিক্সিনলৈ এনেদৰে পাছ কৰিব পাৰি :

.selector {
  @include rfs(4rem, border-radius);
}

!importantআপুনি বিচৰা মূল্যত যোগ কৰিব পাৰি:

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

ফাংচনসমূহ ব্যৱহাৰ কৰি

যেতিয়া আপুনি includes ব্যৱহাৰ কৰিব নিবিচাৰে, তেতিয়া দুটা কাৰ্য্যও আছে:

• rfs-value()এটা মানক এটা মানলৈ ৰূপান্তৰিত কৰে remযদি এটা pxমান পাছ কৰা হয়, অন্য ক্ষেত্ৰত ই একে ফলাফল দিয়ে।
• rfs-fluid-value()এটা মানৰ তৰল সংস্কৰণ ঘূৰাই দিয়ে যদি বৈশিষ্ট্যক পুনৰ স্কেলিং কৰাৰ প্ৰয়োজন হয়।

এই উদাহৰণত, আমি কেৱল ব্ৰেকপইন্টৰ তলত ষ্টাইলিং প্ৰয়োগ কৰিবলে Bootstrap ৰ এটা বিল্ট-ইন প্ৰতিক্ৰিয়াশীল ব্ৰেকপইন্ট মিক্সিনlg ব্যৱহাৰ কৰো ।

.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 */
  }
}

সম্প্ৰসাৰিত নথিপত্ৰ

RFS হৈছে বুটষ্ট্ৰেপ প্ৰতিষ্ঠানৰ অধীনত এটা পৃথক প্ৰকল্প। RFS আৰু ইয়াৰ বিন্যাসৰ বিষয়ে অধিক ইয়াৰ GitHub ভঁৰালত পোৱা যাব ।