এমনেই হোক আপনি একটি সিম্পল এক পেজ পোর্টফোলিও ওয়েবসাইট বানাচ্ছেন, একটি বড় কোম্পানির জন্য একটি মনোলিথিক অ্যাপ, একটি ব্লগ, বা একটি ফোরাম—সংযোগবশত আপনাকে একটি ড্রপডাউন মেনু দরকার হবে।
যখন আপনার پاس rất সारे লিংক বা অ্যাকশন থাকে, কিন্তু পেজে সেগুলো একসাথে দেখানোর পর্যাপ্ত স্পেস নেই, তখন একটি ড্রপডাউন মেনু খুবই উপকারী।
সাধারণত, ড্রপডাউনতে কিছু JavaScript লাগে।
যদি আপনি এখনো সেটি শিখতে শুরু করেননি বা শুধু একটি কুইক সমাধান চান, তবে Bootstrap সেটির জন্য পারফেক্ট।
Bootstrap কী?
আপনি সম্ভবত এই শব্দটি অনেকবার শুনেছেন, কিন্তু Bootstrap আসলে কী?
এটি একটি ফ্রন্ট-এন্ড CSS (থোড়া JavaScript সহ) ফ্রেমওয়ার্ক। এর মানে এটি একটি 일종의 স্কাফফোল্ডিং যা قبلে তৈরি করা হয়েছে ডেভেলপমেন্ট খুব দ্রুত করতে। প্রোগ্রামাররা একটি স্ট্যান্ডার্ড ডেভেলপ করতে একটি নির্দিষ্ট পরিমাণ সময় ব্যয় করে, এবং সমস্ত প্রিরেকুইসাইট সেটআপ ফ্রেমওয়ার্কের ভিতরেই অন্তর্ভুক্ত করে, যাতে আমাদের প্রতিবার সেটি করতে না হয়।
Bootstrap-এ কিছু কম্পোনেন্টে একটি স্ট্যান্ডার্ডাইজড স্টাইলিং প্রয়োগ করা হয় যেগুলো প্রায়শই তৈরি করা হয়, যেমন বাটন এলিমেন্ট, বাটন গ্রুপ, এবং নেভিগেশন বার। এর মানে আমরা সেই স্টাইলগুলো কিছু প্রিডিফাইনড কিওয়ার্ড ব্যবহার করে প্রয়োগ করতে পারি বারবার অনেক লাইন কোড লিখতে হয় না।
এটি একটি টিমের মাল্টিপল ডেভেলপার বড় অ্যাপ্লিকেশনে কাজ করলে কনসিস্টেন্সি মেইনটেইন করতে খুব সাহায্য করে। সব স্টাইল ফ্রেমওয়ার্কে ডিফাইন করা থাকে।
Bootstrap সেটআপ করা
Bootstrap ব্যবহার করতে, আমাদের আমাদের HTML স্ট্রাকচারে কিছু লাইন কোড যোগ করতে হবে।
আমরা সবচেয়ে দ্রুত এবং সিম্পল সেটআপের জন্য Bootstrap CDN ব্যবহার করব।
প্রথমে, আমাদের একটি প্রপার HTML5 টেমপ্লেট দরকার, যা আধুনিক কোড এডিটরে সহজে করা যায়। VSCode-এ, সিম্পলি ! টাইপ করে এন্টার বা ট্যাব চাপলে HTML5 ডকুমেন্ট স্ট্রাকচার পাওয়া যায়, যেটি নিচের মতো দেখে:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html>
এখন, <head> ট্যাগের ভিতরে, অন্য যেকোনো স্টাইলশিটের উপরে নিচের লাইনগুলো পেস্ট করুন:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous" />
Bootstrap हुडের নিচে কিছু JavaScript লাইব্রেরির ওপর নির্ভর করে, তাই আমাদের ক্লোজিং </body> ট্যাগের ঠিক আগে নিচের <script> ট্যাগগুলোও ইনক্লুড করতে হবে:
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous" ></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous" ></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous" ></script>
এটিই আমাদের সেটআপের সব। এখন আমরা আমাদের প্রজেক্টকে বুটস্ট্র্যাপ করার জন্য প্রস্তুত।
Bootstrap ব্যবহার করা
Bootstrap-এর শক্তি এর কিওয়ার্ডগুলো HTML ট্যাগের ক্লাস হিসেবে ব্যবহার করে 발휘 করা হয়। এটি ব্যবহার করে, আপনি একটি CSS ফাইল তৈরি না করেই আপনার পেজটি সম্পূর্ণ স্টাইল করতে পারেন!
উদাহরণস্বরূপ, এখানে একটি সিম্পল বাটন গ্রুপ:
<div class="btn-group"> <button class="btn btn-primary">button 1</button> <button class="btn btn-secondary">button 2</button> <button class="btn btn-info">button 3</button> <button class="btn btn-success">button 4</button> <button class="btn btn-danger">button 5</button> <button class="btn btn-light">button 6</button> <button class="btn btn-dark">button 7</button> <button class="btn btn-white">button 8</button> <button class="btn btn-warning">button 9</button> </div>
এবং ফলাফল:
আমরা Bootstrap-এর সকল প্রিসেট কালার দিয়ে একটি বাটন গ্রুপ বানালাম (muted বাদে কারণ সেটি টেক্সটের জন্য রিজার্ভড)।
এখন ড্রপডাউনগুলোতে যাই।
Bootstrap ড্রপডাউন, বিভিন্ন পদ্ধতিতে
Bootstrap-এর পুরনো ভার্সনে, ড্রপডাউন জন্য এক্সক্লूसিভলি <a> ট্যাগ ব্যবহার করা হতো। ভার্সন ৪ থেকে <button> ট্যাগও এক্সেপ্ট করা হয়।
লিংক এবং বাটন সম্পর্কে একটি নোট:
লিংক শুধু নেভিগেশন উদ্দেশ্যে ব্যবহার করা উচিত। বর্তমান পেজের ভিতরে হোক বা ইউজারকে অন্য পেজে পাঠাতে হোক, কিন্তু একটি লিংকের একমাত্র ফাংশন হওয়া উচিত নেভিগেশন।
অন্যদিকে, যেকোনো ধরনের অ্যাকশন যেমন লগ ইন, সাইন আপ, সাবমিট ফর্ম, সেকশন হাইড, কালার থিম চেঞ্জ ইত্যাদি বাটন দিয়ে হ্যান্ডেল করা উচিত।
যেকোনো ধরনের JavaScript ক্লিক-রিলেটেড অ্যাকশন বাটন দিয়ে করা উচিত।
এছাড়া, লিংক শুধু এন্টার কী দিয়ে অ্যাক্সেস করা যায়, যেখানে বাটন এন্টার বা স্পেস দিয়ে অ্যাক্সেস করা যায় যা অ্যাক্সেসিবিলিটির জন্য গুরুত্বপূর্ণ।
যেকোনো কেসে, data-toggle=”dropdown” অ্যাট্রিবিউটটি কাজ করার জন্য আবশ্যক।
বাটন দিয়ে ড্রপডাউন
<div class="dropdown"> <button class="btn dropdown-toggle" data-toggle="dropdown"> Button menu </button> <div class="dropdown-menu"> <a href="#" class="dropdown-item">This dropdown</a> <a href="#" class="dropdown-item">Uses</a> <a href="#" class="dropdown-item">Buttons</a> </div> </div>
আমরা পুরো জিনিসটিকে একটি এলিমেন্টে (সাধারণত একটি <div>) র্যাপ করি যার class=“dropdown”, এবং class=“btn dropdown-toggle” এবং data-toggle=“dropdown” সহ একটি বাটন বানাই sebagai প্রথম এলিমেন্ট। এটি ড্রপডাউন মেনুর টগগল হিসেবে কাজ করবে।
তারপর, আমরা ড্রপডাউনের জন্য একটি কন্টেইনার বানাই, আবার সাধারণত একটি <div> বা <ul> ব্যবহৃত হয়, যার class=“dropdown-menu”।
শেষে, আমরা মেনুতে যা যা আইটেম চাই সেগুলো class=“dropdown-item” দিয়ে বানাই। এগুলো সাধারণত অন্য পেজ বা বর্তমান পেজের সেকশনগুলোর লিংক।
ফলাফল:
হুররে, আপনি Bootstrap দিয়ে আপনার প্রথম ড্রপডাউন মেনু বানালেন!
লিংক দিয়ে ড্রপডাউন
<div class="dropdown"> <a class="btn dropdown-toggle" data-toggle="dropdown"> Link menu </a> <ul class="dropdown-menu"> <a class="dropdown-item" href="#">This dropdown</a> <a class="dropdown-item" href="#">Uses</a> <a class="dropdown-item" href="#">Links</a> </ul> </div>
একই জিনিস <a> ট্যাগ দিয়ে করা যায়। আমরা এইবার <ul> ব্যবহার করেছি মেনুর জন্য, এবং ফলাফল একই।
একটি মেনু এবং এর আইটেম স্টাইল করা
Bootstrap স্টাইল মেনু এবং আইটেমে যোগ করা যায়। চলুন আমাদের মেনুতে কিছু কালার যোগ করি। আমরা এটি করতে পারি Bootstrap-এর কালারগুলোর সাথে bg- প্রিফিক্স দিয়ে যেটি standings for background:
<div class="dropdown"> <a class="btn btn-danger dropdown-toggle" data-toggle="dropdown"> Styled menu </a> <div class="dropdown-menu"> <a href="#" class="dropdown-item bg-primary">This is a</a> <a href="#" class="dropdown-item bg-warning">Styled</a> <a href="#" class="dropdown-item bg-success">Dropdown</a> </div> </div>
যেটি ফলাফল দেয়:
স্প্লিট বাটন ড্রপডাউন
একটি অন্য আকর্ষণীয় অপশন হল স্প্লিট বাটন থাকা। এতে আমরা ডাবল ফাংশনালিটি পাই। একটি বাটন একটি উদ্দেশ্যে কাজ করে, এবং ক্যarett ড্রপডাউন অ্যাক্সেস করতে। একটি পটেনশিয়াল ইউজ কেস হল বাটনটি মেনু থেকে সকল আইটেম ধারণকারী একটি পেজ খুলবে, এবং ইনডিভিজুয়াল লিংকগুলো তাদের নিজস্ব আলাদা পেজে যাবে:
<div class="dropdown"> <div class="btn-group"> <a href="#" class="btn btn-danger">All Menu Items</a> <a class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" ></a> <div class="dropdown-menu"> <a href="#" class="dropdown-item bg-primary">Item #1</a> <a href="#" class="dropdown-item bg-warning">Item #2</a> <a href="#" class="dropdown-item bg-success">Item #3</a> </div> </div> </div>
এই কেসে, আমাদের বাটন এবং টগগল র্যাপ করার জন্য class=“btn-group” সহ একটি কন্টেইনার বানাতে হয়, এবং টগগল বাটনে dropdown-toggle-split যোগ করতে হয়।
ড্রপডাউনের ভিতরে ফর্ম
আমরা একটি HTML ফর্মও ড্রপডাউন মেনুর ভিতরে রাখতে পারি:
<div class="dropdown" data-toggle="dropdown"> <button class="dropdown-toggle btn-danger btn">Dropdown Form</button> <div class="dropdown-menu"> <form> <div class="form-group"> <label for="dropdown-form-name">Your name</label> <input type="text" class="form-control" id="dropdown-form-name" /> </div> <div class="form-group"> <label for="dropdown-form-password">Your password</label> <input type="password" class="form-control" id="dropdown-form-password" /> </div> <input type="button" class="btn" value="Press Me!" /> <span class="sr-only">Submit Form</span> <button type="submit" class="btn btn-success">Submit</button> </form> </div> </div>
আমরা সিম্পলি dropdown-menu কন্টেইনারের ভিতরে একটি রেগুলার ফর্ম বানাই।
এটির সবচেয়ে কমন ইউজ কেস হল একটি সিম্পল লগইন ফর্ম, আমাদের উদাহরণের মতো।
নোট: উদাহরণে দেখা sr-only ক্লাস Bootstrap-এ অন্তর্ভুক্ত, যা স্ট্যান্ডস ফর স্ক্রিন-রিডার্স অনলি। এলিমেন্টটি পেজে হিডেন থাকে এবং শুধু স্ক্রিন রিডাররা সেটি রিকগনাইজ করে। এটি অ্যাক্সেসিবিলিটির জন্য গুরুত্বপূর্ণ।
Dropup, Dropleft, Dropright
রেগুলার ড্রপডাউন মেনুর কিছু ভেরিয়েন্ট:
Dropup মেনু
পেজের নিচে ডোক করা একটি নেভবারে আমরা dropup মেনু ব্যবহার করতে পারি:
<div class="dropup"> <a class="btn btn-danger dropdown-toggle" data-toggle="dropdown"> Dropup menu </a> <div class="dropdown-menu"> <a href="#" class="dropdown-item">This is a</a> <a href="#" class="dropdown-item">Bootstrap</a> <div class="dropdown-divider"></div> <a href="#" class="dropdown-item">Dropup menu</a> </div> </div>
Dropleft মেনু
যখন সেটি খুলে দেয় এমন বাটনটি স্ক্রিনের ডান কিনারা স্পর্শ করছে, তখন আমরা dropleft মেনু ব্যবহার করতে পারি যাতে আমাদের মেনু স্ক্রিনের বাইরে না যায়।
<div class="dropleft"> <a class="btn btn-danger dropdown-toggle" data-toggle="dropdown"> Dropleft menu </a> <div class="dropdown-menu"> <a href="#" class="dropdown-item">This is a</a> <a href="#" class="dropdown-item">Bootstrap</a> <div class="dropdown-divider"></div> <a href="#" class="dropdown-item">Dropleft menu</a> </div> </div>
Dropright মেনু
এবং dropright ড্রপলेफটের মতোই, শুধু স্ক্রিনের বিপরীত পাশে।
<div class="dropright"> <a class="btn btn-danger dropdown-toggle" data-toggle="dropdown"> Dropright menu </a> <div class="dropdown-menu"> <a href="#" class="dropdown-item">This is a</a> <a href="#" class="dropdown-item">Bootstrap</a> <div class="dropdown-divider"></div> <a href="#" class="dropdown-item">Dropright menu</a> </div> </div>
এই সকল কেসে, আমরা Bootstrap-এর আরেকটি ফিচার ইনক্লুড করেছি, dropdown-divider ক্লাস সহ একটি খালি div যেটি মেনুর সেকশনগুলোর মধ্যে একটি সুন্দর séparation দেয়।
হেডার সহ ড্রপডাউন
আমরা আমাদের ড্রপডাউন মেনুতে হেডার টেক্সট রাখতে পারি dropdown-header ক্লাস সহ একটি এলিমেন্ট বানিয়ে:
<div class="dropdown m-4" data-toggle="dropdown"> <button class="dropdown-toggle btn-info btn">Entitled Dropdown</button> <div class="dropdown-menu"> <h2 class="dropdown-header">I'm a title</h2> <a class="dropdown-item" href="#">We are</a> <a class="dropdown-item" href="#">Items</a> </div> </div>
প্যারাগ্রাফ, স্প্যান, বা অন্য টেক্সট ট্যাগের বদলে হেডিং কেন ব্যবহার করব?
একটি হেডিং <h1-h6> সার্চ ইঞ্জিন অপ্টিমাইজেশন (SEO)-এ একটি ভূমিকা পালন করে, তাই সেটি সঠিক জায়গায় রাখা ওরথ Има।
যদি আমাদের ড্রপডাউন আমাদের ওয়েবসাইটের একটি গুরুত্বপূর্ণ সেকশন হোস্ট করে, তবে সেটিকে কিছু হেডিং দেয়া ভালো লাগতে পারে। Bootstrap-এ হেডিং ট্যাগের জন্য কিছু ফরম্যাটিংও আছে, যা আমাদের উদাহরণে দেখতে পাচ্ছি:
রাইট-এলাইনড ড্রপডাউন
ডিফল্টভাবে, Bootstrap-এর ড্রপডাউন মেনুগুলো তাদের টগগল বাটনের সাথে লেফ্ট-এলাইনড থাকে।
যদি একটি রাইট-এলাইনড মেনু আপনার ডিজাইনের জন্য बेटার ফিট হয়, বা আপনি সেক্ষানেই পছন্দ করেন, তবে সেটিতে dropdown-menu-right ক্লাস যোগ করুন:
<div class="dropdown"> <a class="btn btn-danger dropdown-toggle" data-toggle="dropdown"> Right-aligned </a> <div class="dropdown-menu dropdown-menu-right"> <a href="#" class="dropdown-item">This is a</a> <a href="#" class="dropdown-item">right-aligned</a> <div class="dropdown-divider"></div> <a href="#" class="dropdown-item">Dropdown menu</a> </div> </div>
ড্রপডাউনে Active এবং Disabled আইটেম
আপনি একটি ড্রপডাউন আইটেম ডিজেবল বা অ্যাক্টিভ করতে পারেন শুধু উপযুক্ত ক্লাস যোগ করে:
<div class="dropdown m-4"> <button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" > Disabled button menu </button> <div class="dropdown-menu"> <a href="#" class="dropdown-item">This is a</a> <a href="#" class="dropdown-item disabled">Disabled</a> <a href="#" class="dropdown-item">Button</a> </div> </div>
আপনি কখন আপনার মেনুতে একটি ডিজেবল আইটেম চাইবেন? হয়তো অপশনটি বর্তমানে অনুপলব্ধ, যেমন ওয়ার্ল্ডওয়াইড শিপিং, আইটেমটি আউট অফ স্টক, বা অনুরূপ।
<div class="dropdown m-4"> <button class="btn btn-success dropdown-toggle" data-toggle="dropdown"> Active button menu </button> <div class="dropdown-menu"> <a href="#" class="dropdown-item">This is</a> <a href="#" class="dropdown-item active">An active</a> <a href="#" class="dropdown-item">Button</a> </div> </div>
অ্যাক্টিভ ক্লাস অন্যদিকে ভিউয়ারের ধ্যান আকর্ষণ করতে তৈরি, বর্তমান বা ফোকাসড এলিমেন্ট হাইলাইট করে। এই ক্লাস স্ট্যাটিক্যালি সেট করার (এলিমেন্ট থেকে এলিমেন্টে পরিবর্তন বা সরানো ছাড়া) একটি পটেনশিয়াল ইউজ কেস হল কল-টু-অ্যাকশন (বাই, রেজিস্টার, সাবস্ক্রাইব ইত্যাদি) বাটন, বা সিম্পলি ইউজারদের ধ্যান একটি নির্দিষ্ট এলিমেন্টের দিকে আকৃষ্ট করা।
আপনি Bootstrap-এর জন্য প্রস্তুত
Bootstrap র্যাপিড ডেভেলপমেন্টের জন্য তৈরি একটি খুব শক্তিশালী ফ্রেমওয়ার্ক, প্রতিটি প্রজেক্টে, প্রতিটি কম্পোনেন্টের জন্য প্রয়োজনীয় সেটআপ এবস্ট্র্যাক্ট করে দিয়ে।
আজ আমরা শিখেছি কীভাবে আমরা এর সাথে বিভিন্ন ধরণের ড্রপডাউন বানাতে পারি, আমাদের পার্টে কোনো JS ছাড়া (কমপক্ষে)।
এখন যান এবং একটি প্রজেক্ট বুটস্ট্র্যাপ করুন!
