في المحاضرة السابقة، رأينا عدة طرق للكشف عن المحتوى للمستخدمين.
لذلك، سيكون هذا تراكب أعلى
صفحة الويب الخاصة بك لإظهار المعلومات للمستخدمين.
لذا، سنلقي نظرة على اثنين من هذه النهج،
تلميحات الأدوات و الوسائط في هذا التمرين.
أولاً، سنضيف تلميح الأدوات إلى هذه الصفحة.
لذلك، والذهاب إلى index.html وفي Jumbotron،
ونحن نرى هذا الزر في Jumbotron هناك.
إلى هذا الزر، سأقوم بإضافة تلميح الأدوات.
حتى الذهاب إلى هذا الزر،
ما سأفعله الآن هو ببساطة الذهاب إلى السطر التالي
بحيث يكون أكثر وضوحا قليلا لكتابة التعليمات البرمجية هناك وفي هذا الزر،
وأنا ذاهب لتقديم تلميح الأدوات هنا.
لذلك، بعد تحذير الزر، أود أن أقول،
البيانات تبديل تلميح الأدوات، حتى تتمكن من رؤية أن
مكون جافا سكريبت يدخل حيز الاستخدام هنا ومن ثم البيانات html-true.
لذا، إذا قمنا بتطبيق سمة HTML هذه البيانات وأرسلتها إلى true،
فهذا يعني أنه يمكن تصميم محتوى تلميح الأدوات باستخدام
HTML ومن ثم سيقولون السطر التالي،
سأعطي سمة العنوان.
لذلك، هذا هو المكان الذي سيتم إرفاق محتويات تلميح الأدوات.
لذلك سوف نقول «أو الاتصال بنا على».
لذلك، يمكنك أن ترى أنني أستخدم HTML
لتنسيق محتويات تلميح الأدوات هناك.
لذلك مع ذلك، يتم إدخال تلميح الأدوات في الزر هناك وأيضا السمة الأخيرة
سأعطيها هو وضع البيانات التي سأعطيها أسفل هنا.
لذلك، وهذا يعني أن هذا تلميح الأدوات سوف تظهر إلى أسفل هذا الزر هنا.
بعد إضافة هذا في الزر،
سنذهب الآن وإضافة
بعض شفرة جافا سكريبت إلى أسفل هذه الصفحة من أجل تنشيط تلميح الأدوات هذا.
الذهاب إلى أسفل الصفحة،
اسمحوا لي أن أعرض البرنامج النصي هناك عن طريق إضافة في علامات البرنامج النصي.
داخل هذا، سوف نحدد شفرة جافا سكريبت الفعلية هنا.
لذلك سوف نقول وثائق الدولار.
لذلك، هذا البرنامج النصي هو في استخدام بناء جملة jQuery هنا.
لذلك، يحدد هذا عندما يكون المستند جاهزًا،
عندما يكون مستند HTML هذا جاهزًا
للعرض وتحديد استدعاء هذه الوظيفة المعينة هنا.
لذلك، نحن توريد وظيفة جافا سكريبت ليتم
استدعاؤها في هذه المرحلة لذلك سنقوم بتحديد وظيفتنا وبعد ذلك سنقول
بين قوسين البيانات تبديل تلميح الأدوات وتلميح الأدوات.
لذلك، هذا هو الرمز الذي سنقوم بتقديمه في هذه الصفحة هنا.
هذا في بناء جملة jQuery وسنغطي jQuery أكثر قليلاً في الوحدة التالية.
في الوقت الحالي، هذا هو تحديد أنه أينما كانت هناك سمة من
هذا النوع لعلامة HTML معينة،
قم بتشغيل تلميح الأدوات.
لذلك، ولكن هذا التغيير سيوفر التغييرات
ثم انتقل وإلقاء نظرة على كيفية ظهور تلميح الأدوات على صفحة الويب.
الذهاب إلى صفحة الويب،
والآن عندما نحمل مؤشر الماوس على النمط هنا،
يمكنك أن ترى أن تلميح الأدوات يتم عرضه في الأسفل هنا.
لذلك، يمكنك ملاحظة أن محتوى تلميح الأدوات هذا هو
بالضبط ما قدمناه كسمة عنوان لهذا القاع هناك.
لذا، هذه هي الطريقة التي يمكننا بها إضافة تلميحات إلى صفحتنا.
تلميحات الأدوات هي طريقة لطيفة لتوفير بعض المعلومات الإضافية
للمستخدم عندما ينتقل المستخدم إلى مواقع مختلفة على الصفحة.
الاستمرار في التمرين، في الخطوة التالية،
سنقوم بإنشاء مشروط في صفحة الويب الخاصة بنا.
سيستضيف هذا المشروط نموذج تسجيل الدخول وسيتم عرضه باستخدام رابط في شريط التنقل الخاص بهم.
لذلك، للبدء،
ينصح bootstrap بوضع جميع التعليمات البرمجية ذات الصلة المشروطة في الجزء العلوي من صفحتك.
لذلك، أنا ذاهب للذهاب في والكتابة أدناه نافبار هنا،
وأنا ذاهب لوضع في التعليمات البرمجية لمشروط هناك.
لذلك لإنشاء مشروط،
سأبدأ بقول div ID تسجيل الدخول مشروط.
لذلك، نعطي معرفًا لهذا المشروط بحيث يمكن تشغيله من
رابط navbar ثم الطبقة كـ «تتلاشى مشروط».
لذلك ترى أن الطبقة مشروط وتتلاشى يعني
أنه عندما يتم جلب مشروط على الشاشة،
فإنه سوف تتلاشى على الشاشة والدور هو كمربع حوار.
لذلك، مما يعني أنه يتم عرضه على أعلى الصفحة.
دعونا نغلق div من الجزء.
حتى داخل هنا، ونحن في طريقنا إلى إنشاء مشروط.
لذلك، في هناك، سأقوم بإنشاء div الثاني مع الفصل كمربع حوار مشروط ثم في
الداخل هنا سوف نحدد محتوى
الوسائط الفعلية هنا ونغلق div.
وهكذا، وهذا هو أن يكون محتوى مشروط سيتم تنظيمه هنا.
لذلك، داخل هذا الحوار المشروط سنقوم بإنشاء div آخر مع
محتوى مشروط الفئة
وإغلاق div وسيحتوي مشروط نموذجي على رأس مشروط.
لذلك، هذا هو المكان الذي ستستضيف فيه div التالي.
ثم هيئة مشروط
التي سوف تحتوي على الكثير من المحتوى ذات الصلة مشروط.
كل هذه الأقسام من الوسائط اختيارية،
ولكن على الأقل يجب أن يكون لديك قسم واحد من هذا القبيل في مشروط الخاص بك
وإلا فإنه لا معنى لإنشاء مشروط هناك.
لذلك، مع هذا، فإن هيكل مشروط جاهز الآن.
لذلك، نحن ذاهبون للذهاب في وملء المحتوى في هذا مشروط.
حتى الآن، نحن بحاجة إلى تحديد ما يذهب إلى مشروط.
الآن، في الرأس نحن ذاهبون لوضع في زر،
عبر زر في مشروط والتي عند النقر عليها سوف رفض مشروط.
هذه هي الطريقة المعتادة التي تم بها تصميم الوسائط.
وسيحتوي الجسم المشروط نفسه على النموذج.
الآن، يمكن أن يحتوي المشروط على أي شيء تريده، لذلك
على سبيل المثال، إذا
قمت بالنقر فوق صورة في معرض الصور وتريد إظهار الحجم الأكبر للصورة،
حتى هناك يمكنك استخدام مشروط لعرض المعلومات.
الآن في هذا التمرين،
سنقوم باستخدام الوسائط لاستضافة نموذج يظهر للمستخدم.
حسنا، الآن، في رأس مشروط،
ونحن ذاهبون لتقديم زر مع
زر نوع والطبقة إغلاق.
لذلك، ترى أن هذا هو الزر الذي يستخدم لإغلاق مشروط ومن ثم سوف تقول،
رفض البيانات ثم مشروط.
لذلك، ما يعنيه هذا هو أن هذا الزر معين
عند النقر عليه سوف يرفض مشروط من الشاشة.
وهذا الزر، وأنا ذاهب لاستخدام الأوقات،
وسوف تظهر كالصليب في الوسائط هنا.
لذا أود أن أقول مرات هنا
قبل هذا الزر، سنقوم بتقديم
رأس سنعرضه في رأس الوسائط لذلك
سأبدأ بـ h4 مع عنوان مشروط للفئة.
ثم داخل هذا h4،
وسوف تشمل عنوان مشروط،
وهو تسجيل الدخول لأن هذا سوف تظهر نموذج تسجيل الدخول.
الآن بعد أن وضعنا بعض التفاصيل في هذا المشروط،
دعنا نضيف الرابط إلى شريط التنقل الخاص بنا والذي
سيؤدي إلى تشغيل هذا المشروط ومن ثم
سنلقي نظرة سريعة على كيفية ظهور الوسائط على الشاشة.
الذهاب إلى شريط التنقل،
مباشرة بعد أول هنا،
وأنا ذاهب إلى تضمين في
رابط التي يمكن استخدامها لتحريك إظهار وإخفاء مشروط.
لذلك للقيام بذلك، سوف أذهب في واستخدام فترة مع نص نافبار الطبقة.
هذا ما يسمح لي بتضمين رابط في شريط التنقل وإظهاره كنص.
لذلك، داخل الامتداد،
سأستخدم A مع تبديل البيانات،
حتى تتمكن من رؤية تبديل بيانات جافا سكريبت القادمة
وتبديل البيانات هو لهدف مشروط ثم هدف البيانات.
تتذكر أننا قد أعطينا المعرف كمشروط تسجيل الدخول إلى مشروط-
مشروط الذي قمنا بتضمينه.
لذلك، سأستخدم ذلك كهدف بياناتي مع التجزئة أمام ذلك.
وداخل هنا، وسوف أذهب في واستخدام
رمز الخط رهيبة لتسجيل الدخول.
لذلك، هذا هو الخط رهيبة «فا تسجيل الدخول»
رمز ويقول تسجيل الدخول وإغلاق التكنولوجيا الإلكترونية.
لذلك مع ذلك، دعونا حفظ التغييرات ونلقي نظرة على صفحة الويب.
الذهاب إلى صفحة الويب الخاصة بنا في المتصفح،
ترى الآن أنه على الحافة اليمنى،
ترى تسجيل الدخول هذا مع هذا الرمز الذي تم إنشاؤه هناك.
لذلك هذا هو الرابط الذي سيؤدي إلى عرض الوسائط.
حتى إذا قمت بالنقر على هذا الرابط،
ثم مشروط سوف تظهر على الشاشة.
لذلك لاحظ أنه عندما أنشأنا هذا مشروط قلنا،
رأس الذي يحتوي على تسجيل الدخول ثم أيضا هذا الزر ثم الجسم،
فارغة حاليا، ونحن في طريقنا لتقديم المزيد من التعليمات البرمجية في هناك.
الآن إذا قمت بالنقر فوق هذا الزر سوف تختفي مشروط.
انقر على ذلك مرة أخرى، يتم عرض مشروط.
حتى إذا قمت بالنقر فوق خارج مشروط، سوف تختفي مشروط.
لذلك هذا هو سلوك المشروط الذي وصلنا إلى توقعه.
الآن، في الخطوة التالية أنا ذاهب للذهاب في وتقديم النموذج هنا.
لن أشرح تفاصيل النموذج لأنك قد
درست بالفعل النماذج في أحد الدروس السابقة.
لذلك أنا مجرد الذهاب ببساطة في ولصق رمز النموذج
وبعد ذلك سوف نلقي نظرة على النموذج في مشروط هنا.
العودة إلى التعليمات البرمجية،
يمكنك الآن أن ترى أنه في الجسم مشروط،
لقد ملأت في نموذج.
ثم لدي مجموعتين نموذجيتين هنا مع إدخال مع نوع البريد الإلكتروني
وكلمة مرور نوع الإدخال ثم لدي مربع اختيار هنا لدي.
لذا، يجب أن يكون هذا سهلاً بالنسبة لك لفك شفرة ما هو هذا النموذج،
من فهمك لكيفية تصميم نماذج Bootstrap.
لقد وضعت في اثنين من الأزرار.
واحد هو زر إرسال وآخر هو زر إلغاء.
يحتوي زر الإلغاء على الزر الأول.
يحتوي زر الإلغاء هنا على نموذج رفض البيانات.
مما يعني أنه عند النقر على زر الإلغاء، سيتم رفض النموذج.
والآخر هو زر الإرسال الذي يستخدم لتقديم النموذج.
لذلك مع هذه التغييرات،
دعونا حفظ التغييرات ومن ثم الذهاب وإلقاء نظرة على صفحة الويب لدينا.
بالعودة إلى صفحة الويب،
يمكنك الآن النقر على تسجيل الدخول ثم سترى نموذجًا للمستخدم لتسجيل الدخول.
لذا سترى أن لديك صندوقين هنا
مربعات الإدخال هنا لإدخال البريد الإلكتروني وكلمة المرور،
ثم مربع اختيار ليقول تذكر لي.
ومن ثم لديك علامة الدخول وإلغاء.
حتى إذا قمت بالنقر فوق إلغاء مشروط سوف تذهب بعيدا.
تماما مثل عند النقر على الصليب هناك.
ثم إذا قمت بملء هذه المعلومات واستمر في النقر على تسجيل
الدخول، يجب بدء عملية تسجيل الدخول.
في هذه اللحظة ليس لدينا خادم لهذا العمل،
ولكن أنا فقط تظهر لك في Bootstrap كيف يمكنك إنشاء نموذج مثل هذا.
أنا متأكد من أنك قد رأيت أشياء مثل هذه على
العديد من المواقع حيث عند النقر على زر تسجيل الدخول
شيء من هذا القبيل مع النموذج للملوثات العضوية الثابتة على الشاشة
ويتوقع منك كتابة المعلومات.
حتى الآن سترى كيف يمكنك الاستفادة من النماذج لعرض
معلومات تراكب صفحة الويب الخاصة بك.
مع هذا نكمل هذا التمرين.
في هذا التمرين، شهدنا استخدام تلميحات الأدوات
وشهدنا استخدام النماذج لعرض المحتوى.
هذا هو الوقت المناسب بالنسبة لك للقيام git-commint مع نصائح أداة الرسالة والنماذج.