تسريع تطوير التطبيقات باستخدام Bootstrap

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

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

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

فهم Bootstrap

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

خصص ساعة لقراءة الوثائق على موقع Bootstrap أو تعلم المزيد من منشور رائع على مدونة Toptal ، ما هو Bootstrap؟ برنامج تعليمي قصير حول ماذا ولماذا وكيف. ومقال رائع نصائح وحيل Bootstrap 3 قد لا تعرفها عن scotch.io.

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

حفر في هيكل الصفحة وتعلم كيف يتم إنشاء التخطيطات.

 <div class="container"> <div class="row"> ... </div> </div>

... قم بتغيير حجم نافذة المتصفح أو استخدم أداة تغيير منفذ العرض في Chrome لمعرفة المزيد حول أدوات الاستعلام عن الوسائط.

 /* Extra small devices (phones, less than 768px) */ /* No media query since this is the default in Bootstrap */ /* Small devices (tablets, 768px and up) */ @media (min-width: @screen-sm-min) { ... } /* Medium devices (desktops, 992px and up) */ @media (min-width: @screen-md-min) { ... } /* Large devices (large desktops, 1200px and up) */ @media (min-width: @screen-lg-min) { ... }

 @media (max-width: @screen-xs-max) { ... } @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... } @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... } @media (min-width: @screen-lg-min) { ... }

... وكيف ومتى يتم استخدامها ، تعرف على فئات الأعمدة للحصول على أفضل نتائج تصميم متجاوبة.

 <div class="row"> <div class="col-sm-7 col-md-9 col-xs-6">Left column</div> <div class="col-sm-5 col-md-3 col-xs-6">Right column</div> </div>

ألق نظرة على W3Schools حيث ستجد مرجع Bootstrap كامل لجميع فئات CSS ومكوناته ومكونات JavaScript الإضافية - كل ذلك مع أمثلة "جربها بنفسك":

• شرح نظام شبكة Bootstrap: الشبكات في Bootstrap
• فئات CSS الأساسية: الطباعة والأزرار والنماذج وعناصر النموذج والفئات المساعدة والصور والجداول
• المكونات الفردية: الحروف الرسومية ، القوائم المنسدلة ، الملاح.

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

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

7 أخطاء تصفيف أكثر شيوعًا إهدارًا للوقت

1. عند توسيط النص أو divs

إذا كنت بحاجة إلى توسيط div و / أو محتوى ، فيمكنك استخدام أحد هذه الفئات:

استخدم مركز النص

 <p class="text-center">I am centered text</p>

... أو وسط الكتلة

 <div class="center-block">I am centered text</div>

لا . مركز أو <مركز>

2. عند تغيير حجم الخط

إذا كنت بحاجة إلى خطوط أصغر أو أكبر ، فيمكنك استخدام أحد هذه الفئات:

 <p class="lead">I'm bigger paragraph text.</p>

 <p class="small">I'm smaller paragraph text.</p>

إذا كنت بحاجة إلى رؤوس أكبر أو أصغر ، فلا تنسَ .h1 ، .h2 ، .h3 ، .h4 ، .h5 ، .h6 ، .small . استخدمه مثل هذا:

 <h1 class="h2">Smaller Title with .h2</h1>

 <h3 class="h1">Bigger Title with .h1</h3>

 <h4 class="small">Smaller Title with .small</h4>

3. عند إزالة العوامات أو إجبار العناصر على تصفية أبنائها

لا حاجة لإنشاء فئات مثل .clear ، يمكنك دائمًا استخدام Bootstrap's .clearfix بدلاً من ذلك.

 <div class="clearfix">...</div>

4. عند قتل. صف هوامش الصف

ما عليك سوى استخدام .clearfix بدلاً من تحديد أنماطك الخاصة (أو الأسوأ من ذلك ، استخدام أنماط مضمنة):

 <div class="clearfix">...</div>

5. عند فك أو تضمين القوائم غير المرتبة والعناصر الأخرى

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

 <ul class="list-unstyled"> <li>...</li> </ul> <ul class="list-inline"> <li>...</li> </ul>

وبالمثل ، بالنسبة لمربعات الاختيار أو أزرار الاختيار ، لدينا .checkbox-inline و .radio-inline .

ويمكنك دائمًا إضافة .form-inline إلى النماذج الخاصة بك (والتي لا يجب أن تكون <form> ) لعناصر التحكم المحاذاة إلى اليسار والمضمنة.

6. عند تغيير حجم الأزرار

يتوهم أزرار أكبر أو أصغر؟ أضف .btn-lg أو .btn-sm أو .btn-xs للحصول على أحجام إضافية.

