الأخطاء العشرة الأكثر شيوعًا في التمهيد التي يرتكبها المطورون

للوهلة الأولى ، يبدو Bootstrap بسيطًا جدًا. وبالفعل ، ليس من الصعب البدء في استخدام Bootstrap. توجد وثائق Bootstrap مكتوبة جيدًا مع العديد من أمثلة التعليمات البرمجية لـ HTML و CSS وجافا سكريبت. تم ذكر معظم المزالق المهمة هناك ، ولكن لا تزال بعض الأخطاء دقيقة جدًا أو لها أسباب غامضة. نظرًا لأن Bootstrap يبدو بسيطًا جدًا وسهل الاستخدام ، فإن العديد من المطورين يندفعون إلى إطار العمل ، وبالتالي تحدث الأخطاء.

سنلقي نظرة على 10 من أكثر الأخطاء والمشكلات والمفاهيم الخاطئة في Bootstrap شيوعًا عندما يبدأ المطورون في استخدامه.

خطأ التمهيد الشائع رقم 1: المفاهيم الخاطئة الأساسية حول إطار العمل

هناك بعض المفاهيم الخاطئة الأساسية حول إطار عمل Bootstrap التي يمتلكها الأشخاص. قد يكون هذا بسبب عدم الإعلان عنه بوضوح على موقع Bootstrap ، أو لأن الأشخاص لا يأخذون وقتًا كافيًا لقراءة الوثائق. الحقيقة هي أنه في بعض الأحيان ينتهي الأمر بالمطورين في الزاوية وهم يقومون بالأشياء بشكل خاطئ ، ثم يلومون الإطار. لذلك دعونا نجعل بعض الحقائق الأساسية واضحة.

Bootstrap شامل ، لكنه ليس ضخمًا ولا ضخمًا. يأتي Bootstrap مرفقًا مع قوالب تصميم HTML و CSS أساسية تتضمن العديد من مكونات واجهة المستخدم الشائعة. يتضمن ذلك الطباعة ، والجداول ، والنماذج ، والأزرار ، والرموز ، والقوائم المنسدلة ، والأزرار ومجموعات الإدخال ، والتنقل ، والصفحات الفاصلة للصفحات ، والتسميات والشارات ، والتنبيهات ، وأشرطة التقدم ، والنماذج ، وعلامات التبويب ، والأكورديونات ، والعرض الدائري ، وغير ذلك الكثير. يمكنك اختيار واختيار عدد قليل منهم ، ومن خلال التكوين الافتراضي الخاص به ، يتم بسرعة إنشاء واجهة مستخدم تتعامل مع العديد من المتصفحات والأجهزة والدقة بتنسيق رائع.

لن يفعل Bootstrap كل شيء من أجلك ، ولكنه يوفر مجموعة من الإعدادات الافتراضية المعقولة للاختيار من بينها وسيساعد المطورين على التركيز بشكل أكبر على أعمال التطوير بدلاً من القلق بشأن التصميم ، ومساعدتهم على إنشاء موقع ويب جيد المظهر وتشغيله بسرعة. يسمح بالنماذج الأولية السريعة ، لكنه لا يحد من المطورين في الطريق.

إنه قابل للتوسعة بدرجة كافية بحيث يمكن لأي شخص تعديله ليلائم احتياجاته. في البداية ، كان لدى Bootstrap بعض القيود ، وفي ذلك الوقت كان توسيع الأنماط الافتراضية أمرًا معقدًا. ولكن مع نضوج الإطار ، تحسنت القابلية للتوسع أيضًا.

خطأ Bootstrap الشائع # 2: التفكير في أنك لست بحاجة إلى معرفة CSS لاستخدام Bootstrap ، وأنك لست بحاجة إلى مصمم

إذا كنت تعتقد أنك إذا كنت تستخدم Bootstrap فلن تحتاج إلى معرفة CSS ، فأنت مخطئ جدًا. يحتاج أي مطور للواجهة الأمامية إلى تعلم CSS و HTML5. يقوم Bootstrap بإزالة الكثير من أجزاء CSS الصعبة من أكتاف المطورين (مثل البادئات الخاصة بالبائع) ويقدم تصميمًا افتراضيًا أساسيًا ، ولكن لا تزال بحاجة إلى فهم CSS. لا تحتاج إلى معرفة كيفية عمل استعلامات الوسائط ، ولكنك تحتاج إلى فهم كيفية عمل التصميم سريع الاستجابة. لا يُقصد من Bootstrap تعليمك CSS ، ولكن يمكن أن يساعدك إذا كنت تريد ذلك. يعد فحص شفرة المصدر في LESS أو SASS نقطة انطلاق رائعة.

