Bulma এর Box এবং Layout Components

Bulma একটি জনপ্রিয় CSS ফ্রেমওয়ার্ক যা বিভিন্ন ধরনের লেআউট এবং ডিজাইন উপাদান প্রদান করে, যার মধ্যে Box এবং Layout Components অন্যতম। এই কম্পোনেন্টগুলো ওয়েবসাইটের লেআউট এবং কন্টেন্টের পেজিং, স্টাইলিং এবং সজ্জায় সহায়তা করে। এখানে Bulma এর Box এবং Layout Components সম্পর্কে বিস্তারিত আলোচনা করা হলো।

১. Box কম্পোনেন্ট

Bulma এর Box কম্পোনেন্ট একটি সাধারণ কন্টেইনার যা বর্ডার, শ্যাডো এবং প্যাডিং সহ কন্টেন্ট প্রদর্শন করতে ব্যবহৃত হয়। এটি সাধারণত কোনো কন্টেন্টকে আলাদা করে প্রদর্শন করতে এবং সুসংহতভাবে সাজানোর জন্য ব্যবহৃত হয়।

Box কম্পোনেন্টের উদাহরণ:

<div class="box">
  <h3 class="title is-3">Box Title</h3>
  <p>This is a simple box component in Bulma. It can be used to enclose content with a shadow and padding.</p>
</div>

এখানে, box ক্লাসের মাধ্যমে একটি বক্স তৈরি করা হয়েছে, যা title এবং p ট্যাগের মাধ্যমে কিছু কন্টেন্ট প্রদর্শন করছে। Bulma স্বয়ংক্রিয়ভাবে বক্সের চারপাশে কিছু প্যাডিং এবং শ্যাডো অ্যাপ্লাই করে, যা কন্টেন্টকে আরও আকর্ষণীয় ও পরিপাটি দেখায়।

Box এর বৈশিষ্ট্যসমূহ:

• Padding: box ক্লাসটি সাধারণত কন্টেন্টের চারপাশে প্যাডিং প্রয়োগ করে।
• Shadow: এটি একটি হালকা শ্যাডো যোগ করে, যা কন্টেন্টকে আলাদা করে উপস্থাপন করে।
• Border: একটি সিম্পল বর্ডার থাকে, যা বক্সটিকে স্পষ্ট করে তোলে।

২. Layout Components

Bulma এর Layout Components লেআউট নির্মাণের জন্য ব্যবহৃত উপাদানগুলো প্রদান করে। এগুলি সাধারণত ওয়েবসাইটের পেজে কন্টেন্টের আকার, স্থান এবং সজ্জা নির্ধারণ করে। নিচে Bulma এর কিছু প্রধান Layout Components এর আলোচনা করা হলো।

১. Columns

Bulma এর columns ক্লাসটি একটি রেসপনসিভ গ্রিড সিস্টেম তৈরি করতে ব্যবহৃত হয়। এটি পেজের কন্টেন্টকে কলামে ভাগ করতে সহায়তা করে। এর মাধ্যমে আপনি খুব সহজে একাধিক কলাম তৈরি করতে পারেন, যেগুলো একে অপরের সাথে সমন্বিতভাবে প্রদর্শিত হবে।

Columns উদাহরণ:

<div class="columns">
  <div class="column is-one-third">
    <div class="box">
      <h3 class="title is-4">Column 1</h3>
      <p>This is the first column.</p>
    </div>
  </div>
  <div class="column is-one-third">
    <div class="box">
      <h3 class="title is-4">Column 2</h3>
      <p>This is the second column.</p>
    </div>
  </div>
  <div class="column is-one-third">
    <div class="box">
      <h3 class="title is-4">Column 3</h3>
      <p>This is the third column.</p>
    </div>
  </div>
</div>

এখানে columns ক্লাসটি তিনটি কলাম তৈরি করেছে, এবং প্রতিটি column ক্লাসে is-one-third ক্লাসটি ব্যবহার করা হয়েছে, যার মানে প্রতিটি কলাম এক তৃতীয়াংশ জায়গা দখল করবে। আপনি চাইলে কলামের আকার পরিবর্তন করতে is-half, is-three-quarters ইত্যাদি ক্লাস ব্যবহার করতে পারেন।

Columns এর বৈশিষ্ট্যসমূহ:

