Bootstrap 4 مع تدريب المحرر. ترتيب الكتل التكيفية على التوالي

بناءً على عدد النجوم على GitHub.

إذا كنت ترغب في إتقان Bootstrap، ولا سيما الإصدار الرابع والأحدث، فقد تم إعداد هذه المادة خصيصًا لك. هنا، باستخدام مثال صغير شامل يمكن إتقانه في نصف ساعة، سيتم عرض أساسيات Bootstrap، بمجرد فهمها، ستتمكن من القيام بشيء خاص بك باستخدام هذا الإطار.

المتطلبات الأساسية تهدف هذه المادة إلى تطوير مطوري الويب المبتدئين الذين لديهم فهم أساسي لـ HTML وCSS وjQuery.

إليك موقع ويب مكون من صفحة واحدة سنتحدث عن إنشائه باستخدام Bootstrap.

مشروع جاهز تم إنشاؤه باستخدام Bootstrap

Npm تثبيت التمهيد
يمكن ربط Bootstrap بصفحة ما باستخدام شبكة توصيل المحتوى. للقيام بذلك، قم بإضافة الرابط التالي إلى العلامة:

يمكن تنزيل أحدث إصدار من Bootstrap من هنا واستخدامه محليًا.

يجب أن يبدو هيكل المشروع كما في الشكل التالي.

هيكل المشروعحول إمكانيات Bootstrap 4 تم إصدار أول إصدار مستقر من Bootstrap 4 في نهاية شهر يناير من هذا العام. يتضمن Bootstrap الآن بعض الميزات المثيرة للاهتمام التي لم تكن موجودة في نسخته السابقة. أي أننا إذا تحدثنا عن التحسينات والتغييرات فيمكن أن نلاحظ ما يلي:

• تمت إعادة كتابة Bootstrap 4 باستخدام تقنية flexbox، بينما استخدم Bootstrap 3 تقنية Float. إذا لم تكن على دراية بـ flexbox، فقم بإلقاء نظرة على هذا المورد.
• يستخدم CSS الخاص بـ Bootstrap 4 وحدات rem، بينما كان يستخدم سابقًا وحدات px. يمكنك معرفة كيف تختلف.
• تمت إزالة بعض المكونات، مثل اللوحات. يمكنك العثور على تفاصيل حول التغييرات التي تم إجراؤها في Bootstrap 4.

في الواقع، يحتوي Bootstrap 4 على الكثير من الأشياء الجديدة مقارنة بـ Bootstrap 3، إذا كنت في حاجة إليها، يمكنك التعرف على هذه الابتكارات. لقد بدأنا الآن العمل على مشروعنا التعليمي نظام شبكة Bootstrap تم تصميم نظام شبكة Bootstrap لإنشاء تخطيطات الصفحة. يجعل من السهل تطوير مواقع الويب سريعة الاستجابة. في الإصدار الجديد من Bootstrap، لم تتغير أسماء الفئات (تجدر الإشارة إلى أن class.xs لم يعد موجودًا).

تنقسم الشبكة إلى 12 عمودًا، وهذه البنية، التي تم تكوينها حسب احتياجات المطور، هي أساس تخطيط الصفحة.

من أجل استخدام شبكة Bootstrap، تحتاج إلى إضافة فئة .row إلى العنصر الرئيسي للصفحة. عند تحديد أحجام العناصر المتداخلة، يتم استخدام الفئات التالية (بدلاً من العلامة النجمية في نهاية اسم الفئة، تتم الإشارة إلى عدد أعمدة الشبكة الأساسية المكونة من 12 عمودًا والتي يجب أن يشغلها عنصر معين):

• col-lg-* - الفئة المستخدمة للصفحات المخصصة للأجهزة ذات الشاشات الكبيرة مثل أجهزة الكمبيوتر المحمولة؛
• col-md-* - فئة الصفحات المصممة لأجهزة الشاشات متوسطة الحجم، مثل الأجهزة اللوحية؛
• col-sm-* - فئة الصفحات المصممة للشاشات الصغيرة، مثل تلك الموجودة على الهواتف الذكية.

يتم إنشاء أشرطة التنقل في Bootstrap باستخدام فئة .navbar. في الواقع، إنه غلاف يتم فيه وضع العناصر التي تشكل شريط التنقل. يوجد أدناه اللوحة التي سنقوم بإنشائها الآن. إنه موجود في أعلى الصفحة ولا يختفي عند التمرير.

شريط التنقل

لذا، لكي يظهر شريط التنقل على الصفحة، سنضيف علامة إلى ملف Index.html مع الفئة .navbar، بداخلها، باستخدام فئات أخرى مثل .navbar-brand و .navbar-toggler و .nav -العنصر، نقوم بإنشاء بعض العناصر الخاصة وهيكل نظام التنقل في الموقع. تسمح لك الفئة .fixed-top بإصلاح شريط التنقل الموجود أعلى الصفحة. هنا هو تخطيط شريط التنقل:

بيت

• عن
• مَلَفّ
• فريق
• بريد
• اتصال

لنقم الآن بإنشاء ملف main.css وربطه بالصفحة عن طريق وضع ما يلي في علامة ملف Index.html:

سيسمح لك هذا بتخصيص أنماط عناصر الصفحة عن طريق وضع قواعد CSS في هذا الملف. دعونا نضيف قواعد إلى ملف CSS هذا والتي تحدد تصميم الألوان لشريط التنقل:

