بوتستراب

آلية عمل سهلة

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

ويكيبيديا العربية

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

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

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

نظام التقسيم

• <!--بداية الحاوية-->
• <!--بداية نظام التقسيم-->
• أنا
• أحب
• ويكيبيديا العربية <!--سيأخذ 6 أعمدة-->
• كثيرًا
• <!--نهاية نظام التقسيم-->

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

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

مساحة داخلية علوية بمقدار 2

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

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

علاوةً على ذلك، ربما تجد نفسك لست بحاجة إلى كل مميزات بوتستراب، وتريد فقط استخدام بعضها، على سبييل المثال أنت فقط بحاجة إلى نظام التقسيم ولست بحاجة إلى كل بوتستراب، يوفر لك بوتستراب حلًا مُنصفًا لتوفير المساحة لضمان عرض الموقع بشكل أسرع للزوار، وذلك بتحميل وإدراج فقط الملفات التي تحتاجها من خلال تحميل ملفات مقسمة ومجهزة مسبقًا (Precompiled Bootstrap)، وهي: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
• وصلات خارجية
• الموقع الرسمي - Bootstrap

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

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

عناصر جاهزة

وحدات مساندة (Utilities)

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

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

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

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

المميزات

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

<!--نهاية الحاوية-->

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

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