মডিউল ৩.৩ : কিভাবে বুটস্ট্র্যাপ নিয়ে কাজ করবো
বুটস্ট্র্যাপ নিয়ে কাজ করতে গেলে আমাদের স্পেশাল কোনো কাজ করা লাগে না জাস্ট bootstrap এর ওয়েবসাইট থেকে css আর জাভাস্ক্রিপ্ট ফাইল টা কপি করে আনলেই সেটা কাজ করে, নিচের মত করে।
এখন আসো আমরা একটা কাজ করি। Views থেকে কিছু ডাটা আমরা কনটেক্সট হিসেবে পাঠাই আমাদের html এ তারপর সেটার উপর লুপ চালিয়ে সেটা কে bootstrap টেবিল এ দেখানোর চেষ্টা করি।
App's views.py code :
from django.shortcuts import render
# Create your views here.
def index(request):
data = [
{
"userId": 1,
"id": 1,
"title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
"body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
},
{
"userId": 1,
"id": 2,
"title": "qui est esse",
"body": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla"
},
{
"userId": 1,
"id": 3,
"title": "ea molestias quasi exercitationem repellat qui ipsa sit aut",
"body": "et iusto sed quo iure\nvoluptatem occaecati omnis eligendi aut ad\nvoluptatem doloribus vel accusantium quis pariatur\nmolestiae porro eius odio et labore et velit aut"
},
{
"userId": 1,
"id": 4,
"title": "eum et est occaecati",
"body": "ullam et saepe reiciendis voluptatem adipisci\nsit amet autem assumenda provident rerum culpa\nquis hic commodi nesciunt rem tenetur doloremque ipsam iure\nquis sunt voluptatem rerum illo velit"
},
{
"userId": 1,
"id": 5,
"title": "nesciunt quas odio",
"body": "repudiandae veniam quaerat sunt sed\nalias aut fugiat sit autem sed est\nvoluptatem omnis possimus esse voluptatibus quis\nest aut tenetur dolor neque"
}]
return render(request, 'index.html', {'data' : data})App's index.html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous"
/>
</head>
<body>
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a
class="nav-link active"
aria-current="page"
href="{% url 'home' %}"
>Home</a
>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'about' %}">About</a>
</li>
<li class="nav-item dropdown">
<a
class="nav-link dropdown-toggle"
href="#"
role="button"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider" /></li>
<li>
<a class="dropdown-item" href="#">Something else here</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex" role="search">
<input
class="form-control me-2"
type="search"
placeholder="Search"
aria-label="Search"
/>
<button class="btn btn-outline-success" type="submit">
Search
</button>
</form>
</div>
</div>
</nav>
<table class="table">
<thead>
<tr>
<th scope="col">User Id</th>
<th scope="col">ID</th>
<th scope="col">Title</th>
<th scope="col">Body</th>
</tr>
</thead>
<tbody>
{% for i in data %}
<tr>
<th scope="row">{{i.userId}}</th>
<td>{{i.id}}</td>
<td>{{i.title}}</td>
<td>{{i.body}}</td>
</tr>
{% endfor %}
</tbody>
</table>
<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>
</body>
</html>টেবিল এর হেডার পার্ট টা কমন সবার জন্যে সেজন্যে সেটা লুপ এর মধ্যে আসে নাই। খেয়াল করে দেখো আমাদের লিস্ট অফ ডিকশনারি এর প্রত্যেকটা ডিকশনারি এর জন্যে আলাদা আলাদা row তৈরি হবে সেজন্যে আমরা tbody ট্যাগ এর মধ্যে লুপ চালিয়ে তার মধ্যে tr ট্যাগ ইউজ করেছি আর তার মধ্যে ডাটা গুলা শো করাচ্ছি।
Previousমডিউল ৩.২ : কিভাবে এপ্প এর মধ্যে স্ট্যাটিক ফাইল নিয়ে কাজ করতে হয়Nextমডিউল ৩.৪ : ইউআরএল ট্যাগ
Last updated
