Bootstrap ، من Twitter ، هو الإطار الأمامي الأكثر شعبية في الوقت الحاضر. يعتمد Bootstrap على HTML و CSS و JavaScript. إنها بسيطة ومرنة ، مما يجعل تطوير الويب أسرع.
النقاط الرئيسية للتعلم:
1. الأدوات المحمولة مفضلة
2. تخطيط حاوية
3. نظام الشبكة
في هذا الدرس ، سوف نتعرف بشكل أساسي على نظام شبكة Bootstrap ونوفر نظامًا شبكيًا سريع الاستجابة للهواتف المحمولة.
واحد. يتم تفضيل الأجهزة المحمولة
في مشروع HTML5 ، قمنا بمشروع الهاتف المحمول. إنه يحتوي على ميتا مهمة للغاية لتعيين عرض الشاشة والجهاز رباعي الجهاز وما إذا كان سيتم تشغيل تحجيم المستخدم والتوسيع.
// عرض الشاشة يتوافق مع الجهاز ، والقابل للتطوير الأولي ، والحد الأقصى القابل للتطوير وحظر تحجيم المستخدم.
اثنين. حاوية تخطيط
يتطلب bootstrap حاوية. -container لمحتوى الصفحة ونظام النقطية. بسبب سمات مثل الحشو ، لا يمكن تنازل هاتين فئتي الحاوية مع بعضهما البعض.
// العرض الثابت <div> ... </div> // عرض 100 ٪ <div> ... </div>
في نظام نقطي ، سيقوم المتصفح تلقائيًا بتخصيص ما يصل إلى 12 عمودًا مع زيادة حجم الشاشة أو ينخفض. قم بإنشاء تصميم صفحة من خلال الجمع بين سلسلة من الصفوف والأعمدة. مبدأ العمل كما يلي:
1. يجب تضمين "الصف" في.-container (العرض الثابت) أو.-container-fluid (عرض 100 ٪) لمنحه محاذاة و padding مناسبة.
2. قم بإنشاء مجموعة من "الأعمدة" أفقياً من خلال "ROW".
3. يجب وضع المحتوى الخاص بك في "العمود" ، ويمكن استخدام "العمود" فقط كعنصر طفل مباشر في الصف.
4. يمكن استخدام فئات محددة مسبقًا مثل .Row و .col-XS-4 لإنشاء تخطيطات نقطية بسرعة.
يمكن أيضًا استخدام mixin المحدد في رمز مصدر bootstrap لإنشاء تخطيطات دلالية.
5. قم بإنشاء مزراب بين الأعمدة عن طريق ضبط خاصية الحشو لـ "العمود". عن طريق تعيين القيم السلبية لعناصر .ROW
وهكذا يعوض الهامش مجموعة الحشوة لعنصر. -container ، والذي يعوض بشكل غير مباشر الحشوة لـ "العمود" الموجود في "الصف".
6. الهامش السلبي هو السبب في أن المثال التالي يسلط الضوء على الخارج. يتم ترتيب المحتويات في العمود النقطية على التوالي.
7. يمثل عمود في نظام نقطي النطاق الذي يمتده عن طريق تحديد القيم من 1 إلى 12. على سبيل المثال ، يمكن إنشاء ثلاثة أعمدة ذات عرض متساوٍ باستخدام ثلاثة .col-XS-4.
8. إذا كان "العمود" الموجود في "صف" أكبر من 12 ، فسيتم ترتيب العناصر التي يوجد فيها "العمود" الإضافي في صف آخر ككل.
9. فئة الشبكة مناسبة للأجهزة ذات عرض الشاشة أكبر من أو تساوي حجم النقطة المقسمة ، وتغطي فئة الشبكة لأجهزة الشاشة الصغيرة. لذلك ، فإن تطبيق أي فئة .COL-MD-* على العنصر مناسب للأجهزة ذات عرض الشاشة أكبر من أو تساوي حجم النقطة المقسمة والكتابة الفئة النقطية لأجهزة الشاشة الصغيرة. لذلك ، فإن تطبيق أي .col-lg-* على العنصر غير موجود ، والذي يؤثر أيضًا على الجهاز على الشاشة الكبيرة.
// قم بإنشاء صف سريع الاستجابة <Div> <viv> ... </viv> </viv> // قم بإنشاء صف متجاوب مع ما يصل إلى 12 عمودًا <viv> <viv> <viv> 1 </viv> <viv> 2 </viv> <viv> 3 </viv> <viv> 4 </viv> <div> 5 </viv> <viv> 6 </viv> <viv> 7 </viv> <viv> 8 </viv> <viv> 9 </viv> CSS.A {الارتفاع: 100px ؛ خلفية اللون: #EEE ؛ الحدود: 1PX Solid #CCC ؛} // إجمالي عدد الأعمدة هو 12 ، ويتم تعيين كل عمود أعمدة متعددة <viv> <viv> <viv> 1-4 </viv> <viv> 5-8 </viv> <viv> 9-12 </viv> </viv> <viv> <viv> 1-8 </viv> <viv> 9-12 </viv> </viv> </div> 9-12 </viv> </div> </div>> 9-12 </viv> </viv> </viv>جدول المعلمة النقطية
كما هو موضح في الشكل أعلاه ، تميز الطبقة الخارجية لنظام الشبكة أربعة عروض من المتصفحات: شاشة فائقة small (<768px) ، والشاشة الصغيرة (> = 768px) ، والشاشة المتوسطة (> = 992px) ، والشاشة الكبيرة (> = 1200px). العروض التكيفية للحاوية الداخلية. container هي: تلقائي ، 750 بكسل ، 970 بكسل و 1170 بكسل. أوتوماتيكي يعني أنه إذا كنت على شاشة الهاتف المحمول ، فستعرض سطرًا واحدًا بشكل حصري.
// تفعيل جميع الشاشة الأربعة الفئات <viv> <viv> <viv> 4 </viv> <viv> 4 </viv> <viv> 4 </viv> <viv> 4 </viv> <viv> 4 </viv> <viv> 4 </viv> <viv> 4 </iv> <viv> 4 </viv> <viv> 4 </viv> </div> </div> </viv> </viv> </viv> // في بعض الأحيان يمكننا تعيين إزاحة الأعمدة للحفاظ على فجوة في الوسط <div> <viv> <viv> <viv> 8 </viv> <viv> 3 </viv> </viv> </viv> // يمكن أيضًا التداخل ، كما أن التضمين هو أيضًا 12. يمكن مبادلة عمودين ، ودفع إلى اليسار ، وسحب إلى اليمين <div> <viv> <viv> 9 </viv> <viv> 3 </viv> </viv> </viv>
ما ورد أعلاه هو المعلومات ذات الصلة لنظام شبكة bootstrap ، وآمل أن يكون مفيدًا للجميع!