TechBlogSD - ওয়ার্ডপ্রেস এবং ওয়েব ডেভেলপমেন্টের জন্য সবকিছু
ওয়েব এবং ওয়ার্ডপ্রেস নির্দেশাবলী, খবর, থিম এবং প্লাগইনগুলির পর্যালোচনা

কিভাবে বুটস্ট্র্যাপ 5 কার্ড তৈরি করবেন?

1

বুটস্ট্র্যাপ 4 কার্ড নামে একটি নতুন উপাদান চালু করেছে। বুটস্ট্র্যাপ in -এর প্যানেল, থাম্বনেইল এবং কূপের মতো উপাদানগুলি মুছে ফেলা হয়েছে এবং বুটস্ট্র্যাপ cards -এ কার্ড নামে একটি একক উপাদান হিসেবে তৈরি করা হয়েছে। এই টিউটোরিয়ালে আসুন আমরা আলোচনা করি কিভাবে সর্বশেষ বুটস্ট্র্যাপ 5 ব্যবহার করে রিয়েল-টাইমে বিভিন্ন কার্ড তৈরি করা যায়।

আপনি এই টিউটোরিয়ালে ব্যবহৃত উদাহরণগুলি এখানে ডাউনলোড করতে পারেন ।

বুটস্ট্র্যাপ ৫ টি টিউটোরিয়াল

এই টিউটোরিয়ালটি নিম্নলিখিত অধ্যায়গুলি জুড়েছে:

  1. কার্ড কম্পোনেন্ট কি?
  2. বেসিক বুটস্ট্র্যাপ 5 কার্ড
  3. কার্ডের সাইজিং
  4. সাবটাইটেল এবং লিঙ্ক সহ কার্ড
  5. পাঠ্য সারিবদ্ধ করা
  6. হেডার এবং ফুটার যোগ করা হচ্ছে
  7. নেভিগেশন ট্যাব ব্যবহার করে
  8. কার্ডের নীচে ছবি
  9. ইমেজ ওভারলে সহ কার্ড
  10. উল্টানো বা কালো কার্ড
  11. ব্যাকগ্রাউন্ড কালার সহ কার্ড
  12. আউটলাইন কার্ড
  13. কার্ড লেআউট

1 বুটস্ট্র্যাপে কার্ড কী?

কার্ড হল তরল পাত্রে হেডার, ফুটার এবং কন্টেন্ট থাকে। বিষয়বস্তুর অংশে বিভিন্ন ধরনের উপাদান থাকতে পারে যেমন শিরোনাম, বর্ণনা, ছবি, বোতাম ইত্যাদি। আমরা মৌলিক এবং সবচেয়ে আকর্ষণীয় চেহারা সঙ্গে কার্ড আবরণ।

2 বেসিক কার্ড

মৌলিক কার্ড উপাদানটিতে একটি ছবি, শিরোনাম, বর্ণনা এবং একটি বোতাম থাকবে। এটি ব্লগ এবং পেজ লেআউট ডিজাইনে কার্ড ব্যবহারের সবচেয়ে সাধারণ ফর্ম।

কিভাবে বুটস্ট্র্যাপ 5 কার্ড তৈরি করবেন?

বেসিক কার্ড তৈরির জন্য কোড স্নিপেট সম্পূর্ণ স্টার্টার টেমপ্লেট সহ নিচে দেওয়া হল :

<!DOCTYPE html> <html lang="en"> <head> <!-- Meta Tags for Bootstrap 5 --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap 5 CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> </head> <body> <!-- Basic Card with Image, Title and Description --> <div class="card" style="width:20rem;"> <img class="card-img-top img-fluid" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="card image"> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is basic card with image on top, title, description and button.</p> <a href="#" class="btn btn-primary">Button</a> </div> </div> <!-- Bootstrap 5 Scripts --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script> </body> </html>

