19 - bootstrap tutorial input group

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

مثال بسيط على ذلك
ما هي بوتستراب Bootstrap
هي إحدى أشهر وأقوى المكتبات التي تجمع HTML وCSS وJS لبناء صفحات ومواقع وتطبيقات الويب، وهي تفيد بشكلٍ أساسيٍّ في بناء مواقعٍ متناسقةٍ مع مختلف أحجام وقياسات الشاشات، بما في ذلك شاشات الهواتف الخلوية والأجهزة اللوحية، وهي مكتبةٌ مجانيةٌ ومفتوحة المصدر تتوفر للجميع على موقع Github وتم بناؤها من قبل شركة Twitter ولها.1
ميزات بوتستراب Bootstrap
انتشرت مكتبة بوتستراب Bootstrap بشكلٍ كبيرٍ منذ إطلاقها عام 2011 بشكلٍ مجانيٍّ، وأحبها المبرمجون حول العالم ولم يكن ذلك بمحض الصدفة بل وراء نجاح هذه المكتبة الكثير من الميزات الهامة ومنها:
المرونة الكبيرة والسهولة في الاستخدام.
التصميم المتوافق مع جميع الأجهزة.
تتوافق مع كافة المتصفحات.
تقدم تصميم ثابت وقابل لإعادة الاستخدام.
يمكن تعلمها بشكل سهل وسريع.
قابلية كبيرة للتوسع باستخدام لغة JavaScript.
تحوي دعمًا مسبقًا للـ JQuery.
دعم للـ API الخاصة بلغة Javascript.
يمكن استخدامها ضمن أي محررٍ أو بيئةٍ برمجيةٍ.
تتوافق مع أي تقنيةٍ أو لغة ضمن السيرفر مثل: ASP.NET – PHP – Ruby.2
محتويات المكتبة
تحوي مكتبة بوتستراب Bootstrap على مجموعةٍ من الملفات البرمجية الخاصة بالواجهات، من ملفات CSS وملفات JS وعناصر مختلفة ضمنها بالإضافة إلى بعض الخطوط والمواضيع التي تساعد على بناء موقعٍ متناسقٍ، حيث يقوم المبرمج بتضمين المكتبة في المشروع البرمجي الذي يعمل عليه ليستخدم كل تلك الملفات والميزات الموجودة فيها، ويمكن أيضًا نقلها إلى أي مكانٍ ضمن المشروع حسب الرغبة مع التأكيد على ضرورة وضع ملفات الخط في مجلد ملفات الـ CSS، وهنا الهيكل العام للمكتبة يحوي الملفات الأساسية فقط ومن الواضح أنه بسيطٌ ويشرح نفسه بنفسه
ما الذي يجعل بوتستراب Bootstrap تلائم كل شيء
بنيت مكتبة بوتستراب Bootstrap بطريقةٍ تجعلها تعمل بنفس الجودة في كل مكانٍ، ولعل أهم النقاط التي تجعلها بتلك القوة هي:
الشبكة الخاصة بمكتبة بوتستراب والتي تقوم بعملية تقسيم الشاشة (مهما كان قياسها) ليتم توزيع العناصر فيها بسهولةٍ، وهذا يوفر الكثير من الوقت الذي يقضيه المبرمجون عادةً في بناء شبكتهم الخاصة أثناء بناء الموقع، وتتيح هنا عدة خياراتٍ للأعمدة التي يمكن أن تكون صغيرةً أو متوسطةً أو كبيرةً أو كبيرةً جدًا حسب حاجة الموقع.
توفر مكتبة بوتستراب Bootstrap طرقًا مسبقةً لجعل الصور متوافقةً مع التصميم، عن طريق تحجيم الصورة بما يتلاءم مع حجم الشاشة، وذلك فقط بإضافة الكلاس img-responsive إلى الصور الموجودة في الموقع وستتولى المكتبة باقي المهمة، كما يمكن تغيير شكل الصورة عن طريق كلاساتٍ أخرى مثل img-circle و img-rounded.
تحتوي مكتبة بوتستراب عناصرَ معدة مسبقًا يمكنك ببساطةٍ استخدامها في موقعك الإلكتروني، وهي عناصرٌ هامةٌ كانت تشكل عبئًا كبيرًا على المبرمجين في السابق مثل:Navigation bars – Dropdowns – Progress bars – Thumbnails وغيرها من العناصر التي لا يمكن الاستغناء عنها والتي ستجعلك تبني تصميمًا رائعًا دون الخوف من ظهوره في مختلف قياسات الشاشات.
بالإضافة لكل التوابع الموجودة في بوتستراب فإنها تحوي الكثير والكثير من الإضافات الخاصة بالـ jQuery والتي تحوي القوة والسهولة والمزيد من المرونة في صفحات الموقع، حيث تقدم حلولًا سريعةً وقويةً لكل ما يتعلق بالصور و التنقلات و الـ modals، وعدة إضافاتٍ أخرى.
توثيق المكتبة ضمن موقعها الرسمي هو أحد أكثر الميزات المذهلة لها، حيث يمكن معرفة كل شيءٍ عنها بالتفصيل وكل ما يخص طريقة الاستخدام والعناصر الموجودة فيها، إذ يتوفر شرحٌ تفصيليٌّ لكل جزءٍ منها، بالإضافة لوجود أمثلةٍ خاصةٍ لكل جزءٍ وهو ما يهتم به المبتدئين في استخدام هذه المكتبة حيث يمكن نسخ ولصق كود أي عنصرٍ فيها ببساطةٍ.
يمكن لمستخدمي هذه المكتبة تخصيص الميزات التي يودون استخدامها حيث أن المكتبة كبيرةُ الحجم نسبيًا ويعد هذا التخصيص أمرًا هامًا في التطبيقات الكبيرة.
لدى مكتبة جمهور كبير من المبرمجين والذي يجعلها أكثر سهولةٍ حيث يجد المبتدئ كل ما يسأل عنه متوفرًا بسهولةٍ ولها أيضًا صفحة خاصة على تويتر ومدونة.
ومع تزايد انتشارها بدأ المطورون في إنشاء قوالبٍ جاهزةٍ بالاعتماد عليها لتسريع عمليات التطوير ويوجد مواقعٌ متخصصةٌ في شراء وتبادل القوالب
كما تلاحظ، لدينا btn و btn-success و btn-lg كلها ستصنع لنا زر كبير وأخضر، رأيت كم الأمر بسيط وسهل وسريع، ولا يحتاج كتابة أي كود ويوجد الكثير من الكلسات الخاصة بالازار والفورمات والنصوص والصور والتعامل مع اي عنصر تقريبًا css
والحصول على تلك الاكود من الموقع الرسمى هنا

والان الى النقطة الاهم فى اطار العمل
وهى Boostrap Grid System
نظام يقوم ببناء الموقع على هيئة صفوف واعمدة وهذا لجعل الموقع متجاوب ويمكنه العمل على جميع مقاسات الشاشات

فمثلًا تقسيمة الموقع فى الصورة هى للشاشات الكبيرة اما فى حالة التابلت او الموبيل فالشكل سيختلف
حتى تمكن قارئ المدونة من تصفح المدونة بشكل اسهل فيكون على الشكل
قواعد البوتستراب
يجب ان يكون كلاسات row داخل .container للعرض الثابت للصفحة او .container-fluid للعرض الكامل
يستخدم row لعمل مجموعة افقة من الاعمدة
المحتوي يفضل ان يوضع داخل الاعمدة فقط