কম্পিউটার

বুটস্ট্র্যাপ দিয়ে কীভাবে একটি ড্রপডাউন মেনু তৈরি করবেন

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

একটি ড্রপডাউন মেনু বিশেষভাবে উপযোগী হয় যখন আপনার অনেকগুলি লিঙ্ক বা অ্যাকশন থাকে, কিন্তু সেগুলি একবারে প্রদর্শন করার জন্য পৃষ্ঠায় পর্যাপ্ত স্থান নেই৷

সাধারণত, ড্রপডাউনের জন্য কিছুটা জাভাস্ক্রিপ্টের প্রয়োজন হয়।

আপনি যদি এখনও এটি শেখা শুরু না করে থাকেন বা শুধুমাত্র একটি দ্রুত সমাধান চান, তাহলে বুটস্ট্র্যাপ উপযুক্ত।

বুটস্ট্র্যাপ কি?

আপনি সম্ভবত শব্দটি প্রায় অনেকবার শুনেছেন, কিন্তু বুটস্ট্র্যাপ কী?

এটি একটি ফ্রন্ট-এন্ড CSS (একটু জাভাস্ক্রিপ্ট সহ) ফ্রেমওয়ার্ক। এর মানে হল যে এটি একটি ধরনের ভারা যা আগে থেকে তৈরি করা হয় যাতে উন্নয়নকে যথেষ্ট গতিতে করা হয়। প্রোগ্রামাররা একটি স্ট্যান্ডার্ড তৈরি করার জন্য একটি নির্দিষ্ট সময় প্রতিশ্রুতি দেয় যা ধরে রাখতে হবে এবং ফ্রেমওয়ার্কের মধ্যেই প্রয়োজনীয় সমস্ত পূর্বশর্ত সেটআপ অন্তর্ভুক্ত করে, তাই আমাদের প্রতিবার এটি করতে হবে না।

একটি প্রমিত স্টাইলিং বুটস্ট্র্যাপের নির্দিষ্ট উপাদানগুলিতে প্রয়োগ করা হয় যা প্রায়শই তৈরি করা হয়, যেমন বোতাম উপাদান, বোতাম গ্রুপ এবং নেভিগেশন বার। এর মানে হল যে আমরা বারবার কোডের অসংখ্য লাইন লেখার পরিবর্তে কয়েকটি পূর্বনির্ধারিত কীওয়ার্ড ব্যবহার করে সেই সমস্ত শৈলী প্রয়োগ করতে পারি।

এটি সামঞ্জস্যের সাথে অনেক সাহায্য করে কারণ একাধিক ডেভেলপারদের একটি দল বৃহত্তর অ্যাপ্লিকেশনগুলিতে কাজ করে একই শৈলী প্রয়োগ করার বিষয়ে চিন্তা করার দরকার নেই। সমস্ত শৈলী কাঠামোর মধ্যে সংজ্ঞায়িত করা হয়৷

81% অংশগ্রহণকারী বলেছেন যে তারা বুটক্যাম্পে যোগ দেওয়ার পরে তাদের প্রযুক্তিগত কাজের সম্ভাবনা সম্পর্কে আরও আত্মবিশ্বাসী বোধ করেছেন। আজই একটি বুটক্যাম্পের সাথে মিলিত হন৷

গড় বুটক্যাম্প গ্র্যাড একটি বুটক্যাম্প শুরু করা থেকে শুরু করে তাদের প্রথম চাকরি খোঁজা পর্যন্ত ক্যারিয়ারের পরিবর্তনে ছয় মাসেরও কম সময় ব্যয় করেছে।

বুটস্ট্র্যাপ সেট আপ করা হচ্ছে

বুটস্ট্র্যাপ ব্যবহার করার জন্য, আমাদের এইচটিএমএল কাঠামোতে কোডের কয়েকটি লাইন যুক্ত করতে হবে।

আমরা দ্রুততম এবং সহজতম সেটআপের জন্য বুটস্ট্র্যাপ সিডিএন ব্যবহার করতে যাচ্ছি।

প্রথমত, আমাদের একটি সঠিক 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>

এখন, ট্যাগের ভিতরে, অন্য যেকোনো স্টাইলশীটের উপরে নিচের লাইনগুলো পেস্ট করুন:

<link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
      integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
      crossorigin="anonymous"
    />

বুটস্ট্র্যাপ হুডের নিচে থাকা কিছু জাভাস্ক্রিপ্ট লাইব্রেরির উপর নির্ভর করে, তাই ক্লোজিং ট্যাগের আগে আমাদের নিম্নলিখিত

  1. কিভাবে CSS দিয়ে সার্চ বাটন তৈরি করবেন?

  2. কিভাবে HTML দিয়ে ফাইল আপলোড বাটন তৈরি করবেন?

  3. কিভাবে Tkinter এ একটি স্টপ বোতাম দিয়ে একটি লুপ থামাতে?

  4. কিভাবে এক্সেলে একটি টেবিল তৈরি করবেন (কাস্টমাইজেশন সহ)