Navbar(الخلفية:#F97300;) .nav-link ، .navbar-brand(اللون: #f4f4f4؛ المؤشر: المؤشر؛) .nav-link(الهامش الأيمن: 1em!مهم؛) .nav-link:hover(الخلفية) : #f4f4f4؛ اللون: #f97300) .navbar-collapse( justify-content: flex-end; ) .navbar-toggler( الخلفية:#fff !مهم; )
تعتمد شبكة Bootstrap الجديدة على flexbox، لذا تحتاج إلى استخدام الخصائص المناسبة لمحاذاة المحتوى. على سبيل المثال، لوضع قائمة شريط التنقل على اليمين، تحتاج إلى استخدام خاصية justify-content وتعيين قيمتها على flex-end:

طي شريط التنقل (ضبط المحتوى: نهاية مرنة؛)
لتخصيص لون خلفية شريط التنقل، يمكنك استخدام الفئات .bg-light (خلفية فاتحة)، و.bg-dark (خلفية داكنة)، و.bg-primary (لون الخلفية الأساسي). نستخدم الإعدادات التالية:

Bg-غامق (لون الخلفية:#343a40!مهم) .bg-أساسي (لون الخلفية:#343a40!مهم)

رأس الصفحة يتم استخدام العلامة التالية لوصف رأس الصفحة:

دعونا نجهز تخطيطًا لرأس الصفحة. نريد أن يشغل ارتفاع النافذة بالكامل، لذا سيكون jQuery مفيدًا هنا. لنقم بإنشاء ملف main.js ونوصله بـ Index.html قبل علامة الإغلاق:

لنضيف ما يلي إلى ملف main.js:

$(document).ready(function())( $(".header").height($(window).height()); ))
ستكون فكرة جيدة أن تضع بعض الصور الخلفية الجميلة في رأس الصفحة. دعونا نفعل ذلك مثل هذا:

/*نمط الرأس*/ .header( صورة الخلفية: url("../images/headerback.jpg"); مرفق الخلفية: ثابت; حجم الخلفية: الغلاف; موضع الخلفية: المركز; )
وهذا ما انتهينا إليه.

رأس الصفحة مع صورة الخلفية

في الوقت الحالي، يبدو رأس الموقع فارغًا بعض الشيء، لذلك دعونا نضيف عنصرًا إليه، ونخصص له الفئة .overlay، مما سيؤدي إلى إنشاء كتلة تقع أعلى صورة خلفية الرأس. لنغير قسم ملف Index.html حيث وصفنا الرأس كما يلي:

ثم قم بإضافة ما يلي في ملف main.css:

التراكب (الموضع: مطلق؛ الحد الأدنى للارتفاع: 100%؛ الحد الأدنى للعرض: 100%؛ اليسار: 0؛ الأعلى: 0؛ الخلفية: rgba(244, 244, 244, 0.79);)
الآن دعونا نضيف وصفًا للمشروع إلى الرأس. سنضعه في عنصر جديد مع الفئة .container . هذه فئة مساعدة لإطار عمل Bootstrap المُصمم لتخطيط المحتوى بناءً على احتياجات التخطيط سريع الاستجابة. إليك كيفية تغيير العلامات في هذه الخطوة:

الآن دعونا نضيف عنصرًا آخر هنا، والذي سنخصص له class.description:

▍ مرحبًا، مرحبًا بكم في موقعي الرسمي

سيلوم مؤلم أو هروب لا مثيل له. باستثناء أن هناك رغبة غير متوقعة، فهو مذنب في أن المكتب يحرم من أن يكون هويته عملًا.

شاهد المزيد
سنقوم أيضًا بتعيين فئة .text-center لهذه العلامة، مما سيسمح بمحاذاة محتواها إلى وسط الصفحة. يوجد زر في نهاية وصف الموقع. دعونا نتحدث عن كيفية إعداده.

يوفر Buttons Bootstrap العديد من الفئات للأزرار. يمكنك رؤية بعض الأمثلة على تصميم الأزرار. كما ترون في مثال الترميز من القسم السابق، قمنا بإضافة الفئات .btn وإلى العنصر. btn-المخطط الثانوي .

الآن لنقم بإعداد الأنماط للفصل الدراسي:

الوصف (الموضع: مطلق؛ الأعلى: 30%؛ الهامش: تلقائي؛ الحشو: 2em؛ ) .description h1( color:#F97300 ; ) .description p( color:#666; حجم الخط: 20px; العرض: 50%; ارتفاع الخط: 1.5؛ زر الوصف (الحدود: 1 بكسل صلب #F97300؛ الخلفية: #F97300؛ اللون: #fff؛)
وهذا هو الشكل الذي سيبدو عليه رأس الصفحة بعد إكمال الخطوات المذكورة أعلاه:

رأس الصفحة يحتوي على وصف المشروعحول القسم أولاً، دعونا نلقي نظرة على ما نريد إنشاءه. فيما يلي قسم من الصفحة يحتوي على معلومات حول مطور الويب.

حول القسم

سنستخدم هنا إمكانات شبكة Bootstrap لإنشاء تخطيط قسم مكون من جزأين. لنبدأ بإضافة فئة .row إلى العنصر الأصلي للقسم:

سيكون الجزء الأول من التخطيط موجودا على اليسار، وسوف يحتوي على صورة. الجزء الثاني، الموجود على اليمين، يحتوي على وصف.

إليك ما تبدو عليه العلامة الموجودة على الجانب الأيسر من هذا القسم:

// الجهه اليسرى مطور S.Web
وهذا ما سيحدث بعد إضافة وصف الجانب الأيمن من التخطيط هنا:

مطور S.Web ▍D.John

Ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua. إننا لا نسمح إلا بالحد الأدنى من النشاط الذي نمارسه من خلال العمل، ولا نتركه بعيدًا عن أي شيء يترتب على ذلك. Duis aute irure dolor in rerehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. باستثناء ما هو غير مرغوب فيه

لاحظ إعداد عرض الأعمدة باستخدام الفئات col-lg-* و col-md-* و col-sm-* الموضحة أعلاه.

فيما يلي الأنماط لكل هذا:

حول (الهامش: 4em 0؛ الحشو: 1em؛ الموضع: نسبي؛ ) .about h1 (اللون: #F97300؛ الهامش: 2em؛ ) .about img (الارتفاع: 100%؛ العرض: 100%؛ نصف قطر الحدود: 50% ) .about تمتد (العرض: كتلة؛ اللون: #888؛ الموضع: مطلق؛ اليسار: 115 بكسل؛ ) .about .desc( الحشو: 2em؛ الحدود اليسرى: 4 بكسل صلب #10828C؛ ) .about .desc h3 (اللون: #10828C; ) .about .desc p( ارتفاع الخط:2; اللون:#888;)

قسم المحفظة دعنا ننتقل الآن إلى القسم الذي سيتم فيه عرض محفظة المطور. وسيحتوي على معرض للأعمال.

قسم المحفظة

عند إنشاء تخطيط هذا القسم، يتم تطبيق نفس مبادئ العمل مع الشبكة التي ناقشناها أعلاه:

مَلَفّ
إن إضافة فئة .img-fluid إلى كل صورة يجعلها سريعة الاستجابة.

يشغل كل عنصر في معرضنا، على الشاشات المتوسطة والكبيرة، 4 أعمدة (تذكر - يتم استخدام الفئة col-sm-12 للأجهزة ذات الشاشات الصغيرة، ويتم استخدام الفئة col-md-4 للشاشات المتوسطة، col-lg-4 - للأجهزة ذات الشاشات الكبيرة). ونتيجة لذلك، على الشاشات الكبيرة والمتوسطة، سيشكل عنصر واحد ما يقرب من 33.3% من عنصر الحاوية؛ وعلى الأجهزة الصغيرة، سيشغل كل عنصر الشاشة بأكملها (12 عمودًا).

تصميم معرض الأعمال:

/*المحفظة*/ .portfolio( الهامش: 4em 0; الموضع: نسبي; ) .portfolio h1( اللون:#F97300; الهامش: 2em; ) .portfolio img( الارتفاع: 15rem; العرض: 100%; الهامش: 1em; )

قسم المدونة والعمل باستخدام البطاقات دعونا نتحدث عن إنشاء قسم يحتوي على إعلانات عن مواد من المدونة التي يحتفظ بها مطور الويب المشروط لدينا.

قسم المدونة

لإنشاء هذا القسم، سنحتاج إلى ما يسمى بالبطاقات (البطاقات في مصطلحات Bootstrap).

لإنشاء بطاقة، تحتاج إلى تضمين عنصر في التخطيط وإضافة فئة .card إليه. يمكنك استخدام الفئات التالية لتكوين عناصر البطاقة المختلفة:

• .card-header: رأس
• .card-body: المحتوى الرئيسي
• .card-title: العنوان
• .card-footer: تذييل
• .بطاقة الصورة: الصورة

سيبدو ترميز HTML لهذا القسم كما يلي:

مدونة عنوان المشاركة

Proident، sunt in culpa qui officia deserunt mollit anim id est Laborum.

اقرأ أكثر عنوان المشاركة

Proident، sunt in culpa qui officia deserunt mollit anim id est Laborum.

اقرأ أكثر عنوان المشاركة

Proident، sunt in culpa qui officia deserunt mollit anim id est Laborum.

اقرأ أكثر
فيما يلي أنماط البطاقات:

مدونة (الهامش: 4em 0؛ الموضع: نسبي؛ ) .blog h1( اللون: #F97300؛ الهامش: 2em؛ ) .blog .card( box-shadow: 0 0 20px #ccc; ) .blog .card img( width: 100% الارتفاع: 12 مم؛ ) .blog .card-title( color:#F97300; ) .blog .card-body( الحشو: 1em; )
هذا هو الشكل الذي ستبدو عليه صفحتنا المكونة من صفحة واحدة بعد إنشاء قسم المدونة:

الصفحة بعد إضافة قسم المدونةقسم الفريق سيحتوي هذا القسم على معلومات حول فريق المشروع.

قسم الفريق

لتشكيل هذا القسم، سوف نستخدم شبكة، وتقسيم المساحة المتوفرة بالتساوي بين الصور. ستشغل كل صورة (على الشاشات الكبيرة والمتوسطة) 3 أعمدة شبكية، أي 25% من المساحة الإجمالية.

فيما يلي علامة HTML لهذا القسم:

فريقنا مديرة سارة كريس إس إنجينر ليلى مطور الواجهة الأمامية جي جيرارد مدير الفريق
وهنا الأنماط:

الفريق (الهامش: 4em 0؛ الموضع: نسبي؛ ) .team h1( اللون: #F97300؛ الهامش: 2em؛ ) .team .item( الموضع: نسبي؛ ) .team .des( الخلفية: #F97300؛ اللون: #fff محاذاة النص: نصف القطر للحدود السفلية اليسرى: 93%؛
لنقم بتزيين هذا القسم بالرسوم المتحركة التي تظهر عند تحريك الماوس فوق الصور. يجب أن تبدو مثل الصورة أدناه.

الرسوم المتحركة عند تحريك الماوس فوق الصورة

لتحقيق هذا التأثير، أضف الأنماط التالية إلى main.css:

Team .item:hover .des( الارتفاع: 100%; الخلفية:#f973007d; الموضع: مطلق; العرض: 89%; المساحة المتروكة: 5em; الأعلى: 0; نصف قطر الحد السفلي الأيسر: 0; )

نموذج الملاحظات سيحتوي هذا القسم من الصفحة على نموذج يمكن لزوار الموقع من خلاله إرسال رسائل إلى مالك الموقع. هنا، كالعادة، من أجل تصميم العناصر والتأكد من استجابتها، سنستخدم إمكانيات Bootstrap.

نموذج الملاحظات

مثل Bootstrap 3، يستخدم Bootstrap 4 فئة التحكم في النموذج لحقول الإدخال، ولكن الآن هناك شيء جديد. على سبيل المثال - بدلاً من الملحق class.input-group-addon القديم، يتم استخدام class.input-group-prepend الجديد (للأيقونات والتسميات). يمكن العثور على مزيد من التفاصيل حول هذا الأمر في وثائق Bootstrap 4. في حالتنا، سيتم وضع كل حقل إدخال في عنصر تم تعيين فئة .form-group له.

لنضيف ما يلي إلى ملف Index.html:

ابقى على تواصل
فيما يلي أنماط قسم نموذج الملاحظات، والتي يجب وضعها في ملف main.css:

نموذج الاتصال (الهامش: 6em 0؛ الموضع: نسبي؛ ) .نموذج الاتصال h1( الحشو: 2em 1px؛ اللون: #F97300؛ ) .نموذج الاتصال .يمين( الحد الأقصى للعرض: 600 بكسل؛ ) .نموذج الاتصال . يمين .btn-ثانوي (الخلفية: #F97300؛ اللون: #fff؛ الحدود: 0؛ ) .نموذج جهة الاتصال .يمين .form-control::placeholder( اللون: #888؛ حجم الخط: 16px؛ )

الخطوط الخطوط القياسية ليست مناسبة للجميع. لقد استفدنا من Google Font API لاستخدام خط Raleway في مشروعنا. سوف تبدو جيدة جدا هنا. لاستيراد الخط، قم بإضافة التوجيه التالي إلى ملف main.css:

@import url("https://fonts.googleapis.com/css?family=Raleway");
بعد ذلك، لنقم بتعيين الأنماط العامة لعلامات HTML المتنوعة:

HTML,h1,h2,h3,h4,h5,h6,a( عائلة الخط: "Raleway"; )

تأثيرات التمرير توضح الصورة أدناه سلوك الصفحة الذي نريد تحقيقه.

تمرير الصفحة عند النقر على الروابط في شريط التنقل

لكي تنتقل الصفحة بسلاسة إلى القسم المطلوب عند النقر على روابط شريط التنقل، سنحتاج إلى اللجوء إلى إمكانيات jQuery. إذا لم تكن على دراية كبيرة بهذه المكتبة، فاعلم أنه لا يوجد شيء معقد هنا - فقط أضف الكود أدناه إلى ملف main.js:

$(".navbar a").click(function())( $("body,html").animate(( التمريرTop:$("#" + $(this).data("value")).إزاحة ( ).الأعلى ),1000)) ))
بعد ذلك، أضف سمة قيمة البيانات إلى كل رابط من الروابط الموجودة في شريط التنقل واجعل العلامة تبدو كما يلي:

عن

مَلَفّ

مدونة

فريق

اتصال

لكي يعمل كل هذا أخيرًا، يبقى فقط إضافة سمة المعرف إلى العنصر الرئيسي في كل قسم من الصفحة. في هذه الحالة، تحتاج إلى التأكد من أن قيمتها مطابقة لتلك المحددة في سمة قيمة البيانات للارتباط المقابل. على سبيل المثال، إليك السمة المقابلة لقسم "حول":

وهذا يكمل مثالنا. اضف اشارة

في يناير من هذا العام، تم إصدار Bootstrap 4 (المعروف أيضًا باسم v4) أخيرًا بعد أن ظل معلقًا في إصدارات ألفا لأكثر من عامين. إنه يمثل إعادة كتابة جادة للوظيفة. لا يقدم Bootstrap 4 الكثير من التغييرات فحسب، بل يحتوي أيضًا على عدد من المفاهيم الجديدة التي ستحتاج إلى استيعابها.

لذلك سأتحدث في هذا المقال عن أهم التغييرات التي طرأت على Bootstrap في الإصدار 4 مقارنة بالإصدار 3. أفترض أنك استخدمت Bootstrap بالفعل، لذا لن أشرح المبادئ الأساسية.

الآن دعونا نلقي نظرة على أهم التغييرات (بدون ترتيب معين):

#1: عرض الزر

لنبدأ بشيء ممتع ومرئي! تتميز الأزرار الموجودة في الإصدار 4 بتصميم أكثر انبساطًا من الإصدار 3. فيما يلي الأزرار السابقة:

وهنا بعض من الجديد:

وهذا يتماشى أكثر مع أدلة التصميم الحديثة، مثل أدلة تصميم المواد التي اكتسبت شعبية هائلة على مدى العامين الماضيين.

#2: استعلامات الوسائط المحسنة

في رأيي، كان لدى Boostrap v3 عدد قليل جدًا من نقاط التحكم في الشبكة، على سبيل المثال أصغر نقطة، xs، كانت عند 768 بكسل. تأتي الكثير من الزيارات اليوم من أجهزة أصغر بكثير، مما كان محبطًا للعديد من المطورين.

نقاط توقف الشبكة $: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px) !default;

شبكة $ - نقاط التوقف :( سس: 0، ن: 576 بكسل، مد: 768 بكسل، إل جي: 992 بكسل، XL : 1200 بكسل ) ! تقصير ؛

وهذا يجعل من السهل إنشاء شبكات تعمل بشكل جيد على جميع أحجام الشاشات.

#3: دعم Flexbox يمنحنا المزيد من المرونة

يتم الآن إنشاء شبكات Bootstrap الشهيرة باستخدام Flexbox بدلاً من float. للوهلة الأولى، لا يُحدث هذا فرقًا كبيرًا بالنسبة للمطورين نظرًا لأن معظم تخطيطات الشبكة تعمل بنفس الطريقة تمامًا. ومع ذلك، فإن هذا يفتح عدة احتمالات جديدة.

في السابق، كان علينا تحديد عرض كل عمود (من 1 إلى 12). يمكنك الآن تحديد عرض أحد الأعمدة ثم السماح لـ Flexbox بتعيين عرض الأعمدة الأخرى تلقائيًا. فيما يلي مثال لكيفية القيام بذلك:

كما ترون، قمنا بتعيين عرض العمود الأوسط على 6 (وهو نصف العرض الكامل) وتشغل الأعمدة الأخرى بقية المساحة.

1 من 3 2 من 3 (أوسع) 3 من 3

< div class = "container" > < div class = "row" > < div class = "col" > 1 من 3 < / div > < div class = "col-6" > 2 من 3 (أوسع) < / div > < div class = "col" > 3 من 3 < / div > < / div > < / div >

فئات فليكس بوكس

يأتي Bootstrap 4 أيضًا مع مجموعة من الفئات التي يمكنك استخدامها لإدارة الحاويات وعناصر Flexbox. لتحويل عنصر إلى حاوية Flexbox، ما عليك سوى منحه الفئة d-flex.

أنا حاوية فليكس بوكس!

< div class = "d-flex" >أنا حاوية فليكس بوكس!< / div >

وهذا يعطي حاوية Flexbox بها نص بداخلها:

ملحوظة. أنا أغطي فقط الأنماط المتعلقة بـ Flexbox.

دعونا نضيف المزيد من العناصر ونقدم فئة أخرى للتحكم في كيفية وضعها في الحاوية.

إطار عمل Bootstrap 4

تعرف على أساسيات Bootstrap 4 مع مثال عملي لتصميم مدونة من البداية

< div >البند المرن< / div >

< div >البند المرن< / div >

< div >البند المرن< / div >

< / div >

ونتيجة لذلك، يتم توسيط العناصر في الحاوية:

#4: إدارة المسافة البادئة باستخدام الفئات

إنه رائع. يمكنك الآن التحكم في المساحة المتروكة والهوامش باستخدام الفئتين p-* وm-*. يمكن أن تختلف المساحة المتروكة من 0.25 إلى 3 rem باستخدام أرقام من 0 إلى 5. على سبيل المثال، لنقم بتعيين حاوية Flexbox على الفئة p-5 لإنشاء الحد الأقصى من المساحة المتروكة.

مقال سنقوم فيه بتحليل شبكة Bootstrap 4، والتي تُستخدم لإنشاء تخطيطات موقع ويب سريعة الاستجابة.

غرض الشبكة

تم تصميم إطار عمل شبكة Bootstrap 4 لإنشاء تخطيطات موقع ويب سريعة الاستجابة.

تعتمد شبكة Bootstrap 4 على استعلامات وسائط CSS Flexbox وCSS. ستسمح لك دراستها بفهم كيفية عمل شبكة Bootstrap 4 بمزيد من التفصيل.

التخطيط التكيفي هو تخطيط يمكنه تغيير مظهره اعتمادًا على عرض المنطقة الرئيسية (منفذ العرض) للمتصفح. وهذا يعني أنه في بعض عروض إطار العرض قد يبدو التخطيط المستجيب بطريقة واحدة، ولكن في حالات أخرى قد يبدو مختلفًا تمامًا.

في Bootstrap 4، يتم تغيير مظهر التخطيط من خلال استعلامات الوسائط. يعتمد كل طلب وسائط في Bootstrap على الحد الأدنى لعرض إطار عرض المتصفح (نقطة التوقف، نقطة التوقف، اسم الجهاز).

يحتوي إطار عمل Bootstrap 4 على 5 نقاط توقف أو أسماء أجهزة (unlabed، sm، md، lg، xl)، وبالتالي يسمح لك بإنشاء تخطيط يمكن أن يبدو مختلفًا في كل منها.

في Bootstrap 4، مقارنةً بـ Bootstrap 3، تم تغيير عدد نقاط التوقف. في Bootstrap 3 كان هناك أربعة منها: xs وsm وmd وlg.

عناصر الشبكة

تتكون شبكة Bootstrap 4 من العناصر التالية:

• حاويات التغليف (الحاوية وحاوية السوائل)؛
• الصفوف (الصف)؛
• الكتل التكيفية (عمود).

تغليف الحاويات

حاوية الغلاف هي عنصر شبكة Bootstrap 4 يبدأ منه إنشاء صفحة سريعة الاستجابة أو تخطيط كتلة. يجب وضع عناصر الشبكة الأخرى (الصفوف والكتل التكيفية) بداخلها.

يحتوي Bootstrap 4 على نوعين من أغلفة الحاويات: سريعة الاستجابة وثابتة وسريعة الاستجابة.

ترميز HTML للحاوية الثابتة سريعة الاستجابة:

...

ترميز HTML للحاوية المطاطية المستجيبة:

...

يتم استخدام الحاوية الأولى (الثابتة سريعة الاستجابة) عندما تحتاج إلى إنشاء تخطيط بعرض يجب أن يظل ثابتًا ضمن عرض إطار عرض معين للمتصفح.

يظهر في الجدول اعتماد عرض الحاوية التكيفية الثابتة على عرض إطار عرض المتصفح:

وهذا يعني أن الحاوية الثابتة المتكيفة ستحتوي على:

• عرض 100% لعرض إطار العرض حتى 576 بكسل؛
• 540 بكسل مع عرض إطار العرض من 576 إلى 768 بكسل؛
• 720 بكسل مع عرض إطار العرض من 768 إلى 992 بكسل، وما إلى ذلك.

في الاتجاه الأفقي، يتم وضع الحاوية ذات الاستجابة الثابتة في المنتصف، ويتم ذلك في bootstrap.css عبر خصائص CSS هامش اليسار: تلقائي و هامش اليمين: تلقائي .

يتم استخدام الحاوية الثانية (المطاطية سريعة الاستجابة) عندما تحتاج إلى إنشاء تخطيط مرن تمامًا لصفحة أو بعض الكتل. يبلغ عرض هذه الحاوية 100% لأي عرض لإطار العرض.

بالإضافة إلى ذلك، تحتوي حاويات التغليف (الحاوية وحاوية السوائل) أيضًا على حشوة داخلية على اليسار واليمين تبلغ 15 بكسل. يتم إعداد الحشوة لتغليف الحاويات في ملف Bootstrap 4 CSS باستخدام خصائص الحشو الأيسر: 15 بكسل والحشو الأيمن: 15 بكسل.

عند إنشاء تخطيط باستخدام شبكة Bootstrap 4، لا تضع حاويات مجمّعة داخل حاويات أخرى.

الصفوف

الصف هو عنصر شبكة خاص (صف) يتم استخدامه عند إنشاء تخطيط في الحالات التالية:

• بين الحاوية والكتل التكيفية التي يجب وضعها فيها؛
• بين إحدى الكتل التكيفية الأخرى التي يجب وضعها في الكتلة التكيفية الأولى.

ترميز HTML للصف:

...

على عكس Bootstrap 3، حيث يعمل الصف فقط للتعويض عن الحشو الداخلي الأيمن والأيسر لحاويات التغليف أو الكتل المستجيبة، فإنه يلعب دورًا مهمًا للغاية في Bootstrap 4. ويرجع ذلك إلى حقيقة أن هذه الشبكة مبنية على CSS Flexbox. في هذه الشبكة، تعمل بمثابة حاوية مرنة للعناصر المرنة (الكتل التكيفية). أولئك. إذا كنت تستخدم الكتل التكيفية خارج الصف، فلن تعمل. في Bootstrap 4، يجب أن تكون الكتل المستجيبة موجودة في كتلة ذات فئة الصف.

يتم التعويض عن الحشو الداخلي للهوامش بنفس الطريقة كما في Bootstrap 3، نظرًا لأن الهوامش اليسرى واليمنى السالبة تساوي 15 بكسل (الهامش الأيسر: -15 بكسل والهامش الأيمن: -15 بكسل).

مثال على كيفية تعويض حشوة الحقل:

الحاوية (+15 بكسل) -> الصف (-15 بكسل) -> العمود (+15 بكسل) -> سائل حاوية المحتوى (+15 بكسل) -> الصف (-15 بكسل) -> العمود (+15 بكسل) -> الصف (-15 بكسل) -> عمود (+15 بكسل) -> محتوى

ونتيجة لذلك، فإن الهامش من الحواف اليسرى واليمنى لحاوية التغليف إلى المحتوى سيكون دائمًا 15 بكسل.

بالإضافة إلى ذلك، لا يلزم وضع الكتل التكيفية غير المرتبطة منطقيًا ببعضها البعض في صف واحد في إطار نوع ما من حاوية التغليف أو أي كتلة تكيفية أخرى. الطريقة الصحيحة هي تقسيمها إلى مجموعات منطقية منفصلة ووضع كل منها في صف منفصل.

على سبيل المثال:

... … … … ...

كتل التكيف

الكتل التكيفية هي اللبنات الأساسية للتخطيط سريع الاستجابة؛ وهي ستحدد كيف سيبدو تخطيط صفحة الويب عند نقاط التحكم المختلفة (بدون رمز، وsm، وmd، وlg، وxl).

يعد إنشاء كتلة تكيفية أمرًا بسيطًا للغاية: عن طريق إضافة فئة واحدة أو أكثر من col-?-? إلى عنصر HTML المطلوب.

في فئة col-?-?>، بدلاً من علامة الاستفهام الأولى، تتم الإشارة إلى اسم نقطة التحكم: بدون تعيين أو sm أو md أو lg أو xl. بدلا من علامة الاستفهام الثانية، يتم الإشارة إلى عرض الكتلة التكيفية، والتي يجب أن تكون عند نقطة التحكم المحددة. يتم تحديد عرض الكتلة المستجيبة بشكل نسبي باستخدام رقم من 1 إلى 12 (أعمدة Bootstrap).

يحدد هذا الرقم مقدار العرض الذي ستشغله الكتلة التكيفية عند نقطة التحكم المحددة من عرض الكتلة الأصلية، أي. صف. عرض الصف من الناحية العددية (أعمدة Bootstrap) هو 12.

على سبيل المثال، كتلة ذات فئة col-md-4 عند نقطة التحكم md سوف تشغل 4/12 من عرض الصف، أي. 33.3% (أي 4/12*100% = 33.3%).

تحتوي الكتل التكيفية، وكذلك الحاويات، على 15 بكسل من المساحة المتروكة لليسار واليمين. يتم تعيين هذه الحشوات للكتل التكيفية لإطار عمل Bootstrap 4 باستخدام خصائص CSS pading-left: 15px وpadding-right: 15px.

يجب وضع الكتل التكيفية على التوالي. أولئك. يجب أن تحتوي أي كتلة تكيفية على كتلة ذات صف فئة كأصل لها.

على سبيل المثال، فكر في مدى اتساع الكتلة المستجيبة التالية على كل جهاز:

...

ستحتوي هذه الكتلة التكيفية على:

• ما يصل إلى sm (بواسطة xs) عرض يساوي 12 عمودًا من أعمدة Bootstrap (أي 12/12*100%=100% من عرض الصف)؛
• على جهاز sm، عرض يساوي 9 أعمدة Bootstrap (أي 9/12*100%=75% من عرض الصف)؛
• على جهاز md، عرض يساوي 7 أعمدة Bootstrap (أي 7/12*100%=58.3% من عرض الصف)؛
• على جهاز lg، عرض يساوي 5 أعمدة Bootstrap (أي 5/12*100%=41.6% من عرض الصف)؛
• على جهاز xl، عرض يساوي 3 أعمدة Bootstrap (أي 3/12*100%=25% من عرض الصف).

بالإضافة إلى ذلك، عند تحديد عرض الكتلة التكيفية لبعض نقاط التحكم، فإنه لن ينطبق فقط على هذه النقطة، ولكن أيضًا على جميع النقاط اللاحقة، إذا لم يتم تحديدها.

سيكون للكتلة المستجيبة على أجهزة md وlg عرض يساوي 6 أعمدة Bootstrap: (12) -> sm(6) -> md -> lg -> xl(3) .

سيكون عرض الكتلة المستجيبة على جهاز sm يساوي 8 أعمدة Bootstrap، وعلى أجهزة lg وxl سيكون عرضها يساوي 4 أعمدة Bootstrap: (8) -> sm -> md(4) -> lg - > XL .

سيكون للكتلة المستجيبة على جميع الأجهزة عرض يساوي 6 أعمدة Bootstrap: (6) -> sm -> md -> lg -> xl .

كتل التكيف بدون أعمدة

تمت إضافة فئات خاصة col و col-sm و col-md و col-lg و col-xl و col-auto و col-sm-auto و col-md-auto و col-lg-auto و col-xl إلى Bootstrap 4 شبكة - تلقائي .

المجموعة الأولى من الفئات (col، col-sm، col-md، col-lg، col-xl) مخصصة لإنشاء كتل تكيفية، يعتمد عرضها على المساحة الحرة للخط. يتم توزيع العرض غير المشغول (المساحة الحرة) للخط بالتساوي بين كل هذه الكتل. بالإضافة إلى ذلك، يكون عرض هذه الكتل التكيفية صفرًا قبل تخصيص مساحة الخط الحرة (افتراضيًا).

دعونا نلقي نظرة على بعض الأمثلة.

1. قم بإنشاء 5 كتل تكيفية بنفس العرض على التوالي.

1/5 2/5 3/5 4/5 5/5

حساب العرض:

• مساحة الخط الحرة - 100% (نظرًا لأن عرضها هو 0)؛
• عرض كل كتلة تكيفية هو 20% (100%/5)؛

2. عرض الكتل ذات الفئة col إذا كان هناك كتلة قابلة للتكيف مع عدد الأعمدة في السطر.

؟ 7 أعمدة؟ ؟

حساب العرض:

• مساحة الخط الحرة - 41.67% ((12-7)/12*100%)؛
• عرض كل كتلة تكيفية، باستثناء العمود 7، هو 13.89% (41.67%/3).

يوجد في بعض إصدارات متصفحات Safari خطأ عند استخدام مثل هذا الترميز؛ حيث يمكن تقسيمه إلى عدة أسطر.

هناك طريقتان لإصلاح هذا:

• عن طريق تعيين الكتل التكيفية border.col ( border: 1px Solid External; )
• عن طريق تعيين خاصية الكتل المستجيبة CSS flex-basis .col ( flex: 1 0 20%; )

بالإضافة إلى ذلك، تسمح لك شبكة Bootstrap 4 بوضع كتل سريعة الاستجابة دون تحديد عدد الأعمدة في عدة أسطر.

... ... ... ...

يتم تنفيذ هذا الإجراء عن طريق إضافة عنصر div فارغ بالفئة w-100 إلى الترميز قبل الكتلة التكيفية، والتي يجب أن تبدأ بسطر جديد.

إذا كان من الضروري استخدام هذا الإجراء فقط لبعض نقاط التحكم، فأنت بحاجة أيضًا إلى إضافة فئات الأدوات المساعدة المستجيبة لـ Bootstrap 4 إليه (الفئة w-100).

في هذا المثال، سيتم نقل الكتل التكيفية إلى سطر جديد فقط على الأجهزة ذات إطار العرض الصغير أو الصغير.

... ... ... ...

تم تصميم المجموعة الثانية من الفئات (col-auto، وcol-sm-auto، وcol-md-auto، وcol-lg-auto، وcol-xl-auto) لإنشاء كتل تكيفية، سيتم تحديد عرضها وفقًا لـ محتواها.

على سبيل المثال:

(1) (2) - سيتم تحديد العرض عند نقاط التحكم md وlg وxl بناءً على المحتوى (3)

نتيجة ل:

• في xs وsm، سيتم وضع الكتل التكيفية عموديًا (واحدة أسفل الأخرى) وتحتل عرض الصف بالكامل؛
• على md، سيكون للكتلة المستجيبة 2 العرض المطلوب لعرض محتواها؛ إذا كانت الكتلة 2 لا تشغل عرض الصف بالكامل، فإن الكتل التكيفية 1 و 3 ستقسمها بالتساوي فيما بينها؛ إذا كانت الكتلة 2 تشغل عرض الخط بالكامل، فستكون الصورة هي نفسها عند نقطتي التحكم xs وsm؛
• في lg ​​وxl، سيكون للكتلة المستجيبة 2 العرض المطلوب لعرض محتواها؛ إذا كانت الكتلة 2 لا تشغل عرض الصف بالكامل، فستشغل الكتلة 3 عرضًا يساوي عمودين في Bootstrap، وستشغل الكتلة 1 العرض المتبقي بالكامل للصف؛ إذا كانت الكتلة 2 تشغل عرض الصف بالكامل، فسيكون الترميز هو نفسه الموجود في xs وsm، فقط الكتلة 3 المكونة من 3 أسطر سيكون عرضها مساويًا لعمودين في Bootstrap.

ترتيب الكتل التكيفية على التوالي

افتراضيًا، يتم ترتيب الكتل التكيفية في صف واحد في خطوط أفقية. داخل الخط الأفقي، تصطف الكتل التكيفية بالتسلسل من اليسار إلى اليمين. يمكن للكتل التكيفية التي لا يزيد عدد أعمدةها عن 12 أن تتناسب مع خط أفقي واحد. تنتقل الكتل التكيفية التي لا تتناسب مع السطر الحالي إلى الخط التالي.

(1) (2) (3) (4)

دعونا نلقي نظرة على مثال آخر حيث تكون الكتل التكيفية ذات عرض مختلف عند نقاط تحكم مختلفة:

المبدأ الأساسي لتخطيط التخطيط

المبدأ الأساسي لتخطيط تخطيط صفحة الويب على شبكة Bootstrap 4 هو دمج بعض الكتل التكيفية داخل كتل أخرى.

في الوقت نفسه، يكون عرض الكتل التكيفية دائمًا قيمة نسبية، يتم تعيينها في أعمدة Bootstrap وتعتمد فقط على عرض الأصل، أي. صف.

يجب وضع محتوى صفحة الويب فقط في الكتل المستجيبة.

على سبيل المثال، في التخطيط الحالي، وبالتحديد في الكتلة التكيفية col-8، سنضيف كتلتين إضافيتين:

... ...

للقيام بذلك، تحتاج أولاً إلى وضع صف (حاوية للكتل التكيفية) في الكتلة col-8:

... ... Bootstrap 4 - إدراج صف في محتوى الكتلة المستجيبة col-8

بعد ذلك، قم بإضافة كتلتين تكيفيتين على التوالي:

... ... ... Bootstrap 4 - إدراج كتل مستجيبة على التوالي

محاذاة الكتل التكيفية

تتم محاذاة الكتل التكيفية في الاتجاهين الأفقي والرأسي في Bootstrap 4 باستخدام الفئات المرنة المساعدة.

المحاذاة العمودية للكتل المستجيبة

يتم إجراء المحاذاة الرأسية للكتل التكيفية داخل سطر الصف باستخدام إحدى الفئات التالية، والتي يجب إضافتها أيضًا إلى الصف:

• محاذاة العناصر-بداية (نسبة إلى بداية السطر) ؛
• محاذاة العناصر-center(center);
• align-items-end (نسبة إلى النهاية).

على سبيل المثال، لنقم بمحاذاة جميع الكتل التكيفية في منتصف سطر الصف:

1/2 2/2

افتراضيًا، تشغل العناصر المستجيبة الارتفاع الكامل لخط الصف الذي توجد فيه.

يمكن تنفيذ المحاذاة الرأسية لكتلة تكيفية معينة داخل الخط بواسطة إحدى الفئات التالية:

• محاذاة البداية الذاتية (نسبة إلى بداية السطر) ؛
• محاذاة المركز الذاتي (المركز) ؛
• محاذاة النهاية الذاتية (نسبة إلى النهاية).

يجب إضافة هذه الفئات إلى الكتل التكيفية، وليس إلى صف واحد.

على سبيل المثال، نقوم بمحاذاة الكتلة التكيفية 2 إلى الحافة السفلية من السطر:

(1) (2)

المحاذاة الأفقية للكتل التكيفية

الفئات التالية مخصصة لمحاذاة الكتل التكيفية في الاتجاه الأفقي:

• ضبط محتوى البدء (نسبة إلى بداية سطر الصف - الافتراضي)؛
• ضبط مركز المحتوى (المركز) ؛
• ضبط المحتوى (بالنسبة إلى نهاية السطر)؛
• ضبط المحتوى (بالتساوي، مع مراعاة المساحة قبل الكتلة التكيفية الأولى والأخيرة)؛
• ضبط المحتوى بين (بشكل متساوٍ، مع وجود مسافة متساوية بين الكتل المستجيبة).

على سبيل المثال، لنقم بتوزيع الكتل التكيفية في الاتجاه الأفقي بالتساوي:

(1) (2)

تخطيط سريع الاستجابة بلا حدود

يمكن إزالة الحشو الداخلي للكتل التكيفية والهوامش السلبية الخارجية للصفوف إذا تمت إضافة فئة no-Gutters إلى الأخير (أي الصف).

... ... ...

يرجى ملاحظة أن هذه الفئة (بدون مزاريب) تؤثر فقط على الكتل التكيفية الموضوعة مباشرة في هذا الصف. أولئك. لن يتم تطبيق خصائص CSS لإزالة الحشو على الكتل التكيفية التي لا تحتوي على هذا الصف كأصل.

في Bootstrap 4، يمكن إجراء إزاحات الكتل المستجيبة باستخدام:

• إزاحة الفئات (لعدد معين من الأعمدة)؛
• فئات هامش الخدمة (المنفعة).

فئات الأوفست

تم تصميم فئات الإزاحة لإزاحة الكتل التكيفية إلى اليمين بعدد معين من الأعمدة.

هذه الفئات لها بناء الجملة التالي:

إزاحة-(1) أو إزاحة-(نقطة توقف)-(1)

(نقطة التوقف) – نقطة التحكم، والتي سيتم من خلالها تطبيق الإزاحة على هذه الكتلة (إذا لم يتم تحديدها، فسيتم تطبيق الإزاحة بدءًا من أصغر الأجهزة).

(2) - قيمة الإزاحة المحددة باستخدام عدد أعمدة Bootstrap.

على سبيل المثال، دعونا نضبط الإزاحة على الكتل التكيفية كما هو موضح في الشكل.

(1) (2) (1) (2) (1)

الإزاحة باستخدام فئات الهامش

في الإصدار الرابع من Bootstrap، يمكنك أيضًا تعيين الإزاحة للكتل التكيفية باستخدام المسافات البادئة للهامش (الهامش الأيسر: تلقائي و (أو) الهامش الأيمن: تلقائي). يأتي خيار الإزاحة هذا لأن الشبكة في الإصدار الجديد من Bootstrap (4) تعتمد على CSS Flexbox.

يتم استخدام خيار الإزاحة هذا (باستخدام فئات الهامش) عندما يلزم نقل الكتل بالنسبة لبعضها البعض بمقدار متغير.

في Bootstrap 4، للحصول على إعداد أكثر ملاءمة وتكيفًا للمسافات البادئة للهامش للكتل (الهامش الأيسر: تلقائي و (أو) الهامش الأيمن: تلقائي)، يمكنك استخدام الفئات ml-auto و mr-auto و ml-(breakpoint) )-تلقائي و السيد-(نقطة توقف)-تلقائي.

Bootstrap 4 - إزاحة الكتلة المستجيبة

(1) (2) (1) (2) (3) (1) (2)

تغيير الترتيب المرئي للكتل التكيفية

افتراضيًا، يتم عرض الكتل المستجيبة بشكل مرئي بالترتيب الذي توجد به في كود HTML.

يتم تغيير الترتيب المرئي للكتلة المستجيبة في Bootstrap 4 باستخدام فئة order-(visual_number). هذه الفئة مخصصة لنقطة تفتيش XS. إذا كان من الضروري تحديد ترتيب العنصر ليس لنقطة التحكم xs، ولكن لـ sm أو md أو lg أو xl، فسيتم استخدام الإصدار التالي من هذه الفئة:

الترتيب-(نقطة التوقف)-(visual_number)

بدلاً من (visual_number) يجب عليك تحديد رقم من 1 إلى 12.

يحدد هذا الرقم كيفية ظهور العناصر بشكل مرئي على الصفحة. أي أن جميع العناصر التكيفية ستتبع بصريًا بترتيب تصاعدي لهذه الأرقام. إذا لم يكن للعنصر مجموعة فئة ترتيب، فسيتم تعيينه افتراضيًا على 0.

على سبيل المثال، دعونا نغير ترتيب كتلتين تكيفيتين:

الأول (غير مرتب، بدون ترتيب-فئة) الثاني، ولكن سيتم عرضه أخيرًا. ثالثًا، ولكن سيتم عرضه ثانيًا

مثال آخر (باستخدام فئات الترتيب التكيفي):

أولاً (في xs، سيتم عرض sm ثانيًا) ثانيًا (في xs، سيتم عرض sm أولاً)

بالإضافة إلى الأرقام (من 1 إلى 12 افتراضيًا)، يمكنك أيضًا استخدام الكلمتين الأولى والأخيرة. تسمح لك هذه الفئات (الترتيب أولاً، الترتيب-(نقطة التوقف)-أولًا، الترتيب-الأخير، الترتيب-(نقطة التوقف)-الأخير) بنقل عنصر بصريًا إلى البداية أو النهاية، على التوالي.

تمارس فئتا الترتيب الأول والترتيب (نقطة التوقف) الأول تأثيرهما عن طريق تعيين خاصية ترتيب CSS للعنصر على -1 (الترتيب: -1)، وتقوم فئتا الترتيب الأخير والترتيب (نقطة التوقف) -الأخير بتعيين CSS ترتيب الخاصية إلى القيمة 13 (الترتيب: $columns + 1).

دعونا نعيد كتابة المثال أعلاه باستخدام فئات الترتيب، التي تستخدم الكلمات الرئيسية الأولى والأخيرة:

أولاً (في xs، سيتم عرض sm أخيرًا) والأخير (في xs، سيتم عرض sm أولاً)

مثال على استخدام فئات الترتيب مع كل من الرقم والكلمات الأولى والأخيرة:

#1 (XS)، #LAST (SM)، #1 (MD وLG وXL) #2 (XS)، #7 (MD وLG وXL) #3 (XS)، #6 (MD وLG وXL) ) #4 (XS)، #5 (MD، LG وXL) #5 (XS)، #4 (MD، LG وXL) #6 (XS)، #3 (MD، LG وXL) #7 (XS) )، #2 (MD، LG وXL) #8 (XS)، #FIRST (SM)، #8 (MD، LG وXL)

مثال على التخطيط التكيفي على شبكة Boostrap 4

لنقم بإنشاء تخطيط سريع الاستجابة لكتلة صفحة الويب الموضحة في الشكل باستخدام شبكة Bootstrap 4 - مثال لتخطيط الكتلة سريعة الاستجابة

1. إنشاء علامة كتلة للأجهزة المحمولة (xs).

(1) (2) (3) (4) (5)

2. قم بإعداد العلامات لنقطة التحكم sm:

(1) (2) (3) (4) (5)

3. اضبط الكتل على عدد الأعمدة التي يجب أن تحتوي عليها على أجهزة md وlg:

(1) (2) (3) (4) (5)

4. إنشاء ترميز لـ xl:

(1) (2) (3) (4) (5)

نقوم بإزالة نقاط التحكم غير الضرورية من الكتل التكيفية:

(1) (2) (3) (4) (5)

بالإضافة إلى ذلك، في البداية في Bootstrap 4، يبلغ عرض الكتلة المستجيبة 100%. يتيح لك هذا عدم تحديد عدد الأعمدة عند إنشاء كتل قابلة للتكيف، إذا كان عرضها الأولي يجب أن يكون 12 عمودًا (100%).

(1) (2) (3) (4) (5)