تعرف على Bootstrap: ابدأ في تطوير مواقع الويب سريعة الاستجابة

إفشاء: يساعدك دعمك في الحفاظ على تشغيل الموقع! نحصل على رسوم إحالة لبعض الخدمات التي نوصي بها في هذه الصفحة.


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

منذ الإصدار 2 ، يشتمل Bootstrap على مكونات تصميم الويب السريع الاستجابة (RWD) ، مما يجعله أداة ممتازة لتغيير حجم مواقع الويب بقاعدة رمز واحدة مشتركة بين الأجهزة المختلفة باستخدام استعلامات وسائط CSS.

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

ما هو Bootstrap?

بدأ تطوير Bootstrap بواسطة Twitter Ott Ott و Jacob Thornton كمحاولة لتطوير أداة داخلية – إطار جديد لتشجيع الاتساق عبر الأدوات الداخلية في Twitter.

خلال هذه المراحل المبكرة من التطوير ، كان Bootstrap في الأصل يحمل اسم “مخطط Twitter”. نضج الإطار الجديد بسرعة وتم إصداره كمشروع مفتوح المصدر في 19 أغسطس 2011.

يستمر فريق Bootstrap الأساسي في التطوير ، وأحدث إصدار هو Bootstrap 3 ، الذي تم إصداره في أغسطس 2013.

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

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

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

يمكن استخدام Bootstrap في أي بيئة تطوير أو محرر وأي تقنية ولغة من جانب الخادم ، من ASP.NET إلى PHP إلى Ruby on Rails.

منذ أغسطس 2015 ، أصبحت موضوعات Bootstrap الرسمية متاحة للشراء بدفعة واحدة وترخيص متعدد الاستخدامات مع تحديثات مجانية.

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

ميزات Bootstrap

يتوافق Bootstrap مع أحدث إصدارات متصفحات Google Chrome و Mozilla Firefox و Internet Explorer و Opera و Safari. بعض هذه المتصفحات غير مدعومة على جميع الأنظمة الأساسية.

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

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

ينشئ نظام الشبكة هذا لبنات البناء الأساسية للصفحات الديناميكية.

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

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

فوائد استخدام Bootstrap

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

وفقًا لـ Christopher Gimmer من Bootstrapbay ، هناك خمسة أسباب رئيسية لاستخدام Bootstrap.

أول, يزيد Bootstrap من سرعة التطوير. واحدة من المزايا الرئيسية لـ Bootstrap هي السرعة المطلقة للتطوير.

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

ثانيا, يعمل Bootstrap على إنشاء مواقع ويب سريعة الاستجابة ومتوافقة مع الجوّال.

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

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

الثالث, باستخدام Bootstrap يضمن الاتساق.

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

الرابع, Bootstrap قابل للتخصيص بسهولة.

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

خامسا, دعم جيد.

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

الابتداء مع Bootstrap

إذا كنت مستعدًا لبدء تعلم كيفية استخدام Bootstrap ، ولكنك لست على دراية بـ HTML و CSS ، فإن الخطوة الأولى لتعلم Bootstrap هي تعلم أساسيات HTML و CSS.

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

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

بيئة تطوير Bootstrap

بعد تنزيل واستخراج النسخة المجمعة مسبقًا من Bootstrap ، ستحصل على بنية ملف Bootstrap ، وهو أمر بسيط للغاية. توجد ملفات Bootstrap في ثلاثة أدلة: css و js و fonts.

بنية الملف هذه سهلة التفسير وبسيطة لتضمينها في أي مشروع ويب. بالإضافة إلى ملفات CSS و JS الجاهزة للاستخدام ، يتم أيضًا تضمين خطوط Glyphicons جنبًا إلى جنب مع سمة Bootstrap الافتراضية الاختيارية.

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

موارد Bootstrap

نظرًا لشعبيتها ، يجب ألا تواجه صعوبة في العثور على الكثير من موارد التعلم Bootstrap عالية الجودة عبر الإنترنت. المجتمع مزدهر ويتم نشر موارد جديدة على أساس منتظم.

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

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

