يعد Bootstrap و Foundation اثنان من أطراف الواجهة الأمامية المفضلة لدي ، وخاصة على النماذج الأولية لمواقع الويب السريعة. إنها توفر جميعها مكونات جاهزة للاستخدام ، مما يسرع سير العمل الخاص بي. باستثناء بعض الاختلافات الصغيرة ، يبدو لي معظم خصائصها الأساسية متشابهة.
في هذه المقالة ، سأقدم البناء الأساسي لشبكاتها. أولاً ، سأريكم كيف تم بناؤها ، ووصف مكوناتهم الرئيسية ، وكيف تظهر اختلافات في حجم الشاشات المختلفة. سأساعدك بعد ذلك في إضافة المعرفة من خلال ممارسة مثال واقعية.
لنبدأ معًا!
المقارنة 1: مقارنة الاستعلامات الإعلامية
قبل تحليل الهياكل النقطية للتمهيد والأساس ، دعونا نلقي نظرة على نقاط الإيقاف التي توفرها لتخطيط الاستجابة. هذا ما يوفره كل إطار لتعيين عدد النقطات المتاحة.
Bootstrap يحدد 4 نقاط توقف الاستعلام عن وسائل الإعلام. معروضة على النحو التالي:
يحتوي الأساس على 5 استفسارات إعلامية قائمة على EM. تظهر في الجدول التالي:
لإعطائك طريقة لفهم كيفية عمل استفسارات الوسائط ، أقترح عليك التحقق من العرض التوضيحي لـ Bootstrap وعروض الأساس ذات الصلة. ولكن إذا كنت لا تزال مرتبكًا ، فسيشرح الجزء التالي كل شيء.
ملاحظة: يتم تعطيل شبكة الأساس والشاشات الكبيرة الفائقة بشكل افتراضي. إذا كنت ترغب في استخدامها ، فيجب عليك "إلغاء" وتعيين قيم المتغيرين $ $ Consert-XL-HTML-GRID فئات الشبكة و $ تشمل-xl-html-block-block-block strue. يمكنك العثور على هذه المتغيرات في قسم _settings.scss.
مقارنة 2: بنية الشبكة
يوفر كل من Bootstrap و Foundation شبكة مؤلفة من 12 عمودًا تتحرك من صفوف وأعمدة. الأعمدة متداخلة في الصفوف. مجموع الأعمدة في كل صف هو 12 عمود. يمكن أيضا أن تكون الصفوف متداخلة في الأعمدة.
يحتوي هذان الإطاران على العديد من الفئات المحددة مسبقًا التي يمكنك استخدامها لتعيين حجم العمود. كما ذكر أعلاه ، يحتوي Bootstrap على 4 نقاط توقف للاستعلام عن وسائل الإعلام ويحتوي الأساس على 5. لكل شبكة ، لديهم بادئات فئة مختلفة يمكن استخدامها لتعيين حجم العمود (انظر الجدولين أعلاه).
تتطلب خطوط شبكة bootstrap أيضًا عناصر مغلفة. يجب أن يحتوي هذا على فئة حاوية أو حاوية سائلة. تحتوي فئة الحاويات الموجودة في عنصر ما على قيمة ثابتة ، وتعتمد قيمتها على النافذة (انظر الجدول الأول أعلاه) ، بينما تمتد فئة الحاويات السائلة في عنصر كامل إلى عرض نافذة المتصفح.
مقارنة 3: العمود! = 12؟
من الممكن أن لا يساوي عدد الأعمدة في نظام الشبكة 12. إذا كنت ترغب في تجاوز السلوك الافتراضي للأساس ، فأضف فئة .end في العمود الأخير.
مقارنة 4: فئة وظيفية
يوفر كلا الإطارين فئات إضافية تتيح لك تحديد شبكة مرونة للغاية.
تتيح لك الفصول المرئية اختيار إظهار أو إخفاء المحتوى على شاشات حجم معين. يتيح لك فئة الإزاحة مركز الأعمدة غير المكتملة أو ضبط التباعد بينهما. بالطبع هناك فئات أخرى يمكنها تحديد ترتيب الأعمدة وفقًا للأجهزة المختلفة.
مقارنة خمسة: كتل الشبكة
بالإضافة إلى الشبكة الافتراضية ، يدعم Foundation ميزة نقطية أخرى ، وهي كتل الشبكة. يتيح لك إنشاء أعمدة من نفس الحجم مع أصغر علامة. لاستخدامه ، حدد الصف كعنصر UL والأعمدة في الصف كعنصر LI. ثم حدد حجم العمود من خلال تطبيق الفئة ذات الصلة على عنصر UL (انظر الجدول الثاني أعلاه للحصول على التفاصيل).
في هذا الوقت ، قد تتساءل ، ما هو الفرق بين الشبكة العادية وكتلة الشبكة؟ دعونا نلقي نظرة موجزة على الاختلافين بينهما:
على عكس الشبكة الافتراضية ، (كتل الشبكة) كل صف له عرض أقصى تم تطبيقه ، لذلك يتم دائمًا تغطية نافذة المتصفح بأكملها.
لا يمكن استخدام كتل الشبكات إلا في مشاريع متساوية في الحجم.
باستخدام الشبكة
الآن بعد أن أصبح لدينا فهم جيد لشبكات هذين الإطارين ، دعنا نرى كيف يمكننا استخدامهما لإنشاء صفحة bootstrap وصفحة الأساس المقابلة.
تُظهر لقطة الشاشة التالية التصميم الأول الذي سنبنيه:
بدءًا من bootstrap ، نحدد عنصرًا مع فئة الحاوية. كما تمت مناقشته سابقًا ، ستقوم هذه الفئة بتعيين عرض ثابت لهذا العنصر وفقًا لحجم الشاشة (انظر الجدول في Bootstrap للحصول على التفاصيل). ثم ، نضيف عنصرًا مع صف الفصل.
نحن الآن مستعدون لإعداد أعمدةنا. للشاشات الكبيرة ، نريد 4 أعمدة من نفس الحجم. لذلك نحن نحدد 4 عناصر Div لكل منها مع Col-LG-3 فئة. ومع ذلك ، بالنسبة للأجهزة الصغيرة والمتوسطة الحجم ، نفضل أن يكون لدينا عمودين في كل صف. لهذا السبب ، نستخدم فئة Col-SM-6. أخيرًا ، بالنسبة لشاشة Small Ultra Small ، نريد تكديس الأعمدة. هذا هو السلوك الافتراضي لنقل الإطار الأول ، لذلك ليست هناك حاجة لتحديد فئة Col-XS-12.
يبدو أن HTML مثل هذا:
<viv> <viv> <viv> <!-المحتوى-> </div> <viv> <!-المحتوى-> </div> <div> <!-المحتوى-> </div> <div> <!-المحتوى-> </div> <div> <!-content-> </div> <!-المحتوى->
دعنا نستمر في النظر إلى الأساس.
تشبه شبكة الأساس شبكة bootstrap ، لكنها أبسط قليلاً. أولاً ، يتعين علينا تحديد عنصر مع فئة الصف ، والذي سيحتوي على أعمدةنا. يعين هذا الفئة عرض العنصر الأقصى إلى 62.5Rem (1000px). بعد ذلك ، نضيف العمود. لتحقيق ذلك ، نحدد أن كل عنصر Div لديه فئة عمود أو أعمدة ، ثم استخدم فئة النقط المقابلة (انظر الجدول في الأساس أعلاه للحصول على التفاصيل) لتعيين عرضه. وبالمثل ، بالنسبة للأجهزة الصغيرة ، لا نحتاج إلى تحديد فئة Small-12.
هذا هو HTML على أساس الأساس على مدار الأساس :
<viv> <viv> <!-المحتوى-> </div> <div> <!-المحتوى-> </div> <div> <!-المحتوى-> </div> <div> <!-المحتوى-> </div> <div> <!-المحتوى-> </div> <!-المحتوى-> </div> </div>
في هذه اللحظة ، أعتقد أنك بدأت تصبح أكثر دراية بنظام الشبكة لهذين الإطارين. ولكن ربما يمكن أن يساعدك مثال آخر على الفهم بشكل أكثر وضوحًا.
في المثال التالي ، سنبني تذييل. يوضح الرسم البياني التالي النمط الذي نريده:
هنا ، سوف نختار تصميمًا مختلفًا للمقارنة مع المثال السابق. بالنسبة للشاشات ذات الشاشة المتوسطة وما فوق (أو الشاشات ذات الشاشة الصغيرة وما فوق في شبكة bootstrap) ، نريد عرض ثلاثة أعمدة. ومع ذلك ، لاحظنا أن هناك صف متداخل في العمود الأخير. هذا يتكون من عمودين. سنضع عرضهم على نصف عرض الصف في جميع الأجهزة. أخيرًا ، نقوم بضبط رؤية الصور التي تظهر في الصفوف المتداخلة.
هنا هو الرمز في bootstrap:
<viv> <viv> <viv> <!-المحتوى-> </div> <viv> <!-المحتوى-> </div> <viv> <viv> <a href = "#" </viv> <!-.col-sm-4-> </viv> <!-.Row-> </viv> <!-.Container->
هنا هو رمز الأساس:
<viv> <viv> <!-المحتوى-> </div> <div> <!-المحتوى-> </div> <viv> <ul> <li> <a href = "#"> <p> دعنا نلتقي ونناقش </p> <i> </i> </a> </a> </li> <! .Row ->
ملاحظة: إذا كنت ترغب في استبدال كتل الشبكات ، فيمكننا استخدام شبكة Foundation الافتراضية لإنشاء صفوف متداخلة.
ختاماً
إذا كنت تريد المزيد من المعلومات حول نظام شبكة Bootstrap ، فيمكنك الاطلاع على هذه المقالة: "يجب أن يتعلم Bootstrap كل يوم (تخطيط)"
أخيرًا ، في هذه المقالة ، أقدم هيكل شبكة من bootstrap والأساس. ثم رأينا في مشروع حقيقي كيفية استخدام شبكاتهم. كما ترون ، فإن جميع الشبكات متشابهة ويمكن تعريفها بشكل أكبر.
أتمنى أن يعجبك هذا المقال. ربما يمكنك تطبيق ما تعلمته على مشروعك. لمزيد من محتوى bootstrap ، يرجى متابعة: "Bootstrap التعلم التعليمي" ، شكرا لك على القراءة.
إذا كنت لا تزال ترغب في الدراسة بعمق ، فيمكنك النقر هنا لدراسة وإرفاق 3 مواضيع مثيرة لك:
Bootstrap البرنامج التعليمي العملي
تعليمي استخدام المكونات الإضافية Bootstrap
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.