light mode
night mode
On This Page

বুটস্ট্রাপ৩ হেল্পার (Bootstrap3 Helper)

OPTIONS
Test Yorself
All Question
Edit Content
Add Video
Add MCQ
Add Written
Error Report

বুটস্ট্রাপ টেক্সট ক্লাস

নিচের ক্লাসগুলো ব্যবহার করে টেক্সট-কালার দিয়ে টেক্সটের অর্থ যোগ করা যায়। লিংকের ক্ষত্রে হোভারে গাঢ় বর্ণ ধারন করবেঃ

ক্লাসবর্ণনাউদাহরণ
.text-mutedটেক্সটটি "text-muted" ক্লাসের মাধ্যমে স্টাইল করা হয়েছেউদাহরণ দেখুন
.text-primaryটেক্সটটি "text-primary" ক্লাসের মাধ্যমে স্টাইল করা হয়েছেউদাহরণ দেখুন
.text-successটেক্সটটি "text-success" ক্লাসের মাধ্যমে স্টাইল করা হয়েছেউদাহরণ দেখুন
.text-infoটেক্সটটি "text-info" ক্লাসের মাধ্যমে স্টাইল করা হয়েছেউদাহরণ দেখুন
.text-warningটেক্সটটি "text-warning" ক্লাসের মাধ্যমে স্টাইল করা হয়েছেউদাহরণ দেখুন
.text-dangerটেক্সটটি "text-danger" ক্লাসের মাধ্যমে স্টাইল করা হয়েছেউদাহরণ দেখুন

বুটস্ট্রাপ ব্যাকগ্রাউন্ড ক্লাস

নিচের ক্লাসগুলো ব্যবহার করে ব্যাকগ্রাউন্ড-কালার দিয়ে টেক্সটের অর্থ যোগ করা যায়। হোভার করলএ লিঙ্কগুলো গাঢ় বর্ণ ধারন করবেঃ

ক্লাসবর্ণনাউদাহরণ
.bg-primaryটেবিল সেলটি "bg-primary" ক্লাস দিয়ে সেলটি স্টাইল করা হয়েছেউদাহরণ দেখুন
.bg-successটেবিল সেলটি "bg-success" ক্লাস দিয়ে স্টাইল করা হয়েছেউদাহরণ দেখুন
.bg-infoটেবিল সেলটি "bg-info" ক্লাস দিয়ে স্টাইল করা হয়েছেউদাহরণ দেখুন
.bg-warningটেবিল সেলটি "bg-warning" ক্লাস দিয়ে স্টাইল করা হয়েছেউদাহরণ দেখুন
.bg-dangerটেবিল সেলটি "bg-danger" ক্লাস দিয়ে স্টাইল করা হয়েছেউদাহরণ দেখুন

অন্যান্য

ক্লাসবর্ণনাউদাহরণ
.pull-leftএকটি এলিমেন্টেকে বামে এ্যালাইন করতে ব্যবহার করা হয়উদাহরণ দেখুন
.pull-rightএকটি এলিমেন্টেকে ডানে এ্যালাইন করতে ব্যবহার করা হয়উদাহরণ দেখুন
.center-blockএকটি এলিমেন্টে display:block, margin-right:auto এবং margin-left:auto সেট করতে সাহায্য করেউদাহরণ দেখুন
.clearfixফ্লোট বাদ দেওয়ার জন্য ব্যবহার করা হয়উদাহরণ দেখুন
.showএকটি এলিমেন্টকে প্রদর্শন করতে ব্যবহার করা হয়উদাহরণ দেখুন
.hiddenএকটি এলিমেন্টকে হাইড করতে ব্যবহার করা হয়উদাহরণ দেখুন
.sr-onlyস্ক্রিনরিডার ছাড়া বাকি সকল ডিভাইসে একটি এলিমেন্টকে হাইড করেউদাহরণ দেখুন

বুটস্ট্রাপ রেস্পন্সিভ ইউটিলিটি ক্লাস

মেডিয়া কুয়েরির মাধ্যমে ডিভাইসে কন্টেন্ট দেখাতে/হাইড করতে এই ক্লাসগুলো ব্যবহার করা হয়।

কন্টেন্টকে সকল ডিভাইসে ঠিকভাবে প্রদর্শনের জন্য এক বা একাধিক ক্লাস ব্যবহার করা যেতে পারেঃ

ক্লাসের মাধ্যমে স্টাইল করা হয়েছে

ক্লাসঅতিরিক্ত ছোট ডিভাইস মোবাইল (<৭৬৮পিক্সেল)ছোট ডিভাইস ট্যাবলেট (≥৭৬৮পিক্সেল)মাঝারি ডিভাইস ডেস্কটপ (≥৯৯২পিক্সেল)বড় ডিভাইস ডেস্কটপ (≥১২০০পিক্সেল)
.visible-xs-*দেখা যাবেদেখা যাবে নাদেখা যাবে না 
.visible-sm-*দেখা যাবে নাদেখা যাবেদেখা যাবে নাদেখা যাবে না
.visible-md-*দেখা যাবে নাদেখা যাবে নাদেখা যাবেদেখা যাবে না
.visible-lg-*দেখা যাবে নাদেখা যাবে নাদেখা যাবে নাদেখা যাবে
.hidden-xsদেখা যাবে নাদেখা যাবেদেখা যাবেদেখা যাবে
.hidden-smদেখা যাবেদেখা যাবে নাদেখা যাবেদেখা যাবে
.hidden-mdদেখা যাবেদেখা যাবেদেখা যাবে নাদেখা যাবে
.hidden-lgদেখা যাবেদেখা যাবেদেখা যাবেদেখা যাবে না

৩.২.০ ভার্সনে, .visible-*-* ক্লাসের তিনটি ভ্যারিয়েশন দেওয়া হয় হয়েছে। প্রত্যকটির জন্য সিএসএস display প্রোপার্টির যে ভ্যালু ব্যবহার করা হয়েছে তা দেখানো হলোঃ

ক্লাসসিএসএস ডিসপ্লে ভ্যালু
visible-*-blockdisplay: block;
.visible-*-inlinedisplay: inline;
.visible-*-inline-blockdisplay: inline-block;

উদাহরনঃ ছোট (sm)স্ক্রিনের জন্য, ব্যবহারযোগ্য .visible-*-* ক্লাসগুলো হলোঃ .visible-sm-block, .visible-sm-inline, and .visible-sm-inline-block

.visible-xs, .visible-sm, .visible-md, এবং .visible-lg ক্লাসগুলো ৩.২.০ ভার্সনে অনুমোদিত করা হয়।

kt_satt_skill_example_id=1099

 

Content added || updated By
Abdur Rakib

আরও দেখুন...

On This Page

or

Don't have an account? Register

Promotion