دورات تفاعلية مجانية

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

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

تتميز هذه الدورات بمترجم على الإنترنت ، بحيث يمكنك تنفيذ الأمثلة وعرضها على الفور:

  • تحقق من أساسيات Bootstrap في البرنامج التعليمي Codecademy. هذا هو برنامج تعليمي قصير للمبتدئين سيرشدك خلال HTML الأساسي و CSS وإضافة Bootstrap إلى موقع الويب الخاص بك. سيعرض لك هذا البرنامج التعليمي البنية الأساسية لـ Bootstrap مع مترجمه عبر الإنترنت.
  • W3Schools Bootstrap 3 Tutorial هو دليل مفصل خطوة بخطوة شامل ومفصل للغاية مع مرجع Bootstrap كامل لجميع فئات CSS ومكوناتها ومكونات JavaScript الإضافية.
  • برنامج Tutorialspoint Bootstrap التعليمي مفصل للغاية ، حيث يغطي تقريبًا كل ما تحتاج إلى معرفته حول Bootstrap ، من Bootstrap CSS ومكونات التخطيط والمكونات الإضافية والعروض التوضيحية والموارد المفيدة. يحتوي البرنامج التعليمي Bootstrap أيضًا على مترجم عبر الإنترنت ، وهو متاح أيضًا كتنزيل PDF.

يجب أن تمنحك هذه الدورات التفاعلية فهمًا جيدًا بما فيه الكفاية لـ Bootstrap لبدء استخدامه في مشاريعك دون الكثير من المتاعب.

عروض توضيحية وموارد إضافية

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

هذا هو السبب في أننا سنترك هذا الخيار لفريق Bootstrap الأساسي ونقدم لك Bootstrap Expo الرسمي مع أمثلة جميلة وملهمة من Bootstrap.

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

إذا كنت على استعداد لبدء استخدام Bootstrap ، وتحتاج إلى موارد مفيدة إضافية لمشاريعك ، فراجع بعض ما يلي:

  • مواضيع Bootstrap الرسمية من مبدعي Bootstrap
  • أسواق ذات قوالب ونماذج Bootstrap تجارية متميزة: creativemarket.com ، wrapbootstrap.com ، themeforest.net
  • قوالب وثيمات Bootstrap المجانية: startbootstrap.com ، shapebootstrap.net ، bootstrapzero.com.

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

كتب إلكترونية و غلاف عادي

هناك الكثير من الموارد المتاحة عبر الإنترنت لـ Bootstrap ، ولكن إذا كنت تفضل كتابًا أو كتابًا إلكترونيًا ، فإن الاختيار محدود.

على الرغم من ذلك ، مع وجود العديد من البرامج التعليمية والموارد المجانية عبر الإنترنت ، ربما من الأفضل تجربة بعض هذه المجانية أولاً. بمجرد أن تتقنهم ، يمكنك التفكير في شراء بعض الكتب.

إذا كنت تفضل النصوص والكتب المادية ، فإليك بعض نصوص Bootstrap المتاحة اليوم:

  • خطوة بخطوة Bootstrap 3: دليل سريع لتطوير الويب سريع الاستجابة باستخدام Bootstrap 3 من Riwanto Megosinarso هو دليل حقيقي خطوة بخطوة للمبتدئين. يوصى إذا كنت جديدًا تمامًا على Bootstrap ويغطي ما يكفي لتبدأ.
  • Bootstrap Jump Start by Syed Fazle Rahman مناسب تمامًا للمبتدئين والمطورين المتوسطين ، حيث يغطي كل ما تحتاجه لتطبيق Bootstrap على صفحة الويب الخاصة بك.
  • تمت كتابة مخططات موقع Bootstrap بواسطة David Cochran و Ian Whitley للمبتدئين إلى المطورين المتوسطين. تغطية جيدة لتخصيص مكونات وتخطيطات Bootstrap.

تتوفر الثلاثة جميعها أيضًا في شكل كتاب إلكتروني لـ Kindle.

روابط مهمة

  • الحذاء
  • Bootstrap على جيثب.
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map