আদর্শভাবে কার্ডের জন্য স্ক্রিপ্টের প্রয়োজন নেই যতক্ষণ না কার্ড ব্লকের মধ্যে কেবল সাধারণ উপাদান ব্যবহার করা হয়। যেমন আপনি লক্ষ্য করেছেন যে একটি কার্ড তৈরি করতে প্রচুর CSS ক্লাস ব্যবহার করা হয়।

  • কার্ডটি

    ট্যাগ

  • ছবিটি কার্ডের একটি alচ্ছিক উপাদান। উপরের ছবিটি অন্তর্ভুক্ত করার জন্য আপনাকে ".card-img-top" একটি ক্লাস যোগ করতে হবে। অতিরিক্ত শ্রেণী ".img- তরল" যোগ করা হয়েছে যাতে ছবিটি প্রতিক্রিয়াশীল হয় এবং পাতার প্রস্থের সাথে মানানসই হয়।

  • কার্ডটিতে একাধিক কার্ড ব্লক থাকতে পারে যা একটি পৃথক ভিতরে আবৃত থাকে

    একটি CSS ক্লাস "। কার্ড-বডি" সহ ট্যাগ করুন। প্রতিটি কার্ড ব্লকে সেই ব্লকের বিষয়বস্তু থাকে যেমন শিরোনাম, বর্ণনা ইত্যাদি।

  • আমাদের উদাহরণে w ব্যবহার করেছেন

    "। কার্ড-শিরোনাম" ক্লাসের সাথে শিরোনামের দিকে যাচ্ছে। শিরোনামের পরে আমাদের সংক্ষিপ্ত বর্ণনা ব্যবহার করা হয়েছে

    ক্লাস "। কার্ড- পাঠ্য" সহ ট্যাগ করুন। অবশেষে আমাদের একটি বুট আছে যা সাধারণ বুটস্ট্র্যাপ বাটন শ্রেণীর সাথে চিহ্নিত করা হয় ।

মনে রাখবেন ".card" এবং ".card-body" ব্লকের ভিতরে যেকোনো ধরনের বিষয়বস্তু সহ একটি কার্ড থাকার জন্য যথেষ্ট।

3 কার্ড কম্পোনেন্টের সাইজিং

ডিফল্টরূপে কার্ড উপাদান তরল এবং পাত্রে সম্পূর্ণ প্রস্থে ছড়িয়ে পড়ে। উপরের মৌলিক কার্ডের উদাহরণে, আমরা "স্টাইল =" প্রস্থ: 20rem; "" ব্যবহার করে প্রস্থকে 20rem এ সীমাবদ্ধ করেছি। আপনি প্রস্থ সীমাবদ্ধ করার জন্য বিভিন্ন উপায় ব্যবহার করতে পারেন।

  • উপরের উদাহরণের মতো ইনলাইন স্টাইল ব্যবহার করা।
  • গ্রিড লেআউট ব্যবহার করা।
  • প্রস্থ এবং উচ্চতা সমন্বয় করতে ইউটিলিটি ক্লাস ব্যবহার করা।

আমাদের সমস্ত উদাহরণে, আমরা একটি নির্দিষ্ট প্রস্থে কার্ড তৈরি করতে ইনলাইন স্টাইল ব্যবহার করব।

4 টি সাবটাইটেল এবং লিঙ্ক সহ কার্ড

আসুন আমরা বোতামটির পরিবর্তে একটি সাবটাইটেল এবং লিঙ্ক রাখার জন্য বেসিক কার্ড পরিবর্তন করতে শুরু করি। শিরোনাম এবং সাবটাইটেলের মধ্যে প্রয়োজনীয় ব্যবধান তৈরি করতে "। কার্ড-সাবটাইটেল" শ্রেণী এবং নীচের মার্জিন ব্যবহার করে উপশিরোনাম যোগ করা যেতে পারে। স্ট্যান্ডার্ড এইচটিএমএল নোঙ্গর ট্যাগ ব্যবহার করে লিঙ্ক তৈরি করা হয় ।

<div class="card" style="width:20rem;"> <div class="card-body"> <h4 class="card-title">Card Title</h4> <h6 class="card-subtitle mb-2 text-muted">Card Subtitle</h6> <p class="card-text">This card has no image but has subtitle and two links instead of button.</p> <a href="#" class="card-link">Link 1</a> <a href="#" class="card-link">Link 2</a> </div> </div>

এটি ব্রাউজারে নিম্নলিখিত ফলাফল তৈরি করা উচিত:

কিভাবে বুটস্ট্র্যাপ 5 কার্ড তৈরি করবেন?