• Responsive: Bulma এর columns গ্রিড সিস্টেম স্বয়ংক্রিয়ভাবে রেসপন্সিভ, যা বিভিন্ন স্ক্রীন সাইজে কাজ করে।
• Customizable Width: is-one-third, is-half, is-full এর মতো ক্লাস ব্যবহার করে কলামের আকার নির্ধারণ করা যায়।

২. Container

container ক্লাসটি পুরো পেজ বা সেকশনের মধ্যে কন্টেন্টকে কেন্দ্রিকভাবে প্রদর্শন করার জন্য ব্যবহৃত হয়। এটি সাধারণত পুরো পেজের বা নির্দিষ্ট সেকশনের সর্বোচ্চ প্রস্থ নির্ধারণ করে, যাতে কন্টেন্টের লেআউট সুসংগঠিত থাকে।

Container উদাহরণ:

<div class="container">
  <h1 class="title">Welcome to My Website</h1>
  <p>This is a centered container for your content.</p>
</div>

এখানে container ক্লাসের মাধ্যমে কন্টেন্টকে কেন্দ্রীভূতভাবে উপস্থাপন করা হয়েছে। এটি সাধারণত কন্টেন্টের প্রস্থ সীমিত করে দেয়, যাতে ওয়েব পেজটি আরও প্রফেশনাল ও পরিষ্কার দেখায়।

৩. Level

Bulma এর level কম্পোনেন্টটি একাধিক উপাদানকে অনুভূমিকভাবে সমান্তরাল করে স্থাপন করতে ব্যবহৃত হয়। এটি সাধারণত নেভিগেশন, টুলবার বা অন্যান্য এলিমেন্টের জন্য ব্যবহার করা হয়।

Level উদাহরণ:

<div class="level">
  <div class="level-left">
    <p class="level-item">Left Item</p>
  </div>
  <div class="level-right">
    <p class="level-item">Right Item</p>
  </div>
</div>

এখানে, level-left এবং level-right ক্লাস ব্যবহার করে দুটি আইটেমকে একে অপরের বিপরীত দিকে স্থাপন করা হয়েছে।

৪. Tiles

tiles ক্লাসটি একাধিক উপাদানকে গ্রিড আকারে প্রদর্শন করার জন্য ব্যবহৃত হয়। এটি প্রাথমিকভাবে ফ্লেক্সবক্স ব্যবহৃত একটি লেআউট সিস্টেম যা উপাদানগুলোকে একসাথে সাজায়।

Tiles উদাহরণ:

<div class="tiles is-ancestor">
  <div class="tile is-parent">
    <div class="tile is-child box">
      <p class="title">Tile 1</p>
    </div>
  </div>
  <div class="tile is-parent">
    <div class="tile is-child box">
      <p class="title">Tile 2</p>
    </div>
  </div>
</div>

এখানে, tiles কম্পোনেন্টটি দুটি টাইল তৈরি করেছে এবং সেগুলোকে একটি গ্রিড লেআউটে সজ্জিত করেছে।

৩. সারাংশ

Bulma এর Box এবং Layout Components ব্যবহার করে সহজেই সুন্দর ও কার্যকরী ওয়েব পেজ তৈরি করা সম্ভব। Box কম্পোনেন্ট কন্টেন্টকে বর্ডার, শ্যাডো এবং প্যাডিং সহ প্রদর্শন করে, যখন Layout Components (যেমন columns, container, level, এবং tiles) লেআউট ডিজাইন করতে সহায়তা করে। Bulma এর গ্রিড সিস্টেম এবং লেআউট উপাদানগুলি ব্যবহার করে আপনি যেকোনো ধরনের রেসপনসিভ এবং সুন্দর ডিজাইন তৈরি করতে পারেন, যা বিভিন্ন স্ক্রীনে ভালোভাবে কাজ করবে।

Bulma এর Box কম্পোনেন্ট একটি সাধারণ এবং খুবই ব্যবহৃত ডিজাইন এলিমেন্ট, যা একটি কনটেন্ট বা উপাদানকে একটি বর্ডার এবং শ্যাডো সহ প্রদর্শন করতে সাহায্য করে। এটি মূলত পৃষ্ঠায় বিভিন্ন সেকশনের মধ্যে স্পেস তৈরি করতে এবং কনটেন্টকে আলাদা করতে ব্যবহৃত হয়।

