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

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

3

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

জাম্বোট্রন কি?

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

জাম্বোট্রন কম্পোনেন্টের বৈশিষ্ট্য

  • ডিফল্টরূপে লেআউটের সম্পূর্ণ প্রস্থ দখল করে, আপনি নির্ধারিত প্রস্থে সীমাবদ্ধ করতে পারেন
  • সমস্ত ডিভাইসে সম্পূর্ণরূপে প্রতিক্রিয়াশীল উপাদান
  • সীমানার ব্যাসার্ধ আছে (সম্পূর্ণ প্রস্থের সাথে ব্যবহার করা হলে লুকানো)
  • ডিফল্ট পটভূমির রঙ হল #eee
  • জুমবোট্রনের ভিতরে যে কোনো বুটস্ট্র্যাপ উপাদান যেমন সতর্কতা এবং ব্যাজ যুক্ত করা যেতে পারে
  • বুটস্ট্র্যাপ টেমপ্লেটগুলিতে কল টু অ্যাকশন বিভাগের মতো ব্যবহৃত হয়
  • ".Jumbotron" CSS ক্লাস ব্যবহার করে বুটস্ট্র্যাপ টেমপ্লেটে যেকোনো জায়গায় beোকানো যাবে
  • Jumbotron প্রধান "bootstrap.min.css" থেকে ডিফল্ট স্টাইল ব্যবহার করে এবং ইনলাইন স্টাইল ব্যবহার করে কাস্টমাইজ করা যায়।

সম্পূর্ণ প্রস্থ জাম্বোট্রন

Jumbotron যোগ করা হয় নীচের উদাহরণে একটি H2 শিরোনাম, একটি অনুচ্ছেদ এবং পূর্ণ প্রস্থ বিভাগ ব্যবহার করে একটি বোতাম রয়েছে।

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

সম্পূর্ণ প্রস্থ বুটস্ট্র্যাপ জাম্বোট্রন

সম্পূর্ণ প্রস্থের জাম্বোট্রনের সম্পূর্ণ কোড নিচে দেওয়া হল। আপনি কোডটি দেখতে পাচ্ছেন, ".jumbotron-fluid" ক্লাসটি ".container" সহ সম্পূর্ণ প্রস্থের জন্য ব্যবহৃত হয়।

<!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 Jumbotron --> <div class="jumbotron jumbotron-fluid"> <div class="container"> <h2>WebNots Web Consulting Services</h2> <p>WebNots Web Consulting Services company offers site building, migration and SEO services on WordPress and Weebly platforms. We also share our experience and knowledge through free articles, demos, eBooks, videos and glossary terms for the benefit of bloggers and webmasters community.</p> <p><a href="https://www.webnots.com/free-ebooks-for-bloggers-and-webmasters/" target="_blank" class="btn btn-primary btn-lg">Get Free eBooks for Bloggers</a></p> </div> </div> <!-- End of Jumbotron --> <!-- 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>

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

বুটস্ট্র্যাপ জাম্বোট্রন – সম্পূর্ণ প্রস্থ নেই

যদি আপনি সম্পূর্ণ প্রস্থ না চান তবে কেবল ".container" এবং ".jumbotron-fluid" ক্লাস ছাড়া ".jumbotron" ক্লাস ব্যবহার করুন। এইভাবে আপনি সম্পূর্ণ প্রস্থকে অক্ষম করতে পারেন এবং জাম্বোট্রনের প্রস্থ হবে প্রস্থ

ধারক

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

কন্টেইনারের ভিতরে বুটস্ট্র্যাপ জাম্বোট্রন

লক্ষ্য করুন যে যখন জাম্বোট্রন উপাদানটি সম্পূর্ণ প্রস্থ দখল করে না তখন সীমানার ব্যাসার্ধ দৃশ্যমান হবে। নীচে উপরের জাম্বোট্রন উদাহরণের সম্পূর্ণ কোড নেই যার সম্পূর্ণ প্রস্থ নেই:

<div class="jumbotron"> <h2 style="padding-bottom: 50px">This is an example of jumbotron component inside container.</h2> <a href="https://www.webnots.com/" class="btn btn-warning btn-lg btn-block">Go to Home Page</a> </div>

Jumbotron কম্পোনেন্ট কাস্টমাইজ করা

আপনি নীচের মতো জাম্বোট্রনের ফন্টের রঙ এবং পটভূমির রঙ কাস্টমাইজ করতে সাধারণ CSS ব্যবহার করতে পারেন:

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

কাস্টম বুটস্ট্র্যাপ জাম্বোট্রন

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

<!DOCTYPE html> <html> <head> <title>Custom Full width Bootstrap Jumbotron</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> <style type="text/css"> .jumbotron{ margin-top: 15px; padding: 17px; color: #990000; background-color: #FFFFCC; } </style> </head> <body> <div class="jumbotron jumbotron-fluid"> <div class="container"> <h1>Custom Jumbotron Component</h1> <p>This is a custom jumbotron using H1, paragraph and full width button. You can add any other elements and customize the color, margins and paddings as you need.</p> <p><a href="https://www.webnots.com/" class="btn btn-warning btn-lg btn-block">Go to Home Page</a></p> </div> </div> </body> </html>

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


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

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