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

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

1

আমাদের আগের টিউটোরিয়ালে আমরা একটি পৃথক উপাদান হিসেবে কার্ড তৈরির বিভিন্ন উপায় ব্যাখ্যা করেছি । যেহেতু কার্ডগুলি বিভিন্ন উপাদানের একটি সংগ্রহ, আপনি সেগুলি ব্যবহার করতে পারেন সম্পূর্ণ পেজ লেআউট তৈরি করতে যেমন রাজমিস্ত্রি ব্লগ ইনডেক্স পেজ। বুটস্ট্র্যাপ 5 কার্ড দিয়ে পৃষ্ঠা লেআউট তৈরির জন্য তিনটি ডিফল্ট CSS ক্লাস অফার করে। এই টিউটোরিয়ালে আসুন আমরা কার্ড লেআউট তৈরিতে আরো এক্সপ্লোর করি।

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

কার্ড লেআউটের প্রকারভেদ

বুটস্ট্র্যাপ কার্ড লেআউট তৈরির জন্য নিম্নলিখিত তিনটি CSS ক্লাস ব্যবহার করে:

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

এই ক্লাসগুলির পাশাপাশি আপনি ডিফল্ট গ্রিড লেআউট কলামের মধ্যে পৃথক কার্ড রেখে লেআউট তৈরি করতে পারেন ।

লেআউট 1: কার্ড গ্রুপ লেআউট

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

কিভাবে বুটস্ট্র্যাপ 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> <!-- Start of Card Groups Layout --> <div class="card-group"> <div class="card"> <img class="card-img-top" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Flex Card Image 1"> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">Here is a longer description of the card and the height will be auto aligned with flex box.</p> </div> <div class="card-footer"> <small class="text-muted">Here is a footer</small> </div> </div> <div class="card"> <img class="card-img-top" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Flex Card Image 2"> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">Here is a shorter description of the card.</p> </div> <div class="card-footer"> <small class="text-muted">Here is a footer</small> </div> </div> <div class="card"> <img class="card-img-top" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Flex Card Image 3"> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">Here is a very long description of the card and the height will be auto aligned with flex box. You can enter longer text to check the cards are aligned perfectly with same height without any gap.</p> </div> <div class="card-footer"> <small class="text-muted">Here is a footer</small> </div> </div> </div> <!-- End of Card Groups Layout --> <!-- 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>

লেআউট 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> <!-- Start of Card Deck Layout --> <div class="card-deck"> <div class="card"> <img class="card-img-top" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">Here is a longer description of the card and the height will be auto aligned with flex box.</p> </div> <div class="card-footer"> <small class="text-muted">Here is a footer</small> </div> </div> <div class="card"> <img class="card-img-top" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">Here is a shorter description of the card.</p> </div> <div class="card-footer"> <small class="text-muted">Here is a footer</small> </div> </div> <div class="card"> <img class="card-img-top" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">Here is a very long description of the card and the height will be auto aligned with flex box. You can enter longer text to check the cards are aligned perfectly with same height without any gap.</p> </div> <div class="card-footer"> <small class="text-muted">Here is a footer</small> </div> </div> </div> <!-- End of Card Deck Layout --> <!-- 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>

লেআউট 3: কার্ড কলাম লেআউট বা রাজমিস্ত্রি লেআউট

রাজমিস্ত্রি লেআউট হল ব্লগ সূচী পাতা প্রদর্শনের একটি জনপ্রিয় উপায় যার সাথে পৃথক বাক্সগুলি উপলব্ধ স্থানে উপযুক্ত। এখানে কার্ডের প্রকৃত আকারের উপর ভিত্তি করে পৃথক কার্ডের উচ্চতা ভিন্ন হবে। "। কার্ড-কলাম" শ্রেণী ব্যবহার করে রাজমিস্ত্রি বিন্যাসটি কেমন হবে তা নীচে দেওয়া হল।

কিভাবে বুটস্ট্র্যাপ 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> <!-- Start of Card Columns Layout --> <div class="card-columns"> <div class="card"> <img class="card-img-top img-fluid" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Card Columns 1"> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">Here is a very long description of the card and you can enter longer text to check the cards are aligned perfectly like on the masonry layout.</p> </div> </div> <div class="card"> <img class="card-img-top img-fluid" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Card Columns 2"> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">Here is a shorter description of the card.</p> <p class="card-text"><small class="text-muted">Here is a footer</small></p> </div> </div> <div class="card p-3 bg-dark text-white"> <blockquote class="blockquote mb-0"> <p>This is a blockquote and you can enter any quote from anyone.</p> <footer> <small class="text-muted"> Said by <cite title="Source Title">Someone</cite> </small> </footer> </blockquote> </div> <div class="card bg-primary p-3 text-center text-white"> <blockquote class="blockquote mb-0"> <p>Here is a description for primary card.</p> <footer> <small> Said by <cite title="Source Title">Someone</cite> </small> </footer> </blockquote> </div> <div class="card text-center"> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p>Here is a short description of the card without image.</p> <p class="card-text"><small class="text-muted">Here is a footer</small></p> </div> </div> <div class="card p-3 text-right"> <blockquote class="blockquote mb-0"> <p>Here is a short description without title and image.</p> <footer> <small> Said by <cite title="Source Title">Someone</cite> </small> </footer> </blockquote> </div> <div class="card"> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">Here is a long description for your card, enter anything you would like to enter here.</p> <p class="card-text"><small class="text-muted">Here is a footer</small></p> </div> </div> <div class="card"> <img class="card-img img-fluid" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Image Only Card"> </div> </div> <!-- End of Card Columns Layout --> <!-- 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>

আপনি অনেকগুলি উপাদান যোগ করতে পারেন বা ব্লগরোল থেকে এটিকে একটি সূচী পৃষ্ঠা হিসাবে প্রদর্শনের জন্য টেনে আনতে পারেন।

উল্লেখ্য পয়েন্ট:

  • রাজমিস্ত্রি লেআউটে ব্যবহৃত ছবিগুলিতে 100% প্রস্থ যোগ করার প্রয়োজন হতে পারে .img-fluid {width: 100%;}।

  • মনে রাখবেন ".p-3" ক্লাসটি কার্ডে প্যাডিং যোগ করার জন্য ব্যবহৃত হয় যেখানে 1rem প্যাডিং যুক্ত করার জন্য শুধুমাত্র বর্ণনা পাঠ্য থাকে।

  • প্রাথমিক বুটস্ট্র্যাপ 5 রিলিজের সাথে মোবাইল ডিভাইসগুলিতে কার্ড লেআউটগুলি প্রতিক্রিয়াশীল নয়।

    • *

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


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

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