بوتستراب

من ويكيبيديا، الموسوعة الحرة
اذهب إلى التنقل اذهب إلى البحث
بوتستراب
Bootstrap logo.svg
معلومات عامة
نوع
نظام التشغيل
المنصة
النموذج المصدري
حقوق التأليف والنشر محفوظة عدل القيمة على Wikidata
المطور الأصلي
Mark Otto (en) ترجم — Jacob Thornton (en) ترجم عدل القيمة على Wikidata
موقع الويب
(الإنجليزية) getbootstrap.comالاطلاع ومراجعة البيانات على ويكي داتا
معلومات تقنية
ضمان الجودة
لغة البرمجة
الإصدار الأول
الإصدار الأخير
المستودع
الرخصة
بوتستراب مكون التنبيه
مثال لعنصر Alert الجاهز، بعدة ألوان وتنسيقات مختلفة، ويعد أحد المكونات الشائعة في الويب ويسخدمة لتنبيه المستخدم.

بوتستراب (بالإنجليزية: Bootstrap)‏ كان يسمى سابقًا "تويتر بوتستراب" (Twitter Bootstrap) وهو عبارة عن إطار عمل مفتوح المصدر[4] يُساعد على تصميم مواقع الويب وتطبيقاته. قامت شركة تويتر بتطويره مع Jacob Thornton. وقد صُمم بوتستراب لمساعدة المصممين والمطورين على بناء منتجات مذهلة بسرعة وفعالية الهدف منه توفير مكتبة واسعة مرنة وموثقة بشكل جيد للتصاميم “مكررة الاستعمال” المبنية باستخدام HTML وCSS وJavaScript كي يقوم المطورون باستعمالها، والإبداع باستخدامها. توسع المشروع ليصبح يعرف بـ Bootstrap ويستقل عن تويتر لأنه كما صرح المسؤولون أصبح مشروعًا كبير يتضمن العشرات من العناصر حيث أصبح المشروع الأكثر شعبية على موقع GitHub بعد أن حصل على أكثر من 13,000 متابع و2000 تطوير فرعي.

المميزات[عدل]

صمم بوتستراب ليكون مُتجاوبًا مع مختلف الأجهزة، خاصةً أجهزة الهواتف الذكية ويعتمد على فلسفة تصميم الهواتف أولًا "mobile-first[4]"، ويتميز بأنه سهل الاستخدام.

آلية عمل سهلة[عدل]

طريقة عمل بوتستراب تكمن بوضع class attribute على عنصر HTML، وبمجرد أن تقوم بربط ملفات بوتستراب بصفحة HTML خاصتك ستتمكن من استخدام العديد من التنسيقات الجاهزة ويحوي التوثيق الرسمي على أسماء الـ classes وطريقة عملها مع بعضها. فعلى سبيل المثال تستطيع تغير لون خلفية العنصر ولون النص داخله بإضافة bg-dark وtext-white كما هو موضح في المثال أدناه:

<section class="bg-dark text-white">
    <p>ويكيبيديا العربية</p>
</section>

تنسيقات افتراضية للمحتوى[عدل]

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

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

نظام التقسيم[عدل]

يحوي بوتستراب على grid layout أي شبكة تقسيم، مكونة من صفوف وأعمدة وتعد أحد أهم المميزات التي يقدمها بوتستراب لأنها تقوم بتسهيل عملية تقسيم وتموضع العناصر في الصفحة مع الأخذ بعين الاعتبار أن يكون التقسيم مُتجاوبًا مع مختلف الأجهزة سواءً ذات الشاشات العريضة كأجهزة الحواسيب المحمولة والشخصية، وكذلك أجهزة الجوال الذكية والأجهزة اللوحية ذات الشاشات أقل عرضًا.

يستخدم بوتستراب نظام تقسيم شائع في الويب، وهو 12 عمودًا (Columns)[5] بحيث تستطيع جعل العنصر يأخذ مساحة معينة من 12 عامودًا المتاحًا، ويتموضع في مكان مُعين، يحوي التوثيق الرسمي لبوتستراب شرحًا وافيًا عن كيفية استخدام نظام التقسيم هذا لوضع العناصر بموضع معين بالصفحة، مثال:

