حزام على الأحذية الخاصة بك،
ودعونا نبدأ مع Bootstrap.
أنا متأكد من أن أصابعك حكة للحصول على يديك حول Bootstrap.
لذلك، الخطوة الأولى، انتقل إلى
تعليمات التمرين التي تتبع هذا الفيديو
في صفحة دورة Bootstrap على Coursera.
ثم في التعليمات،
سترى رابطا لهذا الملف Bootstrap4-starter.zip.
قم بتنزيل ملف zip إلى جهاز الكمبيوتر الخاص بك.
أيضا،
سيتم أيضا إعطاء التعليمات خطوة بخطوة التي يتم توضيحها في هذا الفيديو في تعليمات التمرين التي تتبع هذا الفيديو.
هناك، سيكون لديك حق الوصول إلى أي من مقتطفات الشفرة التي تحتاجها لهذا التمرين.
و سيكون هذا هو الحال بالنسبة لجميع التدريبات في المستقبل أيضا.
لذا، إذا كنت بحاجة إلى الحصول على مقتطفات الشفرة،
فهذا هو المكان الذي ستجدها فيه.
بمجرد تنزيل ملف zip، قم
بنقل ملف zip هذا إلى موقع مناسب على جهاز الكمبيوتر الخاص بك.
لذا، هنا، قمت بنقله إلى مجلد اسمه كورسيرا على جهاز الكمبيوتر الخاص بي،
وبعد ذلك لدي ملف مضغوط مع هذا الاسم الطويل هناك.
فقط قم بفك ضغط الملف
بمجرد فك ضغط الملف،
ستجد مجلدًا باسم Bootstrap4 تم إنشاؤه في جهاز الكمبيوتر الخاص بك.
داخل المجلد Bootstrap4،
سترى مجلد آخر اسمه الارتباك، هناك.
انتقل إلى مجلد الارتباك وسترى ملفين هناك،
index.html وملف package.json.
الآن، افتح إطار أوامر أو
محطة طرفية ثم انتقل إلى هذا المجلد في إطار الأوامر أو المحطة الطرفية.
في موجه الأوامر، اكتب npm install.
لاحظ أن لدي بالفعل ملف package.json هناك.
لذلك يتم تكوين ملف package.json بحيث يتم تثبيت
تبعية تطوير خادم lite-إذا قمت بكتابة تثبيت npm.
لذا، بمجرد كتابة تثبيت npm،
سترى أنه سيتم تثبيت خادم lite-في مجلد node_modules لكل منهما.
بمجرد اكتمال ذلك،
افتح هذا المجلد في المحرر المفضل لديك.
بمجرد فتح المجلد في المحرر الخاص بك،
قم بإنشاء ملف.gitignore
ثم ضع node_modules في ملف gitignore وحفظه.
لذلك هذا هو التأكد من أنه عند القيام gitcommit،
لن يتم الالتزام مجلد node_modules.
بعد ذلك، حان الوقت للذهاب وجلب Bootstrap للاستخدام في مشروعنا.
قبل أن نجلب Bootstrap
، دعنا نفعل الالتزام بالحالة الحالية للملف.
لذلك، قم بـ git init وتهيئة مستودع git الخاص بك.
ثم يمكنك التحقق من حالة git،
وسترى أن هذه الملفات تحتاج إلى الالتزام بها،
إضافة جميع الملفات،
gitcommit -m «الإعداد الأولي».
إذن هذه هي نقطة البداية للمجلد الخاص بك في هذه اللحظة.
لذلك، مع هذا، تم الآن التزام نقطة البداية لمشروع الويب الخاص بك إلى git.
الآن يمكنك إعداد هذا git لمزامنة مع مستودع عبر الإنترنت،
تمامًا كما تحدثنا عنه في تمارين git.
لذلك يمكنك إعداد مستودع إما على Bitbucket أو على Github ثم
مزامنة هذا المشروع إلى مستودع git هذا.
خطوتنا التالية هي الذهاب وجلب Bootstrap.
للقيام بذلك، أضف نوع المطالبة npm تثبيت bootstrap @4 .0.0 وأيضًا -
save، والسماح بتثبيت Bootstrap.
بمجرد تثبيت Bootstrap،
ندرك أننا بحاجة أيضًا إلى تثبيت نظير له،
وهو jQuery بالإضافة إلى Popper.js.
لذلك دعونا المضي قدما وتثبيت كل من مسج و Popper.js في هذا المجلد المشروع.
لذلك، للقيام بذلك، إضافة نوع المطالبة npm تثبيت
jquery @3 .3.1
و Popper.js @1 .12.9 —حفظ.
الآن، كلما قمت بتثبيت أي من حزم npm،
أقوم بتحديد إصدار الحزمة التي يجب عليك تثبيتها بشكل صريح.
والسبب في ذلك هو أنني أريد أن أتأكد من أنه كما تذهب من خلال هذا التمرين،
فإن جميع الخطوات تعمل بشكل صحيح.
لذلك أنا تحديد الإصدار الدقيق من وحدات npm ليتم تثبيتها.
لذلك، هنا، نحن تثبيت الإصدار مسج 3.3.1 و Popper.js الإصدار 1.12.9.
وفي وقت لاحق، أيضا، سأحدد الإصدارات الدقيقة من الوحدات التي سيتم تثبيتها.
لذلك دعونا المضي قدما وتثبيت هذه.
وبمجرد تثبيتها،
يمكننا الذهاب إلى الخطوة التالية.
بالعودة إلى مجلد مشروعنا،
سترى أنه إذا ذهبت إلى node_modules،
سترى مجلدًا هناك يدعى Bootstrap.
وداخل المجلد المسمى Bootstrap،
ستجد مجلدًا باسم dist.
لذلك، داخل مجلد dist،
ستجد مجلدين فرعيين باسم CSS و js.
إذا ذهبت إلى مجلد CSS،
فستجد مجموعة كاملة من ملفات CSS precompiled هنا.
واحد الذي يهمنا في البداية هو بوتستراب min.css.
هذا هو الملف الذي سنقوم بتضمينه
في ملف index.html الخاص بنا من أجل الاستفادة من Bootstrap في مشروعنا.
وبالمثل، بالذهاب إلى مجلد js،
سترى أن هناك ملف min.js Bootstrap.
سنقوم بتضمين ذلك أيضًا في index.htm الخاص بنا.
لذا ستكون هذه الخطوة التالية التي ستروني أقوم بها
قبل أن نذهب إلى الخطوة التالية،
دعونا نبدأ لدينا ليت الخادم حتى نتمكن من رؤية التغييرات التي نجريها
على index.html تنعكس على الفور في صفحة الويب لدينا في الوقت الحقيقي.
لذلك دعونا نبدأ خوادم لايت.
لذا، اكتب نوع المطالبة npm start،
ومن ثم يجب أن يبدأ تشغيل خادم lite-server الخاص بك.
يمكنك الآن أن ترى، على الشاشة،
محرر بلدي على اليسار والإصدار الحالي من صفحة index.html على اليمين.
لذلك، كما ترون،
لقد قمت بالفعل بتكوين صفحة index.html مع بعض المحتوى.
تبدو صفحة الويب هذه كصفحة الويب النموذجية لأستاذ علوم الكمبيوتر.
دعونا الآن فتح صفحة index.html في المحرر لدينا.
ثم في الجزء الرئيسي من صفحة index.html،
مباشرة قبل العنوان،
وأنا ذاهب للصق في قليلا من التعليمات البرمجية.
يتم إعطاء مقتطف الشفرة هذا في التعليمات.
لذلك يمكنك ببساطة نسخ ولصق مقتطف الشفرة هذا،
وسأمشي إليك خلال ما يحاول مقتطف الشفرة هذا القيام به.
ستلاحظ أن لدي ثلاث علامات وصفية هنا.
أول واحد يقول charset = «utf-8".
لذلك هذا هو ونيكود الذي سيتم استخدامه.
السطر الثاني الذي يقول meta name = «viewport»،
سأعود وشرح هذا الخط الخاص
لك في الدرس التالي عندما سننظر في تصميم الويب المتجاوب.
الآن، اسمحوا لي أن ألفت انتباهكم إلى هذا الخط بالذات الذي
يقول الرابط rel=« stylesheet»، ثم href.
لاحظ أنني أحدد href باسم «node_modules/bootstrap/dist/css/bootstrap.min.css».
لذلك ما أقوم بتحديده هو أن ملف bootstrap.min.css،
الذي يحتوي على فئات CSS المقابلة لـ Bootstrap التي قمنا
بتنزيلها باستخدام الآلية الوقائية الوطنية إلى مجلد node_modules الخاص بنا،
سأقوم بتضمين ذلك في رأس صفحة index.html الخاصة بي.
لذلك تحتاج إلى تضمين فئات CSS التي يوفرها Bootstrap.
تحتاج أيضًا إلى تضمين فئات JavaScript التي يوفرها Bootstrap،
والتي سنقوم بها في أسفل هذه الصفحة.
الذهاب إلى أسفل هذه الصفحة، لاحظ،
قبل علامة النص الختامي مباشرة،
سأقوم بلصق الشفرة لتضمين جميع البرامج النصية هناك.
لذلك، للقيام بذلك،
أنا فقط لصق في ثلاثة أسطر للبرنامج النصي لتشمل مسج،
Popper.js، وأيضا بوتستراب min.js.
ولاحظ الترتيب الذي قمت بتضمين هذا.
لذا فإن Bootstrap في الأسفل.
ثم، بما أن Bootstrap يعتمد على كل من jQuery و Popper بهذا الترتيب،
لذلك سأقوم أولاً بإدخال jQuery.
ثم بعد ذلك، ونحن إدخال بوبر، ثم أخيرا،
بوتستراب min.js في الجزء السفلي من ملف index.html.
الآن، يتم تضمين هذا في أسفل الصفحة.
لأنه عندما تقوم بتحميل الصفحة من خادم ويب،
فأنت تريد تحميل فئات CSS على الفور بحيث تبدأ الصفحة في العرض،
عندما يتم جلب JavaScript،
يجب تنفيذ JavaScript من أجل إجراء تغييرات
على صفحتك باستخدام شفرة JavaScript، سوف يستغرق قليلا من الوقت.
لذلك لا تريد أن ينتظر المستخدم
تحميل الصفحة بأكملها قبل أن يرى شيئًا في نافذة المتصفح الخاصة به.
لهذا السبب نقوم عادة بتحميل فئات جافا سكريبت
في نهاية صفحة html الخاصة بنا قبل تقنية الجسم مباشرة.
بعد إجراء هذه التغييرات،
دعنا نحفظ الملف.
الآن، السبب في أنني عرض
ملف index.html في المحرر الخاص بي وكذلك المتصفح بجانبه هو،
لحظة حفظ التغييرات التي قمت بها على ملف index.html،
لاحظ كيف يتم
تحديث المتصفح لهذا الملف على الفور وانظر Bootstrap بالفعل في العمل على الصفحة.
في الوقت الحالي، سترى أن صفحتك تستخدم Times New Roman لعرض كل المحتوى.
لحظة حفظ صفحة الويب،
لاحظت أن الخطوط المستخدمة على صفحة الويب الخاصة بك قد تغيرت.
الآن، يتم إعداد صفحة الويب الخاصة بك للاستفادة من فئات Bootstrap،
ويستخدم الطباعة الافتراضية Bootstrap لعرض كل المحتوى.
Bootstrap بشكل افتراضي يستخدم Helvetica Neue للخط.
يمكنك تغيير الخط الافتراضي لـ bootstrap وما إلى
ذلك، ولكن ذلك سيكون خارج نطاق مناقشتنا الآن.
لذلك، بمجرد إعداد صفحة index.html الخاصة بك وحفظها،
سترى على الفور Bootstrap القادمة إلى العمل في صفحة الويب الخاصة بنا.
إذن هذه هي الطريقة التي سأستمر بها في التوضيح،
حيث نضيف العديد من برامج التمهيد، وفصول CSS،
والمكونات إلى صفحة الويب الخاصة بنا،
وكيف سيستمر عرض ذلك في متصفحنا في التغيير.
الآن، من الواضح أن عرض الصفحة في متصفحنا لا يزال رهيبا.
انها أفضل من صفحة أساتذة علوم الكمبيوتر النموذجية على شبكة الإنترنت،
ولكن بالتأكيد ليست قابلة للقراءة.
نحن بحاجة الآن إلى تحقيق مختلف فئات CSS
ومكونات جافا سكريبت التي
يوفرها إطار واجهة المستخدم على الويب Bootstrap من أجل تصميم صفحة الويب الخاصة بنا.
ول ذلك سنفعل ذلك خطوة خطوة و نحن نمر بهذا التمرين.
قد يكون هذا وقتًا مناسبًا لك لإجراء التزام git
بالتغييرات التي قمت بها بحيث يتم
حفظ حالة مجلد مشروعك في مستودع git الخاص بك في نهاية هذا التمرين.
الذهاب إلى مجلد الارتباك الخاص بي في علامة تبويب أخرى من نافذة المحطة الطرفية الخاصة بي
، إذا قمت بكتابة حالة git،
أرى الآن أنه تم تعديل ملف index.html وحزمة ملف JSON.
لذلك أنا ذاهب للقيام الالتزام.
لذا، الآن،
تم التزام حالتي للمجلد في نهاية هذا التمرين بمستودع git الخاص بي.
يمكنك مزامنة ذلك مع مستودع الإنترنت الخاص بك بحيث
سيتم حفظ حالة المشروع الخاص بك في هذه المرحلة.
مع هذا، نكمل أول تمرين Bootstrap لدينا.
لقد رأيت الآن كيف يمكننا تكوين Bootstrap لاستخدامها في مشروع الويب الخاص بنا.
ونحن ننتقل إلى التدريبات القليلة القادمة،
ونحن في طريقنا إلى الموظفين الطبقات بوتستراب لتصميم صفحات الويب لدينا.