এটি অনেকটা div এলিমেন্টের মতোই, কিন্তু এর সাথে কিছু ডিফল্ট স্টাইল যুক্ত থাকে যেমন বর্ডার, শ্যাডো, এবং প্যাডিং। এটি খুবই কার্যকরী যখন আপনি আপনার পৃষ্ঠায় কিছু কনটেন্টকে একটি আলাদা বক্সে রাখতে চান।

১. Box কম্পোনেন্টের সাধারণ ব্যবহার

Box কম্পোনেন্ট ব্যবহার করা অত্যন্ত সহজ। শুধু box ক্লাসটি ব্যবহার করে আপনি যেকোনো উপাদানকে একটি বক্সে রাখতে পারেন।

উদাহরণ:

<div class="box">
  <h3 class="title is-3">This is a Box</h3>
  <p>This content is inside a Bulma box. It has a border and shadow.</p>
</div>

এখানে, box ক্লাসটি ডিভকে একটি বর্ডার এবং শ্যাডো সহ প্রদর্শন করবে, এবং কনটেন্টের চারপাশে কিছু প্যাডিংও প্রদান করবে।

২. Box এর স্টাইল কাস্টমাইজ করা

আপনি Bulma এর box কম্পোনেন্টটি কাস্টম CSS দিয়ে আরও কাস্টমাইজ করতে পারেন। যেমন, আপনি বর্ডারের রঙ, শ্যাডো, প্যাডিং ইত্যাদি পরিবর্তন করতে পারবেন।

উদাহরণ:

.custom-box {
  border: 2px solid #3498db; /* Custom blue border */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Custom shadow */
  padding: 20px; /* More padding */
  background-color: #f9f9f9; /* Light background color */
}

এখন, HTML ফাইলে box ক্লাসের পাশাপাশি .custom-box ক্লাসটি ব্যবহার করুন:

<div class="box custom-box">
  <h3 class="title is-3">Customized Box</h3>
  <p>This is a customized box with a blue border and shadow.</p>
</div>

এভাবে আপনি box কম্পোনেন্টের ডিজাইন সহজেই কাস্টমাইজ করতে পারবেন।

৩. Box কম্পোনেন্টের সাথে অন্যান্য উপাদান ব্যবহার

Bulma এর Box কম্পোনেন্টটি অন্যান্য উপাদানের সাথে একত্রে খুব ভালোভাবে কাজ করে। আপনি এটি ফর্ম, টেক্সট, বাটন ইত্যাদির সাথে ব্যবহার করতে পারেন।

উদাহরণ:

<div class="box">
  <h3 class="title is-3">Contact Form</h3>
  <form>
    <div class="field">
      <label class="label">Name</label>
      <div class="control">
        <input class="input" type="text" placeholder="Enter your name">
      </div>
    </div>
    <div class="field">
      <label class="label">Email</label>
      <div class="control">
        <input class="input" type="email" placeholder="Enter your email">
      </div>
    </div>
    <div class="field">
      <div class="control">
        <button class="button is-primary">Submit</button>
      </div>
    </div>
  </form>
</div>

এখানে, Box কম্পোনেন্টের মধ্যে একটি কন্ট্যাক্ট ফর্ম রাখা হয়েছে। বক্সটি ফর্মের চারপাশে একটি সুন্দর সীমানা এবং শ্যাডো তৈরি করবে, যা এটি অন্যান্য উপাদান থেকে আলাদা করবে।

৪. Responsive Box

Bulma এর Box কম্পোনেন্টটি রেসপনসিভ এবং মোবাইল ফ্রেন্ডলি। আপনি যখন এটি মোবাইল স্ক্রীনে ব্যবহার করবেন, তখন এটি স্বয়ংক্রিয়ভাবে স্ক্রীনের প্রস্থ অনুযায়ী মানিয়ে নেবে।

আপনি যদি নির্দিষ্ট স্ক্রীন সাইজে Box এর আকার পরিবর্তন করতে চান, তবে Bulma এর কলাম সিস্টেম বা কাস্টম CSS ব্যবহার করতে পারেন।

উদাহরণ:

<div class="columns">
  <div class="column is-half">
    <div class="box">
      <h3 class="title is-3">Left Column</h3>
      <p>This is the content in the left column.</p>
    </div>
  </div>
  <div class="column is-half">
    <div class="box">
      <h3 class="title is-3">Right Column</h3>
      <p>This is the content in the right column.</p>
    </div>
  </div>
</div>

