Bulma CSS ফ্রেমওয়ার্কে visibility classes এবং responsive elements ব্যবহারের মাধ্যমে আপনি ওয়েব পেজে বিভিন্ন উপাদানকে show বা hide করতে পারেন, এবং রেসপনসিভ ডিজাইন তৈরি করতে পারেন। এই দুটি কৌশল আপনাকে ফর্ম, বাটন, অথবা অন্যান্য UI উপাদান গুলোকে বিভিন্ন স্ক্রীন সাইজের জন্য কাস্টমাইজ করার সুযোগ দেয়।
১. Visibility Classes (Show/Hide)
Bulma তে visibility classes ব্যবহার করে সহজেই বিভিন্ন উপাদান show বা hide করা যায়। Bulma এ is-hidden, is-block, is-inline, এবং is-invisible ক্লাসগুলি দেওয়া আছে, যা আপনি আপনার HTML উপাদানে প্রয়োগ করতে পারেন। এই ক্লাসগুলোর মাধ্যমে আপনি উপাদানগুলোকে স্ক্রীনে প্রদর্শন বা গোপন করতে পারেন।
উদাহরণ: is-hidden ক্লাস ব্যবহার
<div class="field is-hidden">
<label class="label">Username</label>
<div class="control">
<input class="input" type="text" placeholder="Enter your username">
</div>
</div>
এখানে, is-hidden ক্লাস ব্যবহার করা হয়েছে, যার ফলে এই ফর্ম ফিল্ডটি ব্রাউজারে দৃশ্যমান হবে না।
is-hidden: এই ক্লাসটি উপাদানটি গোপন করে (display: none)।is-invisible: এটি উপাদানকে দৃশ্যমান রাখে, তবে এটি হিট করা যাবে না, অর্থাৎ ব্যবহারকারীরা সেই উপাদানে ক্লিক বা ইন্টারঅ্যাক্ট করতে পারবে না। এটি কার্যকরী যখন আপনি উপাদানটি দেখাতে চান কিন্তু ব্যবহারকারীদের সাথে ইন্টারঅ্যাকশন সীমাবদ্ধ করতে চান।
উদাহরণ: is-invisible ক্লাস ব্যবহার
<div class="field is-invisible">
<label class="label">Email</label>
<div class="control">
<input class="input" type="email" placeholder="Enter your email">
</div>
</div>
এখানে, is-invisible ক্লাস ব্যবহৃত হয়েছে, যার ফলে উপাদানটি দেখানো হবে, কিন্তু ব্যবহারকারীরা এটি ক্লিক বা ইন্টারঅ্যাক্ট করতে পারবে না।
উদাহরণ: is-block ক্লাস ব্যবহার
<div class="field is-block">
<label class="label">Password</label>
<div class="control">
<input class="input" type="password" placeholder="Enter your password">
</div>
</div>
এখানে is-block ক্লাসটি উপাদানটিকে block-level এলিমেন্ট হিসেবে তৈরি করে, যার ফলে এটি পূর্ণ প্রস্থে প্রদর্শিত হবে।
২. Responsive Elements (রেসপনসিভ উপাদান)
Bulma তে responsive design তৈরি করতে visibility classes এবং grid system ব্যবহার করে সহজেই স্ক্রীন সাইজ অনুযায়ী উপাদানগুলোর দৃশ্যমানতা নিয়ন্ত্রণ করা যায়। আপনি বিভিন্ন স্ক্রীন সাইজের জন্য নির্দিষ্ট উপাদানগুলো show বা hide করতে পারেন। Bulma তে এই কাজের জন্য is-hidden-mobile, is-hidden-tablet, is-hidden-desktop, is-hidden-widescreen এবং is-hidden-fullhd ক্লাসগুলি ব্যবহৃত হয়।
উদাহরণ: রেসপনসিভ এলিমেন্ট হাইডিং
<div class="field is-hidden-mobile">
<label class="label">Mobile Hidden Input</label>
<div class="control">
<input class="input" type="text" placeholder="This is hidden on mobile">
</div>
</div>
<div class="field is-hidden-tablet">
<label class="label">Tablet Hidden Input</label>
<div class="control">
<input class="input" type="text" placeholder="This is hidden on tablet">
</div>
</div>
এখানে, is-hidden-mobile এবং is-hidden-tablet ক্লাস ব্যবহার করা হয়েছে। এর মাধ্যমে আপনি উপাদানগুলিকে নির্দিষ্ট স্ক্রীন সাইজে গোপন করতে পারেন।
is-hidden-mobile: মোবাইল স্ক্রীনে উপাদানটি গোপন করে।is-hidden-tablet: ট্যাবলেট স্ক্রীনে উপাদানটি গোপন করে।
উদাহরণ: রেসপনসিভ গ্রিড সিস্টেম
Bulma তে columns এবং column ক্লাস ব্যবহারের মাধ্যমে আপনি বিভিন্ন স্ক্রীন সাইজের জন্য কলাম লেআউট কাস্টমাইজ করতে পারেন। উদাহরণস্বরূপ, মোবাইল স্ক্রীনে এক কলাম এবং ডেস্কটপ স্ক্রীনে দুই কলাম প্রদর্শন করা।
<div class="columns is-mobile">
<div class="column is-half-tablet is-one-third-mobile">
<div class="box">
Column 1
</div>
</div>
<div class="column is-half-tablet is-two-thirds-mobile">
<div class="box">
Column 2
</div>
</div>
</div>
এখানে:
is-half-tablet: ট্যাবলেট স্ক্রীনে কলামটির প্রস্থ হবে অর্ধেক।is-one-third-mobile: মোবাইল স্ক্রীনে কলামটি এক তৃতীয়াংশ প্রস্থে প্রদর্শিত হবে।is-two-thirds-mobile: মোবাইল স্ক্রীনে কলামটি দুই তৃতীয়াংশ প্রস্থে প্রদর্শিত হবে।
এই কৌশলটি আপনার ডিজাইনকে বিভিন্ন স্ক্রীন সাইজে সঠিকভাবে উপস্থাপন করতে সাহায্য করবে।
৩. Additional Responsive Visibility Classes
Bulma আরও কিছু visibility classes প্রদান করে যা নির্দিষ্ট স্ক্রীন সাইজে উপাদানগুলোকে show বা hide করতে ব্যবহৃত হয়:
is-hidden-desktop: ডেস্কটপ স্ক্রীনে উপাদানটি গোপন করে।is-hidden-widescreen: উইডস্ক্রীন স্ক্রীনে উপাদানটি গোপন করে।is-hidden-fullhd: ফুল এইচডি স্ক্রীনে উপাদানটি গোপন করে।is-block,is-inline,is-inline-block: এই ক্লাসগুলো উপাদানটির ডিসপ্লে প্রোপার্টি পরিবর্তন করে, যেমন: ব্লক-লেভেল বা ইনলাইন উপাদান তৈরি করা।
উদাহরণ: Full-screen Visibility
<div class="field is-hidden-widescreen">
<label class="label">Hidden on Widescreen</label>
<div class="control">
<input class="input" type="text" placeholder="This is hidden on widescreen devices">
</div>
</div>
এখানে, is-hidden-widescreen ক্লাস ব্যবহার করা হয়েছে, যা উপাদানটি শুধু widescreen স্ক্রীন সাইজে গোপন করবে।
সারাংশ
Bulma তে visibility classes এবং responsive elements ব্যবহার করে আপনি ওয়েব ডিজাইনকে সহজে কাস্টমাইজ এবং রেসপনসিভ করতে পারেন। Visibility classes যেমন is-hidden, is-block, এবং is-invisible ব্যবহার করে আপনি উপাদানগুলোকে show বা hide করতে পারেন, এবং responsive classes যেমন is-hidden-mobile, is-hidden-desktop, ইত্যাদি দিয়ে উপাদানগুলোকে বিভিন্ন স্ক্রীন সাইজে দৃশ্যমান বা গোপন করতে পারেন। এই কৌশলগুলি আপনার ডিজাইনকে আরও কার্যকরী এবং ব্যবহারকারী বান্ধব করে তোলে।
Read more