7. عند تعويم ومحاذاة العناصر إلى اليمين أو اليسار

تعويم عنصر إلى اليسار أو اليمين مع الفصل. ! المهم يتم تضمينه لتجنب قضايا الخصوصية. يمكن أيضًا استخدام الفئات كخلطات مع أي معالج CSS مسبق.

استخدم .pull-right و .pull-left و .text- right و .text- left بدلاً من. right و .left و .left - float و. right-float .

 <div class="pull-left">...</div> <div class="pull-right">...</div>

إعادة محاذاة النص بسهولة للمكونات باستخدام فئات محاذاة النص.

 <p class="text-left">Left aligned text.</p> <p class="text-right">Right aligned text.</p>

لا تقم بتخصيص ملفات الإطار الأساسية مباشرة

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

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

ومع ذلك ، إذا كنت تبدأ أو تعمل على موقع كبير مع العديد من المطورين أو أكثر - فمن الأفضل إبقاء الأمور منفصلة ومنظمة بشكل جيد. انقل ملفات إطار العمل خارج مجلد CSS المخصص الرئيسي واحتفظ بها في مجلد غير محرر بدون إصدار وقم بإزالة CSS غير المستخدمة عن طريق استخدام إضافات Grunt أو Gulp grunt-uncss أو gulp-uncss. بديل آخر لإبقائه منفصلاً هو تقديمه من خلال CDN. يمنحك وجود رمز إطار العمل منفصل وغير متأثر خيارًا أفضل وأسرع عند ترقيته إلى أحدث إصدار. كما أنه يساعد في تقليل عدد من مشكلات قابلية التوسع والتصميم ، أو أن يتم إبطائه عند إجراء إضافات مع تغييرات سريعة ومستمرة في واجهة المستخدم.

استخدم أدوات السقالات مثل Yeoman أو Slush ومديري الحزم مثل Bower أو Python pip أو Node's NPM أو Ruby Gems نظرًا لأنهم يقومون بأكثر من مجرد إضافة ملفات إلى مسار التطبيق الخاص بك. إنني أقدر حقًا قوة Bower - يمكنها بالتأكيد القيام بأكثر من مجرد تنزيل ملف أو اثنين. يعد استخدام مدير الحزم فكرة جيدة لأنه من المرجح أن يزداد تعقيد مشروعك وستصبح كمية المكونات الإضافية للجهات الخارجية وكيفية صيانتها مجنونة وتستغرق وقتًا طويلاً. سيساعدك Bower على تتبع كل مكون إضافي وتبعياته بما في ذلك أي شيء متعلق بـ Bootstrap.

استخدم موارد Bootstrap المتاحة لتطوير التطبيقات

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

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

ستجد أدناه قائمة بالموارد المفيدة للبدء بها:

القوالب والسمات والمكونات الإضافية

المظاهر الرسمية من منشئي Bootstrap: theme.getbootstrap.com.

الأسواق التي تحتوي على سمات وقوالب Bootstrap متميزة: wrapbootstrap.com و themeforest.net و creativemarket.com/themes/bootstrap.

قوالب وقوالب Bootstrap المجانية: startbootstrap.com ، www.bootstrapzero.com ، shapebootstrap.net/free-templates.

"قائمة Big Badass" - قائمة 319 من موارد Bootstrap المفيدة: bootstraphero.com/the-big-badass-list-of-twitter-bootstrap-resources/

أنجولار جي إس

BootstrapUI مكتوب بلغة AngularJS الخالصة بواسطة فريق AngularUI.

ReactJS

React-Bootstrap هي مكتبة من مكونات الواجهة الأمامية القابلة لإعادة الاستخدام. ستحصل على شكل ومظهر Twitter Bootstrap ، ولكن مع رمز أكثر وضوحًا ، عبر إطار عمل React.js من Facebook.

جانغو

تكامل Bootstrap 3 مع Django: https://github.com/dyve/django-bootstrap3

جيكل

Jekyll-Bootstrap عبارة عن سقالة مدونة كاملة للمدونات المستندة إلى Jekyll.

ووردبريس

WordPress starter theme Sage مع سير عمل تطوير حديث للواجهة الأمامية. استنادًا إلى HTML5 Boilerplate و gulp و Bower و Bootstrap.

تصميم المواد

تصميم المواد لـ Bootstrap هو سمة لـ Bootstrap 3 والتي تتيح لك استخدام تصميم Google Material الجديد في إطار عمل الواجهة الأمامية المفضل لديك.

خاتمة

يعد Bootstrap أحد أفضل الأطر المتاحة التي توفر لك العديد من الأدوات والموارد الرائعة من أجل تسريع عملية تطوير التطبيق وتسريعها.

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