এখানে দুটি Box কম্পোনেন্ট দুটি কলামে রাখা হয়েছে। রেসপনসিভ ডিজাইনে, যখন স্ক্রীন সাইজ ছোট হবে, তখন এই কলামগুলি একে অপরের নিচে চলে আসবে।

৫. Box এর সাথে অন্যান্য Bulma কম্পোনেন্ট

Box কম্পোনেন্টের সাথে আপনি অন্য Bulma কম্পোনেন্ট যেমন Navbar, Card, Notification ইত্যাদিও ব্যবহার করতে পারেন।

উদাহরণ:

<div class="box">
  <div class="notification is-primary">
    <button class="delete"></button>
    This is a notification inside a box.
  </div>
  <p>More content inside the box.</p>
</div>

এখানে একটি Notification কম্পোনেন্ট Box কম্পোনেন্টের মধ্যে রাখা হয়েছে। এটি কনটেন্টকে আলাদা করে এবং ভিজ্যুয়ালি আরও আকর্ষণীয় করে তোলে।

সারাংশ

Bulma এর Box কম্পোনেন্ট একটি সহজ এবং কার্যকরী উপাদান, যা কনটেন্টকে আলাদা এবং সুশৃঙ্খলভাবে প্রদর্শন করতে সহায়তা করে। এটি ডিফল্টভাবে একটি বর্ডার, শ্যাডো এবং প্যাডিং প্রদান করে। আপনি চাইলে কাস্টম CSS দিয়ে এর স্টাইল পরিবর্তন করতে পারেন এবং এটি অন্যান্য কম্পোনেন্টের সাথে সহজে কাজ করে। Box কম্পোনেন্টটি রেসপনসিভ ডিজাইনের জন্যও উপযুক্ত, যেটি আপনার ওয়েব পৃষ্ঠায় প্রতিটি উপাদানকে সুন্দরভাবে উপস্থাপন করতে সাহায্য করবে।

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 এর এই কম্পোনেন্টগুলো সহজেই কাস্টমাইজ করা যায় এবং ওয়েব ডিজাইনে সুন্দর লেআউট তৈরি করতে সহায়তা করে।

Hero Section এবং Responsive Headers Bulma ফ্রেমওয়ার্কে ব্যবহৃত জনপ্রিয় ডিজাইন উপাদান। এগুলি ওয়েবসাইটের প্রথম দর্শনে ব্যবহারকারীদের আকর্ষণ করার জন্য ব্যবহৃত হয়। Bulma এর সহজ এবং রেসপনসিভ ক্লাস সিস্টেমের মাধ্যমে আপনি সহজেই এই উপাদানগুলি তৈরি করতে পারেন।

১. Hero Section

Bulma এ Hero Section একটি বড় ব্যানার বা হেডিং সেকশন হিসেবে কাজ করে যা সাধারণত ওয়েবসাইটের প্রথম অংশে প্রদর্শিত হয়। এটি সাধারণত সাইটের উদ্দেশ্য বা ব্র্যান্ডিং তুলে ধরতে ব্যবহৃত হয়।

Hero Section এর মূল বৈশিষ্ট্য:

• Hero Section সাইটের প্রধান কনটেন্টের পূর্বে থাকে এবং বড় আকৃতির ব্যানার হিসেবে কাজ করে।
• এতে সাধারণত হেডিং, সাবহেডিং, এবং একটি কাস্টম বাটন থাকে।
• Hero Section এর মাধ্যমে আপনি সাইটের মূল উদ্দেশ্য বা বার্তা ব্যবহারকারীদের কাছে পৌঁছে দিতে পারেন।

উদাহরণ: Hero Section

<section class="hero is-primary">
  <div class="hero-body">
    <div class="container">
      <h1 class="title">
        Welcome to My Website
      </h1>
      <h2 class="subtitle">
        A place where you can learn and grow.
      </h2>
      <a href="#get-started" class="button is-light">Get Started</a>
    </div>
  </div>
</section>

এখানে:

• hero ক্লাসটি Hero Section তৈরি করে।
• is-primary ক্লাসটি সেকশনের ব্যাকগ্রাউন্ড রঙ নিয়ন্ত্রণ করে।
• hero-body সেকশনের প্রধান কনটেন্ট থাকে, যেমন টাইটেল, সাবটাইটেল এবং বাটন।
• container ক্লাসটি কনটেন্টকে পেজের সেন্টারে রাখে।

