تعرف على إطار العمل Bootstrap بوتستراب

تعرف على إطار العمل Bootstrap بوتستراب

Bootstrap بوتستراب
Bootstrap بوتستراب

يعد Bootstrap إطار عمل Framework متكامل مبني على CSS و جافاسكريبت JavaScript يُستخدم لتنسيق صفحات الويب وإكسابها نواح جمالية بدون الحاجة إلى استخدام تنسيقات معقدة من CSS.

يدعم Bootstrap مبدأ Mobile First Style، وهو ما يعني التوافق العالي مع الأجهزة المحمولة ذات الشاشات الصغيرة.

تعرفنا في الدروس السابقة على بعض الأساسيات المتعلقة بالويب بشكل عام ,ولغات مثل HTML و CSS وهي في الحقيقة مجرد أمور بسيطة للغاية تقدم فكرة ومسار يمكن إتباعه من أجل تطوير مهاراتك , حيث كما سبق فمن  أجل تطوير مستواك يحتاج الأمر إلى إجراء الكثير من التجارب وقراءة التوثيق من أجل التعرف على المزيد.

يعد هذا الإطار واحد من أشهر وأقوى أُطر العمل التي تجمع بين (HTML) و(CSS) و (JavaScript) لبناء صفحات ومواقع وتطبيقات الويب.

ماهو بوتستراب ؟

هو ببساطة إطار عمل أو مكتبة تحتوي على بعض التصاميم والخصائص الجاهزة التي يمكنك الإععتماد عليها واستخدامها في موقعك , يحتوي بوتستراب على تنسيقات جاهزة مصممة ومطورة وفق المعايير العالمية , حيث يحتوي على أكواد css و JavaScript , حيث يجعل الموقع متوافق بشكل كامل مع أغلب الشاشات وخصوصا شاشات الهواتف الذكية , لهذا فإن إستخدام بوتستراب خيار جيد من أجل بناء موقع حديث وقوي.

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

طريقة إستخدام بوتستراب

يمكنك استخدام إطار عمل بوتستراب عن طريق الدخول إلى الموقع الرسمي , ثم تحميل نسخة إطار العمل , تأكد قبل ذلك من إنشاء مجلد جديد وقم بإعطائه مثلا الإسم Newproject الأن قم بتحميل نسخة بوتستراب من الموقع الرسمي , طبعا بعد التحميل ستحصل على ملف مضغوط يحمل الإسم Bootstrap-4,3,1-Dist .

أترك الملف المضغوط الآن واذهب الأن إلى المجلد قمت بإنشائه سابقا والذي يحمل الإسم Newproject داخل المجلد قم بإنشاء ملف index.html قم بفتح الملف من خلال محرر النصوص Atom أو أي محرر نصوص تفضله , وقم بإنشاء الهيكل الأساسي لصفحة HTML.

الأن قم بالدخول الى الملف المضغوط Bootstrap-4,3,1-Dist قم بفك الضغط عنه سينتج ملف بنفس الإسم , قم بالدخول له وستجد مجلدين واحد يحمل الإسم CSS والأخر JS الذي يهمنا في هذه المرحلة هو CSS قم بالدخول له والبحث عن ملف bootstrap.css قم بنسخ هذا الملف ولصقه داخل المجلد الذي نعمل عليه , أي الملجد Newproject قم الآن بالعودة إلى ملف index.html وقم بربط الملف مع css الذي قمنا بنسخ من الملف الذي قمنا بتحميله من موقع بوتستراب, لربط css بصفحة html يمكننا اتباع الطريقة المعروفة وهي كالتالي :

   <link rel="stylesheet" href="bootstrap.css">

بهذا تكون قد قمت بربط صفحة HTML مع ملف bootstrap.css الذي يحتوي على أكواد بوتستراب , الأن وحتى نتأكد أن عملية الربط تمت بنجاح سنقوم بتجربة بسيطة على مرحلتين , أولا سنقوم بإضافة نص وزر للنقر عليه على هذا الشكل

<h1>ما هو إطار عمل بوتستراب ؟</h1>
<button type="button" > مرحبا</button>

قم بمعاينة ما قمنا به حتى الأن من خلال المتصفح , ستلاحظ نص تحته زر بسيط لا يحتوي على أي تنسيقات مميزة , الآن الذي سنقوم هو أننا سنضيف للزر كلاس من بوتستراب “class” وهو الذي سيمكننا من إستدعاء التنسيقات الخاصة بإطار العمل بوتستراب , وسنقوم بهذا على هذا الشكل :

<h1>ما هو إطار عمل بوتستراب ؟</h1>
<button type="button" class="btn btn-primary" > مرحبا</button>

من المفترض الأن بعد إضافة الكلاس “btn btn-primary” إلى الزر أن يحدث تغيير في شكل الزر , وهذا يعني أن عملية ربط CSS بوتستراب بصفحة HTML قد تمت بنجاح.

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

 

 

مثلا إن كنت تريد إستخدام الأزرار , تستطيع من خلال صفحة التوثيق إختيار Buttons ثم نسخ الكود الخاص بالزر أو فقط الكلاس الخاص به , ووضع في المكان المناسب في صفحة HTML.

نسعى دائما لتقديم كل ماهو ممتع لكم فاتمنى ان نكون عند حسن ظنكم جميعا.

فارجو دعمنا وتشجيعنا على تقديم الافضل بمشاركة الموضوع مع اصدقائكم على مواقع التواصل الاجتماعى فيس بوك تويتر عن طريق ازرار المشاركة اسفل التدوينة.

وترك تعليق داخل صندوق التعليقات تشجيعاُ لنا كل الود والاحترام لكم والى اللقاء فى تدوينة اخرى من تدوينات مدونة الشهادة .

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *