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

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

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

نبذة عن بوتستراب

تم إنشاء مجموعة أدوات تطوير تطبيقات الويب من قبل موظفي تويتر السابقين Mark Otto وJacob thornton (في الصورة).

يصفه موقع بوتستراب الرسمي على أنه “إطار عمل HTML و CSS و JS الأكثر شهرى لتطوير مشاريع متنقلة سريعة الاستجابة على الويب.”

إليك ما يعنيه ذلك بعبارات أكثر وضوحًا:

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

بشكل أساسي، يوفر لك بوتستراب من كتابة الكثير من أكواد CSS، مما يمنحك المزيد من الوقت الذي تقضيه في تصميم صفحات الويب.

إنه مجاني أيضًا! يتم استضافته حاليًا على GitHub ويمكن تنزيله بسهولة من الموقع الرسمي.

الآن بعد أن نظرنا إلى ماهيتها بالضبط، دعنا نلقي نظرة على بعض الوظائف الأساسية الأخرى التي تتمتع بها للمبرمجين (علاوة على كونها مجانية، بطبيعة الحال).

الوظائف الأساسية لـ بوتستراب

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

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

على سبيل المثال، يتيح لك إصدار “التعليمات البرمجية المصدر” من بوتستراب الوصول إلى منفذ Sass. هذا يعني أنه ينشئ ورقة أنماط (Style Sheet) مخصصة تستورد بوتستراب، مما يسمح لك بتعديل الأداة وتوسيعها حسب الحاجة.

يمكنك أيضًا تثبيت بوتستراب باستخدام مدير الحزم – وهي أداة تدير وتحدث الأطر والمكتبات والأصول.

بعض مديري الحزم الأكثر شهرة هم Npm و Composer و Bower. يعد Npm تابع من جانب الخادم، بينما يركز Composer على الواجهة الأمامية. إذا كنت تعمل في مشاريع تستند إلى PHP، ففكر في استخدام Bower بدلاً من ذلك.

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

لماذا يجب عليك استخدام بوتستراب؟

تتضمن بعض مكونات واجهة بوتستراب أشرطة التنقل وأنظمة الشبكة وأدوات عرض الصور والأزرار.

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

سهولة الاستخدام

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

أحد أسباب شهرة بوتستراب بين مطوري الويب ومصممي الويب هو أنه يحتوي على بنية ملفات بسيطة. يتم تجميع ملفاتها لسهولة الوصول إليها، ولا تتطلب سوى معرفة أساسية بـ HTML وCSS وJS لتعديلها.

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

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

شبكة مستجيبة

يأتي بوتستراب بنظام شبكة محدد مسبقًا، مما يوفر لك إمكانية إنشاء واحد من البداية. يتكون نظام الشبكة من صفوف وأعمدة، مما يتيح لك إنشاء شبكة داخل الشبكة الحالية بدلاً من إدخال استعلامات الوسائط داخل ملف CSS.

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

عادة ما تكون الإعدادات الافتراضية أكثر من كافية. بعد إنشاء شبكة، ما عليك سوى إضافة محتوى إلى الحاويات.

يحتوي نظام شبكة بوتستراب على فئتين من الحاويات لاستيعاب المشاريع القائمة على سطح المكتب والمحمول بشكل أفضل – حاوية ثابتة (container.) وحاوية ممتدة (.container-fluid.).

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

التوافق مع المتصفحات

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

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

نظام صورة بوتستراب

يتعامل بوتستراب مع عرض الصور واستجابتها بقواعد HTML و CSS المحددة مسبقًا.

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

يوفر بوتستراب أيضًا فئات إضافية مثل .rounded-circle و .rounded مما يساعد على تعديل شكل الصور.

وثائق بوتستراب

يوفر بوتستراب وثائق للمطورين الذين يرغبون في تعلم كيفية استخدام إطار العمل هذا لأول مرة. فيما يلي العديد من الموضوعات التي يمكنك العثور عليها في صفحة توثيق بوتستراب:

• المحتوى: يغطي كود مصدر بوتستراب المترجم مسبقًا.
• المتصفحات والأجهزة: يسرد جميع متصفحات الويب والجوال المدعومة والمكونات المستندة إلى الهاتف المحمول.
• JavaScript: يكسر العديد من ملحقات JS المبنية على jQuery.
• Theming: يشرح متغيرات Sass المضمنة لتسهيل التخصيص.
• الأدوات: تعلمك كيفية استخدام البرامج النصية لـ بوتستراب Npm لإجراءات مختلفة.
• إمكانية الوصول: تغطي ميزات وقيود بوتستراب فيما يتعلق بالعلامات الهيكلية والمكونات وتباين الألوان ورؤية المحتوى وتأثيرات الانتقال.

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

لماذا لا يجب عليك استخدام بوتستراب

على الرغم من فوائدة، فإن بوتستراب له قيود معينة غير مناسبة لأنواع معينة من المشاريع.

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

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

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

الجانب السلبي الآخر هو أن أنماط بوتستراب ضخمة نسبيًا. يمكن أن يؤدي هذا إلى إخراج HTML غير ضروري، وإهدار موارد وحدة المعالجة المركزية.

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

