بوتستراب

معلومات عامة
نوع	CSS framework
نظام التشغيل	متعدد المنصات
المنصة	Web engines
النموذج المصدري	حقوق التأليف والنشر محفوظة
المطور الأصلي	Mark Otto (en) ; Jacob Thornton (en)
موقع الويب	getbootstrap.com (الإنجليزية)
ضمان الجودة	إدماج مستمر
لغة البرمجة	جافا سكريبت; أوراق الأنماط المتتالية; لغة توصيف النص الفائق; ساس (لغة تنسيق صفحات الويب)
الإصدار الأول	19 أغسطس 2011
الإصدار الأخير	5.3.3 ; (20 فبراير 2024) ;
المستودع	github.com…
الرخصة	رخصة إم آي تي

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

المميزات

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

آلية عمل سهلة

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

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

تنسيقات افتراضية للمحتوى

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

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

نظام التقسيم

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

يستخدم بوتستراب نظام تقسيم شائع في الويب، وهو 12 عمودًا (Columns)^[6] بحيث تستطيع جعل العنصر يأخذ مساحة معينة من 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 ويعتبر هذا العنصر هو الحاوية، ويجب وضع التقسيم داخل الحاوية لتضمن أن نظام التقسيم سيعمل بشكل صحيح وبدون مشاكل^[6]،

ثم وبداخل الحاوية ستجد عنصرًا يحوي على class row وتعني أنك ستستخدم نظام التقسيم هنا، وclass row-cols-4 تعني أن الصف سيحوي 4 أعمدة هذا يجعل أقل مساحة ممكنة لـ class col تكون 3 أعمدة وذلك لأن أثنى عشر عامودًا تقسيم أربعة أعمدة، تساوي ثلاثة أعمدة، ${\tfrac {12}{4}}=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 ويجعل النص في المنتصف.

إمكانية التخصيص

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

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

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

الاستخدام المتقدم

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

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

وصلات خارجية

بوتستراب على موقع Free Software Directory (الإنجليزية)
الموقع الرسمي - Bootstrap

المراجع

^ ^ا ^ب الوصول: 23 فبراير 2017. وصلة مرجع: https://api.github.com/repos/twbs/bootstrap.
^ الوصول: 5 أكتوبر 2016.
^ ^ا ^ب "Release 5.3.3". 20 فبراير 2024. اطلع عليه بتاريخ 2024-02-20.
^ وصلة مرجع: http://getbootstrap.com/.
^ ^ا ^ب contributors, Mark Otto, Jacob Thornton, and Bootstrap. "Introduction". getbootstrap.com (بالإنجليزية). Archived from the original on 2021-06-29. Retrieved 2021-06-30. {{استشهاد ويب}}: |الأخير= باسم عام (help)صيانة الاستشهاد: أسماء متعددة: قائمة المؤلفين (link)
^ ^ا ^ب contributors, Mark Otto, Jacob Thornton, and Bootstrap. "Grid system". getbootstrap.com (بالإنجليزية). Archived from the original on 2021-06-24. Retrieved 2021-06-30. {{استشهاد ويب}}: |الأخير= باسم عام (help)صيانة الاستشهاد: أسماء متعددة: قائمة المؤلفين (link)
^ contributors, Mark Otto, Jacob Thornton, and Bootstrap. "Customize". getbootstrap.com (بالإنجليزية). Archived from the original on 2021-03-26. Retrieved 2021-07-01. {{استشهاد ويب}}: |الأخير= باسم عام (help)صيانة الاستشهاد: أسماء متعددة: قائمة المؤلفين (link)
^ contributors, Mark Otto, Jacob Thornton, and Bootstrap. "RTL". getbootstrap.com (بالإنجليزية). Archived from the original on 2021-05-09. Retrieved 2021-07-01. {{استشهاد ويب}}: |الأخير= باسم عام (help)صيانة الاستشهاد: أسماء متعددة: قائمة المؤلفين (link)
^ contributors, Mark Otto, Jacob Thornton, and Bootstrap. "Contents". getbootstrap.com (بالإنجليزية). Archived from the original on 2021-04-07. Retrieved 2021-07-01. {{استشهاد ويب}}: |الأخير= باسم عام (help)صيانة الاستشهاد: أسماء متعددة: قائمة المؤلفين (link)

[e123d52035c92bcb90d9cf4008227de659b133f8-1] ا ^ب الوصول: 23 فبراير 2017. وصلة مرجع: https://api.github.com/repos/twbs/bootstrap.

[da34d8c7326d071545c49ba4593f14fe2d4aef4b-2] الوصول: 5 أكتوبر 2016.

[cf5b4fcf88bc636c59a5e899862e8934f8d560b4-3] ا ^ب "Release 5.3.3". 20 فبراير 2024. اطلع عليه بتاريخ 2024-02-20.

[3ce6d335fbfa928f8494e332e9ca7dfa057d3a6c-4] وصلة مرجع: http://getbootstrap.com/.

[:0-5] ا ^ب contributors, Mark Otto, Jacob Thornton, and Bootstrap. "Introduction". getbootstrap.com (بالإنجليزية). Archived from the original on 2021-06-29. Retrieved 2021-06-30. {{استشهاد ويب}}: |الأخير= باسم عام (help)صيانة الاستشهاد: أسماء متعددة: قائمة المؤلفين (link)

[:1-6] ا ^ب contributors, Mark Otto, Jacob Thornton, and Bootstrap. "Grid system". getbootstrap.com (بالإنجليزية). Archived from the original on 2021-06-24. Retrieved 2021-06-30. {{استشهاد ويب}}: |الأخير= باسم عام (help)صيانة الاستشهاد: أسماء متعددة: قائمة المؤلفين (link)

[7] tributors, Mark Otto, Jacob Thornton, and Bootstrap. "Customize". getbootstrap.com (بالإنجليزية). Archived from the original on 2021-03-26. Retrieved 2021-07-01. {{استشهاد ويب}}: |الأخير= باسم عام (help)صيانة الاستشهاد: أسماء متعددة: قائمة المؤلفين (link)

[8] tributors, Mark Otto, Jacob Thornton, and Bootstrap. "RTL". getbootstrap.com (بالإنجليزية). Archived from the original on 2021-05-09. Retrieved 2021-07-01. {{استشهاد ويب}}: |الأخير= باسم عام (help)صيانة الاستشهاد: أسماء متعددة: قائمة المؤلفين (link)

[9] tributors, Mark Otto, Jacob Thornton, and Bootstrap. "Contents". getbootstrap.com (بالإنجليزية). Archived from the original on 2021-04-07. Retrieved 2021-07-01. {{استشهاد ويب}}: |الأخير= باسم عام (help)صيانة الاستشهاد: أسماء متعددة: قائمة المؤلفين (link)

[5]

[1]

[2]

[3]

[4]

[6]

[7]

[8]

[9]

ضمان الجودة	إدماج مستمر^[2]
لغة البرمجة	جافا سكريبت أوراق الأنماط المتتالية لغة توصيف النص الفائق ساس (لغة تنسيق صفحات الويب)
الإصدار الأول	19 أغسطس 2011
الإصدار الأخير	5.3.3 (20 فبراير 2024) ^[3]
المستودع	github.com…
الرخصة	رخصة إم آي تي^[4]