يوفر Bootstrap نظامًا مستجيبًا للبث المتنقل. مع زيادة حجم الشاشة أو المنفذ ، سيتم تقسيم النظام تلقائيًا إلى ما يصل إلى 12 عمودًا.
يشبه نظام الشبكة جدولًا به صفوف وأعمدة. يجب وضعه في حاوية مع مجموعة من النوع إلى الحاوية. يمكن أن يكون div ويوضع المحتوى في العمود. تُستخدم الشبكة في تصميم الويب لتخطيط المحتوى ، مما يجعل تصفح موقع الويب. فيما يلي مثال على استخدام تخطيط شبكة bootstrap.
<viv> <viv> col2 </viv> <viv> col10 </viv> </viv>
تأثير العرض كما يلي:
تتم إضافة نمط Class = "ROW" لتمثيل الصف ، ويتم إضافة نمط Class = "Col-SM-2" لتمثيل العمود. يقسم النظام الشاشة بأكملها إلى 12 جزءًا ، يعني Col-SM-2 أن العمود يمتد جزأين ، ونسبة Col-SM-10 تعني أن العمود يمتد 10 أجزاء. سيكون التأثير المعروض كما هو موضح في الشكل أعلاه ، مما يشير إلى وجود عمودين في صف واحد ، ويحسب العمود الأول جزأين وحسابات العمود الثاني لعشرة أجزاء.
Bootstrap هو إطار أمامي مستجيب ، ينعكس في نظام الشبكة ، وهو جهاز يتوافق مع أحجام العرض المختلفة ، ويمكن أن يقدم تأثيرات عرض مختلفة. كما هو موضح أدناه:
<viv> <viv> .col-xs-12 .col-md-8 </viv> <viv> .col-xs-6 .col-md-e4 </viv> </viv>
تعني Col-MD-8 أن هذه القائمة تمثل 8 أجزاء ضمن شاشات متوسطة الحجم مثل أجهزة الكمبيوتر المكتبية العادية وأجهزة الكمبيوتر المحمولة. يعني Col-XS-12 أن هذا العمود يمثل 12 نسخة تحت شاشات صغيرة مثل الأجهزة اللوحية. يوضح الرمز أعلاه أن هناك عمودين في الصف والصف التالي من أجهزة سطح المكتب والأجهزة المحمولة العادية. يمثل العمود الأول 8 أجزاء ، ويحسب العمود الثاني 4 أجزاء ، والصف التالي والعمود التالي يمثلان عمودين ، ويحسب العمود الأول 12 جزءًا ، ويحسب العمود الثاني 6 أجزاء. وبهذه الطريقة ، يتم تحقيق تأثيرات مختلفة على أجهزة العرض المختلفة. يمكنك محاكاة هاتين حالتين عن طريق تغيير حجم المتصفح.
يوضح الشكل التالي كيف يعمل نظام شبكة Bootstrap على أجهزة شاشة متعددة
ما سبق هو الوصف الكامل لأساسيات شبكة bootstrap الثالثة التي أدخلها المحرر. آمل أن يكون ذلك مفيدًا للجميع. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر على الجميع في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!