২. Hero Section এর কাস্টমাইজেশন

Bulma এর Hero Section কাস্টমাইজ করার জন্য আপনি ব্যাকগ্রাউন্ড কালার, টেক্সট স্টাইল, এবং সেকশনের উচ্চতা পরিবর্তন করতে পারেন।

উদাহরণ: কাস্টম Hero Section

<section class="hero is-info is-large">
  <div class="hero-body">
    <div class="container">
      <h1 class="title">
        Explore New Horizons
      </h1>
      <h2 class="subtitle">
        Join us on a journey to the stars.
      </h2>
    </div>
  </div>
</section>

এখানে:

• is-info ক্লাসটি সেকশনের ব্যাকগ্রাউন্ড কালার পরিবর্তন করে।
• is-large ক্লাসটি সেকশনের উচ্চতা বাড়িয়ে দেয়।

৩. Responsive Hero Section

Bulma আপনাকে Responsive Hero Sections তৈরি করতে দেয়, যাতে বিভিন্ন স্ক্রীন সাইজের জন্য ডিজাইনটি স্বয়ংক্রিয়ভাবে অভিযোজিত হয়। আপনি hero-body এর ভিতরে থাকা কনটেন্টের আকার এবং অবস্থান নিয়ন্ত্রণ করতে পারেন যাতে এটি মোবাইল, ট্যাবলেট, এবং ডেস্কটপ ডিভাইসে ভালোভাবে কাজ করে।

উদাহরণ: Responsive Hero Section

<section class="hero is-success">
  <div class="hero-body">
    <div class="container">
      <h1 class="title is-size-3-mobile is-size-1-tablet is-size-1-desktop">
        Reach for the Stars
      </h1>
      <h2 class="subtitle is-size-5-mobile is-size-3-tablet is-size-2-desktop">
        A bold new way to explore the universe.
      </h2>
    </div>
  </div>
</section>

এখানে:

• is-size-3-mobile, is-size-1-tablet, এবং is-size-1-desktop ক্লাসগুলো হেডিং এর সাইজ কন্ট্রোল করে। এগুলি মোবাইল, ট্যাবলেট এবং ডেস্কটপের জন্য বিভিন্ন সাইজের হেডিং প্রদান করে।
• subtitle তেও আমরা একইভাবে রেসপনসিভ সাইজ প্রযোজ্য করেছি।

৪. Responsive Headers (হেডিং)

Responsive Headers হেডিং গুলি বিভিন্ন স্ক্রীন সাইজ অনুযায়ী স্বয়ংক্রিয়ভাবে পরিবর্তিত হতে পারে। Bulma এ এটি খুবই সহজ, কারণ Bulma ফ্রেমওয়ার্কে এর জন্য প্রস্তুত বিভিন্ন ক্লাস রয়েছে।

উদাহরণ: Responsive Headers

<h1 class="title is-size-4-mobile is-size-2-tablet is-size-1-desktop">
  Responsive Header Example
</h1>

এখানে:

• is-size-4-mobile ক্লাসটি মোবাইল ডিভাইসে হেডিংয়ের সাইজ নির্ধারণ করে।
• is-size-2-tablet ক্লাসটি ট্যাবলেট ডিভাইসে হেডিংয়ের সাইজ পরিবর্তন করে।
• is-size-1-desktop ক্লাসটি ডেস্কটপ ডিভাইসে বড় আকারে হেডিং দেখাবে।

৫. Multi-Column Hero Section

কখনও কখনও আপনি Hero Section এ একাধিক কলাম ব্যবহার করতে পারেন। এটি করতে columns এবং column ক্লাস ব্যবহার করা হয়।

উদাহরণ: Multi-Column Hero Section

<section class="hero is-info">
  <div class="hero-body">
    <div class="container">
      <div class="columns">
        <div class="column is-half">
          <h1 class="title">
            Welcome to the Future
          </h1>
          <h2 class="subtitle">
            Discover new possibilities today.
          </h2>
        </div>
        <div class="column is-half">
          <img src="https://via.placeholder.com/300" alt="Future Image">
        </div>
      </div>
    </div>
  </div>
</section>

এখানে:

• columns ক্লাসটি দুটি কলাম তৈরি করে।
• প্রথম কলামে টেক্সট এবং দ্বিতীয় কলামে একটি ইমেজ রয়েছে।

সারাংশ

