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

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

2

বাটন গ্রুপ যেমন নামটি ইঙ্গিত করে তা কেবল একটি একক উপাদান হিসাবে প্রদর্শনের জন্য একত্রিত বোতামগুলির একটি গ্রুপ। আমাদের আগের বাটন টিউটোরিয়ালে আমরা ব্যাখ্যা করেছি কিভাবে বাটন গ্রুপ ধারণা ব্যবহার করে চেকবক্স এবং রেডিও বোতাম দিয়ে বোতাম তৈরি করা যায়। এই টিউটোরিয়ালে আসুন বুটস্ট্র্যাপ 5 এর উদাহরণ সহ বিভিন্ন ধরণের বোতাম গ্রুপ ব্যাখ্যা করি ।

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

এই টিউটোরিয়ালটি নিম্নলিখিত অধ্যায়গুলি জুড়েছে:

  1. অনুভূমিক বোতাম গ্রুপ তৈরি করা
  2. বোতাম গ্রুপ টুলবার
  3. বোতাম গ্রুপের সাইজিং
  4. ড্রপডাউন সহ নেস্টেড বোতাম গ্রুপ
  5. উল্লম্ব বোতাম গ্রুপ
  6. নেস্টেড উল্লম্ব বোতাম গ্রুপ

1 অনুভূমিক বোতাম গ্রুপ

অনুভূমিক বোতাম গ্রুপ হল দুই বা ততোধিক বোতাম একসাথে গ্রুপ করার সহজ রূপ। আসুন একটি ডিভ ট্যাগ সহ ".btn-group" ক্লাস ব্যবহার করে চারটি বোতামের একটি বাটন গ্রুপ তৈরি করি। প্রতিটি বোতাম বিভিন্ন রঙে এটি দেখানোর জন্য বিভিন্ন প্রাসঙ্গিক ক্লাস ব্যবহার করছে।

<!DOCTYPE html> <html lang="en"> <head> <!-- Meta Tags for Bootstrap 5 --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap 5 CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> </head> <body> <!-- Start of Button Group --> <div class="btn-group" role="group" aria-label="Horizontal Button Group"> <button type="button" class="btn btn-primary">Button 1 </button> <button type="button" class="btn btn-warning">Button 2</button> <button type="button" class="btn btn-danger">Button 3</button> <button type="button" class="btn btn-info">Button 4</button> </div> <!-- End of Button Group --> <!-- Bootstrap 5 Scripts --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script> </body> </html>

"ভূমিকা" এবং "আরিয়া-লেবেল" screenচ্ছিকভাবে প্রধানত স্ক্রিন রিডারদের অ্যাক্সেসযোগ্যতার দৃষ্টিকোণ থেকে ব্যবহৃত হয়।

এটি ব্রাউজারে নিম্নলিখিত ফলাফল তৈরি করবে।

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

উপরের কোডটি CDN CSS এবং স্ক্রিপ্ট লিঙ্ক ব্যবহার করে সম্পূর্ণ টেমপ্লেট কোড। আপনি বোতাম গোষ্ঠীর শুরু এবং শেষের মধ্যে ব্লকটি প্রতিস্থাপন করতে পারেন নীচের উদাহরণে দেওয়া কোড দিয়ে বিভিন্ন বোতাম গ্রুপ শৈলী তৈরি এবং পরীক্ষা করতে।

2 বোতাম গ্রুপ টুলবার

গ্রুপিং বিকল্পটি আপনাকে অ্যাড রোল = "টুলবার" অ্যাট্রিবিউট যোগ করে টুলবারের মতো ব্যবস্থা করতে দেয়। আপনি টেক্সট ইনপুট সহ টুলবার তৈরি করতে ইনপুট গ্রুপের সাথে বাটন গ্রুপও ব্যবহার করতে পারেন। নমুনা কোড নিচে দেওয়া হল:

<div class="btn-toolbar" role="toolbar" aria-label="Button Group Toolbar"> <div class="btn-group" role="group" aria-label="Button Group"> <button type="button" class="btn btn-primary">A</button> <button type="button" class="btn btn-warning">B</button> <button type="button" class="btn btn-info">C</button> <button type="button" class="btn btn-success">D</button> </div> <div class="input-group"> <span class="input-group-addon" id="id1">@</span> <input type="text" class="form-control" placeholder="This is input group box" aria-describedby="id1"> </div> </div>

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

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

