div
. يحتوي Bootstrap على خصائص عرض العمود المختلفة التي يستخدمها بناءً على مدى اتساع شاشة المستخدم. على سبيل المثال ، تشتمل الهواتف على شاشات ضيقة ، كما تحتوي أجهزة الكمبيوتر المحمولة على شاشات أوسع. خذ على سبيل المثال الطبقة col-md-*
في Bootstrap. هنا ، md
تعني medium ، و *
هو رقم يحدد عدد الأعمدة التي يجب أن يكون العنصر فيها. في هذه الحالة ، يتم تحديد عرض العمود لعنصر على شاشة متوسطة الحجم ، مثل الكمبيوتر المحمول. في تطبيق Cat Photo الذي نقوم ببنائه ، سنستخدم col-xs-*
، حيث xs
تعني مساحة صغيرة جدًا (مثل شاشة الهاتف المحمول الصغيرة جدًا) ، و *
هو عدد الأعمدة التي تحدد عدد الأعمدة على نطاق واسع يجب أن يكون العنصر. ضع زري " Like
و " Info
و " Delete
جنبًا إلى جنب من خلال تضمين كل ثلاثة منهم في عنصر واحد <div class="row">
، ثم كل واحد منهم داخل عنصر <div class="col-xs-4">
. يتم تطبيق فئة row
على div
، ويمكن أن تتداخل الأزرار نفسها داخلها. div
element with the class row
.");'
- text: يجب أن يكون كل زر من أزرار Bootstrap متداخلًا داخل عنصر div
الخاص به باستخدام الفئة col-xs-4
.
testString: 'assert($("div.col-xs-4:has(button)").length > 2, "Each of your Bootstrap buttons should be nested within its own div
element with the class col-xs-4
.");'
- text: ''
testString: 'assert(code.match(/<\/button>/g) && code.match(/