Hero Section এবং Responsive Headers Bulma ফ্রেমওয়ার্কের অন্যতম গুরুত্বপূর্ণ উপাদান যা ওয়েবসাইটে আকর্ষণীয় এবং রেসপনসিভ ডিজাইন তৈরিতে সাহায্য করে। Hero Section বড় ব্যানার হিসেবে ব্যবহৃত হয় এবং এতে হেডিং, সাবহেডিং এবং বাটন থাকে, যা সাইটের উদ্দেশ্য বা বার্তা পরিষ্কারভাবে তুলে ধরে। Responsive Headers বিভিন্ন স্ক্রীন সাইজের জন্য হেডিংয়ের সাইজ পরিবর্তন করতে সহায়তা করে, যাতে মোবাইল, ট্যাবলেট এবং ডেস্কটপে ওয়েবসাইট ভালোভাবে দেখা যায়। Bulma এর রেসপনসিভ ক্লাসগুলো ব্যবহার করে আপনি খুব সহজে এই উপাদানগুলো কাস্টমাইজ করতে পারেন।

Bulma ফ্রেমওয়ার্কে Media Object Layout একটি অত্যন্ত জনপ্রিয় এবং শক্তিশালী লেআউট সিস্টেম, যা মূলত কনটেন্টের একক আইটেম বা উপাদানকে সজ্জিত করতে ব্যবহৃত হয়। এটি খুব সহজে আপনি ছবি, টেক্সট, এবং অন্যান্য উপাদানগুলোকে একসাথে সাজাতে পারেন।

Media Object একটি কনটেন্ট ব্লক বা কার্ডের মধ্যে আলাদা আলাদা উপাদান (যেমন ছবি, টেক্সট বা লিংক) রাখার জন্য ব্যবহৃত হয়। এটি মূলত image এবং text বা অন্যান্য কন্টেন্টের সন্নিবেশ ঘটাতে ব্যবহৃত হয়।

১. Media Object Layout এর মূল বৈশিষ্ট্য

• Responsive: Bulma এর Media Object সিস্টেম স্বয়ংক্রিয়ভাবে রেসপনসিভ হয়। অর্থাৎ, এটি মোবাইল থেকে ডেস্কটপে সুন্দরভাবে মানিয়ে নেবে।
• Image + Text Layout: এটি ছবির সাথে টেক্সট বা অন্যান্য কনটেন্ট একত্রে সন্নিবেশ করতে ব্যবহৃত হয়। সাধারণত ব্যবহারকারীর ছবি বা আইকন এবং তার সাথে একটি বর্ণনামূলক টেক্সট থাকে।
• Flexbox ব্যবহার: Media Object ডিজাইন তৈরিতে Flexbox ব্যবহার করা হয়, যা লেআউটের সন্নিবেশকে আরও সহজ ও কার্যকরী করে তোলে।

২. Media Object Layout এর সাধারণ ব্যবহার

Bulma ফ্রেমওয়ার্কে Media Object তৈরি করতে আপনি সহজে media, media-left, media-content এবং অন্যান্য ক্লাস ব্যবহার করতে পারেন।

উদাহরণ: Media Object

<div class="media">
  <div class="media-left">
    <figure class="image is-48x48">
      <img src="https://via.placeholder.com/48" alt="Placeholder Image">
    </figure>
  </div>
  <div class="media-content">
    <p class="title is-4">John Doe</p>
    <p class="subtitle is-6">Software Developer</p>
  </div>
</div>

এখানে:

• media ক্লাসটি মূল কনটেইনার।
• media-left ক্লাসটি ছবির জন্য নির্ধারিত কলাম।
• media-content ক্লাসটি টেক্সট কনটেন্টের জন্য ব্যবহৃত।
• image এবং figure ট্যাগ ছবি প্রদর্শনের জন্য ব্যবহার করা হয়েছে।

৩. Media Object Layout এর কাস্টমাইজেশন

আপনি Media Object এর মধ্যে বিভিন্ন সাইজের ছবি, বিভিন্ন টেক্সট স্টাইল, এবং অন্যান্য কনটেন্ট কাস্টমাইজ করতে পারেন।

উদাহরণ: কাস্টম মিডিয়া অবজেক্ট

<div class="media">
  <div class="media-left">
    <figure class="image is-128x128">
      <img src="https://via.placeholder.com/128" alt="Placeholder Image">
    </figure>
  </div>
  <div class="media-content">
    <p class="title is-3">Jane Smith</p>
    <p class="subtitle is-5">UX/UI Designer</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque urna eu augue cursus, in euismod lorem dictum.</p>
  </div>