في موضوع مشابه ، لست بحاجة إلى أن تكون مصممًا ، ويمكنك القول أنك لست بحاجة إلى مصمم مع Bootstrap. ومع ذلك ، إذا كان ذلك ممكنًا ، استخدم المساعدة من المصمم. الشكوى الشائعة ضد Bootstrap هي أن جميع مواقع Bootstrap تبدو متشابهة ، ومن السهل أن ينتهي بك الأمر إلى موقع ويب يشبه أي موقع Bootstrap آخر. لكن هذا لا يجب أن يكون صحيحًا. يتم إنشاء ملايين المواقع عبر الويب باستخدام Bootstrap. يمكن العثور على عروض رائعة لكيفية تحقيق التصميمات المختلفة في Bootstrap Expo ، الذي يجمع المواقع التي تم إنشاؤها باستخدام Bootstrap. ألقِ نظرة ، واحصل على بعض الإلهام ، وابدأ في بناء تنوع التصميم الخاص بك.

خطأ Bootstrap الشائع # 3: تغيير ملف Bootstrap CSS

لجعله سهلًا وبسيطًا: لا تقم بتعديل ملف bootstrap.css .

إذا قمت بإجراء تغييرات على ملف bootstrap.css ، فسوف تتعقد الأمور بسرعة كبيرة. سيتعطل التصميم بالكامل عندما تريد ترقية ملفات Bootstrap. يمكنك الكتابة فوق ألوان التمهيد الافتراضية والأنماط والهوامش والحشو وكل شيء في ورقة الأنماط الخاصة بك. ليست هناك حاجة للمس ورقة أنماط bootstrap.css على الإطلاق.

لا أعرف LESS أو SASS؟ لا توجد مشكلة ، يمكنك إنشاء ملف CSS الخاص بك والكتابة فوق كل ما تريد من ورقة أنماط bootstrap.css الأصلية. كما ذكرنا في الخطأ السابق ، فإن معرفة CSS إلزامي. قم بإنشاء محدد CSS الجديد الخاص بك ، واستخدمه في HTML ، وطالما أنك تعلن عن فئات CSS الخاصة بك بعد أنماط Bootstrap ، فإن تعريفاتك ستحل محل إعدادات Bootstrap الافتراضية.

هل مازلت تريد معرفة المزيد والغوص أعمق؟ أقترح وأشجعك بشدة على القيام بذلك. استخدم الكود المصدري Bootstrap LESS. ستحصل على فهم أفضل لما يجري ، وأين ماذا يحدث إذا استخدمت المصدر LESS وليس CSS الثابت.

خطأ Bootstrap الشائع # 4: استخدام كل ما يقدمه Bootstrap

كما ذكرنا من قبل ، فإن Bootstrap شامل. يوفر الكثير من مكونات واجهة المستخدم وقوالب تصميم HTML و CSS ومكونات JavaScript الإضافية. لكن من فضلك ، كن انتقائيا. ليس عليك استخدام كل ميزة من ميزات Bootstrap.

هذا ينطبق بشكل خاص على المكونات الإضافية. انتقاء واختيار المكونات الإضافية التي لها معنى فقط ، ولا تستخدم كل شيء لأنها تبدو لطيفة ورائعة. يمكن تجاوز موقع الويب الخاص بك بسهولة. ضع في اعتبارك كبداية ألا تقوم بتضمين ملف bootstrap.js على الإطلاق ، وأنشئ موقعًا باستخدام HTML و CSS فقط. وبعد ذلك ، أضف المكونات فقط حسب الحاجة لأدوار محددة ، واحدة تلو الأخرى.

خطأ Bootstrap الشائع # 5: إساءة استخدام موجه مشروط

توفر نماذج Bootstrap مطالبات حوار مرنة مع الحد الأدنى من الوظائف المطلوبة ، وتأتي مع إعدادات افتراضية ذكية. على الرغم من أن الوسائط سهلة الاستخدام وتوفر تخصيصًا ثريًا ، إلا أن هناك بعض الأشياء التي نحتاج إلى وضعها في الاعتبار لتجنب إساءة الاستخدام الشائعة.

إظهار أكثر من مطالبة مشروطة في ذلك الوقت

لا يدعم Bootstrap النماذج المتداخلة. يمكن رؤية مشروط واحد فقط في ذلك الوقت. يمكن عرض أكثر من نموذج واحد في وقت واحد ، لكنه يتطلب كتابة رمز مخصص للتعامل مع هذا بشكل صحيح.