টেক্সট অ্যালাইনমেন্ট সহ ৫ টি কার্ড

ডিফল্টরূপে কার্ডের উপাদানগুলি বাম দিকে সারিবদ্ধ করা হয় যা ".text-right" এবং ".text-center" ক্লাস ব্যবহার করে যথাক্রমে ".card-block" ক্লাসে ডান এবং কেন্দ্রে পরিবর্তন করা যায়।

<!-- Card with Center Text Alignment --> <div class="card" style="width:20rem;"> <div class="card-body text-center"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card with center text alignment.</p> <a href="#" class="btn btn-primary">Button</a> </div> </div> <!-- Card with Right Text Alignment --> <div class="card" style="width:20rem;"> <div class="card-body text-right"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card with right text alignment.</p> <a href="#" class="btn btn-primary">Button</a> </div> </div>

চূড়ান্ত ফলাফল নীচের মত দেখাবে:

কিভাবে বুটস্ট্র্যাপ 5 কার্ড তৈরি করবেন?

টেক্সট সারিবদ্ধতা প্রদর্শনের জন্য উপরের কার্ডের উদাহরণে ছবির উপাদানটি সরানো হয়েছে।

6 হেডার এবং ফুটার যোগ করা

বুটস্ট্র্যাপ in -এর প্যানেল কম্পোনেন্টের অনুরূপ কার্ডে হেডার এবং ফুটার যোগ করার বিষয়ে কি? হ্যাঁ, আপনি নীচের মত ".card-header" এবং ".card-footer" ক্লাস ব্যবহার করে হেডার এবং ফুটার যোগ করতে পারেন:

<div class="card" style="width:20rem;"> <div class="card-header"> This is a Header </div> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card component with header and footer.</p> <a href="#" class="btn btn-primary">Button</a> </div> <div class="card-footer"> This is a Footer </div> </div>

আলাদা করার জন্য হেডার বা ফুটার ক্লাস যোগ করতে ভুলবেন না

"। কার্ড-ব্লক" বিভাগের আগে এবং পরে ট্যাগগুলি। হেডার এবং ফুটার সহ কার্ডের আউটপুট নিচে দেওয়া হল:

কিভাবে বুটস্ট্র্যাপ 5 কার্ড তৈরি করবেন?

7 কার্ডে ন্যাভিগেশন ট্যাব ব্যবহার করা

কার্ডের হেডার অংশ ডিফল্ট ন্যাভিগেশন কম্পোনেন্ট ব্যবহার করে কার্ডটিকে নীচের মত অনুভূমিক ট্যাবের মত রূপান্তর করতে পারে ।

কিভাবে বুটস্ট্র্যাপ 5 কার্ড তৈরি করবেন?

নেভিগেশন সহ কার্ডের কোড নিচে দেওয়া হল:

<div class="card text-center"> <div class="card-header"> <ul class="nav nav-tabs card-header-tabs"> <li class="nav-item" style="list-style-type: none;"> <a class="nav-link active" href="#">Tab1</a> </li> <li class="nav-item" style="list-style-type: none;"> <a class="nav-link" href="#">Tab2</a> </li> <li class="nav-item" style="list-style-type: none;"> <a class="nav-link disabled" href="#">Tab3</a> </li> </ul> </div> <div class="card-body"> <h4 class="card-title">This is a title for tab 1</h4> <p class="card-text">This card uses navigation with default navigation components.</p> <a href="#" class="btn btn-primary">Button</a> </div> </div>

8 নীচে ছবি

মূল কার্ডের উদাহরণে দেখানো হিসাবে ডিফল্ট কার্ডের কার্ডের উপরে ছবি থাকবে। আপনি ".card-img-bottom" ব্যবহার করে ছবিটি কার্ডের নিচে নামিয়ে নিতে পারেন

<div class="card" style="width:20rem;"> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is Bootstrap 5 card with image aligned bottom of the card component.</p> <p class="card-text"><small class="text-muted">Enter some text here...</small></p> </div> <img class="card-img-bottom" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Card Image Down"> </div>

নীচের চিত্র সহ কার্ডটি নীচের মত দেখাবে:

কিভাবে বুটস্ট্র্যাপ 5 কার্ড তৈরি করবেন?

