Bulma একটি ফ্লেক্সবক্স-ভিত্তিক CSS ফ্রেমওয়ার্ক, এবং এর গ্রিড সিস্টেমটি খুবই শক্তিশালী এবং সহজ। Bulma এর গ্রিড সিস্টেম ব্যবহার করে আপনি সহজেই responsive এবং আকর্ষণীয় লেআউট তৈরি করতে পারেন। এটি একাধিক কলাম, রো এবং কনটেইনার সিস্টেমের মাধ্যমে ওয়েব পেজের কন্টেন্টকে সুন্দরভাবে সাজানোর কাজ করে।
Bulma Grid System কী?
Bulma এর গ্রিড সিস্টেম মূলত ফ্লেক্সবক্স এর উপর ভিত্তি করে তৈরি, যার মাধ্যমে আপনি ওয়েব পেজে কন্টেন্টকে কলাম আকারে সজ্জিত করতে পারেন। এই সিস্টেমটি খুবই সহজ এবং ব্যবহারে সুবিধাজনক, কারণ আপনি HTML ক্লাস ব্যবহার করে একাধিক কলাম বা রো তৈরি করতে পারেন। এটি আপনার ডিজাইনে রেসপন্সিভ লেআউট তৈরির জন্য বিশেষভাবে সহায়ক।
Bulma Grid System এর মূল উপাদান
Bulma এর গ্রিড সিস্টেমে মূলত দুটি প্রধান উপাদান ব্যবহৃত হয়:
- Columns (কলাম)
- Columns' children (column) (কলাম এর মধ্যে যেসব উপাদান থাকে)
এখানে columns হল একটি কন্টেইনার যা বিভিন্ন column কে ধারণ করে এবং প্রতিটি column কন্টেন্ট ধারণ করে।
১. Columns কিভাবে কাজ করে?
Bulma এর columns ক্লাস একধরনের কন্টেইনার, যা কলামগুলোর একটি গুচ্ছ তৈরি করে। এর মধ্যে প্রতিটি column এর মধ্যে এক বা একাধিক উপাদান থাকতে পারে। আপনি চাইলে কলামের প্রস্থ কাস্টমাইজ করতে পারেন। নিচে একটি সাধারণ উদাহরণ দেখানো হলো:
উদাহরণ:
<div class="columns">
<div class="column">
<p>This is the first column.</p>
</div>
<div class="column">
<p>This is the second column.</p>
</div>
</div>
এখানে দুটি কলাম আছে, যেগুলি একে অপরের পাশে পাশাপাশি অবস্থান করবে। এটি মোবাইল এবং ডেস্কটপে রেসপনসিভ থাকবে, অর্থাৎ, সাইজের উপর ভিত্তি করে কলামগুলি সজ্জিত হবে।
২. Column এর আকার কাস্টমাইজ করা
Bulma আপনাকে কলামের আকার কাস্টমাইজ করার সুবিধা দেয়। আপনি কলামের আকার is-one-third, is-half, is-full ইত্যাদি ক্লাসের মাধ্যমে নির্ধারণ করতে পারেন। এর মাধ্যমে আপনি নির্দিষ্ট আকারের কলাম তৈরি করতে পারবেন।
উদাহরণ:
<div class="columns">
<div class="column is-half">
<p>This column takes up half the space.</p>
</div>
<div class="column is-one-third">
<p>This column takes up one-third of the space.</p>
</div>
</div>
এখানে:
- প্রথম কলামটির আকার
is-half, অর্থাৎ এটি পুরো কন্টেইনারের অর্ধেক জায়গা নিবে। - দ্বিতীয় কলামটির আকার
is-one-third, অর্থাৎ এটি কন্টেইনারের এক তৃতীয়াংশ জায়গা নিবে।
৩. Column Alignment (কলাম এলাইনমেন্ট)
Bulma এর গ্রিড সিস্টেমে আপনি কলামগুলোর অবস্থান পরিবর্তন করতে পারেন। is-centered, is-justify ইত্যাদি ক্লাস ব্যবহার করে কলামগুলো সেন্টার বা রাইট বা লেফট-অ্যালাইন করা যায়।
উদাহরণ:
<div class="columns is-centered">
<div class="column is-half">
<p>This column is centered within the container.</p>
</div>
</div>
এখানে is-centered ক্লাসের মাধ্যমে কলামটি কন্টেইনারের মাঝখানে সেন্টার করা হয়েছে।
৪. Responsive Grid System
Bulma এর গ্রিড সিস্টেম সম্পূর্ণ রেসপনসিভ। আপনি মোবাইল, ট্যাবলেট এবং ডেস্কটপের জন্য আলাদা কলাম সাইজ সেট করতে পারেন। এর জন্য is-mobile, is-tablet, is-desktop ইত্যাদি ক্লাস ব্যবহার করা হয়।
উদাহরণ:
<div class="columns is-mobile">
<div class="column is-one-half-tablet is-one-quarter-desktop">
<p>This column takes up half the width on tablet and one-quarter on desktop.</p>
</div>
<div class="column is-one-half-tablet is-three-quarters-desktop">
<p>This column takes up half the width on tablet and three-quarters on desktop.</p>
</div>
</div>
এখানে:
is-one-half-tabletওis-one-quarter-desktopক্লাসের মাধ্যমে কলামের আকার ট্যাবলেট এবং ডেস্কটপের জন্য আলাদা করা হয়েছে।
৫. Columns Nested (নেস্টেড কলাম)
Bulma এর গ্রিড সিস্টেমে আপনি এক কলামের মধ্যে আরও কলাম নেস্ট (গুচ্ছ) করতে পারেন। এটি একটি শক্তিশালী বৈশিষ্ট্য যা আপনাকে আরও জটিল লেআউট ডিজাইন করতে সাহায্য করে।
উদাহরণ:
<div class="columns">
<div class="column is-half">
<div class="columns">
<div class="column">
<p>Nested Column 1</p>
</div>
<div class="column">
<p>Nested Column 2</p>
</div>
</div>
</div>
<div class="column">
<p>This is a regular column.</p>
</div>
</div>
এখানে প্রথম কলামে দুটি নেস্টেড কলাম রয়েছে, যা আবার Bulma এর গ্রিড সিস্টেমে সাজানো।
সারাংশ
Bulma এর গ্রিড সিস্টেম ফ্লেক্সবক্সের উপর ভিত্তি করে কাজ করে এবং এটি খুবই সহজ ও নমনীয়। আপনি columns এবং column ক্লাসের মাধ্যমে একাধিক কলাম তৈরি করতে পারেন এবং বিভিন্ন আকার ও স্থানে সেগুলোর অবস্থান কাস্টমাইজ করতে পারেন। Bulma এর গ্রিড সিস্টেমে রেসপনসিভ ডিজাইন খুব সহজে তৈরি করা যায় এবং মোবাইল, ট্যাবলেট, ডেস্কটপের জন্য আলাদা কলাম সাইজ নির্ধারণ করা সম্ভব। এর মাধ্যমে আপনি দ্রুত এবং কার্যকরী ওয়েবসাইট লেআউট তৈরি করতে পারেন।
Read more
