১-৮ঃ Style যোগ করা

বাংলায় জ্যাঙ্গো ( python/django tutorail in Bangla) টিউটোরিয়াল সিরিজের আজকের পর্বে আপনাদেরকে স্বাগতম। আজ আমরা আমাদের পেজে style যোগ করে আমাদের ওয়েবসাইটকে রঙিন করে তুলবো।
প্রথমে settings.py ফাইলে নিচের লাইন যোগ করি

এটা দ্বারা আমরা জ্যাঙ্গ কে বোঝাচ্ছি যে, তোমার সকল static(css, js) ফাইল static নামের ডিরেক্টরিতে রাখা আছে।
এখন প্রজেক্ট ডিরেক্টরিতে (যেখানে manage.py ফাইল রয়েছে) static নামের ডিরেক্টরি তৈরি করি। এর মধ্যে style.css ফাইল তৈরী করি।
আমাদের html ফাইলকে বলে দিতে হবে যে আমরা কোথায় স্টাইল যোগ করেছি

templates/post_list.html ফাইল খুলে শুরুতে যোগ করি
{% load static %}
staticfiles নামের একটি template tag লোড করলাম। templatetag সম্পর্কে আমরা পরবর্তিতে জানবো। এটি যোগ করার মাধ্যমে আমরা static ব্যাবহার করতে পেরেছি এবং বলতে পেরেছি যে setting এ যে static url আছে তা ব্যাবহার কর ।

<head></head> এর মধ্যে যোগ করি

আমাদের post_list.html এর চেহারা হবে:

 

আমরা “স্বাগতম বাংলায় জ্যাঙ্গো টিউটোরিয়াল এ” লেখার রং পরিবর্তন করব । লেখাটি আছে h1 ট্যাগ এর মধ্যে। সুতরাং,
static/style.css যোগ করি:
h1{color:blue}
এভাবে যা ইচ্ছা style যোগ করে আমাদের পেজকে সাজাতে পারি

Bootsrap যোগ করি
bootstrap হল html, css ও javascript ফ্রেমওয়ার্ক যা দিয়ে খুব সহজে ওয়েব ডিজাইন করা যায়। bootstrap পেজ থেকে bootstrap ডাউনলোড করি । ডাউনলোড ফাইল Extract করে css, fonts, js ফোল্ডার আমাদের static ডিরেক্টরিতে রাখি । এবার আমাদের templates/post_list.html এর <head></head> এর মধ্যে Bootstrap ফাইলের Link যোগ করি।

পেজ রিলোড দিলে পরিবর্তন দেখতে পাবেন।


কিন্তু আমাদের আগের স্টাইল তো কাজ করছে না। এর কারন আমরা bootstrap যোগ করেছি সবার শেষে যার কারনে bootstrap প্রাধান্য পাচ্ছে। আমাদের নিজের স্টাইলকে প্রাধান্য দিতে চাইলে style.css সবার শেষে লিঙ্ক করতে হবে।
আমাদের পেজকে ইচ্ছামত bootstrap দিয়ে সাজিয়ে নিই

#templates/post_list.html

static/style.css

 পূর্ববর্তী পোষ্ট                                                                               পরবর্তী পোষ্ট

Site Footer