মূল বিষয়বস্তুলৈ এৰি যাওক নথিপত্ৰ নেভিগেচনলৈ এৰি যাওক
in English

CSS চলকসমূহ

দ্ৰুত আৰু আগন্তুক ডিজাইন আৰু বিকাশৰ বাবে Bootstrap ৰ CSS স্বনিৰ্বাচিত বৈশিষ্ট্যসমূহ ব্যৱহাৰ কৰক।

বুটষ্ট্ৰেপে ইয়াৰ কমপাইল কৰা CSS ত বহুতো CSS স্বনিৰ্বাচিত বৈশিষ্ট্য (চলকসমূহ) অন্তৰ্ভুক্ত কৰে বাস্তৱ-সময় স্বনিৰ্বাচনৰ বাবে Sass পুনৰায় কম্পাইল কৰাৰ প্ৰয়োজন নোহোৱাকৈ । এইবোৰে আপোনাৰ ব্ৰাউজাৰৰ পৰিদৰ্শক, এটা ক'ড ছেণ্ডবক্স, বা সাধাৰণ প্ৰ'ট'টাইপিঙত কাম কৰাৰ সময়ত আমাৰ থিম ৰং, ব্ৰেকপইণ্ট, আৰু প্ৰাথমিক ফন্ট ষ্টেকসমূহৰ দৰে সাধাৰণতে ব্যৱহৃত মানসমূহলৈ সহজ অভিগম প্ৰদান কৰে।

আমাৰ সকলো কাষ্টম বৈশিষ্ট্যbs- তৃতীয় পক্ষৰ CSS ৰ সৈতে সংঘাত এৰাই চলিবলৈ উপসৰ্গ কৰা হৈছে।

মূল চলকসমূহ

ইয়াত আমি অন্তৰ্ভুক্ত কৰা চলকসমূহ আছে (মন কৰিব যে :rootপ্ৰয়োজনীয়) যি Bootstrap ৰ CSS লোড কৰা যিকোনো ঠাইত অভিগম কৰিব পাৰি । সেইবোৰ আমাৰ _root.scssফাইলত অৱস্থিত আৰু আমাৰ কম্পাইল কৰা dist ফাইলসমূহত অন্তৰ্ভুক্ত কৰা হৈছে।

:root {
  --bs-blue: #0d6efd;
  --bs-indigo: #6610f2;
  --bs-purple: #6f42c1;
  --bs-pink: #d63384;
  --bs-red: #dc3545;
  --bs-orange: #fd7e14;
  --bs-yellow: #ffc107;
  --bs-green: #198754;
  --bs-teal: #20c997;
  --bs-cyan: #0dcaf0;
  --bs-white: #fff;
  --bs-gray: #6c757d;
  --bs-gray-dark: #343a40;
  --bs-gray-100: #f8f9fa;
  --bs-gray-200: #e9ecef;
  --bs-gray-300: #dee2e6;
  --bs-gray-400: #ced4da;
  --bs-gray-500: #adb5bd;
  --bs-gray-600: #6c757d;
  --bs-gray-700: #495057;
  --bs-gray-800: #343a40;
  --bs-gray-900: #212529;
  --bs-primary: #0d6efd;
  --bs-secondary: #6c757d;
  --bs-success: #198754;
  --bs-info: #0dcaf0;
  --bs-warning: #ffc107;
  --bs-danger: #dc3545;
  --bs-light: #f8f9fa;
  --bs-dark: #212529;
  --bs-primary-rgb: 13, 110, 253;
  --bs-secondary-rgb: 108, 117, 125;
  --bs-success-rgb: 25, 135, 84;
  --bs-info-rgb: 13, 202, 240;
  --bs-warning-rgb: 255, 193, 7;
  --bs-danger-rgb: 220, 53, 69;
  --bs-light-rgb: 248, 249, 250;
  --bs-dark-rgb: 33, 37, 41;
  --bs-white-rgb: 255, 255, 255;
  --bs-black-rgb: 0, 0, 0;
  --bs-body-color-rgb: 33, 37, 41;
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.5;
  --bs-body-color: #212529;
  --bs-body-bg: #fff;
}

উপাদান চলকসমূহ

আমি বিভিন্ন উপাদানৰ বাবে স্থানীয় চলক হিচাপে কাষ্টম বৈশিষ্ট্যসমূহো ব্যৱহাৰ কৰিবলৈ আৰম্ভ কৰিছো। এই ধৰণে আমি আমাৰ কমপাইল কৰা CSS হ্ৰাস কৰিব পাৰো, নেষ্টেড টেবুলসমূহৰ দৰে ঠাইত শৈলীসমূহ উত্তৰাধিকাৰী নহয় সুনিশ্চিত কৰিব পাৰো, আৰু Sass কমপাইলেচনৰ পিছত বুটষ্ট্ৰেপ উপাদানসমূহৰ কিছুমান মৌলিক পুনৰায় ষ্টাইল আৰু সম্প্ৰসাৰণৰ অনুমতি দিব পাৰো।

আমি CSS চলকসমূহ কেনেকৈ ব্যৱহাৰ কৰিছো তাৰ কিছু অন্তৰ্দৃষ্টিৰ বাবে আমাৰ টেবুল নথিপত্ৰ চাওক ।

আমি আমাৰ গ্ৰীডসমূহৰ মাজেৰে CSS চলকসমূহো ব্যৱহাৰ কৰিছো—প্ৰাথমিকভাৱে নালাৰ বাবে—ভৱিষ্যতে অধিক উপাদানৰ ব্যৱহাৰ আহিব।

উদাহৰণ

CSS চলকসমূহে Sass ৰ চলকসমূহৰ সৈতে একেধৰণৰ নমনীয়তা প্ৰদান কৰে, কিন্তু ব্ৰাউজাৰলৈ সেৱা আগবঢ়োৱাৰ আগতে কম্পাইলেচনৰ প্ৰয়োজন নোহোৱাকৈ। উদাহৰণস্বৰূপে, ইয়াত আমি আমাৰ পৃষ্ঠাৰ ফন্ট আৰু লিংক শৈলীসমূহ CSS ভেৰিয়েবলসমূহৰ সৈতে ৰিছেট কৰিছো।

body {
  font: 1rem/1.5 var(--bs-font-sans-serif);
}
a {
  color: var(--bs-blue);
}

গ্ৰীড ব্ৰেকপইন্ট

আমি আমাৰ গ্ৰীড ব্ৰেকপইন্টসমূহক CSS চলক হিচাপে অন্তৰ্ভুক্ত কৰাৰ সময়ত (ৰ বাহিৰে xs), সচেতন হওক যে CSS চলকসমূহে মিডিয়া প্ৰশ্নসমূহত কাম নকৰে । এইটো চলকসমূহৰ বাবে CSS spec ত ডিজাইনৰ দ্বাৰা কৰা হৈছে, কিন্তু চলকসমূহৰ বাবে সমৰ্থনৰ সৈতে আগন্তুক বছৰসমূহত সলনি হ'ব পাৰে env()। কিছুমান সহায়ক সংযোগৰ বাবে এই ষ্টেক অভাৰফ্ল' উত্তৰ চাওক । ইয়াৰ মাজতে, আপুনি এই চলকসমূহ অন্য CSS পৰিস্থিতিত ব্যৱহাৰ কৰিব পাৰে, লগতে আপোনাৰ জাভাস্ক্রিপ্টত।