2019 আপডেট করুন - বুটস্ট্র্যাপ 4
আমি এই বুটস্ট্র্যাপ কাস্টমাইজেশন প্রশ্নটি 4.x এর জন্য পুনর্বিবেচনা করছি, যা এখন কম পরিবর্তে SASS ব্যবহার করে । সাধারণভাবে, বুটস্ট্র্যাপ কাস্টমাইজ করার 2 টি উপায় রয়েছে ...
1. সাধারণ সিএসএস ওভাররাইড
কাস্টমাইজ করার একটি উপায় হ'ল বুটস্ট্র্যাপ সিএসএসকে ওভাররাইড করার জন্য CSS ব্যবহার করা। রক্ষণাবেক্ষণের জন্য, সিএসএস কাস্টমাইজেশনগুলি একটি পৃথক custom.css
ফাইলে রাখা হয়, যাতে bootstrap.css
বাকী অংশটি অবিচ্ছিন্ন থাকে। রেফারেন্স custom.css
অনুসরণ পরbootstrap.css
কাজ ওভাররাইড জন্য ...
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">
কাস্টম সিএসএসে যা কিছু পরিবর্তন প্রয়োজন তা যুক্ত করুন। উদাহরণ স্বরূপ...
/* remove rounding from cards, buttons and inputs */
.card, .btn, .form-control {
border-radius: 0;
}
এর আগে ( bootstrap.css
)
পরে (সাথে custom.css
)
কাস্টমাইজেশন করার সময়, আপনার সিএসএস স্পেসিফিকেশন বুঝতে হবে । custom.css
হিসাবে নির্দিষ্ট হিসাবে সুনির্দিষ্ট নির্বাচকদের ব্যবহার করার প্রয়োজনে ওভাররাইডগুলি bootstrap.css
।
নোট !important
করুন কাস্টম সিএসএসে ব্যবহার করার দরকার নেই , যদি না আপনি বুটস্ট্র্যাপ ইউটিলিটি ক্লাসগুলির মধ্যে একটির উপর চাপ দিচ্ছেন । সিএসএসের স্পেসিফিকেশন
সর্বদা একটি সিএসএস ক্লাসের জন্য অন্যকে ওভাররাইড করার জন্য কাজ করে।
২. SASS ব্যবহার করে কাস্টমাইজ করুন
আপনি যদি SASS এর সাথে পরিচিত হন (এবং আপনার এই পদ্ধতিটি ব্যবহার করা উচিত) তবে আপনি নিজের সাথে বুটস্ট্র্যাপটি কাস্টমাইজ করতে পারেন custom.scss
। বুটস্ট্র্যাপ ডক্সে একটি বিভাগ রয়েছে যা এটি ব্যাখ্যা করে, তবে ডক্সগুলি কীভাবে আপনার বিদ্যমান ভেরিয়েবলগুলি ব্যবহার করতে হয় তা ব্যাখ্যা করে নাcustom.scss
। উদাহরণস্বরূপ, এর পশ্চাদপট-রঙ পরিবর্তন করা যাক #eeeeee
, এবং পরিবর্তন / ওভাররাইড নীল primary
থেকে প্রাসঙ্গিক রঙ বুটস্ট্র্যাপ এর $purple
পরিবর্তনশীল ...
/* custom.scss */
/* import the necessary Bootstrap files */
@import "bootstrap/functions";
@import "bootstrap/variables";
/* -------begin customization-------- */
/* simply assign the value */
$body-bg: #eeeeee;
/* use a variable to override primary */
$theme-colors: (
primary: $purple
);
/* -------end customization-------- */
/* finally, import Bootstrap to set the changes! */
@import "bootstrap";
এটি নতুন কাস্টম ক্লাস তৈরি করতেও কাজ করে । উদাহরণস্বরূপ, এখানে আমি যোগ purple
যা সৃষ্টি থিম রং সব জন্য CSS btn-purple
, text-purple
, bg-purple
, alert-purple
, ইত্যাদি ...
/* add a new purple custom color */
$theme-colors: (
purple: $purple
);
https://www.codeply.com/go/7XonykXFvP
এসএএসএস এর সাথে আপনার কাস্টমাইজেশনের পরে কাজটি করতে আপনার পছন্দসই বুটস্ট্র্যাপ @ ইমপোর্ট করুন! একবার SASS সিএসএসে সংকলিত হয়ে গেলে ( এটি অবশ্যই একটি SASS সংকলক নোড-স্যাস, গল্প-স্যাস, এনপিএম ওয়েবপ্যাক ইত্যাদি ব্যবহার করে করা উচিত ) ফলাফল, সিএসএস হ'ল কাস্টমাইজড বুটস্ট্র্যাপ। আপনি যদি SASS এর সাথে পরিচিত না হন তবে আমার তৈরি থিম নির্মাতার মতো কোনও সরঞ্জাম ব্যবহার করে আপনি বুটস্ট্র্যাপ কাস্টমাইজ করতে পারেন ।
কাস্টম বুটস্ট্র্যাপ ডেমো (SASS)
দ্রষ্টব্য: 3.x থেকে পৃথক, বুটস্ট্র্যাপ 4.x কোনও অফিশিয়াল কাস্টমাইজার সরঞ্জাম সরবরাহ করে না । তবে আপনি কেবল গ্রিডটি সিএসএস ডাউনলোড করতে বা বুটস্ট্র্যাপ 4 সিএসএসকে পছন্দসইভাবে পুনর্নির্মাণের জন্য অন্য 4.x কাস্টম বিল্ড সরঞ্জাম ব্যবহার করতে পারেন ।
সম্পর্কিত:
এসএএসএসের সাথে বুটস্ট্র্যাপ 4 কীভাবে প্রসারিত / সংশোধন (কাস্টমাইজ) করা
যায় বুটস্ট্র্যাপ প্রাথমিক রঙ কীভাবে পরিবর্তন করবেন?
সাস সহ বুটস্ট্র্যাপ 4 এ কীভাবে রঙের স্টাইলগুলির নতুন সেট তৈরি করবেন
কীভাবে বুটস্ট্র্যাপ কাস্টমাইজ করবেন