Display এবং Visibility Utilities

Bulma ফ্রেমওয়ার্কের Display এবং Visibility utilities আপনাকে HTML উপাদানগুলির প্রদর্শন এবং দৃশ্যমানতা নিয়ন্ত্রণ করতে সহায়তা করে। এই utilities গুলি ব্যবহার করে আপনি বিভিন্ন ডিভ, বাটন, বা অন্যান্য উপাদান গোপন বা দৃশ্যমান করতে পারেন, অথবা তাদের প্রদর্শন (display) স্টেট পরিবর্তন করতে পারেন। এগুলি সাধারণত লেআউট এবং রেসপনসিভ ডিজাইন তৈরি করার সময় খুবই কার্যকরী।

১. Display Utilities

Display utilities দ্বারা আপনি HTML উপাদানগুলির display প্রপার্টি নিয়ন্ত্রণ করতে পারবেন, যেমন block, inline, flex, none ইত্যাদি।

Display ক্লাসসমূহ:

• is-block: উপাদানটিকে block হিসেবে প্রদর্শন করবে (একটি নতুন লাইন শুরু করবে)।
• is-inline: উপাদানটিকে inline হিসেবে প্রদর্শন করবে (একই লাইনে থাকবে)।
• is-inline-block: উপাদানটিকে inline-block হিসেবে প্রদর্শন করবে।
• is-flex: উপাদানটিকে flex container হিসেবে প্রদর্শন করবে।
• is-inline-flex: উপাদানটিকে inline-flex হিসেবে প্রদর্শন করবে।
• is-hidden: উপাদানটিকে display: none করে গোপন করবে (দৃশ্যমান হবে না)।

উদাহরণ: Display Utilities ব্যবহার

<div class="is-block">
  <p>This is a block element.</p>
</div>

<div class="is-inline">
  <p>This is an inline element.</p>
</div>

<div class="is-flex">
  <p>This is a flex container.</p>
</div>

<div class="is-inline-flex">
  <p>This is an inline flex container.</p>
</div>

<div class="is-hidden">
  <p>This text is hidden (display: none).</p>
</div>

এখানে is-block, is-inline, is-flex, is-inline-flex, এবং is-hidden ক্লাস ব্যবহার করে বিভিন্ন display প্রপার্টি পরিবর্তন করা হয়েছে।

২. Visibility Utilities

Visibility utilities দ্বারা আপনি HTML উপাদানগুলির visibility প্রপার্টি নিয়ন্ত্রণ করতে পারবেন। এই প্রপার্টিটি উপাদানকে দৃশ্যমান বা অদৃশ্য (visibility: hidden) করে, কিন্তু উপাদানটি এখনও ডকুমেন্টের ফ্লোতে থাকে, অর্থাৎ জায়গা নেবে কিন্তু দেখা যাবে না।

Visibility ক্লাসসমূহ:

• is-visible: উপাদানটিকে দৃশ্যমান রাখে।
• is-invisible: উপাদানটিকে visibility: hidden করে (দৃশ্যমান হবে না কিন্তু জায়গা নেবে)।

উদাহরণ: Visibility Utilities ব্যবহার

<div class="is-visible">
  <p>This element is visible.</p>
</div>

<div class="is-invisible">
  <p>This element is invisible (visibility: hidden).</p>
</div>

এখানে is-visible এবং is-invisible ক্লাসগুলি উপাদানের দৃশ্যমানতা নিয়ন্ত্রণ করছে।

৩. রেসপনসিভ Display Utilities

Bulma তে রেসপনসিভ ডিজাইনের জন্য display ক্লাসের সাথে বিভিন্ন breakpoints ব্যবহার করা যায়। এটি বিভিন্ন স্ক্রীন সাইজ অনুযায়ী উপাদানগুলোকে প্রদর্শন বা গোপন করার জন্য ব্যবহৃত হয়।

উদাহরণ: রেসপনসিভ Display Utilities

<div class="is-hidden-mobile">
  <p>This text is hidden on mobile devices.</p>
</div>

<div class="is-hidden-tablet">
  <p>This text is hidden on tablet devices.</p>
</div>

<div class="is-hidden-desktop">
  <p>This text is hidden on desktop devices.</p>
</div>

<div class="is-hidden-touch">
  <p>This text is hidden on touch devices.</p>
</div>

এখানে is-hidden-mobile, is-hidden-tablet, is-hidden-desktop, এবং is-hidden-touch ক্লাসগুলো ব্যবহার করে আপনি উপাদানগুলিকে নির্দিষ্ট ডিভাইসের জন্য গোপন করতে পারেন।

৪. Combining Display এবং Visibility Utilities

আপনি display এবং visibility utilities একত্রে ব্যবহার করতে পারেন। উদাহরণস্বরূপ, আপনি কোনো উপাদানকে প্রথমে hidden (display: none) করতে পারেন এবং পরে visibility প্রপার্টি দিয়ে তার দৃশ্যমানতা নিয়ন্ত্রণ করতে পারেন।

উদাহরণ: Display এবং Visibility একত্রে ব্যবহার

<div class="is-hidden is-visible">
  <p>This element is initially hidden but visible once the visibility is set.</p>
</div>

এখানে is-hidden ক্লাসটি উপাদানটিকে প্রথমে গোপন রাখবে (display: none) এবং পরে is-visible ক্লাসটি তাকে দৃশ্যমান করবে।

সারাংশ

Bulma এর Display এবং Visibility utilities আপনাকে HTML উপাদানগুলির প্রদর্শন এবং দৃশ্যমানতা নিয়ন্ত্রণ করার জন্য খুবই কার্যকরী টুল প্রদান করে। Display utilities যেমন is-block, is-inline, is-flex, is-hidden ইত্যাদি দিয়ে আপনি উপাদানগুলির প্রস্থ এবং লেআউট পরিবর্তন করতে পারেন। আর Visibility utilities যেমন is-visible, is-invisible দিয়ে আপনি উপাদানের দৃশ্যমানতা নিয়ন্ত্রণ করতে পারেন। এছাড়াও, Bulma এর রেসপনসিভ display utilities দ্বারা আপনি উপাদানগুলোকে স্ক্রীন সাইজ অনুযায়ী গোপন বা প্রদর্শন করতে পারেন।