বুটস্ট্রাপ সাধারণ/বেসিক টেবিল
বেসিক বুটস্ট্রাপ টেবিলের মধ্যে হালকা প্যাডিং থাকে এবং টেবিলের সারিগুলোর মধ্যে অনুভুমিক ডিভাইডার থাকে।
বেসিক/সাধারণ বুটস্ট্রাপ টেবিল তৈরি করার জন্য < table > এলিমেন্টের মধ্যে .table অন্তর্ভুক্ত করুনঃ
kt_satt_skill_example_id=816
একনজরে বুটস্ট্রাপ টেবিল সংক্রান্ত ক্লাসসমূহ
| ক্লাস | বর্ণনা |
|---|---|
.table | যেকোনো <table> এলিমেন্টে বেসিক স্টাইল (হালকা প্যাডিং এবং শুধুমাত্র অনুভূমিক ডিভাইডার) যুক্ত করে। |
.table-striped | <tbody> 'র সারিতে zebra-striping যুক্ত করে (IE8 এ সাপোর্ট করে না)। |
.table-bordered | টেবিল এবং সেলের চারপাশে বর্ডার যুক্ত করে। |
.table-hover | টেবিলের সারিতে হোভার ইফেক্ট যুক্ত করার জন্য ব্যবহার করা হয়। |
.table-condensed | টেবিলের সেলের প্যাডিং অর্ধেক করার জন্য ব্যবহার করা হয়। |
বুটস্ট্রাপ ডোরাকাটা(Striped) সারি
টেবিলের সারিগুলোকে ডোরাকাটা বা Striped করার জন্য .table ক্লাসের পাশাপাশি .table-striped ক্লাসটি ব্যবহার করুনঃ
kt_satt_skill_example_id=817
বুটস্ট্রাপ বর্ডারযুক্ত টেবিল
টেবিল এবং টেবিল সেলের চারপাশে বর্ডারযুক্ত করার জন্য .table-bordered ক্লাস ব্যবহার করুনঃ
kt_satt_skill_example_id=818
বুটস্ট্রাপ হোভারযুক্ত সারি
টেবিলের সারিগুলোর মধ্যে হোভার ইফেক্ট সক্রিয় করার জন্য .table-hover ক্লাসটি ব্যবহার করুনঃ
kt_satt_skill_example_id=819
বুটস্ট্রাপ কনডেন্সড টেবিল
টেবল সেলের প্যাডি কমানোর জন্য .table-condensed ক্লাস ব্যবহার করুন। এটি প্রায় অর্ধেক প্যাডিং কমিয়ে ফেলেঃ
kt_satt_skill_example_id=820
বুটস্ট্রাপ কনটেকচুয়াল ক্লাস
টেবিলের সারি অথবা সেলে কালার করার জন্য কনটেকচুয়াল ক্লাস ব্যবহার করা যায়। (< tr >) (< td >):
নোটঃ কনটেকচুয়াল কালারের বাহিরে অন্য কালারগুলো ব্যবহার করার জন্য সিএসএস ব্যবহার করুন।
kt_satt_skill_example_id=821
বুটস্ট্রাপ কনটেকচুয়াল ক্লাসগুলির বর্ণনা নিচে দেওয়া হলোঃ
| ক্লাস | বর্ণনা |
|---|---|
.active | টেবিলের সারি অথবা টেবিলের সেলে হোভার কালার যুক্ত করে। |
.success | একটি সফল অথবা পজিটিভ কর্মকে নির্দেশ করে। |
.info | একটি নিরপেক্ষ তথ্য পরিবর্তন অথবা নিরপেক্ষ তথ্যকে নির্দেশ করে। |
.warning | মনোযোগ আকর্শন করার ক্ষেত্রে এটি সাধারনত ব্যবহার করা হয়। |
.danger | বিপজ্জনক অথবা নেগেটিভ কর্মকে নির্দেশ করে। |
বুটস্ট্রাপ রেসপন্সিভ টেবিল
টেবিলকে রেসপন্সিভ করার জন্য .table-responsive ক্লাসটি ব্যবহার করুন। রেসপন্সিভ টেবিলের ক্ষেত্রে টেবিলটির জন্য ছোট ডিভাইসে(786px এর কম) একটি আনুভূমিক স্ক্রলিং বার হবে, কিন্তু বড় স্ক্রিনের(786px এর বেশি) ক্ষেত্রে কোন পার্থক্যই দেখা যায় নাঃ
kt_satt_skill_example_id=822
এছাড়াও সারি এবং সেলের মধ্যে যেসকল ক্লাস ব্যবহার করা যায়ঃ
| ক্লাস | বর্ণনা |
|---|---|
.active | সংশ্লিষ্ট সারি অথবা সেলে হোভার কালার যুক্ত করে। |
.success | সফল বা পজিটিভ অ্যাাকশন নির্দেশ করে। |
.info | একটি নিরপেক্ষ অ্যাাকশন নির্দেশ করে। |
.warning | সতর্কতা নির্দেশ করে। |
.danger | বিপদজ্জনক কোন সংকেত বুঝাতে ব্যবহার করা হয়। |
Read more