انتقل إلى محتوى الدرس

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

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

1 صفوف تعليمية
Bootstrap
3,776 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

يتغير عرض كل 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>