আপনি যেমন দেখতে পারেন বাটন গ্রুপ এবং ইনপুট গ্রুপ উপাদানগুলির মধ্যে কোন ফাঁক নেই। সঠিকভাবে সারিবদ্ধ করতে এই দুটি উপাদানের মধ্যে মার্জিন যোগ করার জন্য আপনার কাস্টম CSS ব্যবহার করা উচিত।

3 বাটন গ্রুপের বিভিন্ন সাইজিং

বুটস্ট্র্যাপ 5 আপনাকে বড় (btn-group-lg), ডিফল্ট এবং ছোট (btn-group-sm) এর জন্য তিনটি সাইজিং ক্লাস করার অনুমতি দেয়। আপনি আকার পরিবর্তন করতে ".btn-group" শ্রেণীতে সরাসরি বড় বা ছোট শ্রেণী যুক্ত করতে পারেন।

<!-- Start of Large Button Group Size --> <div class="btn-group btn-group-lg" role="group" aria-label="Large Button Group"> <button type="button" class="btn btn-primary">Large Button 1</button> <button type="button" class="btn btn-warning">Large Button 2</button> <button type="button" class="btn btn-danger">Large Button 3</button> </div> <!-- Start of Default Button Group Size --> <div class="btn-group" role="group" aria-label="Default Button Group"> <button type="button" class="btn btn-primary">Default Button 1</button> <button type="button" class="btn btn-warning">Default Button 2</button> <button type="button" class="btn btn-danger">Default Button 3</button> </div> <!-- Start of Small Button Group Size --> <div class="btn-group btn-group-sm" role="group" aria-label="Small Button Group"> <button type="button" class="btn btn-primary">Small Button 1</button> <button type="button" class="btn btn-warning">Small Button 2</button> <button type="button" class="btn btn-danger">Small Button 3</button> </div>

উপরের কোডটি নীচে দেখানো ফলাফল তৈরি করবে:

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

4 ড্রপডাউন সহ নেস্টেড বোতাম গ্রুপ তৈরি করা

অন্য। এইভাবে আপনি কয়েকটি বোতাম এবং তারপরে অতিরিক্ত লিঙ্ক সহ একটি ড্রপডাউন দেখাতে পারেন।

<div class="btn-group" role="group" aria-label="Nested Button Group"> <button type="button" class="btn btn-primary">Button 1</button> <button type="button" class="btn btn-info">Button 2</button> <div class="btn-group" role="group"> <button id="nested1" type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown 1 </button> <div class="dropdown-menu" aria-labelledby="nested1"> <a class="dropdown-item text-danger" href="#">Dropdown Link 1</a> <div class="dropdown-divider"></div> <a class="dropdown-item text-info" href="#">Dropdown Link 2</a> </div> </div> </div>

ফলাফলটি নীচের মত হওয়া উচিত:

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

5 উল্লম্ব বোতাম গ্রুপ

বাটনগুলি।

<div class="btn-group-vertical"> <button type="button" class="btn btn-primary">Button 1 </button> <button type="button" class="btn btn-warning">Button 2</button> <button type="button" class="btn btn-danger">Button 3</button> </div>

কোডের ফলাফল নীচের বোতাম গ্রুপ তৈরি করা উচিত:

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

6 নেস্টেড উল্লম্ব বোতাম গ্রুপ

অনুভূমিক নেস্টিংয়ের মতো, উল্লম্ব বোতাম গ্রুপগুলি ড্রপডাউন দিয়েও বাসা বাঁধতে পারে।

<div class="btn-group-vertical" role="group" aria-label="Nested Button Group"> <button type="button" class="btn btn-primary">Button 1</button> <button type="button" class="btn btn-secondary">Button 2</button> <div class="btn-group" role="group"> <button id="nested2" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown 1 </button> <div class="dropdown-menu" aria-labelledby="nested2"> <a class="dropdown-item text-danger" href="#">Dropdown Link 1</a> <div class="dropdown-divider"></div> <a class="dropdown-item text-danger" href="#">Dropdown Link 2</a> </div> </div> </div>

ফলাফলটি কেমন হবে তা নীচে দেওয়া হল:

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

লক্ষ্য করুন যে বিভক্ত বোতামগুলি উল্লম্ব নেস্টিংয়ে সমর্থিত নয়।


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


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

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