شو هي Bootstrap 5 Containers
-
شو يعني Containers
ممكن نشبهها ب الحاويات لتغليف المحتوى بداخلها ، يعني كل مكونات الصفحة بتكون داخل هذه الحاوية.
- container. بكون العرض ثابت حسب حجم الشاشة واكيد بكون قابل للتعديل التلقائي عند التكبير والتصغير حسب الحجم.
- container-fluid. بكون الحجم بحجم الشاشة كاملة full width container، تغطي العرض الكامل لإطار العرض width of the viewport
الصورة التالية توضح ذلك :
تمام التمام نفهم شو الفرق بينهم بالتفصيل :
النوع الأول container. ويطلق عليه كمان Fixed Container :
في هذا النوع يكون عرض container ثابت مع وجود (max-width) يعني العرض ثابت لكن بتغير حسب حجم الشاشة.
الجدول التالي يوضح (max-width) حسب حجم الشاشة :
| حجم الشاشة | اقل من 576px Extra small | اكبر او يساوي 576px Small | اكبر او يساوي 768px Medium | اكبر او يساوي 992px Large | اكبر او يساوي 1200px Extra Large | اكبر او يساوي 1400px |
| max-width | 100% | 540px | 720px | 960px | 1140px | 1320px |
شوف كيف max-width لعرض container بيختلف حسب حجم الشاشة.
مثال :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Welcome, Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<h1>Welcome, First Bootstrap Page</h1>
<p>Hello, from inside a .container class.</p>
<p>Hello, .container class provides a responsive fixed width container.</p>
</div>
</body>
</html>
شغل الصفحة وشوف النتيجة :
حاول تغير حجم الشاشة اكيد بتكون النتيجة ان المحتويات بضل لحجم ثابت لكن متغير حسب حجم الشاشة.
النوع الثاني Fluid Container
في هذا النوع يتم انشاء container بحجم الشاشة كاملة full width وبتكون بهذا الشكل حتى لو تغير حجم الشاشة(يعني دائما العرض بكون full width)
مثال :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Welcome, Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>Welcome, First Bootstrap Page</h1>
<p>Hello, from inside a .container class.</p>
<p>Hello, .container class provides a responsive fixed width container.</p>
</div>
</body>
</html>
اترك تعليقك