[MUSIC]
لقد ولت الأيام التي استخدمت فيها المواقع الإلكترونية بحتة
لتقديم المعلومات إلى المستخدمين. في
هذه الأيام على معظم المواقع، سيكون المستخدمون قادرين على التفاعل مع الموقع
لتوفير المعلومات، على سبيل المثال عن طريق النقر على الأزرار أو عن طريق ملء النماذج
وكتابة شيء ما في مربعات البحث، وهلم جرا.
إذن كيف ندعم هذه الأنواع من التفاعلات مع المستخدمين؟
لذلك هذا هو ما سنتعامل معه في هذه المحاضرة الخاصة
والتمرين الذي يلي ذلك.
على سبيل المثال، إذا قمت بزيارة موقع Coursera، سترى أن لديك
أزرار في الأعلى هنا يمكنك النقر عليها للوصول إلى أماكن مختلفة.
يمكن أن يكون لديك مربع بحث، يمكنك كتابة المعلومات فيه،
للبحث عنه، على سبيل المثال، تطوير الويب المكدس الكامل، وما إلى ذلك.
لذلك، ما نلاحظه هو أن تفاعل المستخدم يحتاج إلى دعم
على مواقع الويب باستخدام العديد من الطرق المختلفة بما في ذلك الأزرار
والنماذج ومربعات النص وخانات الاختيار وغيرها الكثير.
وتم توفير التفاعلات المبكرة مع المواقع الشبكية أساسا من خلال الوصلات التشعبية.
حتى تتمكن من النقر على ارتباط تشعبي والانتقال إلى أماكن أخرى وهلم جرا، ولكن
من الواضح أن
الارتباط التشعبي هو مجرد واحدة من العديد من طرق التفاعل مع موقع الويب الخاص بك.
هل يمكن أن يكون لديك أزرار المدرجة على الموقع والتي عند النقر عليها،
سوف يؤدي إلى اتخاذ بعض الإجراءات على الموقع.
يمكن أن يكون لديك نماذج تملأها لتوفير المعلومات لموقع الويب.
لذلك عندما تنظر
إلى كيفية تضمين ميزات تفاعل المستخدم هذه في موقع الويب الخاص بك، سترى أنه يمكنك استخدام شيء
مثل العلامات التي هي مفيدة لتوفير الارتباطات التشعبية،
ثم لديك علامات الزر التي تمكنك من تضمين أزرار في موقع الويب الخاص بك.
الآن ما سننظر إليه هو كيف نقوم بالتنسيق مع علامات على
علامات الزر باستخدام فئات bootstrap بحيث يمكنك تصميمها
لتزييف الموضوع العام لـ bootstrap.
يتضمن HTML بالفعل عناصر النموذج وعناصر الإدخال هناك.
الآن، يمكننا أن ننظر في كيفية تعزيز bootstrap هذه العناصر من خلال توفير
ميزات التصميم للنماذج، والعناصر المختلفة التي تدخل في النماذج.
من الواضح أن الأزرار توفر طريقة بسيطة للتفاعل مع موقع الويب الخاص بك.
لذلك عندما يكون لديك زر على موقع الويب الخاص بك، قد تحوم على الزر،
قد تنقر على الزر وتتوقع حدوث شيء في هذه العملية.
يعتمد سلوك الزر على مكان وضعه في bootstrap.
إذا كان الزر داخل نموذج، على سبيل المثال،
عادةً ما يؤدي النقر على الزر إلى إرسال النموذج إلى خادم،
أو إلغاء معلومات النموذج.
يمكن أن يحتوي الزر خارج النموذج على طرق أخرى لتوفير التفاعل.
وبالمثل، < a >
يمكن أيضًا اختطاف العلامة التي أربطناها تقليديًا بالارتباطات التشعبية ليتم تصميمها
وتقديمها في شكل زر.
حتى هنا سوف نرى كيف يوفر bootstrap الطبقات التي يمكن
استخدامها لتنسيق العلامة في زر ليتم عرضها على موقع الويب الخاص بك.
سننظر أيضًا في عناصر النموذج المختلفة، مثل عناصر الإدخال
، اختر، الزر وكذلك عناصر الإعلان النصية،
وكيف نستخدمها في أشكالنا لتصميم
وبناء نموذج يمكن تضمينه في موقعنا.
لذا فإن التمرين الذي يتبع هذه المحاضرة الخاصة سيعرفك على
دعم bootstrap لأزرار التصميم،
وسينظر أيضًا في كيفية تحسين عناصر النموذج المختلفة باستخدام
فئات bootstrap لتقديم نماذج Bootstrap الكلاسيكية.