1
00:00:00,089 --> 00:00:04,955
[MUSIC]

2
00:00:04,955 --> 00:00:08,311
لقد ولت الأيام التي استخدمت فيها المواقع الإلكترونية بحتة

3
00:00:08,311 --> 00:00:11,385
لتقديم المعلومات إلى المستخدمين. في

4
00:00:11,385 --> 00:00:16,380
هذه الأيام على معظم المواقع، سيكون المستخدمون قادرين على التفاعل مع الموقع

5
00:00:16,380 --> 00:00:21,360
لتوفير المعلومات، على سبيل المثال عن طريق النقر على الأزرار أو عن طريق ملء النماذج

6
00:00:21,360 --> 00:00:26,240
وكتابة شيء ما في مربعات البحث، وهلم جرا.

7
00:00:26,240 --> 00:00:29,940
إذن كيف ندعم هذه الأنواع من التفاعلات مع المستخدمين؟

8
00:00:29,940 --> 00:00:35,900
لذلك هذا هو ما سنتعامل معه في هذه المحاضرة الخاصة

9
00:00:35,900 --> 00:00:38,333
والتمرين الذي يلي ذلك.

10
00:00:38,333 --> 00:00:43,880
على سبيل المثال، إذا قمت بزيارة موقع Coursera، سترى أن لديك

11
00:00:43,880 --> 00:00:49,091
أزرار في الأعلى هنا يمكنك النقر عليها للوصول إلى أماكن مختلفة.

12
00:00:49,091 --> 00:00:54,954
يمكن أن يكون لديك مربع بحث، يمكنك كتابة المعلومات فيه،

13
00:00:54,954 --> 00:01:01,880
للبحث عنه، على سبيل المثال، تطوير الويب المكدس الكامل، وما إلى ذلك.

14
00:01:01,880 --> 00:01:08,286
لذلك، ما نلاحظه هو أن تفاعل المستخدم يحتاج إلى دعم

15
00:01:08,286 --> 00:01:14,808
على مواقع الويب باستخدام العديد من الطرق المختلفة بما في ذلك الأزرار

16
00:01:14,808 --> 00:01:20,054
والنماذج ومربعات النص وخانات الاختيار وغيرها الكثير.

17
00:01:20,054 --> 00:01:25,710
وتم توفير التفاعلات المبكرة مع المواقع الشبكية أساسا من خلال الوصلات التشعبية.

18
00:01:25,710 --> 00:01:29,852
حتى تتمكن من النقر على ارتباط تشعبي والانتقال إلى أماكن أخرى وهلم جرا، ولكن

19
00:01:29,852 --> 00:01:31,046
من الواضح أن

20
00:01:31,046 --> 00:01:35,559
الارتباط التشعبي هو مجرد واحدة من العديد من طرق التفاعل مع موقع الويب الخاص بك.

21
00:01:35,559 --> 00:01:40,335
هل يمكن أن يكون لديك أزرار المدرجة على الموقع والتي عند النقر عليها،

22
00:01:40,335 --> 00:01:44,580
سوف يؤدي إلى اتخاذ بعض الإجراءات على الموقع.

23
00:01:44,580 --> 00:01:49,900
يمكن أن يكون لديك نماذج تملأها لتوفير المعلومات لموقع الويب.

24
00:01:49,900 --> 00:01:54,500
لذلك عندما تنظر

25
00:01:54,500 --> 00:01:58,660
إلى كيفية تضمين ميزات تفاعل المستخدم هذه في موقع الويب الخاص بك، سترى أنه يمكنك استخدام شيء

26
00:01:58,660 --> 00:02:03,930
مثل العلامات التي هي مفيدة لتوفير الارتباطات التشعبية،

27
00:02:03,930 --> 00:02:10,100
ثم لديك علامات الزر التي تمكنك من تضمين أزرار في موقع الويب الخاص بك.

28
00:02:10,100 --> 00:02:15,060
الآن ما سننظر إليه هو كيف نقوم بالتنسيق مع علامات على

29
00:02:15,060 --> 00:02:19,850
علامات الزر باستخدام فئات bootstrap بحيث يمكنك تصميمها

30
00:02:20,910 --> 00:02:24,775
لتزييف الموضوع العام لـ bootstrap.

31
00:02:25,785 --> 00:02:30,075
يتضمن HTML بالفعل عناصر النموذج وعناصر الإدخال هناك.

32
00:02:30,075 --> 00:02:34,640
الآن، يمكننا أن ننظر في كيفية تعزيز bootstrap هذه العناصر من خلال توفير

33
00:02:34,640 --> 00:02:40,310
ميزات التصميم للنماذج، والعناصر المختلفة التي تدخل في النماذج.

34
00:02:40,310 --> 00:02:45,950
من الواضح أن الأزرار توفر طريقة بسيطة للتفاعل مع موقع الويب الخاص بك.

35
00:02:45,950 --> 00:02:49,600
لذلك عندما يكون لديك زر على موقع الويب الخاص بك، قد تحوم على الزر،

36
00:02:49,600 --> 00:02:55,100
قد تنقر على الزر وتتوقع حدوث شيء في هذه العملية.

37
00:02:55,100 --> 00:02:59,830
يعتمد سلوك الزر على مكان وضعه في bootstrap.

38
00:02:59,830 --> 00:03:03,060
إذا كان الزر داخل نموذج، على سبيل المثال،

39
00:03:03,060 --> 00:03:08,280
عادةً ما يؤدي النقر على الزر إلى إرسال النموذج إلى خادم،

40
00:03:08,280 --> 00:03:13,270
أو إلغاء معلومات النموذج.

41
00:03:13,270 --> 00:03:19,200
يمكن أن يحتوي الزر خارج النموذج على طرق أخرى لتوفير التفاعل.

42
00:03:19,200 --> 00:03:24,589
وبالمثل، < a >

43
00:03:25,690 --> 00:03:31,550
يمكن أيضًا اختطاف العلامة التي أربطناها تقليديًا بالارتباطات التشعبية ليتم تصميمها

44
00:03:31,550 --> 00:03:34,170
وتقديمها في شكل زر.

45
00:03:34,170 --> 00:03:39,356
حتى هنا سوف نرى كيف يوفر bootstrap الطبقات التي يمكن

46
00:03:39,356 --> 00:03:46,580
استخدامها لتنسيق <a> العلامة في زر ليتم عرضها على موقع الويب الخاص بك.

47
00:03:46,580 --> 00:03:51,600
سننظر أيضًا في عناصر النموذج المختلفة، مثل عناصر الإدخال

48
00:03:51,600 --> 00:03:56,390
، اختر، الزر وكذلك عناصر الإعلان النصية،

49
00:03:56,390 --> 00:04:03,320
وكيف نستخدمها في أشكالنا لتصميم

50
00:04:03,320 --> 00:04:09,660
وبناء نموذج يمكن تضمينه في موقعنا.

51
00:04:09,660 --> 00:04:13,640
لذا فإن التمرين الذي يتبع هذه المحاضرة الخاصة سيعرفك على

52
00:04:13,640 --> 00:04:17,440
دعم bootstrap لأزرار التصميم،

53
00:04:17,440 --> 00:04:22,670
وسينظر أيضًا في كيفية تحسين عناصر النموذج المختلفة باستخدام

54
00:04:22,670 --> 00:04:27,730
فئات bootstrap لتقديم نماذج Bootstrap الكلاسيكية.