TechBlogSD - ওয়ার্ডপ্রেস এবং ওয়েব ডেভেলপমেন্টের জন্য সবকিছু
ওয়েব এবং ওয়ার্ডপ্রেস নির্দেশাবলী, খবর, থিম এবং প্লাগইনগুলির পর্যালোচনা

কিভাবে বুটস্ট্র্যাপ 5 ইনপুট গ্রুপ তৈরি করবেন?

1

ইন বুটস্ট্র্যাপ, ইনপুট গ্রুপ গ্রুপ টেক্সট, বোতাম এবং উপাদান বাটন গ্রুপ করতে ব্যবহৃত হয়। এটি প্রধানত ফর্ম কন্ট্রোল উপাদানগুলির সাথে অতিরিক্ত পাঠ্য তথ্য প্রদান এবং বোতাম যুক্ত করার জন্য ব্যবহৃত হয় । এই টিউটোরিয়ালে, আসুন বুটস্ট্র্যাপ 5 এ কীভাবে ইনপুট গ্রুপ ব্যবহার করতে হয় সে সম্পর্কে আরও বিশ্লেষণ করি।

বুটস্ট্র্যাপ 5 ইনপুট গ্রুপ টিউটোরিয়াল

এই টিউটোরিয়ালে নিম্নলিখিত বিষয়গুলি রয়েছে:

  1. পাঠ্য ইনপুট গ্রুপ
  2. টেক্সট ইনপুট গ্রুপে বৈচিত্র্য ব্যবহার করা
  3. বোতাম ইনপুট গ্রুপ
  4. ড্রপডাউন ইনপুট গ্রুপ
  5. বিভক্ত ড্রপডাউন
  6. চেকবক্স ব্যবহার করে
  7. রেডিও বোতাম োকানো
  8. বড় ইনপুট গ্রুপ

1 পাঠ্য ইনপুট গ্রুপ

প্রথমে নীচের মত ট্যাগ সহ সাধারণ পাঠ্য উপাদানগুলিকে গ্রুপ করা যাক:

<div class="input-group"> <span class="input-group-addon">@</span> <input type="text" class="form-control" placeholder="Enter Twitter Username" aria-describedby="twitter"> </div>

উপরের কোডে, ".form-control" ক্লাস দিয়ে একটি টেক্সট বক্স তৈরি করা হয়েছে। অতিরিক্ত ".input-group-addon" ক্লাসটি বাম পাশে টেক্সট কন্টেন্ট যোগ করার জন্য ব্যবহার করা হয় এবং সম্পূর্ণ কোডটি একটি ক্যাপের ভিতরে মোড়ানো হয়

".input-group" শ্রেণীর সাথে।

আউটপুটটি ব্রাউজারে নীচের মত দেখাবে:

কিভাবে বুটস্ট্র্যাপ 5 ইনপুট গ্রুপ তৈরি করবেন?

টেক্সট ইনপুট গ্রুপে 2 ভেরিয়েশন

উপরের মৌলিক উদাহরণ থেকে প্রচুর বৈচিত্র্য সম্ভব। আমরা আরও তিনটি কেস দেখাবো:

  • Using ব্যবহারের পরিবর্তে, পরিমাণের জন্য $ ব্যবহার করুন
  • উপাদানটির ডান পাশে অ্যাডন রাখুন
  • এলিমেন্টের উভয় পাশে অ্যাডঅন দেখান

টেক্সট ইনপুট গ্রুপে তিনটি ভিন্নতা তৈরির কোড নিচে দেওয়া হল:

<div class="input-group"> <span class="input-group-addon">$</span> <input type="text" class="form-control" placeholder="Enter Amount in Dollars" aria-describedby="amount"> </div> <div class="input-group"> <input type="text" class="form-control" placeholder="Enter Amount in Dollars" aria-describedby="amount1"> <span class="input-group-addon">$</span> </div> <div class="input-group"> <span class="input-group-addon">$</span> <input type="text" class="form-control" placeholder="Enter Amount in Dollars" aria-describedby="amount2"> <span class="input-group-addon">.00</span> </div>

এবং ফলাফল নীচের মত দেখাবে:

কিভাবে বুটস্ট্র্যাপ 5 ইনপুট গ্রুপ তৈরি করবেন?

3 ইনপুট সহ বোতাম ব্যবহার করা

আমরা উপরের সমস্ত উদাহরণে টেক্সট অ্যাডঅন ব্যবহার করেছি। এখন আসুন উপাদানটিতে একটি বোতাম যুক্ত করি।

<div class="input-group"> <input type="text" class="form-control" placeholder="Keyword"> <span class="input-group-btn"> <button class="btn btn-secondary" type="button">Search</button> </span> </div>