9 ইমেজ ওভারলে সঙ্গে কার্ড

চিত্রটি উপরে বা নিচে রাখার পরিবর্তে আপনি নীচের মত একটি ওভারলে মত ছবির উপরে সমস্ত পাঠ্য উপাদান যুক্ত করতে পারেন :

কিভাবে বুটস্ট্র্যাপ 5 কার্ড তৈরি করবেন?

<div class="card bg-dark text-white" style="width:20rem;"> <img class="card-img" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Card image"> <div class="card-img-overlay"> <h4 class="card-title">Card Title</h4> <p class="card-text">Here is a short description to explain what this card is about.</p> <p class="card-text"><small class="text-muted">Enter some text here...</small></p> </div> </div>

".Card-img-overlay" শ্রেণীর মধ্যে ব্যবহার করা হয়

ট্যাগ যা সমস্ত টেক্সট উপাদানগুলিকে ছবিতে ওভারলে করার জন্য কভার করে। এখানে আমরা "। কার্ড-ইনভার্স" ব্যবহার করেছি টেক্সটকে হালকা রঙে রূপান্তর করতে যেমন আমরা গা dark় পটভূমি চিত্র ব্যবহার করেছি। আপনি পরবর্তী উদাহরণে উল্টানো কার্ড সম্পর্কে আরও পড়তে পারেন।

10 উল্টানো বা কালো কার্ড

ডিফল্টরূপে একটি কার্ডের পাঠ্য উপাদানগুলি গা dark় রং ব্যবহার করে পটভূমির রঙ হালকা রঙের (সাধারণত সাদা)। "। টেক্সট-হোয়াইট" ক্লাস ব্যবহার করে পাঠ্যের রঙ সহজেই হালকা রঙে উল্টানো যায়। মনে রাখবেন এটি কেবল পাঠ্যের রঙগুলিকে বিপরীত করবে এবং পঠনযোগ্যতা নিশ্চিত করার জন্য আপনাকে ".bg-dark" শ্রেণী ব্যবহার করে ম্যানুয়ালি একটি গা dark় রঙে পটভূমি ঘোষণা করা উচিত।

নীচে ইনলাইন স্টাইল ব্যবহার করে ঘোষিত কালো ব্যাকগ্রাউন্ড কালার সহ উল্টানো কার্ডের কোড দেওয়া হল ।

<div class="card bg-dark text-white mb-3" style="background-color: #333;"> <div class="card-body"> <h3 class="card-title">Special title treatment</h3> <p class="card-text">This is a card with inverse color and background is set as black.</p> <a href="#" class="btn btn-primary">Go somehwere</a> </div> </div>

উল্টানো কার্ডটি নীচের মত হওয়া উচিত:

কিভাবে বুটস্ট্র্যাপ 5 কার্ড তৈরি করবেন?

11 বিভিন্ন ব্যাকগ্রাউন্ড রং সহ কার্ড

সাদা পটভূমি সহ কার্ডগুলি দেখলে বিরক্তিকর হবে। কার্ড কম্পোনেন্টে রঙিন ব্যাকগ্রাউন্ড যুক্ত করতে যেকোনো ব্যাকগ্রাউন্ড ইউটিলিটি ক্লাস ব্যবহার করুন। আপনি প্রাথমিক, মাধ্যমিক, সাফল্য, আলো, অন্ধকার, সতর্কবাণী, তথ্য বা বিপদের মতো ব্যাকগ্রাউন্ডের রঙে পরিবর্তন করতে পারেন। নীচে শিরোনাম এবং বিভিন্ন পটভূমি রং সহ কার্ড।