3 ملفات أساسية من بوتستراب

يتكون بوتستراب من مجموعة من بناء الجملة تم تجميعها في ثلاثة ملفات أساسية – Bootstrap.css و Bootstrap.js و Glyphicons. ضع في اعتبارك أن بوتستراب يتطلب مكتبة جافا سكربت تسمى jQuery لتشغيل مكونات ومكونات JS الإضافية.

فيما يلي ملفات الإطار الأساسية الثلاثة التي تدير واجهة المستخدم ووظائف موقع الويب.

Bootstrap.css

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

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

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

لا تقتصر وظائف CSS على أنماط النص فقط حيث يمكنك استخدامها لتنسيق الجوانب الأخرى داخل موقع الويب، مثل الجداول وتخطيطات الصور.

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

Bootstrap.js

هذا الملف هو الجزء الأساسي من بوتستراب. يتكون من ملفات جافا سكربت المسؤولة عن تفاعل موقع الويب.

لتوفير الوقت من كتابة بناء جملة جافاسكربت عدة مرات، يميل المطورون إلى استخدام jQuery – مكتبة جافا سكربت مفتوحة المصدر ومتعددة المنصات.

فيما يلي بعض الأمثلة لما يمكن أن يفعله jQuery:

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

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

لذلك، يجب على كل مهندس برمجيات التعرف على jQuery لأنه جزء أساسي من تطوير الويب.

Bootstrap Icon

تعد الرموز جزءًا لا يتجزأ من الواجهة الأمامية لموقع الويب، حيث تعرض غالبًا الإجراءات والبيانات داخل واجهة المستخدم.

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

إذا كنت ترغب في العثور على أيقونات أكثر أناقة، فإن Glyphicons تبيع مجموعات متميزة متنوعة للمواقع المتخصصة.

يمكنك أيضًا تنزيل الرموز الفردية والمخصصة للتصميمات مجانًا على مواقع الويب المختلفة مثل Flaticon و GlyphSearch و Icons8.

لتغيير حجم Glyphicons، تحتاج إلى تجاوز النمط الافتراضي بخاصية حجم الخط CSS.

ملاحظة: تم إصدار Glyphicons حتى 3.3 فقط ولم تعد متوفرة في الإصدارات الأحدث. Bootstrap Icon هو الاصدار الاحدث اذا كنت تفضل ذلك.

كيفية استخدام البوتستراب في تطوير الويب

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

<!doctype html>
<html lang="ar" dir="rtl">
  <head>
    <!-- العلامات الوصفية مطلوبة -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@ 5.3.0-alpha3/dist/css/bootstrap.rtl.min.css" integrity="sha384-T5m5WERuXcjgzF8DAb7tRkByEZQGcpraRTinjpywg37AO96WoYN9+hrhDVoM6CaT" crossorigin="anonymous">

    <title>مرحبًا بالعالم!</title>
  </head>
  <body>
    <h1>مرحبًا بالعالم!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@ 5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@ 2.11.7/dist/umd/popper.min.js" integrity="sha384-zYPOMqeu1DAVkHiLqWBUTcbYfZ8osu1Nd6Z89ify25QV9guujx43ITvfi12/QExE" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@ 5.3.0-alpha3/dist/js/bootstrap.min.js" integrity="sha384-Y4oOpwW3duJdCWv5ly8SCFYWqFDsfob/3GkgExXKV4idmbt98QcxXYs9UoXAB7BZ" crossorigin="anonymous"></script>
    -->
  </body>
</html>

سنشرح بعض السطور بمزيد من التفصيل.

meta charset="utf-8"

يذكر مجموعة الأحرف المستخدمة لكتابة موقع الويب. في هذه الحالة، يشير UTF-8 إلى Unicode.

meta name="viewport" content="width=device-width, initial-scale=1">

يضمن أن الصفحة بها نسبة 1: 1 مع حجم إطار العرض.

link href="https://cdn.jsdelivr.net/npm/bootstrap@ 5.3.0-alpha3/dist/css/bootstrap.rtl.min.css"

تضمين CSS من Bootstrap CDN.

script src="https://cdn.jsdelivr.net/npm/bootstrap@ 5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"

تحميل JS عبر CDN. من الأفضل تحميله من CDN حيث يمكن تخزين الملفات مؤقتًا لمدة اطول.

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@ 4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

يوفر Bootstrap حزمة JavaScript لتبسيط العملية. ومع ذلك، فإن bootstrap.bundle.js و bootstrap.bundle.min.js يشتملان على Popper بدلاً من jQuery. بوبر هو محرك تحديد المواقع لحساب تموضع العناصر.

<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

مثال على كيفية استخدام روابط التنقل في Bootstrap Navbar لإنشاء قوائم المواقع.

الخاتمة

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

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

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

نأمل أن يكون هذا المقال قد أجاب على سؤال ماهو البوتستراب وساعدتك على فهم فوائد استخدامه في تطوير الويب وتصميم الويب.