بوتستراب

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

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

### آلية عمل سهلة
طريقة عمل بوتستراب تكمن بوضع **class attribute** على عنصر HTML، وبمجرد أن تقوم بربط ملفات بوتستراب بصفحة HTML خاصتك ستتمكن من استخدام العديد من التنسيقات الجاهزة ويحوي التوثيق الرسمي على أسماء الـ **classes** وطريقة عملها مع بعضها. فعلى سبيل المثال تستطيع تغير **لون خلفية العنص**ر و*لون النص داخله* بإضافة **bg-dark** و***text-white*** كما هو موضح في المثال أدناه:
```html
<section class="bg-dark text-white">
    <p>ويكيبيديا العربية</p>
</section>
```


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

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

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

**يستخدم بوتستراب نظام تقسيم شائع في الويب، وهو 12 عمودًا (Columns)** بحيث تستطيع جعل العنصر يأخذ مساحة معينة من 12 عامودًا المتاحًا، ويتموضع في مكان مُعين، يحوي التوثيق الرسمي لبوتستراب شرحًا وافيًا عن كيفية استخدام نظام التقسيم هذا لوضع العناصر بموضع معين بالصفحة، مثال:
```html
<div class="container">

  <div class="row row-cols-4">
    
        <div class="col">أنا</div>
        <div class="col">أحب</div>
        <div class="col-6">ويكيبيديا العربية</div> 
        <div class="col">كثيرًا</div>
    
  </div>

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

ثم وبداخل الحاوية ستجد عنصرًا يحوي على **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** تحوي على بعض الخصائص التي يُشاع استخدامها في التصميم، كالمساحات مثل: **الحواف الخارجية**  **والحواف الدخلية** **، والحدود والظلال واتجاه النص** وغير ذلك، مثال:
```html
<p class="pt-3 text-center">
    مساحة داخلية علوية بمقدار 2
</p>
```
المثال أعلاه سيقوم بوضع مساحة علوية داخلية (**padding-top**) بمقدر 3 ويجعل النص في المنتصف.

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

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

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

## المراجع

تصنيف:التصميم المستجيب لمواقع الويب
تصنيف:برمجيات 2011
تصنيف:برمجيات تستخدم رخصة إم آي تي
تصنيف:برمجيات حرة بلغة جافا سكريبت
تصنيف:تصميم الويب
تصنيف:تطوير الويب
تصنيف:تويتر
تصنيف:لغات برمجة
تصنيف:لغة تأشير النص الترابطي
تصنيف:مكتبات جافا سكريبت
تصنيف:ويب موبايل