Bulma ফ্রেমওয়ার্কে Complex Layout Designs তৈরি করা অনেক সহজ, কারণ এটি Flexbox-এ ভিত্তি করে তৈরি করা এবং অনেকগুলি ইউটিলিটি ক্লাস প্রদান করে, যার মাধ্যমে আপনি দ্রুত এবং সুন্দর লেআউট ডিজাইন করতে পারেন। এই গাইডে আমরা Bulma এর সাহায্যে বিভিন্ন ধরনের complex layouts তৈরি করার পদ্ধতি দেখব, যেমন grid layout, multi-column layout, card layout ইত্যাদি।
১. Grid Layout (গ্রিড লেআউট)
Bulma-তে grid layout তৈরি করতে columns এবং column ক্লাস ব্যবহার করা হয়। এটি আপনাকে সহজেই কাস্টম কলাম এবং রো তৈরি করতে সহায়তা করে। এই লেআউটটি ওয়েব পেজের বিভিন্ন সেকশনে কন্টেন্ট ভাগ করার জন্য খুব উপকারী।
উদাহরণ: Basic Grid Layout
<div class="columns">
<div class="column">
<p>Column 1</p>
</div>
<div class="column">
<p>Column 2</p>
</div>
<div class="column">
<p>Column 3</p>
</div>
</div>
এখানে:
columnsক্লাস একটি Flexbox কন্টেইনার তৈরি করে যা সমস্ত কলাম (column) সমানভাবে বিভক্ত করে।columnক্লাস প্রতিটি কলামের জন্য ব্যবহৃত হয়।
উদাহরণ: Grid Layout with Different Widths
Bulma তে আপনি কলামের প্রস্থ (width) কাস্টমাইজ করতে পারেন is-half, is-one-third, is-one-fourth ইত্যাদি ক্লাস ব্যবহার করে।
<div class="columns">
<div class="column is-half">
<p>Column 1 (50% width)</p>
</div>
<div class="column is-one-third">
<p>Column 2 (33% width)</p>
</div>
<div class="column is-one-fourth">
<p>Column 3 (25% width)</p>
</div>
</div>
এখানে:
is-halfকলামটির প্রস্থ 50% করবে।is-one-thirdকলামটির প্রস্থ 33% করবে।is-one-fourthকলামটির প্রস্থ 25% করবে।
এভাবে আপনি বিভিন্ন সাইজের কলাম ব্যবহার করে কমপ্লেক্স গ্রিড লেআউট তৈরি করতে পারেন।
২. Multi-Column Layout (মাল্টি-কলাম লেআউট)
Bulma এর columns ক্লাস ব্যবহার করে আপনি multi-column layout সহজেই তৈরি করতে পারেন, যেখানে একাধিক কলামে কন্টেন্ট প্রদর্শন করা হয়।
উদাহরণ: Multi-Column Layout with Nested Columns
<div class="columns">
<div class="column is-one-quarter">
<p>Column 1 (25% width)</p>
</div>
<div class="column">
<div class="columns">
<div class="column is-half">
<p>Nested Column 1 (50%)</p>
</div>
<div class="column is-half">
<p>Nested Column 2 (50%)</p>
</div>
</div>
</div>
</div>
এখানে:
- প্রথম কলামটি
is-one-quarterক্লাস ব্যবহার করে 25% প্রস্থে তৈরি করা হয়েছে। - দ্বিতীয় কলামটির মধ্যে আরও দুটি nested columns ব্যবহার করা হয়েছে, যার প্রতিটি কলাম 50% প্রস্থ ধারণ করছে।
এভাবে আপনি মাল্টি-কলাম লেআউট তৈরি করতে পারেন যেখানে কলামগুলো একটি নির্দিষ্ট আকারে সাজানো থাকে এবং প্রয়োজনে নেস্টেড কলামও ব্যবহার করা যায়।
৩. Card Layout (কার্ড লেআউট)
Bulma এর Card কম্পোনেন্ট একটি জনপ্রিয় উপাদান যা কন্টেন্টকে সুন্দরভাবে সাজাতে সহায়তা করে। আপনি Card কম্পোনেন্ট ব্যবহার করে একাধিক কার্ড তৈরি করতে পারেন এবং সেগুলোকে একটি গ্রিড বা কলামে সাজাতে পারেন।
উদাহরণ: Card Layout in a Grid
<div class="columns">
<div class="column is-one-third">
<div class="card">
<div class="card-image">
<figure class="image is-4by3">
<img src="https://via.placeholder.com/300x200" alt="Card Image">
</figure>
</div>
<div class="card-content">
<p class="title">Card Title 1</p>
<p>Card description here.</p>
</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/300x200" alt="Card Image">
</figure>
</div>
<div class="card-content">
<p class="title">Card Title 2</p>
<p>Card description here.</p>
</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/300x200" alt="Card Image">
</figure>
</div>
<div class="card-content">
<p class="title">Card Title 3</p>
<p>Card description here.</p>
</div>
</div>
</div>
</div>
এখানে:
columnsক্লাসের মাধ্যমে তিনটি কার্ডকে এক সারিতে সাজানো হয়েছে।- প্রতিটি
column is-one-thirdক্লাস ব্যবহার করে একে অপরের সঙ্গে 33% প্রস্থে সমানভাবে কলামগুলো ভাগ করা হয়েছে।
এভাবে আপনি সহজেই একাধিক কার্ড তৈরি করে একটি গ্রিড স্টাইল লেআউট তৈরি করতে পারেন।
৪. Hero Section Layout (হিরো সেকশন লেআউট)
Bulma তে Hero সেকশন একটি বিশেষ সেকশন যা সাধারণত ওয়েব পেজের হেডারের উপরের বড় অংশে থাকে। আপনি এটি বড় ব্যানার, ইমেজ, অথবা টেক্সট সেকশনের জন্য ব্যবহার করতে পারেন।
উদাহরণ: Hero Section Layout
<section class="hero is-primary">
<div class="hero-body">
<div class="container">
<h1 class="title">
Hero Title
</h1>
<h2 class="subtitle">
Hero subtitle goes here
</h2>
</div>
</div>
</section>
এখানে:
hero is-primaryক্লাসটি Hero সেকশনটি প্রাইমারি রঙে তৈরি করে।hero-bodyক্লাসের মাধ্যমে সেকশনের কন্টেন্টকে কেন্দ্রিত করা হয়েছে।
এইভাবে আপনি ওয়েব পেজের বড় সেকশনগুলো সহজেই তৈরি করতে পারবেন।
৫. Responsive Layout (রেসপনসিভ লেআউট)
Bulma স্বয়ংক্রিয়ভাবে রেসপনসিভ, অর্থাৎ বিভিন্ন স্ক্রীন সাইজে উপযুক্ত লেআউট প্রদর্শন করে। আপনি is-mobile, is-tablet, is-desktop ক্লাস ব্যবহার করে নির্দিষ্ট স্ক্রীন সাইজের জন্য কাস্টমাইজড লেআউট তৈরি করতে পারেন।
উদাহরণ: Responsive Columns Layout
<div class="columns is-mobile is-tablet is-desktop">
<div class="column is-half">
<p>Column 1</p>
</div>
<div class="column is-half">
<p>Column 2</p>
</div>
</div>
এখানে:
is-mobile,is-tablet,is-desktopক্লাস ব্যবহৃত হয়েছে যাতে বিভিন্ন স্ক্রীন সাইজে লেআউট স্বয়ংক্রিয়ভাবে পরিবর্তিত হয়।
সারাংশ
Bulma ফ্রেমওয়ার্কের সাহায্যে Complex Layout Designs তৈরি করা খুবই সহজ এবং নমনীয়। আপনি Grid Layout, Multi-Column Layout, Card Layout, এবং Hero Section Layout ব্যবহার করে সুন্দর এবং রেসপনসিভ ডিজাইন তৈরি করতে পারেন। Bulma তে Flexbox এর শক্তিশালী ব্যবহারের মাধ্যমে কলাম, স্পেসিং, এবং সাইজ কাস্টমাইজ করা যায় এবং এটি পুরোপুরি রেসপনসিভ, যাতে যে কোন ডিভাইসে উপযুক্ত লেআউট তৈরি হয়। Bulma এর এই সমস্ত ফিচারের সাহায্যে আপনি দ্রুত এবং সুন্দর ওয়েব ডিজাইন তৈরি করতে পারবেন।
Read more
