Bootstrap 5 กลุ่มช่องบันทึก

ইনপুট গ্রুপ

.input-group একটি শ্রেণী হল একটি কন্টেনার, যা ইনপুট ফিল্ডের আগে বা পরে আইকন, টেক্সট বা বুটন যোগ করে "সহায়ক টেক্সট" হিসাবে ইনপুটকে মজবুত করে

কোনো নির্দিষ্ট সহায়ক টেক্সটের শৈলী নির্ধারণ করতে, এই শ্রেণী ব্যবহার করুন .input-group-text শ্রেণীঃ

উদাহরণ

<form>
  <div class="input-group">
    <span class="input-group-text">@</span>
    <input type="text" class="form-control" placeholder="ব্যবহারকারী নাম">
  </div>
  <div class="input-group">
    <input type="text" class="form-control" placeholder="আপনার ইমেইল">
    <span class="input-group-text">@example.com</span>
  </div>
</form>

আপনাদের নিজেরাই চেষ্টা করুন

ইনপুট গ্রুপ আকার

ইনপুট গ্রুপ আকার রাখুন: .input-group-sm শ্রেণীটি ছোট ইনপুট গ্রুপের জন্য, যাকে .input-group-lg বড় ইনপুট গ্রুপের জন্য:

উদাহরণ

<div class="input-group mb-3 input-group-sm">
   <span class="input-group-text">ছোট</span>
  <input type="text" class="form-control">
</div>
<div class="input-group mb-3">
  <span class="input-group-text">ডিফল্ট</span>
  <input type="text" class="form-control">>
</div>
<div class="input-group mb-3 input-group-lg">
  <span class="input-group-text">বড়</span>
  <input type="text" class="form-control">
</div>

আপনাদের নিজেরাই চেষ্টা করুন

বহুটি ইনপুট ও সহায়ক

বহুটি ইনপুট কন্ট্রোল বা প্লাগইন যোগ করুন:

উদাহরণ

<!-- বহুটি ইনপুট কন্ট্রোল -->
<div class="input-group mb-3">
  <span class="input-group-text">নাম</span>
  <input type="text" class="form-control" placeholder="পরিবার নাম">
  <input type="text" class="form-control" placeholder="নাম">
</div>
<!-- বহুবচন প্লাগইন/সহায়ক টেক্সট -->
<div class="input-group mb-3">
  <span class="input-group-text">এক</span>
  <span class="input-group-text">দুই</span>
  <span class="input-group-text">তিন</span>
  <input type="text" class="form-control">
</div>

আপনাদের নিজেরাই চেষ্টা করুন

চেকবক্স ও রেডিও বাটন সহ ইনপুট গ্রুপ

আপনি এছাড়াও টেক্সটের পরিবর্তে চেকবক্স বা রেডিও বাটন ব্যবহার করতে পারেন:

উদাহরণ

<div class="input-group mb-3">
  <div class="input-group-text">
    <input type="checkbox">
  </div>
  <input type="text" class="form-control" placeholder="কিছু টেক্সট">
</div>
<div class="input-group mb-3">
  <div class="input-group-text">
    <input type="radio">
  </div>
  <input type="text" class="form-control" placeholder="কিছু টেক্সট">
</div>

আপনাদের নিজেরাই চেষ্টা করুন

ইনপুট গ্রুপ বাটন

উদাহরণ

<div class="input-group mb-3">
  <button class="btn btn-outline-primary" type="button">মূলত বাটন</button>
  <input type="text" class="form-control" placeholder="কিছু টেক্সট">
</div>
<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="সন্ধান">
  <button class="btn btn-success" type="submit">যাও</button>
</div>
<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="কিছু টেক্সট">
  <button class="btn btn-primary" type="button">ঠিক</button>
  <button class="btn btn-danger" type="button">বাতিল</button>
</div>

আপনাদের নিজেরাই চেষ্টা করুন

ড্রপডাউন বাটন সহ ইনপুট গ্রুপ

ইনপুট গ্রুপে ড্রপডাউন বাটন যোগ করুন। মনে রাখুন যে, আপনাকে সাধারণ .dropdown প্যাকেজ কনটেনার প্রয়োজন নেই।

উদাহরণ

<div class="input-group mt-3 mb-3">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
    ড্রপডাউন বাটন
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">লিঙ্ক ১</a></li>
    <li><a class="dropdown-item" href="#">লিঙ্ক ২</a></li>
    <li><a class="dropdown-item" href="#">লিঙ্ক ৩</a></li>
  </ul>
  <input type="text" class="form-control" placeholder="ব্যবহারকারী নাম">
</div>

আপনাদের নিজেরাই চেষ্টা করুন