</div>

এখানে:

• is-128x128 ক্লাসটি ছবির সাইজ কাস্টমাইজ করেছে।
• title এবং subtitle এর আকার পরিবর্তন করা হয়েছে।

৪. Multiple Media Objects

আপনি একাধিক Media Object তৈরি করতে পারেন, যেমন একটি কন্টেন্ট লিস্ট যেখানে একাধিক মিডিয়া অবজেক্ট থাকবে।

উদাহরণ: একাধিক Media Object

<div class="media">
  <div class="media-left">
    <figure class="image is-48x48">
      <img src="https://via.placeholder.com/48" alt="Placeholder Image">
    </figure>
  </div>
  <div class="media-content">
    <p class="title is-4">John Doe</p>
    <p class="subtitle is-6">Software Engineer</p>
  </div>
</div>

<div class="media">
  <div class="media-left">
    <figure class="image is-48x48">
      <img src="https://via.placeholder.com/48" alt="Placeholder Image">
    </figure>
  </div>
  <div class="media-content">
    <p class="title is-4">Emma Stone</p>
    <p class="subtitle is-6">Graphic Designer</p>
  </div>
</div>

এখানে দুটি আলাদা Media Object তৈরি করা হয়েছে, যেখানে প্রথমটি জন ডো এবং দ্বিতীয়টি এমা স্টোনের জন্য।

৫. Media Object এর সাথে অন্যান্য Bulma উপাদান ব্যবহার

আপনি Media Object এর সাথে অন্যান্য Bulma উপাদান যেমন Buttons, Icons, Notifications ইত্যাদি ব্যবহার করতে পারেন। এটি আরও ভিজ্যুয়ালি আকর্ষণীয় এবং কার্যকরী করে তোলে।

উদাহরণ: Media Object with Button

<div class="media">
  <div class="media-left">
    <figure class="image is-48x48">
      <img src="https://via.placeholder.com/48" alt="Placeholder Image">
    </figure>
  </div>
  <div class="media-content">
    <p class="title is-4">Alex Green</p>
    <p class="subtitle is-6">Product Manager</p>
    <button class="button is-primary">Follow</button>
  </div>
</div>

এখানে:

• Follow বাটনটি Media Object এর টেক্সট কনটেন্টের পাশে রাখা হয়েছে, যা সাইটের ইন্টারঅ্যাকটিভ ফিচার হিসেবে কাজ করবে।

৬. Media Object Layout এর সাথে Flexbox কাস্টমাইজেশন

Bulma এর Media Object মূলত Flexbox এর উপর ভিত্তি করে কাজ করে, তাই আপনি এটি আরও কাস্টমাইজ করতে পারেন, যেমন উপাদানগুলোর অবস্থান, অ্যালাইনমেন্ট ইত্যাদি।

উদাহরণ: Media Object with Flexbox

<div class="media is-align-items-center">
  <div class="media-left">
    <figure class="image is-48x48">
      <img src="https://via.placeholder.com/48" alt="Placeholder Image">
    </figure>
  </div>
  <div class="media-content">
    <p class="title is-4">Robert Brown</p>
    <p class="subtitle is-6">Web Developer</p>
  </div>
</div>

এখানে:

• is-align-items-center ক্লাসটি Flexbox এর মাধ্যমে মিডিয়া অবজেক্টের উপাদানগুলোকে সেন্টারে অ্যালাইন করেছে।

সারাংশ

Bulma এর Media Object Layout একটি শক্তিশালী উপাদান, যা ছবি এবং টেক্সটকে একত্রে সুন্দরভাবে সাজাতে ব্যবহৃত হয়। এটি বিভিন্ন সাইজ এবং কন্টেন্টের সঙ্গে কাজ করতে সক্ষম এবং Bulma এর Flexbox ভিত্তিক সিস্টেমের মাধ্যমে রেসপনসিভ ডিজাইন তৈরি করতে সাহায্য করে। আপনি Media Object এর মধ্যে ইমেজ, টেক্সট, বাটন বা অন্যান্য উপাদান যোগ করতে পারেন, যা আপনার ওয়েবসাইটে একটি পরিচ্ছন্ন এবং আকর্ষণীয় লেআউট তৈরি করতে সাহায্য করবে।