<div class="container">
<!--بداية الحاوية-->
  <div class="row row-cols-4">
    <!--بداية نظام التقسيم-->
        <div class="col">أنا</div>
        <div class="col">أحب</div>
        <div class="col-6">ويكيبيديا العربية</div> <!--سيأخذ 6 أعمدة-->
        <div class="col">كثيرًا</div>
    <!--نهاية نظام التقسيم-->
  </div>
<!--نهاية الحاوية-->
</div>

يحوي المثال أعلاه، على عنصر يحوي class container ويعتبر هذا العنصر هو الحاوية، ويجب وضع التقسيم داخل الحاوية لتضمن أن نظام التقسيم سيعمل بشكل صحيح وبدون مشاكل[5]،

ثم وبداخل الحاوية ستجد عنصرًا يحوي على class row وتعني أنك ستستخدم نظام التقسيم هنا، وclass row-cols-4 تعني أن الصف سيحوي 4 أعمدة هذا يجعل أقل مساحة ممكنة لـ class col تكون 3 أعمدة وذلك لأن أثنى عشر عامودًا تقسيم أربعة أعمدة، تساوي ثلاثة أعمدة، وستتقاسم العناصر داخله مساحة 12 عامودًا، وفي الداخل تجد 4 عناصر كلها تحوي class col ما عدا العنصر قبل الأخير يحوي على class col-6 وهذا يعني أنه سوف يأخذ 6 أعمدة بدلًا من 3، وبينما باقي العناصر ستتقاسم المساحة المُتبقية وعندها ستظهر 3 عناصر بجانب بعضها ولكن سيكون العنصر الأخير في الأسفل، لأن العنصر الذي قبله يشغل حيز 6 أعمدة والعنصران أعلاه يشغلان حيز 3 أعمدة وهذا يعني أن الصف الأول قد أكمل 12 عامودًا لذلك سيظهر العنصر الأخير في صف آخر.

عناصر جاهزة[عدل]

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

وحدات مساندة (Utilities)[عدل]

المُساندات أو الخدمات Utilities تحوي على بعض الخصائص التي يُشاع استخدامها في التصميم، كالمساحات مثل: الحواف الخارجية (بالإنجليزية: margin)‏ والحواف الدخلية (بالإنجليزية: padding)‏، والحدود والظلال واتجاه النص وغير ذلك، مثال:

<p class="pt-3 text-center">
    مساحة داخلية علوية بمقدار 2
</p>

المثال أعلاه سيقوم بوضع مساحة علوية داخلية (padding-top) بمقدر 3 ويجعل النص في المنتصف.

إمكانية التخصيص[عدل]

بمقدورك التخصيص والتلاعب بالخصائص التي يقدمها بوتستراب بما يناسب مزاجك[6]، من خلال تعديل مُتغيرات CSS المتاحة أو حتى إعادة الكتابة على class مُعين، وكذلك يوفر بوتستراب إمكانية تخصيص وإضافة بشكل متقدم أكثر، من خلال التعديل على الشفرة البرمجية الخاصة بإطار العمل المُعتمدة على لغة Sass وجافاسكربت.

دعم اللغات ذات الاتجاه من اليمين لليسار[عدل]

قام الإصدار الخامس من بوتستراب بشكل رسمي بدعم RTL والتي تعني right to left، أي اللغات التي تكتب من اليمين إلى اليسار كاللغة العربية والفارسية والعبرية. ويُشترط تحميل الملف التنسيق المخصص للدعم هذه اللغات، وكذلك إضافة attribute الاتجاه dir="rtl" في ملف الـHTML ليتم العرض بشكل صحيح وسليم.[7]

الاستخدام المتقدم[عدل]

ربما تجد نفسك لست بحاجة إلى كل مميزات بوتستراب، وتريد فقط استخدام بعضها، على سبييل المثال أنت فقط بحاجة إلى نظام التقسيم ولست بحاجة إلى كل بوتستراب، يوفر لك بوتستراب حلًا مُنصفًا لتوفير المساحة لضمان عرض الموقع بشكل أسرع للزوار، وذلك بتحميل وإدراج فقط الملفات التي تحتاجها من خلال تحميل ملفات مقسمة ومجهزة مسبقًا (Precompiled Bootstrap)[8]، وهي:

