বুটস্ট্র্যাপের প্রাথমিক রঙ কীভাবে পরিবর্তন করবেন?

Question 1

ব্র্যান্ড কালারের সাথে মেলে বুটস্ট্র্যাপের প্রাথমিক রঙ পরিবর্তন করা কি সম্ভব? আমি আমার ক্ষেত্রে বুটস ওয়াচের কাগজ থিম ব্যবহার করছি।

Question 2

বুটস্ট্র্যাপ 4 এর জন্য 2020 আপডেট করুন

পরিবর্তন করার জন্য প্রাথমিক বা কোন এর থিম রং বুটস্ট্র্যাপ 4 Sass মধ্যে উপযুক্ত ভেরিয়েবল সেট সামনে আমদানি bootstrap.scss। এটি আপনার কাস্টম স্কেসকে! ডিফল্ট মানগুলিকে ওভাররাইড করার অনুমতি দেয় ...

$primary: purple;
$danger: red;

@import "bootstrap";

ডেমো: https://codeply.com/go/f5OmhIdre3

কিছু ক্ষেত্রে, আপনি অন্য বিদ্যমান বুটস্ট্র্যাপ ভেরিয়েবল থেকে নতুন রঙ সেট করতে চাইতে পারেন । এর জন্য প্রথমে ফাংশন এবং ভেরিয়েবলগুলি ইমপোর্ট করুন যাতে সেগুলি কাস্টমাইজেশনে উল্লেখ করা যায় ...

/* import the necessary Bootstrap files */
@import "bootstrap/functions";
@import "bootstrap/variables";

$theme-colors: (
  primary: $purple
);

/* finally, import Bootstrap */
@import "bootstrap";

ডেমো: https://codeply.com/go/lobGxGgfZE

আরও দেখুন: এই উত্তর , এই উত্তরটি বা সিএসএস বা এসএএসএস-এ বোতামের রঙ পরিবর্তন করে

কেবলমাত্র সিএসএসের মাধ্যমে প্রাথমিক রঙ পরিবর্তন করা সম্ভব তবে এতে প্রচুর অতিরিক্ত সিএসএস প্রয়োজন কারণ অনেকগুলি -primaryপ্রকরণ (বিটিএন-প্রাথমিক, সতর্কতা-প্রাথমিক, বিজি-প্রাথমিক, পাঠ্য-প্রাথমিক, সারণী-প্রাথমিক, সীমান্ত-প্রাথমিক ইত্যাদি) রয়েছে it ...) এবং এর মধ্যে কয়েকটি শ্রেণির সীমানা, হোভার এবং সক্রিয় স্থানে হালকা রঙের ভিন্নতা রয়েছে। অতএব, আপনার যদি সিএসএস ব্যবহার করতে হয় তবে প্রাথমিক বোতামের রঙ পরিবর্তন করার মতো লক্ষ্যমাত্রার একটি উপাদান ব্যবহার করা আরও ভাল ।

এই সমাধানগুলি বুটস্ট্র্যাপ 5 আলফার জন্যও কাজ করবে

Question 3

আপনি যেতে পারেন দুটি উপায় আছে

http://getbootstrap.com/customize/

এবং এই সমন্বয়গুলির রঙ পরিবর্তন করুন এবং কাস্টমাইজড বুটস্ট্র্যাপটি ডাউনলোড করুন।

অথবা আপনি এই সংস্করণটি দিয়ে https://github.com/twbs/bootstrap-sass ব্যবহার করতে পারেন এবং আপনার সাস সম্পদ / স্টাইলশিট / _ বুটস্ট্র্যাপ.এসএসএস এ আমদানি করতে পারেন তবে আমদানির আগে আপনি ডিফল্ট পরিবর্তনশীল রঙ পরিবর্তন করতে পারেন

//== Colors
//
//## Gray and brand colors for use across Bootstrap.

$gray-base:              #000 !default;
$gray-darker:            lighten($gray-base, 13.5%) !default; // #222
$gray-dark:              lighten($gray-base, 20%) !default;   // #333
$gray:                   lighten($gray-base, 33.5%) !default; // #555
$gray-light:             lighten($gray-base, 46.7%) !default; // #777
$gray-lighter:           lighten($gray-base, 93.5%) !default; // #eee

