لقد تعلمت bootstrap قبل بضعة أيام وفرز نظام الشبكة. إذا كانت هناك أي أخطاء ، فلا تتردد في تصحيحها.
ملخص: طور نظام الشبكة صفحات ويب مستجيبة للكمبيوتر الشخصي ، وسادة ومحطات الجوال ، وهناك حلول مختلفة تعتمد على قرارات شاشة مختلفة.
(0.1 ، حجم جهاز الشاشة أكبر من 1200 بكسل حدد COL-LG
(0.2. حجم جهاز الشاشة يتراوح بين 970 بكسل و 1200 بكسل حدد Col-MD
(0.3. حجم جهاز الشاشة يتراوح بين 768 بكسل و 970 بكسل حدد Col-SM
(0.4. حجم جهاز الشاشة أقل من 768 بكسل حدد Col-XS
1. نظام الشبكة يقسم الصفحة إلى 12 عمودًا (حتى 12 عمودًا) ، على النحو التالي :
<! doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta name = "viewport" content = "width = width device ، scale scale = 1 ، maxinum-scale ، user-scalable = no"> system styp href = "library/bootstrap.min.css"> <style> .a {height: 50px ؛ الحدود: 1 بكسل صلب أحمر. الخلفية: الوردي. } </style> </head> <body> <viv> <viv> <viv> 1 </viv> <viv> 1 </viv> <viv> 1 </viv> <viv> 1 </viv> <viv> 1 </viv> <viv> 1 <///div> 1 </div> <viv> 1 </viv> <viv> 1 </viv> <viv> 1 </viv> <viv> 1 </viv> <viv> 1 </viv> <viv> 1 </viv> <viv> 1 </viv> <viv> 1 </viv> </div> 1 </viv> <div> 1 </div> 1/div> </viv> </viv> <script src = "library/jq.js"> </script> <script src = "library/bootstrap.min.js"> </script> </body> </html>(2.1 ، Col-MD-1 هو عمود ، مع ما مجموعه 12 عمودًا مغطى بـ "صف أفقي". الرقم المتخلف بعد MD هو عدد الأعمدة المعينة ، (Col-LG ، Col-SM ، Col-XS هو نفسه)
3. ضمن الأجهزة ذات دقة شاشة مختلفة ، فإن الصفحة المقدمة هي "صفحة شريط التنسيق النقطية" المقابلة ، وبالتالي تحقيق تخطيط مستجيب ، على النحو التالي :
<! doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta name = "viewport" content = "width = width device ، scale scale = 1 ، maxinum-scale ، user-scalable = no"> system styp href = "library/bootstrap.min.css"> <style> .a {height: 50px ؛ الحدود: 1 بكسل صلب أحمر. الخلفية: الوردي. } </style> </head> <body> <viv> <viv> <viv> 1 </viv> <viv> 1 </viv> <viv> 1 </viv> <viv> 1 </viv> <viv> 1 </viv> <viv> 1 <///div> 1 </div> <viv> 1 </viv> <viv> 1 </viv> <viv> 1 </viv> <viv> 1 </viv> <viv> 1 </viv> <div> 1 </viv> </viv> </viv> </viv> <script src = "library/jq.js"> </script> <script> src = "library/bootstrap.min.js"> </script> </body> </html>(3.1. يوضح الرمز أعلاه أنه عندما يكون حجم جهاز الشاشة أكبر من 1200 بكسل ، يحتوي الصف الأفقي على أربعة أعمدة ، ويحتوي عمود كبير على ثلاثة أعمدة صغيرة ، ويبلغ إجمالي 12 عمودًا.
(3.2 ، مما يشير إلى أنه عندما يكون حجم جهاز الشاشة بين 970 بكسل و 1200 بكسل (يمكنك أولاً إلقاء نظرة على المتصفح المتقلل إلى هذه المرحلة) ، فهناك ثلاثة أعمدة في صف أفقي ، وأربعة أعمدة في عمود كبير ، مع ما مجموعه 12 عمودًا.
(3.2 ، مما يشير إلى أنه عندما يكون حجم جهاز الشاشة بين 768 بكسل و 970 بكسل (يمكنك أولاً إلقاء نظرة على المتصفح المتقلل إلى هذه المرحلة) ، يوجد عمودين كبيران في صف أفقي ، وستة أعمدة صغيرة في عمود كبير ، مع إجمالي 12 عمودًا.
(3.2 ، مما يشير إلى أنه عندما يكون حجم جهاز الشاشة أقل من 768 بكسل (يمكنك أولاً إلقاء نظرة على المتصفح المتقلص إلى هذه المرحلة) ، يوجد عمود كبير في صف أفقي ، ويحتوي عمود كبير على اثني عشر عمودًا صغيرًا ، مع ما مجموعه 12 عمودًا.
4. إزاحة العمود ، مواقف التعشيش والمبادلة في نظام النقط
(4.1 ، إزاحة العمود
<viv> <viv> 8 </viv> <viv> 3 </viv> <!-تعويض العمود واحد تلو الآخر إلى اليمين-> </div>
(4.2 ، التعشيش
<viv> <!-Nesting-> <div style = "padding: 0 ؛
(4.3 ، وضع المبادلة
<viv> <!-موضع المبادلة-> <div> 9 </viv> <!-اضغط ، انتقل إلى اليمين-> <div> 3 </viv> <!-سحب ، انتقل إلى اليسار-> </div>
إذا كنت لا تزال ترغب في الدراسة بعمق ، فيمكنك النقر هنا لدراسة وإرفاق 3 مواضيع مثيرة لك:
Bootstrap التعلم البرنامج التعليمي
Bootstrap البرنامج التعليمي العملي
تعليمي استخدام المكونات الإضافية Bootstrap
تستخدم هذه المقالة أبسط الحالات لتحليل نقاط التصميم الرئيسية التي تنطوي عليها القضية ، على أمل أن تكون مفيدة لتعلم الجميع.