Bulma একটি শক্তিশালী CSS ফ্রেমওয়ার্ক যা দ্রুত এবং কার্যকরী ওয়েব পেজ ডিজাইন তৈরি করতে সহায়তা করে। Bulma ফ্রেমওয়ার্ক ব্যবহার করে একটি পূর্ণাঙ্গ প্রোজেক্ট তৈরি করার জন্য আপনাকে প্রথমে প্রয়োজনীয় উপাদানগুলো পরিকল্পনা এবং ডিজাইন করতে হবে। এখানে, আমরা একটি বেসিক ওয়েব পেজ তৈরি করবো যেখানে থাকবে একটি Navbar, Card Layout, Form, এবং একটি Footer।
প্রজেক্টের গঠন
আমরা নিচের অংশগুলো ব্যবহার করব:
- Navbar: ওয়েবসাইটের নেভিগেশন সিস্টেম।
- Card Layout: কন্টেন্ট ব্লকগুলো সুন্দরভাবে প্রদর্শনের জন্য।
- Form: ব্যবহারকারীর ইনপুট নেওয়ার জন্য।
- Footer: ওয়েবসাইটের পাদদেশ, যেখানে যোগাযোগের তথ্য বা কপিরাইট ইত্যাদি থাকবে।
১. প্রজেক্টের ফোল্ডার গঠন
প্রথমে আমাদের প্রজেক্টের ফোল্ডার গঠন করতে হবে। উদাহরণস্বরূপ:
my-bulma-project/
│
├── index.html
├── styles.css
└── assets/
└── images/
২. HTML ফাইল তৈরি (index.html)
এখন আমাদের index.html ফাইল তৈরি করতে হবে যেখানে Bulma CDN যুক্ত করা থাকবে এবং বিভিন্ন কম্পোনেন্ট ব্যবহার করা হবে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bulma Project</title>
<!-- Bulma CSS CDN -->
<link href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css" rel="stylesheet">
<!-- Custom Stylesheet -->
<link href="styles.css" rel="stylesheet">
</head>
<body>
<!-- Navbar Section -->
<nav class="navbar is-primary">
<div class="navbar-brand">
<a class="navbar-item" href="#">My Website</a>
<div class="navbar-burger burger" data-target="navbarMenu">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div id="navbarMenu" class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item" href="#">Home</a>
<a class="navbar-item" href="#">About</a>
<a class="navbar-item" href="#">Services</a>
<a class="navbar-item" href="#">Contact</a>
</div>
</div>
</nav>
<!-- Hero Section -->
<section class="hero is-info is-medium">
<div class="hero-body">
<div class="container">
<h1 class="title">Welcome to My Website</h1>
<h2 class="subtitle">Creating amazing experiences with Bulma</h2>
</div>
</div>
</section>
<!-- Card Section -->
<section class="section">
<div class="container">
<div class="columns is-multiline">
<div class="column is-one-third">
<div class="card">
<div class="card-image">
<figure class="image is-4by3">
<img src="https://via.placeholder.com/300" alt="Image">
</figure>
</div>
<div class="card-content">
<div class="media">
<div class="media-content">
<p class="title is-4">Card Title</p>
<p class="subtitle is-6">Subtitle</p>
</div>
</div>
<div class="content">
Some description about the card content.
</div>
</div>
</div>
</div>
<div class="column is-one-third">
<div class="card">
<div class="card-image">
<figure class="image is-4by3">
<img src="https://via.placeholder.com/300" alt="Image">
</figure>
</div>
<div class="card-content">
<div class="media">
<div class="media-content">
<p class="title is-4">Card Title</p>
<p class="subtitle is-6">Subtitle</p>
</div>
</div>
<div class="content">
Some description about the card content.
</div>
</div>
</div>
</div>
<div class="column is-one-third">
<div class="card">
<div class="card-image">
<figure class="image is-4by3">
<img src="https://via.placeholder.com/300" alt="Image">
</figure>
</div>
<div class="card-content">
<div class="media">
<div class="media-content">
<p class="title is-4">Card Title</p>
<p class="subtitle is-6">Subtitle</p>
</div>
</div>
<div class="content">
Some description about the card content.
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Form Section -->
<section class="section">
<div class="container">
<h2 class="title is-3">Contact Form</h2>
<form>
<div class="field">
<label class="label">Name</label>
<div class="control">
<input class="input" type="text" placeholder="Your Name">
</div>
</div>
<div class="field">
<label class="label">Email</label>
<div class="control">
<input class="input" type="email" placeholder="Your Email">
</div>
</div>
<div class="field">
<label class="label">Message</label>
<div class="control">
<textarea class="textarea" placeholder="Your Message"></textarea>
</div>
</div>
<div class="field">
<div class="control">
<button class="button is-link">Submit</button>
</div>
</div>
</form>
</div>
</section>
<!-- Footer Section -->
<footer class="footer">
<div class="content has-text-centered">
<p>© 2024 My Website. All rights reserved.</p>
</div>
</footer>
<!-- Bulma Navbar Burger Script -->
<script>
document.addEventListener('DOMContentLoaded', () => {
const burger = document.querySelector('.navbar-burger');
const menu = document.querySelector('#navbarMenu');
burger.addEventListener('click', () => {
burger.classList.toggle('is-active');
menu.classList.toggle('is-active');
});
});
</script>
</body>
</html>
৩. CSS ফাইল তৈরি (styles.css)
আপনার কাস্টম স্টাইল ফাইল তৈরি করতে পারেন যদি আপনি Bulma এর স্টাইলগুলির সাথে কিছু পরিবর্তন করতে চান। উদাহরণস্বরূপ:
/* Custom Styles */
body {
font-family: Arial, sans-serif;
}
.navbar {
margin-bottom: 30px;
}
.hero {
margin-bottom: 40px;
}
.card {
margin-bottom: 20px;
}
.footer {
background-color: #f5f5f5;
padding: 10px 0;
}
৪. প্রোজেক্ট চালু করা
এখন আপনি যদি index.html ফাইলটি আপনার ব্রাউজারে খুলে দেখেন, তাহলে Bulma এর মাধ্যমে তৈরি করা একটি পূর্ণাঙ্গ ওয়েব পেজ দেখতে পাবেন। এখানে, আপনি:
- Navbar: নেভিগেশন সিস্টেমের জন্য।
- Hero Section: একটি সুন্দর ওয়েব পেজ শুরুর অংশ।
- Card Layout: কন্টেন্ট ব্লকগুলোর সজ্জিত উপস্থাপন।
- Contact Form: ব্যবহারকারীর ইনপুট নেওয়ার জন্য ফর্ম।
- Footer: পাদদেশে কপিরাইট তথ্য।
সারাংশ
এটি ছিল Bulma CSS ফ্রেমওয়ার্ক ব্যবহার করে একটি পূর্ণাঙ্গ ওয়েব পেজ তৈরি করার প্রক্রিয়া। Bulma এর সহজ ব্যবহারযোগ্য ক্লাস এবং কম্পোনেন্টগুলি ব্যবহার করে আপনি দ্রুত একটি সুন্দর এবং রেসপন্সিভ ওয়েব পেজ ডিজাইন করতে পারেন।
Content added By
Read more