$brand-primary:         darken(#428bca, 6.5%) !default; // #337ab7
$brand-success:         #5cb85c !default;
$brand-info:            #5bc0de !default;
$brand-warning:         #f0ad4e !default;
$brand-danger:          #d9534f !default;


//== Scaffolding
//
//## Settings for some of the most global styles.

//** Background color for `<body>`.
$body-bg:               #fff !default;
//** Global text color on `<body>`.
$text-color:            $gray-dark !default;

//** Global textual link color.
$link-color:            $brand-primary !default;
//** Link hover color set via `darken()` function.
$link-hover-color:      darken($link-color, 15%) !default;
//** Link hover decoration.
$link-hover-decoration: underline !default;

এবং ফলাফলটি সংকলন করুন

Question 4

আমি এই সরঞ্জামটি তৈরি করেছি: https://lingtalfi.com/bootstrap4-color-generator , আপনি কেবল প্রথম ক্ষেত্রের মধ্যে প্রাথমিক রেখেছেন, তারপরে আপনার রঙ চয়ন করুন, এবং জেনারেট ক্লিক করুন।

তারপরে উত্পন্ন স্ক্যাস বা সিএসএস কোডটি অনুলিপি করুন এবং এটি মাই-রং.এসএসএস বা মাই-কালারস সিএস (অথবা আপনি যে নামেই চান) নামক কোনও ফাইলে পেস্ট করুন।

আপনি যখন এসএসএসকে সিএসএসে সংকলন করলেন , আপনি সেই সিএসএস ফাইলটি বুটস্ট্র্যাপ সিএসএসের পরে অন্তর্ভুক্ত করতে পারেন এবং আপনি যেতে ভাল হবেন।

পুরো-প্রক্রিয়াটি 10 সেকেন্ড সময় নেয় যদি আপনি এটির সংক্ষেপটি পান তবে শর্ত থাকে যে আমার-রং.এসএসএস ফাইলটি ইতিমধ্যে তৈরি হয়ে গেছে এবং আপনার হেড ট্যাগে অন্তর্ভুক্ত রয়েছে।

দ্রষ্টব্য: এই সরঞ্জামটি বুটস্ট্র্যাপের ডিফল্ট রঙগুলিকে (প্রাথমিক, মাধ্যমিক, বিপদ, ...) ওভাররাইড করতে ব্যবহার করা যেতে পারে তবে আপনি চাইলে কাস্টম রঙও তৈরি করতে পারেন (নীল, সবুজ, ত্রৈমাসিক, ...)।

দ্রষ্টব্য 2: এই সরঞ্জামটি বুটস্ট্র্যাপ 4 দিয়ে কাজ করার জন্য তৈরি করা হয়েছিল (যেমন এখনকার কোনও পরবর্তী সংস্করণ নয়)।

Question 5

'প্রাইমি' ট্যাগযুক্ত যে কোনও উপাদানটির রঙ ব্র্যান্ড-প্রাথমিক রয়েছে। এটিকে পরিবর্তন করার বিকল্পগুলির মধ্যে একটি হ'ল নীচের মত একটি কাস্টমাইজড সিএসএস ফাইল যুক্ত করা:

.my-primary{
  color: lightYellow ;
  background-color: red;
}

.my-primary:focus, .my-primary:hover{
  color: yellow ;
  background-color: darkRed;
}

a.navbar-brand {
  color: lightYellow ;
}

.navbar-brand:hover{
  color: yellow;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <br>
  <nav class="navbar navbar-dark bg-primary mb-3">
    <div class="container">
      <a class="navbar-brand" href="/">Default (navbar-dark  bg-primary)</a>
    </div>
  </nav>
  <button type="button" class="btn btn-primary">Default (btn btn-primary)</button>
  </div>


<br>

<div class="container">
  <nav class="navbar my-primary mb-3">
    <div class="container">
      <a class="navbar-brand" href="/">Customized (my-primary)</a>
    </div>
  </nav>
  <button type="button" class="btn my-primary">Customized (btn my-primary)</button>
  </div>

স্নিপেট প্রসারিত করুন

বুটস্ট্র্যাপ সহ কাস্টমাইজড সিএসএস ফাইল সম্পর্কে আরও তথ্যের জন্য, এখানে একটি সহায়ক লিঙ্ক: https://bootstrapbay.com/blog/bootstrap-button-styles/ ।

Question 6

বুটস্ট্র্যাপ 4

এটিই আমার পক্ষে কাজ করেছে:

আমি এর _custom_theme.scss মতো সামগ্রী সহ আমার নিজস্ব ফাইল তৈরি করেছি :

/* To simplify I'm only changing the primary color */
$theme-colors: ( "primary":#ffd800);

এটিকে ফাইলের শীর্ষে যুক্ত করে bootstrap.scssপুনরায় সংযুক্ত করা হয়েছে (আমার ক্ষেত্রে আমার এটি ছিল! Scss নামক ফোল্ডারে ছিল)

@import "../../../!scss/_custom_theme.scss";
@import "functions";
@import "variables";
@import "mixins";

Question 7

এটি সামান্য পুরানো প্রশ্ন হতে পারে তবে বুটস্ট্র্যাপটি কাস্টমাইজ করার জন্য আমি সবচেয়ে ভাল উপায়টি ভাগ করতে চাই। bootstrap.build Https://bootstrap.build/app নামে একটি অনলাইন সরঞ্জাম রয়েছে । এটি দুর্দান্ত কাজ করে এবং কোনও ইনস্টলেশন বা বিল্ডিং সরঞ্জাম সেটআপের প্রয়োজন নেই!

Question 8

SASS ব্যবহার করে বুটস্ট্র্যাপ 4.x এ ডিফল্ট প্রাথমিক রঙ পরিবর্তন করার সঠিক উপায় বা গৌণ, সাফল্য ইত্যাদির মতো অন্য কোনও রঙ।

নিম্নলিখিত SASS ফাইল তৈরি করুন এবং নির্দেশিত হিসাবে বুটস্ট্র্যাপ SASS আমদানি করুন:

// (Required) Import Bootstrap
@import "bootstrap/functions";
@import "bootstrap/variables";
@import "bootstrap/mixins";

$primary: blue;
$secondary: green;
$my-color: red;

$theme-colors: (
  primary: $primary,
  secondary: $secondary,
  my-color: $my-color
);

// Add below your SASS or CSS code

// (Required) Import Bootstrap
@import "bootstrap/bootstrap";

Question 9

স্যাস ব্যবহার
করে ব্র্যান্ডের রঙ পরিবর্তন করুন

$brand-primary:#some-color;

এটি সমস্ত UI জুড়ে প্রাথমিক রঙ পরিবর্তন করবে।

সিএসএস ব্যবহার করে
মনে করুন আপনি বোতামের প্রাথমিক রঙ পরিবর্তন করতে চান। সুতরাং

btn.primary{
  background:#some-color;
}

উপাদানটি অনুসন্ধান করুন এবং একটি নতুন ফাইলে একটি নতুন সিএসএস / স্যাস বিধি যুক্ত করুন এবং বুটস্ট্র্যাপ সিএসএস লোড করার পরে এটি সংযুক্ত করুন।

Question 10

বুটস্ট্র্যাপ 4 বিধি

এখানে বেশিরভাগ উত্তর কম-বেশি সঠিক, তবে এগুলির সবগুলিই কিছু সমস্যা নিয়ে (আমার জন্য)। সুতরাং, অবশেষে, গুগল করে আমি সঠিক পদ্ধতিটি খুঁজে পেয়েছি, যেমন ডেডিকেটেড বুটস্ট্র্যাপ ডক-তে বলা হয়েছে: https://getbootstrap.com/docs/4.0/getting-st সূত্র / থেমিং / ।

ধরে নেওয়া যাক বুটস্ট্র্যাপ ইনস্টল করা আছে node_modules/bootstrap।

উ your_bootstrap.scss: আপনার ফাইলটি তৈরি করুন:

@import "your_variables_theme";    // here your variables

// mandatory imports from bootstrap src
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables"; // here bootstrap variables
@import "../node_modules/bootstrap/scss/mixins";

// optional imports from bootstrap (do not import 'bootstrap.scss'!)
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
etc...

বি। একই ফোল্ডারে _your_variables_theme.scssফাইলটি তৈরি করুন।

সি _your_variables_theme.scssএই নিয়মগুলি অনুসরণ করে ফাইলে বুটস্ট্র্যাপ ভেরিয়েবলগুলি কাস্টমাইজ করুন :

_variables.scssপ্রয়োজনীয় হিসাবে ভেরিয়েবলগুলি অনুলিপি করুন এবং আটকান , তাদের মানগুলি সংশোধন করুন এবং! ডিফল্ট পতাকাটি সরান । যদি কোনও ভেরিয়েবল ইতিমধ্যে নির্ধারিত হয়ে থাকে তবে বুটস্ট্র্যাপে এটি ডিফল্ট মানগুলির দ্বারা পুনরায় বরাদ্দ দেওয়া হবে না।

একই Sass ফাইলের মধ্যে পরিবর্তনশীল ওভাররাইডগুলি ডিফল্ট ভেরিয়েবলগুলির আগে বা পরে আসতে পারে। তবে সাস ফাইলগুলি জুড়ে যখন ওভাররাইড করা হয়, আপনি বুটস্ট্র্যাপের স্যাস ফাইলগুলি আমদানির আগে আপনার ওভাররাইডগুলি অবশ্যই আসতে হবে ।

ডিফল্ট ভেরিয়েবলগুলি উপলব্ধ node_modules/bootstrap/scss/variables.scss।

Question 11

বুটস্ট্র্যাপ 5

বুটস্ট্র্যাপ 5 এর জন্য আপনি কেবল আপনার মূল স্ক্যাস ফাইল যেতে পারেন এবং যুক্ত করতে পারেন:

$primary: #d93eba;
$body-bg: #fff;
$secondary: #8300d9;

বা আপনি যে পরিবর্তন করতে চান ...

এবং ঠিক পরে বুটস্ট্র্যাপ আমদানি করতে ভুলবেন না।

আপনার চূড়ান্ত মেইন.এসএসএস ফাইলটি দেখতে এমন হওয়া উচিত:

$primary: #d93eba;
$body-bg: #fff;
$secondary: #8300d9;


@import "~node_modules/bootstrap/scss/bootstrap";

Question 12

বুটস্ট্র্যাপ 4 যেহেতু আপনি সহজেই বুটস্ট্র্যাপ কলার . net এ একটি সাধারণ সিএসএস ফাইল ডাউনলোড করে আপনার বুটস্ট্র্যাপের প্রাথমিক রঙ পরিবর্তন করতে পারেন । আপনাকে SASS জানতে হবে না এবং সিএসএস ফাইলটি আপনার ওয়েবসাইটের জন্য ব্যবহারের জন্য প্রস্তুত। আপনি নীল, নীল, বেগুনি, গোলাপী, লাল, কমলা, হলুদ, সবুজ, টিল বা সায়ান রঙের মতো আপনার পছন্দ মতো রঙ চয়ন করতে পারেন।

Question 13

আপনি সিডিএন ফাইলে রঙ পরিবর্তন করতে পারবেন না।
বুটস্ট্র্যাপ ফাইলটি ডাউনলোড করুন।
বুটস্ট্র্যাপ সিএসএস ফাইলের জন্য অনুসন্ধান করুন।
এই (bootstrsap.css) ফাইলটি খুলুন এবং 'প্রাথমিক' অনুসন্ধান করুন।
এটি আপনার পছন্দ মতো রঙে পরিবর্তন করুন।

Question 14

এটি একটি খুব সহজ সমাধান।

<h4 class="card-header bg-dark text-white text-center">Renew your Membership</h4>

বিজি-কাস্টম সহ বিজি- ডার্ক ক্লাসটি প্রতিস্থাপন করুন ।

সিএসএসে

.bg-custom {
  background-color: red;
}

Question 15

হ্যাঁ, আমি .css ফাইলটি খোলার পরামর্শ দিচ্ছি, পৃষ্ঠাটি পরিদর্শন করুন এবং আপনি যে রঙের কোডটি পরিবর্তন করতে চান তা সন্ধান করুন এবং সমস্তটি সন্ধান করুন এবং আপনার পছন্দ মতো রঙে প্রতিস্থাপন করুন (আপনার পাঠ্য সম্পাদকের উপর নির্ভর করে)। আপনি যে রঙ পরিবর্তন করতে চান তা দিয়ে তা করুন