বুটস্ট্রাপ সিএসএস সাহায্যকারী ক্লাসসমূহ
বুটস্ট্রাপ টেক্সট ক্লাস
নিচের ক্লাসগুলো ব্যবহার করে টেক্সট-কালার দিয়ে টেক্সটের অর্থ যোগ করা যায়। লিংকের ক্ষত্রে হোভারে গাঢ় বর্ণ ধারন করবেঃ
| ক্লাস | বর্ণনা | উদাহরণ |
|---|---|---|
.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-*-block | display: block; |
| .visible-*-inline | display: inline; |
| .visible-*-inline-block | display: inline-block; |
উদাহরনঃ ছোট (sm)স্ক্রিনের জন্য, ব্যবহারযোগ্য .visible-*-* ক্লাসগুলো হলোঃ .visible-sm-block, .visible-sm-inline, and .visible-sm-inline-block
.visible-xs, .visible-sm, .visible-md, এবং .visible-lg ক্লাসগুলো ৩.২.০ ভার্সনে অনুমোদিত করা হয়।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Helper Classes Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>উদাহরণ</h2>
<p>নিচের টেক্সটগুলোর চেঞ্জ দেখার জন্য পেজের আকার ছোট-বড় করুনঃ</p>
<h1 class="visible-xs">এই টেক্সটি শুধুমাত্র অতিরিক্ত ছোট স্ক্রিনে দেখা যাবে।</h1>
<h1 class="visible-sm">এই টেক্সটি শুধুমাত্র ছোট স্ক্রিনে দেখা যাবে।</h1>
<h1 class="visible-md">এই টেক্সটি শুধুমাত্র মিডিয়াম স্ক্রিনে দেখা যাবে।</h1>
<h1 class="visible-lg">এই টেক্সটটি শুধুমাত্র বড় স্ক্রিনে দেখা যাবে।</h1>
</div>
</body>
</html>
ফলাফল