জ্যাঙ্গো প্রকল্পে বুটস্ট্র্যাপ কীভাবে ব্যবহার করবেন

আপনার মত পাঠকরা MUO সমর্থন করতে সাহায্য করে। আপনি যখন আমাদের সাইটে লিঙ্ক ব্যবহার করে একটি ক্রয় করেন, আমরা একটি অনুমোদিত কমিশন উপার্জন করতে পারি। আরও পড়ুন

2013 সালে রিলিজ হওয়ার পর থেকে, বুটস্ট্র্যাপ ডেভেলপাররা ওয়েব পেজ স্টাইল করার পদ্ধতিতে বিপ্লব করেছে। বুটস্ট্র্যাপ একটি জনপ্রিয় ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক যা প্রতিক্রিয়াশীল ওয়েব অ্যাপ্লিকেশন ডিজাইন করতে ব্যবহৃত হয়।

জ্যাঙ্গো বুটস্ট্র্যাপের পূর্ব-নির্মিত CSS শৈলী এবং জাভাস্ক্রিপ্ট প্লাগইনগুলি ওয়েব পেজ স্টাইল করতে ব্যবহার করে। যদিও এটি স্টাইলিং এর ঝামেলা কমায়, এটি জ্যাঙ্গোতে কনফিগার করা চ্যালেঞ্জিং হতে পারে।

দিনের মেকইউজের ভিডিও

আসুন জেনে নিই কিভাবে একটি জ্যাঙ্গো অ্যাপ্লিকেশনে বুটস্ট্র্যাপ ইনস্টল এবং কনফিগার করতে হয়।

কিভাবে বুটস্ট্র্যাপ ইনস্টল করবেন

দুটি উপায় আছে বুটস্ট্র্যাপ 5 ব্যবহার করুন একটি জ্যাঙ্গো প্রকল্পে। আপনি এটি আপনার অ্যাপ্লিকেশনে ইনস্টল করতে পারেন বা ফাইলগুলি ব্যবহার করে উল্লেখ করতে পারেন বুটস্ট্র্যাপের সিডিএন . এই প্রকল্পটি পূর্বের পদ্ধতি ব্যবহার করবে।

বুটস্ট্র্যাপ ইনস্টল করার আগে, একটি জ্যাঙ্গো প্রকল্প তৈরি করুন এবং গ্যালারি নামক একটি অ্যাপ্লিকেশন। অ্যাপ্লিকেশনটি একটি ফটো গ্যালারি হবে, এবং আপনি অ্যাপ্লিকেশনটির নেভিগেশন বার স্টাইল করতে বুটস্ট্র্যাপ ব্যবহার করবেন।

এরপরে, নিম্নলিখিত কমান্ড দিয়ে বুটস্ট্র্যাপ ইনস্টল করুন:

বাহ্যিক হার্ড ড্রাইভ অ্যাক্সেস করতে পারে না

pipenv install django-bootstrap5  # installs Bootstrap version 5

Pipfile চেক করুন এবং নিশ্চিত করুন যে একটি বুটস্ট্র্যাপ 5 নির্ভরতা আছে। আপনাকে এখন জ্যাঙ্গো প্রকল্পকে অবহিত করতে হবে যে আপনি বুটস্ট্র্যাপ নির্ভরতা ব্যবহার করছেন।

মধ্যে settings.py ফাইল, নীচে দেখানো হিসাবে বুটস্ট্র্যাপ নিবন্ধন করুন:

INSTALLED_APPS = [ 
    'gallery', 
    'bootstrap5',    
]

প্রকল্প সেটিংসে বুটস্ট্র্যাপ নিবন্ধন করা আপনার প্রকল্পের সাথে django-bootstrap5 নির্ভরতাকে সংযুক্ত করে। এটি প্রকল্পে সংজ্ঞায়িত অন্য কোনো অ্যাপ্লিকেশনের জন্য উপলব্ধ হবে।

একটি টেমপ্লেটে বুটস্ট্র্যাপ প্রয়োগ করুন

