ৰং
বুটষ্ট্ৰেপ এটা বিস্তৃত ৰঙৰ ব্যৱস্থাপ্ৰণালীৰ দ্বাৰা সমৰ্থিত যি আমাৰ শৈলী আৰু উপাদানসমূহ থিম কৰে। ই যিকোনো প্ৰকল্পৰ বাবে অধিক ব্যাপক স্বনিৰ্বাচন আৰু সম্প্ৰসাৰণ সক্ষম কৰে।
থিম ৰং
আমি সকলো ৰঙৰ এটা উপগোট ব্যৱহাৰ কৰো ৰঙৰ আঁচনি সৃষ্টি কৰাৰ বাবে এটা সৰু ৰঙৰ পেলেট সৃষ্টি কৰিবলে, যিটো Sass চলক হিচাপেও উপলব্ধ আৰু Bootstrap ৰ scss/_variables.scss
ফাইলত এটা Sass মেপ হিচাপেও উপলব্ধ।
এই সকলোবোৰ ৰং এটা Sass মেপ হিচাপে উপলব্ধ, $theme-colors
.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
এই ৰংসমূহ কেনেকৈ পৰিবৰ্তন কৰিব লাগে তাৰ বাবে আমাৰ Sass মেপ আৰু লুপসমূহ ডক্স চাওক ।
সকলো ৰং
scss/_variables.scss
সকলো বুটষ্ট্ৰেপ ৰং Sass চলকসমূহ আৰু নথিপত্ৰত এটা Sass মেপ হিচাপে উপলব্ধ । বৃদ্ধি পোৱা ফাইলৰ আকাৰ এৰাই চলিবলৈ, আমি এই প্ৰতিটো ভেৰিয়েবলৰ বাবে টেক্সট বা বেকগ্ৰাউণ্ড ৰঙৰ ক্লাছ সৃষ্টি নকৰো। ইয়াৰ পৰিৱৰ্তে, আমি এটা থিম পেলেটৰ বাবে এই ৰঙৰ এটা উপগোট বাছি লওঁ ।
আপুনি ৰংসমূহ স্বনিৰ্বাচিত কৰাৰ সময়ত কনট্ৰাষ্ট অনুপাতসমূহ নিৰীক্ষণ কৰাটো নিশ্চিত কৰক। তলত দেখুওৱাৰ দৰে, আমি প্ৰতিটো মূল ৰঙৰ সৈতে তিনিটা কনট্ৰাষ্ট অনুপাত যোগ কৰিছো—এটা শ্বাচৰ বৰ্তমান ৰঙৰ বাবে, এটা বগাৰ বিপৰীতে, আৰু এটা ক'লাৰ বিপৰীতে।
Sass ৰ ওপৰত টোকাসমূহ
Sass এ প্ৰগ্ৰেমেটিকভাৱে ভেৰিয়েবল সৃষ্টি কৰিব নোৱাৰে, গতিকে আমি নিজেই প্ৰতিটো টিন্ট আৰু শ্বেডৰ বাবে ভেৰিয়েবল নিজেই সৃষ্টি কৰিলোঁ। আমি মিডপইন্ট মান ধাৰ্য্য কৰো (যেনে, $blue-500
) আৰু Sass ৰ ৰঙৰ ফাংচনৰ যোগেদি আমাৰ ৰং টিন্ট (লঘু) বা শ্বেড (ডাৰ্ক) কৰিবলৈ কাষ্টম ৰঙৰ ফাংচন ব্যৱহাৰ কৰো mix()
।
ব্যৱহাৰ mix()
কৰাটো lighten()
আৰু darken()
—প্ৰথমে নিৰ্দিষ্ট ৰং বগা বা ক'লাৰ সৈতে মিহলাই দিয়ে, আনহাতে দ্বিতীয়টোৱে কেৱল প্ৰতিটো ৰঙৰ লঘুতা মান সামঞ্জস্য কৰে। ফলত ৰঙৰ এটা বহুত বেছি সম্পূৰ্ণ চুইট, এই CodePen ডেমোত দেখুওৱাৰ দৰে ।
আমাৰ tint-color()
আৰু shade-color()
ফাংচনসমূহে mix()
আমাৰ ভেৰিয়েবলৰ কাষত ব্যৱহাৰ কৰে $theme-color-interval
, যিয়ে আমি উৎপন্ন কৰা প্ৰতিটো মিশ্ৰিত ৰঙৰ বাবে এটা ষ্টেপ কৰা শতাংশ মান নিৰ্ধাৰণ কৰে। সম্পূৰ্ণ উৎস ক'ডৰ বাবে scss/_functions.scss
আৰু নথিপত্ৰসমূহ চাওক ।scss/_variables.scss
ৰঙৰ Sass মানচিত্ৰ
বুটষ্ট্ৰেপৰ উৎস Sass নথিপত্ৰসমূহে তিনিটা মেপ অন্তৰ্ভুক্ত কৰে আপোনাক দ্ৰুত আৰু সহজে ৰঙৰ তালিকা আৰু সিহতৰ হেক্স মানসমূহৰ ওপৰত লুপ কৰাত সহায় কৰিবলে।
$colors
আমাৰ সকলো উপলব্ধ ভিত্তি (500
) ৰঙৰ তালিকাভুক্ত কৰে$theme-colors
সকলো অৰ্থগতভাৱে নামকৰণ কৰা থিম ৰং তালিকাভুক্ত কৰে (তলত দেখুওৱা হৈছে)$grays
ধূসৰ ৰঙৰ সকলো টিন্ট আৰু শ্বেড তালিকাভুক্ত কৰে
ৰ ভিতৰত scss/_variables.scss
, আপুনি Bootstrap ৰ ৰঙৰ চলকসমূহ আৰু Sass মেপ পাব। ইয়াত $colors
ছাছ মেপৰ এটা উদাহৰণ দিয়া হ'ল:
$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
বুটষ্ট্ৰেপে প্ৰতিটো ৰঙৰ চলকৰ বাবে আৰু সঁজুলিসমূহ অন্তৰ্ভুক্ত নকৰে , কিন্তু আপুনি আমাৰ সঁজুলি API আৰু v5.1.0 ত যোগ কৰা আমাৰ সম্প্ৰসাৰিত Sass মেপসমূহৰ background-color
সৈতে এইবোৰ নিজেই সৃষ্টি কৰিব পাৰে ।
- আৰম্ভ কৰিবলৈ, নিশ্চিত কৰক যে আপুনি আমাৰ ফাংচনসমূহ, চলকসমূহ, মিক্সিনসমূহ, আৰু সঁজুলিসমূহ আমদানি কৰিছে।
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}
সঁজুলি সৃষ্টি কৰিব। আপুনি আন যিকোনো ইউটিলিটি আৰু সম্পত্তিৰ বাবেও একে কাম কৰিব পাৰে।