বুটস্ট্রাপ সিএসএস এইচটিএমএল জাভাস্ক্রিপ্ট জেকুয়েরি পিএইচপি এসকিউএল এঙ্গুলার জেএস
ফোরাম
×

বুটস্ট্রাপ টিউটোরিয়াল

হোম-Home শুরু করুন-Get Started গ্রীড বেসিক-Grid Basic

সিএসএস কম্পোনেন্ট

টাইপোগ্রাফী-Typography টেবিল-Table ইমেজ-Image জামবোর্টন-Jumbotron বুটস্ট্রাপ Well এলার্ট-Alert বাটন-Button বাটন গ্রুপ-Button Group গ্লিফআইকন-Glypicon ব্যাজ/লেভেল-Badge/Label প্রোগ্রেস বার-Progress Bar পেজিনেশন-Pagination পেজার-Pager লিস্ট গ্রুপ-List Group প্যানেল-Panel ফরম-Form ইনপুট-Input ইনপুট(২)-Input(2) ইনপুটের আকার-Input Sizing সাহায্যকারী-Helper

JS কম্পোনেন্ট

ড্রপডাউন-Dropdown কলাপ্স-Collapse ট্যাব/পিল-Tab/Pill ন্যাভবার-Navbar ক্যারোসেল-Carousel মোডাল-Modal টুলটিপ-Tooltip পপওভার-Popover স্ক্রলস্পাই-Scrollspy এফিক্স-Affix

বুটস্ট্রাপ গ্রীড সিস্টেম

গ্রীড সিস্টেম-Grid System বুটস্ট্রাপ Stacked/Horizontal গ্রীড ছোট-Grid Small গ্রীড মিডিয়াম-Grid Medium গ্রীড বড়-Grid Large গ্রীড উদাহরণ-Grid Example

বুটস্ট্রাপ রেফারেন্স

ড্রপডাউন-Dropdown কলাপ্স-Collapse ট্যাব-Tab বাটন-Button ক্যারোসেল-Carousel মোডাল-Modal স্ক্রলস্পাই-Scrollspy এফিক্স-Affix

 

বুটস্ট্রাপ সিএসএস সাহায্যকারী ক্লাসসমূহ


টেক্সট

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

ক্লাস বর্ণনা উদাহরণ
.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>

ফলাফল