বুটস্ট্র্যাপে পাঠ্য রঙের ক্লাস উপলব্ধ


119

নেভিগেশন বারে শিরোনাম হিসাবে কিছু পাঠ্য রেখে আমি সাইন আপ পৃষ্ঠাটি বিকাশ করছি। আমি এই লেখাগুলি বিভিন্ন রঙ দিতে চাই। এই উদ্দেশ্যে আমি একটি পৃথক সিএসএস ফাইল ব্যবহার করছি তবে বুটস্ট্র্যাপের সিএসএস ফাইল ব্যবহার করে এটি করতে চাই।

যে কেউ বুটস্ট্র্যাপে উপলভ্য রঙের ক্লাসগুলি তালিকাবদ্ধ করতে পারে?


3
বুটস্ট্র্যাপ #333333পাঠ্যের রঙের জন্য একটি রঙ ব্যবহার করে।
বিন্দিয়া পাটোলিয়া

এটি কি কেবল এই ব্যবহার করে?
ফিদেল কাস্ত্রো

তবে আপনি বিভিন্ন ট্যাগের জন্য আলাদা ব্যবহার করতে পারেন।
বিন্দিয়া পাটোলিয়া

আপনি কি দয়া করে এটি ব্যাখ্যা করতে বা সম্ভব হলে লিঙ্কটি স্থাপন করতে পারেন
ফিদেল কাস্ত্রো

উত্তর:


195

বুটস্ট্র্যাপ 3 ডকুমেন্টেশন সাহায্যকারী শ্রেণীর অধীনে তালিকা এই: Muted, Primary, Success, Info, Warning, Danger

বুটস্ট্র্যাপ 4 ডকুমেন্টেশন ইউটিলিটি অধীনে তালিকা এই -> রঙ, এবং আরও বিকল্প আছে: primary, secondary, success, danger, warning, info, light, dark, muted, white

এগুলি অ্যাক্সেস করতে একটি ব্যবহার করে class text-[class-name]

সুতরাং, যদি আমি উদাহরণস্বরূপ নীল পাঠ্যটি চাই তবে আমি এটির মতো কিছু করব:

<p class="text-primary">This text is the blue primary color.</p>

এটি বিশাল সংখ্যক পছন্দ নয়, তবে এটি কয়েকটি।


2
আপনি যদি "নীল পাঠ্য চান" তবে আমি বলতে দ্বিধা করব। আপনি যখন প্রাথমিক রঙটি প্রয়োগ করতে চান, তখন সেই শ্রেণিটি ব্যবহার করা উচিত যা পূর্বনির্ধারিতভাবে নীল হয় be তবে যদি $primaryপরিবর্তন হয় তবে আপনার আনুষ্ঠানিকভাবে নীল পাঠ্যও পরিবর্তিত হবে। আপনি যদি সবসময় নীল পাঠ্য থাকে তা নিশ্চিত করতে চান তবে আপনি যে নীল রঙের ছায়া তা চান তা পাঠ্যকে সেট করা উচিত।
জ্যাক্রো

7

ন্যাভিগেশন বারের পাঠ্যটি bootstrap.cssফাইলের নিম্নলিখিত দুটি সিএসএস ক্লাসের একটি ব্যবহার করে সাধারণত রঙিন হয় ।

প্রথমত, ডিফল্ট নেভিগেশন বার (ধূসর রঙ) ব্যবহারের ক্ষেত্রে, .navbar-defaultশ্রেণিটি ব্যবহার করা হবে এবং পাঠ্যটি গা dark় ধূসর হিসাবে বর্ণযুক্ত ।

.navbar-default .navbar-text {
  color: #777;
}

অন্যটি একটি বিপরীতমুখী নেভিগেশন বার (কালো এক) ব্যবহারের ক্ষেত্রে, পাঠ্যটি ধূসর 60 হিসাবে বর্ণযুক্ত

.navbar-inverse .navbar-text {
  color: #999;
}

সুতরাং, আপনি নিজের ইচ্ছানুসারে এর রঙ পরিবর্তন করতে পারেন। তবে, আমি আপনাকে এটি পরিবর্তন করতে একটি পৃথক সিএসএস ফাইল ব্যবহার করার পরামর্শ দিচ্ছি।

উল্লেখ্য: আপনার কাছে ব্যবহার করতে পারে customizer দ্বারা উপলব্ধ Twitter Bootstrapসালে Navbarঅধ্যায়।


6

আপনি পাঠ্য ক্লাস ব্যবহার করতে পারেন:

.text-primary
.text-secondary
.text-success
.text-danger
.text-warning
.text-info
.text-light
.text-dark
.text-muted
.text-white

প্রয়োজনে যে কোনও ট্যাগে পাঠ্য ক্লাস ব্যবহার করুন।

<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning">.text-warning</p>
<p class="text-info">.text-info</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>

আপনি আপনার নিজের ক্লাস যুক্ত করতে পারেন বা উপরের ক্লাসগুলিকে আপনার প্রয়োজন হিসাবে সংশোধন করতে পারেন।


0

বুটস্ট্র্যাপ 4 এ আরও কয়েকটি সংঘাত রয়েছে (সাম্প্রতিক সংস্করণগুলিতে যুক্ত হয়েছে) অন্যান্য উত্তরে উল্লেখ নেই।

.text-black-50এবং .text-white-5050% স্বচ্ছ।

.text-body {
  color: #212529 !important;
}

.text-black-50 {
  color: rgba(0, 0, 0, 0.5) !important;
}

.text-white-50 {
  color: rgba(255, 255, 255, 0.5) !important;
}

/*DEMO*/
p{padding:.5rem}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<p class="text-body">.text-body</p>
<p class="text-black-50">.text-black-50</p>
<p class="text-white-50 bg-dark">.text-white-50</p>

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.