يظهر مشروط Bootstrap تحت الخلفية

إذا كانت الحاوية الشكلية أو عنصرها الأصلي له موضع ثابت أو نسبي ، فلن يظهر النموذج بشكل صحيح. تأكد دائمًا من أن الحاوية النموذجية وعناصرها الأصلية لا تحتوي على أي مواضع خاصة مطبقة. أفضل ممارسة هي وضع HTML للشروط قبل علامة الإغلاق </body> مباشرة ، أو حتى أفضل في موضع المستوى الأعلى في المستند بعد علامة الفتح <body> مباشرة. هذه هي أفضل طريقة لتجنب المكونات الأخرى التي تؤثر على مظهر الوسائط ووظائفها.

مشروط على الأجهزة المحمولة

هناك بعض التحذيرات التي يجب على المطورين أن يكونوا على دراية بها عند التعامل مع النماذج على الأجهزة المحمولة باستخدام لوحات المفاتيح الافتراضية. ينطبق هذا بشكل خاص على أجهزة iOS ، حيث يوجد خطأ في العرض لا يقوم بتحديث موضع العناصر الثابتة عند تشغيل لوحة المفاتيح الافتراضية. لا يتم التعامل مع هذا بواسطة Bootstrap ، لذا فإن الأمر متروك للمطور للتعامل مع هذه المواقف في الكود بأفضل طريقة للتطبيق المعني.

خطأ Bootstrap الشائع # 6: مشكلة مكون زر إدخال الملف

لا يحتوي Bootstrap على مكون مخصص لزر تحميل الملف. يمكن تحقيق حل بسيط وأنيق باستخدام HTML و CSS فقط من خلال نموذج التعليمات البرمجية التالي:

 <span class="btn btn-default btn-file"> Browse <input type="file"> </span>

 .btn-file { position: relative; overflow: hidden; } .btn-file input[type=file] { position: absolute; top: 0; right: 0; min-width: 100%; min-height: 100%; font-size: 100px; text-align: right; filter: alpha(opacity=0); opacity: 0; outline: none; background: white; cursor: inherit; display: block; }

هناك العديد من الأمثلة حول كيفية الحصول على نفس التأثير. تم استعارة مثال الكود هذا من Cory LaViska ، وعلى موقعه يمكنك قراءة شرح أكثر تفصيلاً لهذه المشكلة. يوجد أيضًا مثال موسع به المزيد من الوظائف التي تستخدم كود JavaScript إضافي.

خطأ Bootstrap الشائع # 7: التعقيد المفرط مع JavaScript وتجاهل سمات "data-"

يمكن للمصممين ، أو مطوري JavaScript المبتدئين فقط ، الغوص بسهولة في تطوير الويب وإنشاء صفحات ويب باستخدام HTML و CSS و Bootstrap فقط. إذا لم يكونوا جيدين جدًا في الترميز ، فيمكنهم الوقوع في فخ إساءة استخدام JavaScript أو مجرد تعقيدها. من المهم الإشارة إلى أنه يمكن استخدام جميع ملحقات Bootstrap فقط من خلال واجهة برمجة تطبيقات العلامات ، دون كتابة سطر واحد من JavaScript. هذه هي واجهة برمجة تطبيقات Bootstrap من الدرجة الأولى ويجب أن تكون الاعتبار الأول عند استخدام المكونات الإضافية.

على سبيل المثال ، يمكننا تنشيط مربع حوار مشروط بدون كتابة أي JavaScript فقط عن طريق تعيين data-toggle="modal" على عنصر تحكم مثل زر أو مرساة ، وتمرير معلمات إضافية باستخدام سمات data- . في الكود أدناه ، نستهدف كود HTML بالمعرف #myModal . لقد حددنا أن النموذج لن يغلق عندما ينقر المستخدم خارج النموذج باستخدام خيار data-backdrop ، وقمنا بتعطيل حدث مفتاح الهروب الذي يغلق نموذجًا بخيار data-keyboard . الكل في سطر HTML واحد من التعليمات البرمجية:

 <button type="button" data-toggle="modal" data-target="#myModal" data-backdrop="static" data-keyboard="false">Launch my modal</button>

خطأ Bootstrap الشائع # 8: تجاهل الأدوات التي تسهل تطوير Bootstrap

