انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 02
دورة Bootstrap

حاويات bootstrapBootstrap Containers

ستتعلم في هذا الدرس استخدام ال Containers والبدأ في انشاء تصميم اما flat Design او boxed عن طريق اطار عمل  bootstrap.

ابدأ التعلّم استكشف الأمثلة
أقسام الدرس
4
الأمثلة
4
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
3,776
محتوى الدرس
في هذا الدرس 4تصفّح المواضيع

Bootstrap Containers الحاويات في BootStrap

containers الحاويات هي عنصر التخطيط الاساسي في bootstrap لانها تقوم بمحاذاة محتوى الصفحة بشكل مستمر داخل حدود صفحة الويب مهما تغيرت ابعادها.


وهناك نوعين شائعين لصفحات الويب من حيث التصميم :

  • Flat Design: تصميم مسطح بعرض شاشة الزائر.
  • Boxed Design: تصميم مبني علي الجزء الاكبر من الصفحة ويكون في اوسطها.


هناك ايضا نوعين للحاويات:

  • container. : هو كلاس مجهز مسبقاً داخل bootstrap لانشاء صفحات ويب responsive متجاوبة وثابتة العرض.
  • container-fluid. : وهو ايضا كلاس مجهز مسبقاً داخل bootstrap لانشاء صفحات ويب responsive متجاوبة وبعرض كامل.
الحاويات في BootStrap
الحاويات في BootStrap
جرّب بنفسك

Container Class

استخدام كلاس container

HTML 
<div class="container">
  <h1>Bootstrap</h1>
  <p>Hello World!</p>
</div>
جرّب بنفسك
جرّب بنفسك

Container-Fluid Class

استخدام كلاس container-fluid

HTML 
<div class="container-fluid">
  <h1>Bootstrap</h1>
  <p>Hello World!</p>
</div>
جرّب بنفسك

BootStrap Fixed Container الحاوية ذات العرض الثابت في bootstrap

  • container: هو default container الحاوية الافتراضية ويطلق عليه ايضا fixed container الحاوية الثابتة لانه وكما ذكرنا يستخدم لانشاء صفحات ويب ثابتة العرض.
  • max-width: له max-width اقصى عرض يتغير حسب حجم شاشة الزائر.
الشاشة العرض
Extra Small < 576px
Small ≥ 576px
Medium ≥768px
Large ≥992px
Extra Large ≥1200px



BootStrap Container Padding and Margin عمل padding و margin لاي حاوية في bootstrap

Container الحاوية في الوضع الافتراضي لها Padding left and right 15px  ولها 0 :padding top and bottom. 

يمكننا باستخدام بوتستراب لنغير من قيم ال padding ايضا ال margin كما نشاء وبطريقة متجاوبة. 
فمثلا عند كتابة كلاس pt-5 فهذا يعني انك تريد اضافة padding-top:2rem. ولكي تفهم معنى هذا الكلاس فعليك ان تعرف ثلاث اشياء.

اولا حرف p هو رمز لكلمة padding وفي حالة كنت تريد عمل margin فيمكنك استبداله بحرف m.


ثانيا حرف t هو اختصار لكلمة top وهذا يعني انك تريد تطبيق هذا ال padding او ال margin في الاتجاه الاعلى فقط واليك جيمع الاتجاهات:

  • top -t
  • bottom - b
  • left ( start ) - s
  • right( end ) - e
  • x-  (محور السينات x-axis) right and left 
  • y-  (محور الصادات غ-axis) top and bottom
  • في حالة عدم تحديد اتجاه يتم تطبيق الكلاس على جميع الاتجاهات.


ثالثا الرقم 5 يعني ان القيمة هي 3rem وتتراوح الارقام من 0 الى 5 والقيم الخاصة بها هي كالاتي:

  • 0 تعني صفر
  • 1 تعني 0.25rem
  • 2 تعني 0.5rem
  • 3 تعني  1rem
  • 4 تعني 1.5rem
  • 5 تعني 3rem


لذلك عندما نضيف pb-3 على سبيل المثال فهذا يعني padding-bottom:1rem و 1rem = 16px.

جرّب بنفسك

Padding Class

استخدام كلاس padding

HTML 
<div class="container pt-3"></div>
جرّب بنفسك

BootStrap Responsive Containers الحاويات المتجاوبة في bootstrap

يتغير عرض كل container حاوية علي حسب عرض الشاشة ويوجد المزيد من الكلاسات الخاصة بالحاوية لكي تتوافق مع معظم الشاشات مثل :

Extra small <576px Small ≥576px Medium ≥768px Large ≥992px X-Large ≥1200px XX-Large ≥1400px
.container 100% 540px 720px 960px 1140px 1320px
.container-sm 100% 540px 720px 960px 1140px 1320px
.container-md 100% 100% 720px 960px 1140px 1320px
.container-lg 100% 100% 100% 960px 1140px 1320px
.container-xl 100% 100% 100% 100% 1140px 1320px
.container-xxl 100% 100% 100% 100% 100% 1320px
.container-fluid 100% 100% 100% 100% 100% 100%



جرّب بنفسك

Responsive Containers

استخدام كلاسات الحاوية مع احجام الشاشات المختلفة.

HTML 
<div class="container-sm">.container-sm</div>
<div class="container-md">.container-md</div>
<div class="container-lg">.container-lg</div>
<div class="container-xl">.container-xl</div>
جرّب بنفسك

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…