بهذا الدرس بنتعلم شو يعني Grids في Bootstrap وكيف ممكن نستفيد من هذه ال Grids بالاضافة الى امكانيات Bootstrap الكثيرة للتعامل معها.باستخدام flexbox grid الي بتحتوي على 12 عمود تستخدم مع Grids
يحتوي flexbox grid على نظام 12 عمود و 6 طبقات responsive tiers بالاضافة الى مجموعه من Sass variables and mixins وايضا الكثير من الفئات المحددة مسبقًا وتستخدم مع Grids واكيد بكون الاستخدام حسب الحاجه.
شكل Grids بكون مكون من مجموعه من الاعمده والصفوف جميعها يتم اعادرة ترتيبها حسب حجم الشاشة، ويمكن استخدام لحد 12 عمود واكيد مش بحاجه الى استخدام هذا العدد ، يمكن دمج مجموعة اعمده مع بعض
الشكل التالي يوضح طريقة تركيب الاعمدة والصفوف في Grid
يتكون نظام Bootstrap 5 grid من ستة فئات classes وهم :
| الاسم classes | الوصف |
| .col- | (أجهزة صغيرة جدًا - عرض الشاشة أقل من 576 بكسل) |
| .col-sm- | (الأجهزة الصغيرة - عرض الشاشة يساوي أو يزيد عن 576 بكسل) |
| .col-md- | (الأجهزة المتوسطة - عرض الشاشة يساوي 768 بكسل أو أكبر) |
| .col-lg- | (الأجهزة الكبيرة - عرض الشاشة يساوي أو يزيد عن 992 بكسل) |
| .col-xl- | (أجهزة xlarge - عرض شاشة يساوي 1200 بكسل أو أكبر منها) |
| .col-xxl- | (أجهزة xxlarge - عرض الشاشة يساوي أو يزيد عن 1400 بكسل) |
تمام نطبق مثال حتى نفهم شو يعني هاذ الكلام:
<!DOCTYPE html>
<html lang="en">
<head>
<title>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">
<div class="row">
<div class="col bg-primary text-white">
Column
</div>
<div class="col bg-dark text-white">
Column
</div>
<div class="col bg-danger text-white">
Column
</div>
</div>
</div>
</body>
</html>
النتيجة بتكون :
في هذا المثال يتم انشاء ثلاثة أعمدة متساوية في العرض في جميع الأجهزة و viewports والسبب استخدام grid classes المعرفه مسبقًا. يتم توسيط هذه الأعمدة في الصفحة مع parent .container.
نفهم شو عملنا
طبقنا في البدايه الكود:
<div class="row">
الي بيعني ان انشأنا صف في grid وبعدها اضفنا الكود :
<div class="col">
Column
</div>
وهذا الكود بيعني انشاء عمود داخل هذا الصف استخدمنا class باسم col وبهاذا class بتم التحكم بعرض العمود بشكل تلقائي حسب حجم الشاشة وفي مثالنا السابق اضفنا 3 اعمده الي بيعني ان عرض العمود الواحد بهاي الحالة بكون : %33.33 ولو عدلنا الكود السابق الى :
<!DOCTYPE html>
<html lang="en">
<head>
<title>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">
<div class="row">
<div class="col">
Column
</div>
<div class="col">
Column
</div>
</div>
</div>
</body>
</html>
بهذا المثال اضفنا 2 عمود، يعني بكون عرض العمود بساوي %50. وبهذه الطريقة يعني لو اضفنا 4 اعمده بكون عرض العمود %25 وهذا.
يمكن تطبيق classes السابقة على هذه الاعمده وطريقة الكتابة بتكون :
.col-*-*
تمثل النجمة الأولى (*) واحد من (sm ، md ، lg ، xl ، xxl) ، بينما تمثل النجمة الثانية رقمًا ، والي بكون من 1 الى 12.
نطبق هذا الكلام بمثال حتى نفهم شو يعني:
Responsive Columns
نطبق المثال التالي في صفحة HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>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">
<div class="row">
<div class="col-sm-3 bg-primary text-white">
Column
</div>
<div class="col-sm-3 bg-dark text-white">
Column
</div>
<div class="col-sm-3 bg-danger text-white">
Column
</div>
<div class="col-sm-3 bg-info text-white">
Column
</div>
</div>
</div>
</body>