تحدث الأخطاء ، وكل مطور يقوم بها من حين لآخر. هذا أمر لا مفر منه ، لكن المهم هو كيفية تعاملك مع الخطأ. لاحظ فريق Bootstrap من خلال مشاهدة أداة تعقب المشكلات أن الأشخاص يرتكبون بعض الأخطاء في كثير من الأحيان. لهذا السبب حاولوا أتمتة عملية التطوير. والنتيجة هي Bootlint ، أداة فحص HTML لمشروعات Bootstrap. يمكن استخدام Bootlint إما في المتصفح أو من سطر الأوامر عبر Node.js ، وسيقوم تلقائيًا بفحص صفحات الويب Bootstrapped بحثًا عن العديد من أخطاء استخدام Bootstrap الشائعة. يمكن أن تؤدي إضافة Bootlint إلى سلسلة أدوات تطوير الويب إلى القضاء على الكثير من الأخطاء الشائعة التي عادةً ما تؤدي إلى إبطاء تطوير المشروع.

إذا كنت ترغب في المساهمة في مشروع Bootstrap ، فإن الأمر يستحق التحقق من Rorschach. Rorschach هو روبوت مدقق لطلب سحب Bootstrap ، يقوم بإجراء بعض الفحوصات على كل طلب سحب جديد. إذا فشل فحص سلامة العقل ، فإنه يترك تعليقًا إعلاميًا على طلب السحب يشرح الخطأ وكيفية إصلاحه ، ثم يغلق طلب السحب.

خطأ التمهيد الشائع رقم 9: مشكلات عدم توافق IE8 والمتصفحات الأقدم

تم تصميم Bootstrap للعمل في أفضل حالاته في أحدث متصفحات سطح المكتب والأجهزة المحمولة. قد تعرض المتصفحات القديمة مكونات وعناصر مختلفة الأنماط ، ولكن كل شيء يجب أن يعمل بكامل طاقته. يتضمن الدعم Internet Explorer 8 و 9 ، مع ملاحظة مهمة أن بعض خصائص CSS3 وعناصر HTML5 لا تدعمها هذه المتصفحات بشكل كامل.

للحصول على الدعم الكامل لبرنامج Internet Explorer 8 والمتصفحات القديمة الأخرى ، تحتاج إلى استخدام polyfill لاستعلامات وسائط CSS3 Respond.js ، و HTML 5 shim الذي يتيح استخدام عناصر HTML5 ، وعلامة IE <meta> المناسبة في رأس HTML من أجل تأكد من أن IE لا يعمل في وضع التوافق. يجب أن يبدو رأس HTML الخاص بك في النهاية كما يلي:

 <head> ... <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head>

في حالة Respond.js ، احذر من المحاذير التالية في بيئات التطوير والإنتاج.

خطأ Bootstrap الشائع # 10: تجاهل أفضل الممارسات

أحد الأسئلة الشائعة في Stack Overflow هو كيفية جعل القائمة المنسدلة لقائمة Bootstraps تفتح عند التمرير ، بدلاً من النقر. في حين أن حل هذا السؤال ليس معقدًا ويمكن إجراؤه باستخدام CSS فقط ، إلا أنه لا يوصى به. تم ترك هذه الميزة خارج إطار العمل عن قصد ، وهذا قرار تصميم اتخذه فريق التطوير. مرة أخرى ، يمكن القيام بذلك ، ولكن يحتاج المرء إلى فهم التداعيات وفهم أن أفضل الممارسات موجودة ، خاصة بالنسبة لأطر العمل الأولى للجوال. السبب وراء هذه المشكلة المحددة هو أن جعل الأشياء تعمل على التمرير لا يساعد المستخدمين الذين لديهم أجهزة تعمل باللمس. على هذه الأجهزة لا يوجد تحوم ، فقط أحداث اللمس. وبالتالي ، لن يعمل هذا بشكل صحيح على أي أجهزة تعمل باللمس.

استنتاج أخطاء التمهيد

آمل أن يساعدك دليل Bootstrap القصير هذا على تجنب بعض الأخطاء الشائعة ، وتوضيح المفاهيم الخاطئة المعتادة ، ومساعدتك في الحصول على معظم إطار العمل. ضع في اعتبارك أن Bootstrap ليس للجميع ، ولا يناسب كل مشروع. عند اختيار إطار عمل ، يجب أن تأخذ بعض الوقت لقراءة الوثائق ، وتحتاج إلى قضاء بعض الوقت في اللعب بإطار العمل للحصول على فكرة أفضل وصورة أفضل لكيفية عمله. هذا صالح لـ Bootstrap أيضًا.

اقرأ الوثائق ، العب واختبر العينات ، احصل على الأساسيات الصحيحة ، واستمتع بإنشاء تصميمات جديدة وجميلة.