ৰং

থিম ৰং

আমি সকলো ৰঙৰ এটা উপগোট ব্যৱহাৰ কৰো ৰঙৰ আঁচনি সৃষ্টি কৰাৰ বাবে এটা সৰু ৰঙৰ পেলেট সৃষ্টি কৰিবলে, যিটো 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,
  "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

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

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}সঁজুলি সৃষ্টি কৰিব। আপুনি আন যিকোনো ইউটিলিটি আৰু সম্পত্তিৰ বাবেও একে কাম কৰিব পাৰে।