Bulma CSS ফ্রেমওয়ার্কে কিছু মৌলিক লেআউট কম্পোনেন্ট রয়েছে, যেমন Container, Section, এবং Footer। এগুলি ওয়েব পেজের লেআউট গঠন এবং সঠিকভাবে কন্টেন্ট প্রদর্শন করার জন্য গুরুত্বপূর্ণ। এখানে প্রতিটি কম্পোনেন্টের ব্যবহার এবং তার বৈশিষ্ট্য আলোচনা করা হলো।
১. Container কম্পোনেন্ট
Bulma এর container কম্পোনেন্টটি মূল কন্টেন্টকে একটি কেন্দ্রীভূত অঞ্চলে রাখে। এটি প্রাথমিকভাবে কন্টেন্টের প্রস্থ নিয়ন্ত্রণ করে, যা সাধারণত একটি ওয়েব পেজের কন্টেন্টকে সুন্দরভাবে সাজাতে ব্যবহৃত হয়।
ব্যবহার:
<div class="container">
<h1 class="title">Welcome to Bulma</h1>
<p>This is a simple container component.</p>
</div>
বৈশিষ্ট্য:
- Responsive:
containerক্লাসটি স্বয়ংক্রিয়ভাবে বিভিন্ন স্ক্রীন সাইজ অনুযায়ী তার প্রস্থ পরিবর্তন করে। এটি ছোট স্ক্রীনের জন্য উপযুক্ত এবং বড় স্ক্রীনের জন্য কন্টেন্টের আকার সীমিত রাখে। - Centering content: কন্টেন্টের প্রস্থ সীমাবদ্ধ করার পাশাপাশি, এটি কন্টেন্টকে স্ক্রীনে কেন্দ্রিত অবস্থায় রেখে একটি সুন্দর লেআউট প্রদান করে।
২. Section কম্পোনেন্ট
Bulma এর section কম্পোনেন্টটি একটি নির্দিষ্ট অংশ বা সেকশন তৈরি করতে ব্যবহৃত হয়। এটি সাধারণত একটি কন্টেন্ট ব্লক, যেমন একটি হেডিং বা প্যারাগ্রাফ, বিভিন্ন উপাদানের সাথে গ্রুপিং করার জন্য ব্যবহৃত হয়।
ব্যবহার:
<section class="section">
<div class="container">
<h1 class="title">Welcome to Our Website</h1>
<p>This is a section component to organize your content.</p>
</div>
</section>
বৈশিষ্ট্য:
- Spacing:
sectionক্লাসটি স্বয়ংক্রিয়ভাবে উপরের এবং নিচের মার্জিন যোগ করে, যার ফলে কন্টেন্টগুলির মধ্যে পর্যাপ্ত জায়গা থাকে। - Semantic structure: এই কম্পোনেন্টটি HTML5 সেমান্টিক মার্কআপের একটি অংশ হিসেবে ব্যবহার করা হয়, যা কন্টেন্ট গঠনে সাহায্য করে।
৩. Footer কম্পোনেন্ট
Bulma এর footer কম্পোনেন্টটি পেজের নিচে থাকা কন্টেন্ট যেমন কপিরাইট, সোশ্যাল মিডিয়া লিঙ্ক, বা অন্যান্য ইনফরমেশন প্রদর্শন করার জন্য ব্যবহৃত হয়। এটি সাধারণত পেজের শেষে একটি সোজা অবস্থানে থাকে।
ব্যবহার:
<footer class="footer">
<div class="content has-text-centered">
<p>© 2024 My Website</p>
</div>
</footer>
বৈশিষ্ট্য:
- Centering content:
has-text-centeredক্লাস ব্যবহার করে ফুটারের কন্টেন্টকে কেন্দ্রিত করা যায়, যাতে এটি আরও সুন্দরভাবে প্রদর্শিত হয়। - Responsive design: ফুটারটি স্বয়ংক্রিয়ভাবে রেসপনসিভ হয়ে থাকে, অর্থাৎ বিভিন্ন স্ক্রীন সাইজে এটি ভালভাবে ফিট হয়।
৪. উদাহরণস্বরূপ সম্পূর্ণ HTML কোড
এখন আমরা Container, Section, এবং Footer কম্পোনেন্টগুলোর একসাথে ব্যবহার দেখব:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bulma Layout Example</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
</head>
<body>
<!-- Hero Section -->
<section class="hero is-primary">
<div class="hero-body">
<div class="container">
<h1 class="title">Welcome to My Bulma Project</h1>
<h2 class="subtitle">A simple project using Bulma CSS framework</h2>
</div>
</div>
</section>
<!-- Main Section -->
<section class="section">
<div class="container">
<h1 class="title">About Us</h1>
<p>This is a simple section used to display information.</p>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="content has-text-centered">
<p>© 2024 My Website</p>
</div>
</footer>
</body>
</html>
সারাংশ
- Container: কন্টেন্টের প্রস্থ নিয়ন্ত্রণ করে এবং তা স্ক্রীনে কেন্দ্রীভূত অবস্থায় রাখে।
- Section: কন্টেন্ট ব্লক তৈরি করে, যা নির্দিষ্ট সেকশনে কন্টেন্ট গ্রুপ করতে সাহায্য করে এবং এর মধ্যে পর্যাপ্ত মার্জিন প্রদান করে।
- Footer: পেজের নিচের অংশে তথ্য, যেমন কপিরাইট বা সোশ্যাল মিডিয়া লিঙ্ক প্রদর্শন করার জন্য ব্যবহৃত হয়।
Bulma এর এই কম্পোনেন্টগুলো সহজেই কাস্টমাইজ করা যায় এবং ওয়েব ডিজাইনে সুন্দর লেআউট তৈরি করতে সহায়তা করে।