প্রথমে, নামে একটি ফোল্ডার তৈরি করুন টেমপ্লেট আপনার অ্যাপ্লিকেশন ফোল্ডারে। এই ফোল্ডারের ভিতরে, একটি তৈরি করুন base.html ফাইল এবং ক navbar.html ফাইল টেমপ্লেটগুলিতে এইচটিএমএল ফাইল থাকবে যা বুটস্ট্র্যাপ স্টাইল করবে।

আপনি বুটস্ট্র্যাপ প্রয়োগ করতে পারেন navbar.html টেমপ্লেট, একটি বেস ফাইল ব্যবহার করা প্রচলিত। ক base.html ফাইলটিতে যেকোনো পৃষ্ঠায় প্রয়োগ করার জন্য সমস্ত স্ক্রিপ্ট এবং লিঙ্ক থাকবে। এটি স্বতন্ত্র টেমপ্লেটগুলির জটিলতা হ্রাস করে, আপনার কোডকে আরও পরিষ্কার এবং বোঝা সহজ করে তোলে।

মধ্যে base.html ফাইল, নিম্নলিখিত অন্তর্ভুক্ত:

{% load bootstrap5 %} 
		 
	 
<!DOCTYPE html> 
		 
<html lang="en"> 
		 
<head> 
	 
      <meta charset="UTF-8"> 
		 
      <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
		 
      <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
      <title> Gallery </title> 
		 
		 
       {% block styles %} 
		 
		 
       {% bootstrap_css %} 
			 
		 
       {% endblock %} 
		 
</head> 
<body>   
       {% include 'navbar.html' %} 
       {% block content %} {% endblock %} 
       {% block scripts %} 
       <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"> 
       </script> 
       {% bootstrap_javascript %} 
</body> 
</html>

প্রথমে, bootstrap5 নির্ভরতা লোড করুন। তারপরে দুটি ব্লক শৈলী তৈরি করুন যেখানে আপনি টেমপ্লেটগুলির জন্য সমস্ত শৈলী সংজ্ঞায়িত করবেন। অন্তর্ভুক্ত করুন {% বুটস্ট্র্যাপ_সিএসএস %} টেমপ্লেট ট্যাগ এবং বুটস্ট্র্যাপ CSS ফাইলের একটি লিঙ্ক।

পরবর্তী, একটি ব্লক স্ক্রিপ্ট তৈরি করুন যা জাভাস্ক্রিপ্ট কার্যকারিতা সংজ্ঞায়িত করে।

অন্তর্ভুক্ত করা navbar.html মধ্যে base.html এটি বুটস্ট্র্যাপের সাথে লিঙ্ক করে।

বুটস্ট্র্যাপ শৈলী যোগ করে কনফিগারেশন পরীক্ষা করুন navbar.html টেমপ্লেট:

<nav class="navbar navbar-expand-lg"> 
    <div class="container-fluid"> 
        <h2 class="brand" style="color:green">PICHA GALLERY</h2> 
  
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><i class="fas fa-bars"></i></button> 
  
        <div class="collapse navbar-collapse" id="navbarSupportedContent"> 
            <ul class="navbar-nav ml-auto mb-2 mb-lg-0"> 
                <li class="nav-item"><a class="nav-link nav-link-1 active" aria-current="page" href="{% url 'home' %}" style="color:green">Home</a></li> 
                <li class="nav-item"><a class="nav-link nav-link-2" href="#gallery" style="color:green">Gallery</a</li> 
            </ul> 
        </div> 
    </div> 
</nav>

এখন, সার্ভার চালান এবং একটি ব্রাউজারে আপনার সাইট পরীক্ষা করুন। বুটস্ট্র্যাপ নেভিগেশন বারে প্রযোজ্য স্টাইলিংটি আপনার দেখতে হবে।

কেন জ্যাঙ্গো প্রকল্পে বুটস্ট্র্যাপ ব্যবহার করবেন?

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

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

কেন বুটস্ট্র্যাপ ব্যবহার করবেন না স্টাইল করতে এবং আপনার জ্যাঙ্গো প্রকল্পগুলির জন্য আশ্চর্যজনক UI তৈরি করবেন? জ্যাঙ্গো ওয়েব ডেভেলপমেন্টে এর ক্ষমতা দিয়ে আপনাকে বিস্মিত করবে।