একটি বোতাম তৈরি করতে আপনাকে ট্যাগটিতে ".input-group-btn" শ্রেণী যোগ করতে হবে । এটি নিম্নলিখিত ফলাফল উত্পাদন করবে:

কিভাবে বুটস্ট্র্যাপ 5 ইনপুট গ্রুপ তৈরি করবেন?

টেক্সট অ্যাডঅন বৈচিত্র্যের অনুরূপ, আপনি বোতামটি উভয় বা উভয় পাশে রাখতে পারেন।

4 ইনপুট সহ ড্রপডাউন ব্যবহার করা

পরবর্তী বিকল্পটি হল ইনপুট এলিমেন্টের পাশে ড্রপডাউন বাটন ব্যবহার করা। ড্রপডাউন বোতাম তৈরির জন্য ড্রপডাউন টিউটোরিয়াল পড়ুন ।

<div class="input-group"> <div class="input-group-btn"> <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <div role="separator" class="dropdown-divider"></div> <a class="dropdown-item" href="#">Link 3</a> </div> </div> <input type="text" class="form-control" placeholder="Dropdown with Text Input" aria-label="Dropdown Input Group"> </div>

ইনপুট উপাদান সহ ড্রপডাউন বোতামটি নীচের মত দেখাবে:

কিভাবে বুটস্ট্র্যাপ 5 ইনপুট গ্রুপ তৈরি করবেন?

5 সেগমেন্টেড ড্রপডাউন বোতাম ব্যবহার করা

সেগমেন্টেড ড্রপডাউন বাটনে বাটন টেক্সটের নিচে ড্রপডাউন তীর থাকবে। এটি ইনপুট উপাদানটির জন্য বৃহত্তর পাঠ্য এলাকা দেবে। আপনি নিম্নলিখিত কোড দিয়ে সেগমেন্টেড বাটন ইনপুট গ্রুপ তৈরি করতে পারেন:

<div class="input-group"> <div class="input-group-btn"> <button type="button" class="btn btn-secondary">Segment</button> <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="sr-only">Toggle Dropdown</span> </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <div role="separator" class="dropdown-divider"></div> <a class="dropdown-item" href="#">Link 3</a> </div> </div> <input type="text" class="form-control" placeholder="Segmented Dropdown with Text Input" aria-label="Segmented Dropdown Input Group"> </div>

এটি নিম্নলিখিত ফলাফল উত্পাদন করবে:

কিভাবে বুটস্ট্র্যাপ 5 ইনপুট গ্রুপ তৈরি করবেন?

6 ইনপুট সহ চেকবক্স ব্যবহার করা

সামনে চেকবক্স সহ একটি ইনপুট এলিমেন্ট তৈরির কোড দেওয়া হল:

<div class="input-group"> <span class="input-group-addon"> <input type="checkbox" aria-label="Checkbox Input Group"> </span> <input type="text" class="form-control" placeholder="Checkbox with Text Input" aria-label="Checkbox Input Group"> </div>

কোড নিম্নলিখিত ফলাফল উত্পাদন করবে:

কিভাবে বুটস্ট্র্যাপ 5 ইনপুট গ্রুপ তৈরি করবেন?

7 ইনপুট সহ রেডিও বোতাম ব্যবহার করা

শেষ বিকল্পটি হল ইনপুট বক্সের সামনে রেডিও বোতাম দেখানো।

<div class="input-group"> <span class="input-group-addon"> <input type="radio" aria-label="Radio Button Input Group"> </span> <input type="text" class="form-control" placeholder="Radio Button with Text Input" aria-label="Radio Button Input Group"> </div>

ইনপুট বক্স সহ রেডিও বোতামটি নীচের মত হওয়া উচিত:

কিভাবে বুটস্ট্র্যাপ 5 ইনপুট গ্রুপ তৈরি করবেন?

8 বড় ইনপুট গ্রুপ

আপনি বাইরের অংশে ".input-group-lg" শ্রেণী যোগ করে সম্পূর্ণ ইনপুট গ্রুপ উপাদানগুলির আকার বড় করতে পারেন

<div class="input-group input-group-lg"> <span class="input-group-addon" id="sizing-addon1">@</span> <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1"> </div>

বুটস্ট্র্যাপ 5 শিখুন (সূচক )


রেকর্ডিং উত্স: webnots.com
Leave A Reply

এই ওয়েবসাইট আপনার অভিজ্ঞতা উন্নত করতে কুকি ব্যবহার করে। আমরা ধরে নেব যে আপনি এটির সাথে ঠিক আছেন, তবে আপনি ইচ্ছা করলে অপ্ট-আউট করতে পারেন। আমি স্বীকার করছি আরো বিস্তারিত