بوتستراب

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

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

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

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

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

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

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

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

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

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

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

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