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

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

হোম-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

 

বুটস্ট্রাপ সিএসএস টেবিল রেফারেন্স - Bootstrap CSS Table Reference


বুটস্ট্রাপ <table> ক্লাসসমূহ

নিম্নলিখিত ক্লাসগুলো যেকোনো টেবিলের মধ্যে ব্যাবহার করা যাবে: 

ক্লাস বর্ণনা উদাহরণ
.table যেকোনো <table> এলিমেন্টে বেসিক স্টাইল (হালকা প্যাডিং এবং শুধুমাত্র অনুভূমিক ডিভাইডার) যুক্ত করে। টেবিল টিউটোরিয়াল
.table-striped <tbody> 'র সারিতে zebra-striping যুক্ত করে (IE8 এ কাজ করে না)। টেবিল টিউটোরিয়াল
.table-bordered টেবিল এবং সেলের চারপাশে বর্ডার যুক্ত করে। টেবিল টিউটোরিয়াল
.table-hover টেবিলের সারিতে হোভার ইফেক্ট যুক্ত করার জন্য ব্যবহার করা হয়। টেবিল টিউটোরিয়াল
.table-condensed টেবিলের সেলের প্যাডিং অর্ধেক করার জন্য ব্যবহার করা হয়। টেবিল টিউটোরিয়াল
সকল টেবিল ক্লাসগুলো একত্রে ব্যবহার করুন টেবিল টিউটোরিয়াল

বুটস্ট্রাপ <tr>, <th> এবং <td> ক্লাসসমূহ

টেবিলের সারি এবং সেলে কালার করার জন্য নিচের ক্লাসগুলো ব্যবহার করুন:

ক্লাস বর্ণনা উদাহরণ
.active সংশ্লিষ্ট সারি অথবা সেলে হোভার কালার যুক্ত করে। টেবিল টিউটোরিয়াল
.success সফল বা পজিটিভ অ্যাাকশন নির্দেশ করে। টেবিল টিউটোরিয়াল
.info একটি নিরপেক্ষ অ্যাাকশন নির্দেশ করে। টেবিল টিউটোরিয়াল
.warning মনোযোগের প্রয়োজনীয়তা বুঝাতে একটি ওয়ার্নিং নির্দেশ করবে। টেবিল টিউটোরিয়াল
.danger বিপদজ্জনক কোন সংকেত বুঝাতে ব্যবহার করা হয়। টেবিল টিউটোরিয়াল

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

রেসপন্সিভ টেবিল তৈরি করার জন্য .table-responsive ক্লাস ব্যবহার করুন। ৭৬৮ পিক্সেলের নিচে স্ক্রিনের ক্ষেত্রে একটি হরিজন্টাল স্ক্রলিং বার তৈরি হবে। আর ৭৬৮ পিক্সেলের বেশি স্ক্রিনের ক্ষেত্রে কোন পার্থক্য থাকবেনা:

উদাহরণ

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>
টেবিল টিউটোরিয়াল»