বুটস্ট্রাপ৩ লিস্ট গ্রুপ (Bootstrap3 List Group)

বুটস্ট্রাপ৩ সিএসএস কম্পোনেন্ট (Bootstrap3 CSS Component) - বুটস্ট্র্যাপ (Bootstrap 3) - Web Development

324

বুটস্ট্রাপ বেসিক লিষ্ট গ্রুপ

অধিকাংশ ক্ষেত্রেই বুটস্ট্রাপ বেসিক লিষ্ট গ্রুপ তৈরি করার জন্য আনওর্ডার লিষ্টের সাথে লিষ্ট আইটেম ব্যবহার করা হয়। একটি বেসিক লিষ্ট গ্রুপ তৈরি করার জন্য < ul > এলিমেন্টে .list-group ক্লাস এবং < li > এলিমেন্টে .list-group-item ক্লাস ব্যবহার করুনঃ

kt_satt_skill_example_id=987


লিষ্ট গ্রুপের মধ্যে ব্যাজের ব্যবহার

লিষ্ট গ্রুপে ব্যাজ সংযুক্ত করে ব্যবহার করা যায়। ব্যাজ স্বয়ংক্রিয়ভাবে তার অবস্থান ডানে নিয়ে নিবে।
লিষ্ট আইটেমের সাথে একত্রে ব্যাজ ব্যবহার করার জন্য (< li class="list-group-item") এর মধ্যে .badge ক্লাসযুক্ত একটি < span > এলিমেন্ট যুক্ত করুনঃ

kt_satt_skill_example_id=988


লিংক যুক্ত লিষ্ট গ্রুপ

লিষ্ট গ্রুপ আইটেমগুলো হাইপারলিংকযুক্ত হতে পারে। এর ফলে হোভারে করলে ব্যাকগ্রাউন্ড কালার ধূসর দেখাবে। লিংকযুক্ত লিষ্ট গ্রুপ তৈরি করার জন্য < ul > পরিবর্তে < div > এলিমেন্ট এবং < li > এর পরিবর্তে < a > এলিমেন্ট ব্যবহার করুনঃ

kt_satt_skill_example_id=989


একটিভ স্টেট

কোন একটি লিস্ট আইটেমকে একটিব হিসেবে হাইলাইট করার জন্য .active ক্লাস ব্যবহার করুনঃ

kt_satt_skill_example_id=990


Disabled আইটেম

লিষ্ট গ্রুপের কোনো একটি আইটেমকে disable করে রাখার জন্য ঐ এলিমেন্টের মধ্যে .disabled ক্লাস ব্যবহার করুনঃ

kt_satt_skill_example_id=991


কনটেকচুয়াল ক্লাস

কনটেকচুয়াল ক্লাস ব্যবহার করে লিষ্ট আইটেমকে কালার করা যায়ঃ

  • list-group-item-success
  • list-group-item-info
  • list-group-item-warning
  • list-group-item-danger

লিষ্ট আইটেমকে কালার করার জন্য .list-group-item ক্লাসের সাথে নিম্নলিখিত ক্লাসগুলো ব্যবহার করা হয় .list-group-item-success, list-group-item-info, list-group-item-warning এবং .list-group-item-danger


কাস্টম কনটেন্ট

লিষ্ট গ্রুপ আইটেমের মধ্যে এইচটিএমএলের প্রায় সবগুলো এলিমেন্ট ব্যবহার করা যায়।

বুটস্ট্রাপে এই সংক্রান্ত দুটি ক্লাস রয়েছে। ক্লাস দুটি হলো- .list-group-item-heading এবং .list-group-item-text। নিম্নে এদের ব্যবহার দেখানো হলোঃ

kt_satt_skill_example_id=992

 

Content added || updated By
Promotion

Are you sure to start over?

Loading...