bootstrap/
├── css/
│ ├── bootstrap-grid.css
│ ├── bootstrap-grid.css.map
│ ├── bootstrap-grid.min.css
│ ├── bootstrap-grid.min.css.map
│ ├── bootstrap-grid.rtl.css
│ ├── bootstrap-grid.rtl.css.map
│ ├── bootstrap-grid.rtl.min.css
│ ├── bootstrap-grid.rtl.min.css.map
│ ├── bootstrap-reboot.css
│ ├── bootstrap-reboot.css.map
│ ├── bootstrap-reboot.min.css
│ ├── bootstrap-reboot.min.css.map
│ ├── bootstrap-reboot.rtl.css
│ ├── bootstrap-reboot.rtl.css.map
│ ├── bootstrap-reboot.rtl.min.css
│ ├── bootstrap-reboot.rtl.min.css.map
│ ├── bootstrap-utilities.css
│ ├── bootstrap-utilities.css.map
│ ├── bootstrap-utilities.min.css
│ ├── bootstrap-utilities.min.css.map
│ ├── bootstrap-utilities.rtl.css
│ ├── bootstrap-utilities.rtl.css.map
│ ├── bootstrap-utilities.rtl.min.css
│ ├── bootstrap-utilities.rtl.min.css.map
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap.min.css.map
│ ├── bootstrap.rtl.css
│ ├── bootstrap.rtl.css.map
│ ├── bootstrap.rtl.min.css
│ └── bootstrap.rtl.min.css.map
└── js/
    ├── bootstrap.bundle.js
    ├── bootstrap.bundle.js.map
    ├── bootstrap.bundle.min.js
    ├── bootstrap.bundle.min.js.map
    ├── bootstrap.esm.js
    ├── bootstrap.esm.js.map
    ├── bootstrap.esm.min.js
    ├── bootstrap.esm.min.js.map
    ├── bootstrap.js
    ├── bootstrap.js.map
    ├── bootstrap.min.js
    └── bootstrap.min.js.map

وصلات خارجية[عدل]

المراجع[عدل]

  1. ^ الوصول: 5 أكتوبر 2016.
  2. أ ب "Bootstrap 5.1.3". 9 أكتوبر 2021. اطلع عليه بتاريخ 27 أكتوبر 2021. الوسيط |CitationClass= تم تجاهله (مساعدة); تحقق من التاريخ في: |access-date=, |date= (مساعدة)
  3. ^ وصلة مرجع: http://getbootstrap.com/.
  4. أ ب contributors, Mark Otto, Jacob Thornton, and Bootstrap. "Introduction". getbootstrap.com (باللغة الإنجليزية). مؤرشف من الأصل في 29 يونيو 2021. اطلع عليه بتاريخ 30 يونيو 2021. الوسيط |CitationClass= تم تجاهله (مساعدة)
  5. أ ب contributors, Mark Otto, Jacob Thornton, and Bootstrap. "Grid system". getbootstrap.com (باللغة الإنجليزية). مؤرشف من الأصل في 24 يونيو 2021. اطلع عليه بتاريخ 30 يونيو 2021. الوسيط |CitationClass= تم تجاهله (مساعدة)
  6. ^ contributors, Mark Otto, Jacob Thornton, and Bootstrap. "Customize". getbootstrap.com (باللغة الإنجليزية). مؤرشف من الأصل في 26 مارس 2021. اطلع عليه بتاريخ 01 يوليو 2021. الوسيط |CitationClass= تم تجاهله (مساعدة)
  7. ^ contributors, Mark Otto, Jacob Thornton, and Bootstrap. "RTL". getbootstrap.com (باللغة الإنجليزية). مؤرشف من الأصل في 09 مايو 2021. اطلع عليه بتاريخ 01 يوليو 2021. الوسيط |CitationClass= تم تجاهله (مساعدة)
  8. ^ contributors, Mark Otto, Jacob Thornton, and Bootstrap. "Contents". getbootstrap.com (باللغة الإنجليزية). مؤرشف من الأصل في 7 أبريل 2021. اطلع عليه بتاريخ 01 يوليو 2021. الوسيط |CitationClass= تم تجاهله (مساعدة)