রঙ
বুটস্ট্র্যাপ একটি বিস্তৃত রঙ সিস্টেম দ্বারা সমর্থিত যা আমাদের শৈলী এবং উপাদানগুলিকে থিম করে। এটি যেকোনো প্রকল্পের জন্য আরও ব্যাপক কাস্টমাইজেশন এবং এক্সটেনশন সক্ষম করে।
থিম রং
scss/_variables.scssআমরা রঙের স্কিম তৈরি করার জন্য একটি ছোট রঙের প্যালেট তৈরি করতে সমস্ত রঙের একটি উপসেট ব্যবহার করি, এটি Sass ভেরিয়েবল এবং বুটস্ট্র্যাপের ফাইলে একটি Sass মানচিত্র হিসাবেও উপলব্ধ ।
এই সমস্ত রং একটি Sass মানচিত্র হিসাবে উপলব্ধ, $theme-colors.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
এই রঙগুলি কীভাবে সংশোধন করতে হয় তার জন্য আমাদের Sass মানচিত্র এবং লুপ ডক্স দেখুন।
সব রঙ
সমস্ত বুটস্ট্র্যাপ রঙ Sass ভেরিয়েবল এবং scss/_variables.scssফাইলে একটি Sass মানচিত্র হিসাবে উপলব্ধ। ফাইলের আকার বৃদ্ধি এড়াতে, আমরা এই ভেরিয়েবলগুলির প্রতিটির জন্য পাঠ্য বা পটভূমির রঙের ক্লাস তৈরি করি না। পরিবর্তে, আমরা একটি থিম প্যালেটের জন্য এই রঙগুলির একটি উপসেট নির্বাচন করি ।
আপনি রং কাস্টমাইজ করার সাথে সাথে বৈসাদৃশ্য অনুপাত নিরীক্ষণ করতে ভুলবেন না। নীচে দেখানো হিসাবে, আমরা প্রতিটি প্রধান রঙে তিনটি বৈসাদৃশ্য অনুপাত যুক্ত করেছি- একটি সোয়াচের বর্তমান রঙের জন্য, একটি সাদার বিপরীতে এবং একটি কালোর বিপরীতে।
Sass উপর নোট
Sass প্রোগ্রাম্যাটিকভাবে ভেরিয়েবল তৈরি করতে পারে না, তাই আমরা ম্যানুয়ালি প্রতিটি টিন্ট এবং শেডের জন্য ভেরিয়েবল তৈরি করেছি। আমরা মিডপয়েন্ট মান (যেমন, $blue-500) নির্দিষ্ট করি এবং সাস-এর রঙ ফাংশনের মাধ্যমে আমাদের রঙগুলিকে টিন্ট (হালকা) বা ছায়া (গাঢ়) করতে কাস্টম কালার ফাংশন ব্যবহার করি mix()।
ব্যবহার mix()একই রকম নয় lighten()এবং darken()—প্রাক্তনটি নির্দিষ্ট রঙকে সাদা বা কালোর সাথে মিশ্রিত করে, যখন পরেরটি শুধুমাত্র প্রতিটি রঙের হালকাতা মানকে সামঞ্জস্য করে। ফলাফল হল অনেক বেশি সম্পূর্ণ রঙের স্যুট, যেমনটি এই CodePen ডেমোতে দেখানো হয়েছে ।
আমাদের tint-color()এবং shade-color()ফাংশনগুলি mix()আমাদের ভেরিয়েবলের পাশাপাশি ব্যবহার করে $theme-color-interval, যা আমরা উত্পাদিত প্রতিটি মিশ্র রঙের জন্য একটি ধাপে শতকরা মান নির্দিষ্ট করে। সম্পূর্ণ সোর্স কোডের জন্য scss/_functions.scssএবং ফাইলগুলি দেখুন ।scss/_variables.scss
রঙ Sass মানচিত্র
বুটস্ট্র্যাপের উত্স Sass ফাইলগুলিতে তিনটি মানচিত্র অন্তর্ভুক্ত করে যাতে আপনি দ্রুত এবং সহজেই রঙের তালিকা এবং তাদের হেক্স মানগুলি লুপ করতে পারেন৷
$colors500আমাদের সমস্ত উপলব্ধ বেস ( ) রং তালিকাভুক্ত করে$theme-colorsসমস্ত শব্দার্থকভাবে নামের থিমের রঙগুলি তালিকাভুক্ত করে (নীচে দেখানো হয়েছে)$graysধূসর সব টিন্ট এবং শেড তালিকা
এর মধ্যে scss/_variables.scss, আপনি বুটস্ট্র্যাপের রঙের ভেরিয়েবল এবং Sass মানচিত্র খুঁজে পাবেন। এখানে $colorsSass মানচিত্রের একটি উদাহরণ:
$colors: (
"blue": $blue,
"indigo": $indigo,
"purple": $purple,
"pink": $pink,
"red": $red,
"orange": $orange,
"yellow": $yellow,
"green": $green,
"teal": $teal,
"cyan": $cyan,
"white": $white,
"gray": $gray-600,
"gray-dark": $gray-800
);
অন্য অনেক উপাদানে কীভাবে ব্যবহার করা হয় তা আপডেট করতে মানচিত্রের মধ্যে মানগুলি যোগ করুন, সরান বা সংশোধন করুন। দুর্ভাগ্যবশত এই সময়ে, প্রতিটি উপাদান এই Sass মানচিত্রটি ব্যবহার করে না। ভবিষ্যতের আপডেটগুলি এটির উন্নতি করার চেষ্টা করবে। ততক্ষণ পর্যন্ত, ${color}ভেরিয়েবল এবং এই Sass মানচিত্র ব্যবহার করার পরিকল্পনা করুন।
উদাহরণ
এখানে আপনি কিভাবে আপনার Sass এ ব্যবহার করতে পারেন:
.alpha { color: $purple; }
.beta {
color: $yellow-300;
background-color: $indigo-900;
}
রঙ এবং ব্যাকগ্রাউন্ড ইউটিলিটি ক্লাসগুলি রঙের মান নির্ধারণ colorএবং background-colorব্যবহার করার জন্যও উপলব্ধ ।500
ইউটিলিটি তৈরি করা হচ্ছে
v5.1.0 এ যোগ করা হয়েছে
colorবুটস্ট্র্যাপ প্রতিটি কালার ভেরিয়েবলের জন্য এবং ইউটিলিটিগুলিকে অন্তর্ভুক্ত করে না background-color, তবে আপনি আমাদের ইউটিলিটি API এবং v5.1.0 এ যুক্ত করা আমাদের বর্ধিত Sass ম্যাপের সাহায্যে এগুলি তৈরি করতে পারেন।
- শুরু করতে, নিশ্চিত করুন যে আপনি আমাদের ফাংশন, ভেরিয়েবল, মিক্সিন এবং ইউটিলিটি আমদানি করেছেন।
map-merge-multiple()একটি নতুন মানচিত্রে একসাথে একাধিক Sass মানচিত্র দ্রুত একত্রিত করতে আমাদের ফাংশন ব্যবহার করুন ।{color}-{level}এই নতুন সম্মিলিত মানচিত্রটি একটি শ্রেণির নামের সাথে যেকোন ইউটিলিটি প্রসারিত করতে মার্জ করুন ।
.text-purple-500এখানে একটি উদাহরণ রয়েছে যা উপরের ধাপগুলি ব্যবহার করে পাঠ্য রঙের ইউটিলিটি (যেমন, ) তৈরি করে।
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";
$all-colors: map-merge-multiple($blues, $indigos, $purples, $pinks, $reds, $oranges, $yellows, $greens, $teals, $cyans);
$utilities: map-merge(
$utilities,
(
"color": map-merge(
map-get($utilities, "color"),
(
values: map-merge(
map-get(map-get($utilities, "color"), "values"),
(
$all-colors
),
),
),
),
)
);
@import "bootstrap/scss/utilities/api";
.text-{color}-{level}এটি প্রতিটি রঙ এবং স্তরের জন্য নতুন ইউটিলিটি তৈরি করবে । আপনি অন্য কোনো ইউটিলিটি এবং সম্পত্তির জন্যও একই কাজ করতে পারেন।