في هذا المنشور سنبدأ بإنشاء موقع باستخدام Bootstrap، وهو إطار عمل مفتوح المصدر يجعل من السهل علينا جعله مستجيبًا وتزويده ببعض التفاعل. إنه قالب أساسي تم إنشاؤه تلقائيًا بواسطة مكون إضافي لبيئة التطوير أوصينا به من قبل وسيتعين علينا تعديله.
في المادة السابقة ستجد التعليمات لتثبيت VS Codium ، وترجمة واجهة المستخدم الخاصة به إلى الإسبانية وتثبيت البرنامج المساعد Bootstrap.
شيئين يجب مراعاتهما:
- الأوامر التي نستخدمها هي اختصارات لوحة المفاتيح ، عليك كتابتها. النسخ / اللصق لا يعمل.
- لا يسمح لي مدير المحتوى الخاص بنا بعرض رمز HTML ، لذا يتعين علي استخدام لقطات الشاشة. حتى تتمكن من الوصول إلى رمز الأمثلة التي قمت بتحميلها إلى جيثب.
كيفية استنساخ مستودع جيثب
ما يميز العظماء عن بقيتنا هو الطريقة التي يتفاعلون بها مع المشاكل. لم يعجب ريتشارد ستولمان برنامج تشغيل الطابعة الخاص به ، وبما أنهم لم يسمحوا له بتغييرها ، فقد بدأ حركة البرمجيات الحرة. لم يكن Linus Torvalds مقتنعًا بأي من منصات مشاركة الكود وأنشأ منصته الخاصة. شخص سخيف.
على عكس أنظمة توزيع البرامج التقليدية التي يكون فيها تفاعل المستخدم الوحيد المسموح به هو التنزيل ، مع Git يمكنك متابعة تطور المشروع بمرور الوقت. يمكن لأشخاص آخرين استنساخ المستودع وإجراء تعديلات واقتراح أن يقوم مطورو المشروع الأصلي بدمجها. في حالة الموافقة ، يمكن للمطورين القيام بذلك بسهولة دون الحاجة إلى تنزيل الملفات وإعادة تحميلها.
هناك عدة خدمات تعتمد على Git ، اخترت GitHub ببساطة لأنه يتكامل مع VS Codium.
لتنزيل نماذج الملفات على جهاز الكمبيوتر الخاص بك ، تحتاج فقط إلى تثبيت حزمة git باتباع إرشادات التوزيع الخاصة بك لتثبيت الحزم في الجهاز.
ثم تكتب الأوامر التالية.
أفضل حفظ الملفات في مجلد المستندات لذلك أقوم بتغيير الدليل باستخدام
cd Documentos
ثم أنسخ الملفات باستخدام:
git clone https://github.com/dggonzalez1971/bootstrap.git
سأذكّرك بهذه الخطوات في كل مقالة من المقالات المتبقية ، حيث ستعمل بهذه الطريقة على تحديث ملفات الأمثلة عند تحميلها.
لرؤية الملفات فقط افتح مستكشف الملفات وابحث عن المجلد التمهيد.
إنشاء موقع باستخدام Bootstrap
في حال كنت تفضل كتابة الكود يدويًا ، نبدأ بإنشاء مجلد سنحفظ فيه الموقع. يمكنك وضع أي اسم تريده.
ثم نتبع الخطوات التالية:
- دعنا نذهب إلى القائمة أرشيف.
- انقر فوق ملف نصي جديد.
- انقر فوق حفظ.
- نبحث عن المجلد الذي أنشأناه ونضع اسم الملف example1.html.
- انقر فوق حفظ.
في بعض الأحيان قد يتم إخفاء نافذة مستكشف الملفات بواسطة VSodium.
دعونا نجعل الامتداد ينشئ القالب الأساسي لنا. لهذا نكتب !b5-$
سيؤدي هذا إلى إنشاء الكود الذي ستجده في مجلد الأمثلة مثل example1.html
سوف نرى ما يلي:
هذا هو الكود الذي تم إنشاؤه بواسطة ملحق Bootstrap.
سنقوم بإجراء بعض التغييرات على هذا الملف. ستجد التعديلات تحت الاسم example2.html
- في السطر الثاني نقوم بتغيير اللغة باستبدال eng بـ es. يشير هذا لمحركات البحث إلى أن لغة الموقع هي الإسبانية.
- في السطر 6 نقوم بتغيير النص الموجود أسفل التسميات لقب. نضع أول موقع على Bootstrap.
- في السطر 12 نقوم بتغيير المحتوى بين العلامات h1 بواسطة هذا موقع تم إنشاؤه باستخدام Bootstrap.
بعد ذلك ، سنقوم ببعض التعديلات المهمة. هذه التعديلات لها علاقة بـ:
- لا يستطيع مطور البرنامج المساعد مواكبة إصدارات Bootstrap وهناك المزيد من الإصدارات الحالية.
- هناك العديد من الخيارات لمكونات التمهيد وأنا مهتم بمكونات أخرى.
- وفقًا للوثائق الرسمية ، يجب أن تكون المكالمات إلى مكتبات جافا سكريبت داخل علامات النص الأساسي.
على سبيل المثال 2 ، قمنا بتعديل محتوى السطر 7 وحذف السطران 8 و 9 وحملنا المحتوى المتبقي للحفاظ على توافق الترقيم. ثم نضغط على نهاية السطر 10 لإنشاء سطر جديد 11 ونضع الرابط إلى مكتبات جافا سكريبت.
لا تقلق إذا لم تفهم الكود. سأشرح وظيفة كل سطر في المقالة التالية.