<sectionid="description"> في قسم HTML5 و CSS من برنامج FreeCodeCamp ، أنشأنا تطبيق صور Cat. الآن دعونا نعود إليها. في هذه المرة ، سنقوم بإعداده باستخدام إطار عمل Bootstrap المتجاوب لـ CSS. سيحدد Bootstrap مدى اتساع الشاشة ويستجيب عن طريق تغيير حجم عناصر HTML - ومن هنا يكون اسم <code>Responsive Design</code> . مع تصميم متجاوب ، ليست هناك حاجة لتصميم نسخة محمولة من موقع الويب الخاص بك. سوف تبدو جيدة على الأجهزة ذات الشاشات من أي عرض. يمكنك إضافة Bootstrap إلى أي تطبيق بإضافة التعليمة البرمجية التالية إلى أعلى HTML: <code><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"/></code> في هذه الحالة ، قمنا بالفعل بإضافته لك إلى هذه الصفحة من وراء الكواليس. لاحظ أن استخدام <code>></code> أو <code>/></code> لإغلاق علامة <code>link</code> أمر مقبول. للبدء ، يجب علينا تضمين جميع HTML (باستثناء علامة <code>link</code> وعنصر <code>style</code> ) في عنصر <code>div</code> باستخدام <code>container-fluid</code> للفئة. </section>
- text: يجب أن يحتوي عنصر <code>div</code><code>container-fluid</code> الفصل.
testString: 'assert($("div").hasClass("container-fluid"), "Your <code>div</code> element should have the class <code>container-fluid</code>.");'
- text: تأكد من أن عنصر <code>div</code> يحتوي على علامة إغلاق.
testString: 'assert(code.match(/<\/div>/g) && code.match(/<div/g)&&code.match(/<\/div>/g).length === code.match(/<div/g).length,"Makesureyour<code>div</code> element has a closing tag.");'
- text: تأكد من تداخل جميع عناصر HTML بعد علامة <code>style</code> الإغلاق في <code>.container-fluid</code> .
testString: 'assert($(".container-fluid").children().length >= 8, "Make sure you have nested all HTML elements after the closing <code>style</code> tag in <code>.container-fluid</code>.");'