<div class="card text-white bg-primary mb-3"> <div class="card-header">Primary</div> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card text paragraph with primary color background.</p> </div> </div> <div class="card text-white bg-secondary mb-3"> <div class="card-header">Secondary</div> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card text paragraph with secondary color background.</p> </div> </div> <div class="card text-white bg-success mb-3"> <div class="card-header">Success</div> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card text paragraph with green color background.</p> </div> </div> <div class="card text-white bg-info mb-3"> <div class="card-header">Info</div> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card text paragraph with blue color background.</p> </div> </div> <div class="card text-white bg-warning mb-3 text-center"> <div class="card-header">Warning</div> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card text paragraph with yellow color background and aligned center.</p> </div> </div> <div class="card text-white bg-danger mb-3 text-center"> <div class="card-header">Danger</div> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card text paragraph with red color background and aligned center.</p> </div> </div> <div class="card bg-light mb-3 text-center"> <div class="card-header">Light</div> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card text paragraph with light color background and aligned center.</p> </div> </div> <div class="card text-white bg-dark mb-3 text-center"> <div class="card-header">Dark</div> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card text paragraph with dark color background and aligned center.</p> </div> </div>

"। টেক্সট-হোয়াইট" ক্লাস অন্তর্ভুক্ত করতে ভুলবেন না কারণ এই সমস্ত ব্যাকগ্রাউন্ডগুলি গাer় রঙের যা পাঠ্যকে হালকা রঙের প্রয়োজন।

বিভিন্ন ব্যাকগ্রাউন্ড রঙের কার্ডগুলি নীচে দেখানো হয়েছে:

কিভাবে বুটস্ট্র্যাপ 5 কার্ড তৈরি করবেন?

12 আউটলাইন কার্ড

আউটলাইন কার্ডগুলিতে ".card-outline-primary", "। Card-outline-secondary", "। Card-outline-success", "। Card-outline-info", " .card-outline-warning "এবং” .card-outline-danger “ক্লাস।

<div class="card border-primary mb-3 text-center"> <div class="card-header">Primary Border</div> <div class="card-body text-primary"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card text paragraph with primary color background.</p> </div> </div> <div class="card border-secondary mb-3 text-center"> <div class="card-header">Secondary Border</div> <div class="card-body text-secondary"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card text paragraph with primary color background.</p> </div> </div> <div class="card border-light mb-3 text-center"> <div class="card-header">Light Border</div> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card text paragraph with primary color background.</p> </div> </div> <div class="card border-dark mb-3 text-center"> <div class="card-header">Dark Border</div> <div class="card-body text-dark"> <p>This is a card text paragraph with secondary color background without title.</p> <footer>Quote by <cite title="Source Title">Someone said</cite></footer> </div> </div> <div class="card border-success mb-3 text-center"> <div class="card-header">Success Border</div> <div class="card-body text-success"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card text paragraph with green color background.</p> </div> </div> <div class="card border-info mb-3 text-center"> <div class="card-header">Info Border</div> <div class="card-body text-info"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card text paragraph with blue color background.</p> </div> </div> <div class="card border-warning mb-3 text-center"> <div class="card-header">Warning Border</div> <div class="card-body text-warning"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card text paragraph with yellow color background.</p> </div> </div> <div class="card border-danger text-center"> <div class="card-header">Danger Border</div> <div class="card-body text-danger"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card text paragraph with red color background.</p> </div> </div>

আউটলাইন কার্ডগুলি নীচের মত দেখাবে:

কিভাবে বুটস্ট্র্যাপ 5 কার্ড তৈরি করবেন?

13 বুটস্ট্র্যাপ 5 কার্ড লেআউট

উপরের সমস্ত উদাহরণ একটি একক উপাদান হিসাবে কার্ড তৈরির সাথে সম্পর্কিত। বুটস্ট্র্যাপ কার্ড লেআউট তৈরির জন্য তিনটি ক্লাসও অফার করে যা ব্লগ লেআউটের জন্য আরও উপযুক্ত।

  • কার্ড-গ্রুপ
  • কার্ড-ডেক
  • কার্ড-কলাম

আমরা আমাদের পরবর্তী টিউটোরিয়ালে এই কার্ড লেআউট ক্লাস নিয়ে আলোচনা করব ।


বুটস্ট্র্যাপ 5 শিখুন (সূচক )


রেকর্ডিং উত্স: webnots.com
Leave A Reply

এই ওয়েবসাইট আপনার অভিজ্ঞতা উন্নত করতে কুকি ব্যবহার করে। আমরা ধরে নেব যে আপনি এটির সাথে ঠিক আছেন, তবে আপনি ইচ্ছা করলে অপ্ট-আউট করতে পারেন। আমি স্বীকার করছি আরো বিস্তারিত