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 কম্পোনেন্টটি রেসপনসিভ ডিজাইনের জন্যও উপযুক্ত, যেটি আপনার ওয়েব পৃষ্ঠায় প্রতিটি উপাদানকে সুন্দরভাবে উপস্থাপন করতে সাহায্য করবে।
Read more
