كيفية إنشاء عدة أعمدة مستجيبة باستخدام Bootstrap 3
نشرت: 2022-02-16
هل ترغب في تحسين استجابة موقع الويب الخاص بك باستخدام Bootstrap؟ أهم جانب في Bootstrap هو نظام الشبكة المحمول الأول المكون من 12 عمودًا. هذا ما تستخدمه لإنشاء تخطيط سريع الاستجابة.
في هذا الفيديو التعليمي ، ستقوم بإنشاء موقع ويب أساسي باستخدام Bootstrap وتعلم كيفية استخدام نظام شبكة Bootstrap لإنشاء تخطيط سريع الاستجابة بأعمدة متعددة.
قبل مشاهدة البرنامج التعليمي
قبل أن تتمكن من متابعة فيديو تعليمي أدناه وتعلم كيفية إنشاء أعمدة متجاوبة خاصة بك ، سوف تحتاج إلى:
- الفهم الأساسي لماهية Bootstrap
- الفهم الأساسي لما هو نظام شبكة Bootstrap
- قم بتنزيل Bootstrap على محرك الأقراص الثابتة لديك
- قم بإنشاء ملف Bootstrap index.html أساسي للبناء عليه
ما هو Bootstrap
- Bootstrap هو إطار عمل لمطوري HTML و CSS و JavaScript الذين يعملون على استجابة مواقع الويب.
- وهو يتألف من تصميم CSS سريع الاستجابة تم إنشاؤه مسبقًا للأعمدة والقوائم والتنقل ونماذج الويب والعديد من عناصر الويب الأخرى.
فهم نظام شبكة التمهيد
- يصنف نظام شبكة Bootstrap أحجام الشاشة إلى أربعة أنواع: صغير جدًا وصغير ومتوسط وكبير.
- صغير جدًا للهواتف المحمولة. The Small للأجهزة اللوحية ، مثل I-Pad. الوسيط مخصص لشاشات سطح المكتب. والكبير مخصص فقط لشاشات سطح المكتب الأكبر حجمًا.
- لمساعدتك على ضبط الاستجابة لهذه الأنواع الأربعة من الشاشات ، يقسم Bootstrap عرض أجهزة عرض الويب إلى نظام شبكة مكون من 12 عمودًا.
- يصبح كل نوع من أنواع Bootstrap Grid الأربعة مستجيبًا فقط إذا قمت بتعيين فئة CSS المعينة له.
- على سبيل المثال ، لجعل div مستجيبًا للأجهزة الصغيرة جدًا ، يجب أن يكون لدى div فئة Bootstrap .col-xs- <number_of_columns_to_take> ، مثل <div class = "col-xs-6">.
تحميل Bootstrap
- انتقل إلى getboostrap.com وانقر فوق الزر "تنزيل Bootstrap":
- سترى صفحة "البدء". انقر فوق الزر "تنزيل Bootstrap":
- احفظ هذا الملف على القرص الصلب لجهاز الكمبيوتر الخاص بك ، في أي مكان تريده. ليس من الضروري حفظه على خادم الويب.
- قم بفك ضغط هذا الملف وإعادة تسمية المجلد المستخرج إلى "bootstrap".
الاستعداد لصفحة Bootstrap الأساسية index.html
الخطوة 1. قم بإنشاء ملف Bootstrap index.html الخاص بك
- ارجع إلى صفحة "الخطوات الأولى" (http://getbootstrap.com/getting-started/#download) وانقر على رابط "النموذج الأساسي" على الشريط الجانبي الأيمن:
- سترى رمز "النموذج الأساسي". انقر فوق الزر "نسخ" لنسخ الرمز:
- الصق رمز "القالب الأساسي" في محرر النصوص الخاص بك واحفظه كملف index.html في نفس المجلد ، حيث قمت بحفظ مجلد "bootstrap". ستصبح الآن الصفحة الأولى لموقع Bootstrap الخاص بك.
- افتح index.html الذي تم إنشاؤه حديثًا وألق نظرة على موقع Bootstrap الأساسي الخاص بك:
- افتح ملف index.html في محرر النصوص لديك وبين علامتي فتح <body> و <h1> أضف <div class = "container"> (1). أغلق هذا div الجديد بعد علامة الإغلاق </h1> (2) واحفظ الملف:
- تحقق من الواجهة الأمامية للصفحة ولاحظ كيف تظهر رسالة "Hello World!" لم يعد عالقًا في حافة الصفحة وقد تحرك الآن قليلاً إلى اليمين ، لجعلها تبدو مرتبة قليلاً. أضافت فئة "الحاوية" الخاصة بـ Bootstrap التي عينتها إلى div هذا بعض الهامش إلى هذا النص:
- ارجع إلى ملف index.html الخاص بك. بين علامتي <h1> و </ h1> ، استبدل "Hello World!" إلى "Trusthub". احفظ الملف وتحقق من الواجهة الأمامية لموقعك.
الخطوة 2. أضف بعض المحتوى وشريط جانبي
- ارجع إلى ملف index.html الخاص بك وتحت رمز <h1> Trustub </h1> قم بنسخ الكود التالي:
<div class="row"> <div> <h2>What Trusthub can do for you</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.</p> </div> <div> <h2>Our Team</h2> <p>Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus.</p> </div> </div>- العودة إلى الواجهة الأمامية لموقعك. قم بتحديثه. يجب أن تشاهد الآن المحتوى الخاص بك والشريط الجانبي "فريقنا" ، بدون تخطيط متجاوب ذي أعمدة حتى الآن:
- ارجع إلى موقع getbootstrap.com وانقر في القائمة العلوية على زر "CSS":
- في الشريط الجانبي ، انقر فوق الزر "نظام الشبكة":
- قم بالتمرير لأسفل الصفحة إلى قسم "خيارات الشبكة" (1) ولاحظ نظام شبكة Bootstrap المكون من 12 عمودًا مع أنواع أحجام الشاشات الأربعة وعرضها وبادئات فئة CSS المخصصة لها (2):
- لا تقلق إذا لم تكن خيارات نظام شبكة Bootstrap منطقية بالنسبة لك حتى الآن. سيأتي كل ذلك معًا من أجلك في ثانية عندما تبدأ في اللعب حولهم على موقعك.
- افتح ملف index.html الخاص بك مرة أخرى وتحت <div class = "row"> ، بالنسبة لـ <div> الحالية ، أدخل الفئة "col-md-9". يجب أن يبدو div الجديد الآن "div class =" col-md-9 ">:
- انتقل الآن إلى div الخاص بك ، الموجود أعلى رأس <h2> "Out Team" مباشرةً وقم بإعطائه فئة CSS لشبكة Bootstrap "col-md-3". حفظ الملف:
- ارجع إلى موقعك لترى هذا التغيير قيد التنفيذ. اضغط على مفتاح F5 بلوحة المفاتيح لتحديث موقع الويب الخاص بك. سترى الآن أن منطقة المحتوى والشريط الجانبي يجلسان جنبًا إلى جنب.
- يشغل المحتوى div الخاص بك الآن 9 من الأعمدة المتوفرة في شبكة Bootstrap ، والتي يبلغ عددها 12 عمودًا (75٪ من عرض شاشة سطح المكتب بالكامل). ويأخذ الشريط الجانبي 3 من 12 عمودًا لشبكة Bootstrap (25٪ من عرض شاشة سطح المكتب بالكامل):
متألق! أنت الآن جاهز لمتابعة الفيديو التعليمي أدناه. هيا بنا نبدأ.
تهانينا! لقد تعلمت للتو كيفية إنشاء تخطيط صفحة ويب سريع الاستجابة بأعمدة متعددة باستخدام Bootstrap. هل ترغب في معرفة المزيد عن Bootstrap؟ إذا كانت الإجابة بنعم ، يرجى زيارة قناة OSTraining على YouTube ومشاهدة "دروس إطار عمل Bootstrap".