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
кнопок, используя классы начальной загрузки, чтобы вы могли

30
00:02:20,910 --> 00:02:24,775
стилизовать их, чтобы подделывать общую тему начальной загрузки.

31
00:02:25,785 --> 00:02:30,075
HTML уже включает в себя элементы формы и входные элементы там.

32
00:02:30,075 --> 00:02:34,640
Теперь мы можем посмотреть, как бутстрап улучшает эти элементы, предоставляя

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
Поведение кнопки зависит от того, где она находится в начальной загрузке.

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
выбор, кнопка, а также текстовые элементы AD, и

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
поддержкой начальной загрузки для кнопок стиля, а

53
00:04:17,440 --> 00:04:22,670
также посмотрит, как различные элементы формы могут быть улучшены с помощью

54
00:04:22,670 --> 00:04:27,730
классов начальной загрузки, чтобы представить классические формы Bootstrap.