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

ৰং

বুটষ্ট্ৰেপ এটা বিস্তৃত ৰঙৰ ব্যৱস্থাপ্ৰণালীৰ দ্বাৰা সমৰ্থিত যি আমাৰ শৈলী আৰু উপাদানসমূহ থিম কৰে। ই যিকোনো প্ৰকল্পৰ বাবে অধিক ব্যাপক স্বনিৰ্বাচন আৰু সম্প্ৰসাৰণ সক্ষম কৰে।

থিম ৰং

আমি সকলো ৰঙৰ এটা উপগোট ব্যৱহাৰ কৰো ৰঙৰ আঁচনি সৃষ্টি কৰাৰ বাবে এটা সৰু ৰঙৰ পেলেট সৃষ্টি কৰিবলে, যিটো 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 মেপ হিচাপে উপলব্ধ । বৃদ্ধি পোৱা ফাইলৰ আকাৰ এৰাই চলিবলৈ, আমি এই প্ৰতিটো ভেৰিয়েবলৰ বাবে টেক্সট বা বেকগ্ৰাউণ্ড ৰঙৰ ক্লাছ সৃষ্টি নকৰো। ইয়াৰ পৰিৱৰ্তে, আমি এটা থিম পেলেটৰ বাবে এই ৰঙৰ এটা উপগোট বাছি লওঁ ।

আপুনি ৰংসমূহ স্বনিৰ্বাচিত কৰাৰ সময়ত কনট্ৰাষ্ট অনুপাতসমূহ নিৰীক্ষণ কৰাটো নিশ্চিত কৰক। তলত দেখুওৱাৰ দৰে, আমি প্ৰতিটো মূল ৰঙৰ সৈতে তিনিটা কনট্ৰাষ্ট অনুপাত যোগ কৰিছো—এটা শ্বাচৰ বৰ্তমান ৰঙৰ বাবে, এটা বগাৰ বিপৰীতে, আৰু এটা ক'লাৰ বিপৰীতে।

$নীলা#0d6efd
$নীলা-১০০
$নীলা-২০০
$নীলা-৩০০
$নীলা-৪০০
$নীলা-৫০০
$নীলা-৬০০
$নীলা-৭০০
$নীলা-৮০০
$নীলা-৯০০
$indigo#৬৬১০f২
$ইণ্ডিগো-১০০
$ইণ্ডিগো-২০০
$ইণ্ডিগো-৩০০
$ইণ্ডিগো-৪০০
$ইণ্ডিগো-৫০০
$ইণ্ডিগো-৬০০
$ইণ্ডিগো-৭০০
$ইণ্ডিগো-৮০০
$ইণ্ডিগো-৯০০
$বেঙুনীয়া#৬f৪২c১
$বেঙুনীয়া-১০০
$বেঙুনীয়া-২০০
$বেঙুনীয়া-৩০০
$বেঙুনীয়া-৪০০
$বেঙুনীয়া-৫০০
$বেঙুনীয়া-৬০০
$বেঙুনীয়া-৭০০
$বেঙুনীয়া-৮০০
$বেঙুনীয়া-৯০০
$গোলাপী#d৬৩৩৮৪
$গোলাপী-১০০
$গোলাপী-২০০
$গোলাপী-৩০০
$গোলাপী-৪০০
$গোলাপী-৫০০
$গোলাপী-৬০০
$গোলাপী-৭০০
$গোলাপী-৮০০
$গোলাপী-৯০০
$ৰঙা#dc৩৫৪৫
$ৰঙা-১০০
$ৰঙা-২০০
$ৰঙা-৩০০
$ৰঙা-৪০০
$ৰঙা-৫০০
$ৰঙা-৬০০
$ৰঙা-৭০০
$ৰঙা-৮০০
$ৰঙা-৯০০
$কমলা ৰঙৰ#fd7e14
$কমলা-১০০
$কমলা-২০০
$কমলা-৩০০
$কমলা-৪০০
$কমলা-৫০০
$কমলা-৬০০
$কমলা-৭০০
$কমলা-৮০০
$কমলা-৯০০
$হালধীয়া#ffc১০৭
$হালধীয়া-১০০
$হালধীয়া-২০০
$হালধীয়া-৩০০
$হালধীয়া-৪০০
$হালধীয়া-৫০০
$হালধীয়া-৬০০
$হালধীয়া-৭০০
$হালধীয়া-৮০০
$হালধীয়া-৯০০
$সেউজীয়া#১৯৮৭৫৪
$সেউজীয়া-১০০
$সেউজীয়া-২০০
$সেউজীয়া-৩০০
$সেউজীয়া-৪০০
$সেউজীয়া-৫০০
$সেউজীয়া-৬০০
$সেউজীয়া-৭০০
$সেউজীয়া-৮০০
$সেউজীয়া-৯০০
$teal#২০গ৯৯৭
$টিল-১০০
$টিল-২০০
$টিল-৩০০
$টিল-৪০০
$টিল-৫০০
$টিল-৬০০
$টিল-৭০০
$টিল-৮০০
$টিল-৯০০
$চিয়ান#0dcaf0
$চিয়ান-১০০
$চিয়ান-২০০
$চিয়ান-৩০০
$চিয়ান-৪০০
$চিয়ান-৫০০
$চিয়ান-৬০০
$চিয়ান-৭০০
$চিয়ান-৮০০
$চিয়ান-৯০০
$ধূসৰ-৫০০#adb5bd
$ধূসৰ-১০০
$ধূসৰ-২০০
$ধূসৰ-৩০০
$ধূসৰ-৪০০
$ধূসৰ-৫০০
$ধূসৰ-৬০০
$ধূসৰ-৭০০
$ধূসৰ-৮০০
$ধূসৰ-৯০০
$ক'লা#০০০
$বগা#fff

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,
  "black":      $black,
  "white":      $white,
  "gray":       $gray-600,
  "gray-dark":  $gray-800
);

