উদাহরণ সহ বুটস্ট্র্যাপে ধারক (3)

নাম থেকে বোঝা যায়, একটি কন্টেইনার কিছু ধরে রাখতে বা বাঁধতে ব্যবহার করা হয় একইভাবে বুটস্ট্র্যাপের কন্টেইনারগুলি একটি ভিউপোর্টে সামগ্রী সংরক্ষণ বা বাঁধার জন্য ব্যবহার করা হয়৷ কনটেইনারগুলি একটি ভিউপোর্টের চারটি দিক থেকে মার্জিন প্রদান করে সামগ্রীতে প্যাডিং যুক্ত করে এবং প্রয়োজনের উপর নির্ভর করে এটি পরিবর্তন করা যেতে পারে। পাত্রে একে অপরের ভিতরেও বাসা বাঁধতে পারে।

এখন, আসুন আমরা প্রতিটি ক্লাস বিস্তারিতভাবে বুঝি

ধারক

বুটস্ট্র্যাপে, .container ক্লাস একটি ভিউপোর্টে একটি নির্দিষ্ট প্রস্থ সহ একটি প্রতিক্রিয়াশীল ধারক তৈরি করে৷ এটি একটি ভিউপোর্টের আকারের উপর নির্ভর করে একটি কন্টেইনারের সর্বোচ্চ-প্রস্থ নির্ধারণ করে৷

একটি ভিউপোর্টের আকারের উপর নির্ভর করে একটি .container ক্লাসের সর্বাধিক-প্রস্থের বর্ণনাকারী চার্টটি নীচে দেওয়া হল৷

৷	অতিরিক্ত ছোট	ছোট	মাঝারি	বড়	অতিরিক্ত বড়
সর্বোচ্চ-প্রস্থ	100%	540px	720px	960px	1140px

উদাহরণ

এটি আরও ভালভাবে বোঝার জন্য একটি উদাহরণ নেওয়া যাক

<html>
<head>
<title>.Container Class</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body style="border:5px solid Black;">
<br>
<div class="container bg-dark text-white" style>
<center>
<h1>tutorialspoint</h1>
<h6>SIMPLYEASYLEARNING</h6>
</center>
</div>
</body>
</html>

আউটপুট

এই কোডের আউটপুট হবে

উদাহরণ সহ বুটস্ট্র্যাপে ধারক (3)

পাত্র-তরল

বুটস্ট্র্যাপে, .container-fluid ক্লাস একটি ভিউপোর্টে 100% এর নির্দিষ্ট প্রস্থ সহ একটি প্রতিক্রিয়াশীল ধারক তৈরি করে। এটি একটি ভিউপোর্টের আকার নির্বিশেষে একটি কন্টেইনারের সর্বোচ্চ-প্রস্থ 100% সেট করে৷

নীচে একটি .container-fluid ক্লাসের সর্বাধিক-প্রস্থ বর্ণনাকারী চার্ট দেওয়া হল।

৷	অতিরিক্ত ছোট	ছোট	মাঝারি	বড়	অতিরিক্ত বড়
সর্বোচ্চ-প্রস্থ	100%	100%	100%	100%	100%

উদাহরণ

এটি আরও ভালভাবে বোঝার জন্য একটি উদাহরণ নেওয়া যাক

<html>
<head>
<title>.Container Class</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body style="border:5px solid Black;">
<br>
<div class="container-fluid bg-dark text-white">
<center>
<h1>tutorialspoint</h1>
<h6>SIMPLYEASYLEARNING</h6>
</center>
</div>
</body>
</html>

আউটপুট

এই কোডের আউটপুট হবে

উদাহরণ সহ বুটস্ট্র্যাপে ধারক (3)