মেপৰ ভিতৰত মানসমূহ যোগ কৰক, আঁতৰাওক, বা পৰিবৰ্তন কৰক যাতে সিহতক অন্য বহুতো উপাদানত কেনেকৈ ব্যৱহাৰ কৰা হয় তাক আপডেইট কৰিবলে। দুৰ্ভাগ্যজনকভাৱে এই সময়ত, প্ৰতিটো উপাদানে এই Sass মেপ ব্যৱহাৰ নকৰে। ভৱিষ্যতে আপডেটসমূহে ইয়াৰ ওপৰত উন্নতি সাধন কৰিবলৈ চেষ্টা কৰিব। তেতিয়ালৈকে, ${color}চলকসমূহ আৰু এই Sass মেপ ব্যৱহাৰ কৰাৰ পৰিকল্পনা কৰক।

উদাহৰণ

ইয়াত আপুনি আপোনাৰ Sass ত এইবোৰ কেনেকৈ ব্যৱহাৰ কৰিব পাৰে:

.alpha { color: $purple; }
.beta {
  color: $yellow-300;
  background-color: $indigo-900;
}

ৰঙৰ মানসমূহ সংহতি আৰু ব্যৱহাৰৰ বাবে ৰং আৰু পটভূমি সঁজুলি শ্ৰেণীসমূহো উপলব্ধ ।colorbackground-color500

উপযোগীতাসমূহ সৃষ্টি কৰা

v5.1.0 ত যোগ কৰা হৈছে

colorবুটষ্ট্ৰেপে প্ৰতিটো ৰঙৰ চলকৰ বাবে আৰু সঁজুলিসমূহ অন্তৰ্ভুক্ত নকৰে , কিন্তু আপুনি আমাৰ সঁজুলি API আৰু v5.1.0 ত যোগ কৰা আমাৰ সম্প্ৰসাৰিত Sass মেপসমূহৰ background-colorসৈতে এইবোৰ নিজেই সৃষ্টি কৰিব পাৰে ।

  1. আৰম্ভ কৰিবলৈ, নিশ্চিত কৰক যে আপুনি আমাৰ ফাংচনসমূহ, চলকসমূহ, মিক্সিনসমূহ, আৰু সঁজুলিসমূহ আমদানি কৰিছে।
  2. map-merge-multiple()এটা নতুন মেপত একাধিক Sass মেপ একেলগে দ্ৰুতভাৱে একত্ৰিত কৰিবলৈ আমাৰ ফাংচন ব্যৱহাৰ কৰক ।
  3. {color}-{level}এটা শ্ৰেণী নামৰ সৈতে যিকোনো সঁজুলি সম্প্ৰসাৰণ কৰিবলে এই নতুন সংযুক্ত মেপ একত্ৰিত কৰক ।

ইয়াত এটা উদাহৰণ আছে যি .text-purple-500ওপৰৰ পদক্ষেপসমূহ ব্যৱহাৰ কৰি লিখনী ৰঙৰ সঁজুলিসমূহ (যেনে, ) সৃষ্টি কৰে।

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/maps";
@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}সঁজুলি সৃষ্টি কৰিব। আপুনি আন যিকোনো ইউটিলিটি আৰু সম্পত্তিৰ বাবেও একে কাম কৰিব পাৰে।