1
00:00:03,460 --> 00:00:06,755
В предыдущем модуле

2
00:00:06,755 --> 00:00:12,335
мы рассмотрели количество компонентов Bootstrap, которые основаны исключительно на CSS.

3
00:00:12,335 --> 00:00:15,945
Таким образом, применяя классы CSS для этих компонентов,

4
00:00:15,945 --> 00:00:19,490
мы смогли создать их на нашей веб-странице.

5
00:00:19,490 --> 00:00:26,500
В этом модуле мы рассмотрим больше компонентов на основе JavaScript Bootstrap.

6
00:00:26,500 --> 00:00:30,580
Таким образом, суммируя, как мы видели в предыдущем модуле,

7
00:00:30,580 --> 00:00:34,755
Bootstrap поддерживает ряд классов CSS, которые могут быть применены к

8
00:00:34,755 --> 00:00:43,260
вашей разметке HTML в ваших веб-страницах, чтобы активировать и использовать эти классы CSS.

9
00:00:43,260 --> 00:00:49,610
Таким образом, вы могли видеть, как классы CSS изменили общие HTML-теги и

10
00:00:49,610 --> 00:00:56,365
предоставили собственный способ Bootstrap представления той же информации.

11
00:00:56,365 --> 00:01:02,180
Таким образом, компоненты, которые основаны исключительно на CSS, могут быть легко активированы,

12
00:01:02,180 --> 00:01:04,260
применяя классы bootstrap CSS к

13
00:01:04,260 --> 00:01:09,270
различным HTML-тегам, которые есть на ваших веб-страницах.

14
00:01:09,270 --> 00:01:14,525
Bootstrap сам по себе может использоваться исключительно для своих классов CSS.

15
00:01:14,525 --> 00:01:19,500
Еще один аспект классов Bootstraps CSS, который мы видели, заключается в

16
00:01:19,500 --> 00:01:24,630
том, что большинство из этих компонентов начинались с базового класса, который вы применили.

17
00:01:24,630 --> 00:01:27,660
Например, когда вы смотрите на кнопку,

18
00:01:27,660 --> 00:01:31,575
вы видели, что базовый класс был классом BTN.

19
00:01:31,575 --> 00:01:33,160
Затем вы примените что-то вроде

20
00:01:33,160 --> 00:01:38,160
первичного BTN, который добавит свои цвета в BTN,

21
00:01:38,160 --> 00:01:43,175
тогда вы можете определить размер кнопки, сказав BTN SM.

22
00:01:43,175 --> 00:01:49,905
Затем вы также можете определить кнопку, чтобы быть целым блоком, используя класс блока BTN.

23
00:01:49,905 --> 00:01:56,260
Итак, все эти последующие классы и модификаторы к базовому классу BTN.

24
00:01:56,260 --> 00:01:59,430
Таким образом, этот подход, вы будете видеть его

25
00:01:59,430 --> 00:02:03,330
снова и снова во многих компонентах Bootstraps.

26
00:02:03,330 --> 00:02:07,925
Таким образом, у вас будет базовый класс, а затем набор классов модификаторов, которые могут

27
00:02:07,925 --> 00:02:14,164
быть применены для изменения поведения базового компонента.

28
00:02:14,164 --> 00:02:20,210
Это облегчает дизайн вашей веб-страницы.

29
00:02:20,210 --> 00:02:24,260
Возьмем другой пример, мы можем посмотреть на класс Nav.

30
00:02:24,260 --> 00:02:28,020
Мы используем класс Nav в Nav-баре, который

31
00:02:28,020 --> 00:02:33,635
мы включили в нашу веб-страницу в предыдущем модуле.

32
00:02:33,635 --> 00:02:40,130
Класс Nav, мы изменяем это, применяя к нему класс Nav-Bar Nav.

33
00:02:40,130 --> 00:02:45,660
Таким образом, это дало нам определенный способ представления навигационной информации.

34
00:02:45,660 --> 00:02:51,310
В этом модуле мы рассмотрим Nav-вкладки и

35
00:02:51,310 --> 00:02:58,295
Nav-таблетки, которые являются еще одним способом представления навигационной информации для веб-страницы.

36
00:02:58,295 --> 00:03:04,180
Вкладки и таблетки, которые мы представляем навигацию снова,

37
00:03:04,180 --> 00:03:10,265
поддерживается плагином JavaScript,

38
00:03:10,265 --> 00:03:15,195
обеспечивает расширенный способ обеспечения навигации внутри вашего контента.

39
00:03:15,195 --> 00:03:18,835
Итак, мы рассмотрим это в данном конкретном модуле.

40
00:03:18,835 --> 00:03:23,620
Я использую это в качестве примера, чтобы проиллюстрировать вам, как началось с базового класса,

41
00:03:23,620 --> 00:03:28,075
вы можете изменить, применив классы модификаторов к базовому классу.

42
00:03:28,075 --> 00:03:30,640
Конечно, если вы хотите привести

43
00:03:30,640 --> 00:03:35,285
часть JavaScript ваших компонентов Bootstrap в действие,

44
00:03:35,285 --> 00:03:38,670
вы должны начать применять классы JavaScript.

45
00:03:38,670 --> 00:03:41,725
Таким образом, Bootstrap поддерживает ряд компонентов,

46
00:03:41,725 --> 00:03:44,970
которые поддерживаются через плагины JavaScript.

47
00:03:44,970 --> 00:03:47,880
Теперь, когда вы используете эти плагины на вашей веб-странице,

48
00:03:47,880 --> 00:03:52,890
вы можете включить отдельные плагины, которые вы фактически собираетесь использовать на вашем веб-сайте,

49
00:03:52,890 --> 00:03:55,815
или весь набор плагинов.

50
00:03:55,815 --> 00:03:59,500
Теперь, то, что мы собираемся сделать в упражнениях,

51
00:03:59,500 --> 00:04:03,495
включить весь набор плагинов, потому что мы просто хотим исследовать все из них.

52
00:04:03,495 --> 00:04:05,870
Но если вы разрабатываете веб-сайт,

53
00:04:05,870 --> 00:04:09,000
вы можете включить только подмножество этих плагинов,

54
00:04:09,000 --> 00:04:12,300
которые вы фактически используете на вашем веб-сайте,

55
00:04:12,300 --> 00:04:15,630
тем самым уменьшая количество кода JavaScript, который должен

56
00:04:15,630 --> 00:04:21,470
быть отправлен пользователю, просматривающему вашу веб-страницу.

57
00:04:21,470 --> 00:04:27,590
Вот как я смотрю на подход Bootstraps к использованию JavaScript в

58
00:04:27,590 --> 00:04:33,905
собственной поддержке компонентов Bootstrap, которые включены с JavaScript.

59
00:04:33,905 --> 00:04:36,785
Если вы посмотрите на JavaScript самостоятельно,

60
00:04:36,785 --> 00:04:44,845
он обеспечивает большую гибкость и позволяет делать много интересного.

61
00:04:44,845 --> 00:04:46,695
Но это также влечет за собой

62
00:04:46,695 --> 00:04:52,200
написание кода JavaScript, который будет использоваться при проектировании вашего веб-сайта.

63
00:04:52,200 --> 00:04:58,730
Теперь я смотрю на JavaScript как на большого борца сумо с большим потенциалом,

64
00:04:58,730 --> 00:05:02,670
большой силой, но неприрученным.

65
00:05:02,670 --> 00:05:09,875
Теперь jQuery как библиотека, построенная поверх JavaScript,

66
00:05:09,875 --> 00:05:14,815
по существу берет рестлера сумо, а затем упаковывает его лучше, чтобы сделать

67
00:05:14,815 --> 00:05:20,435
эту гориллу 100 фунтов в более управляемый размер,

68
00:05:20,435 --> 00:05:23,790
более легче подходить и легче

69
00:05:23,790 --> 00:05:28,235
включить и использовать на вашем сайте дизайн.

70
00:05:28,235 --> 00:05:31,855
Таким образом, если вы используете библиотеку jQuery напрямую,

71
00:05:31,855 --> 00:05:34,510
вы можете определенно использовать многие

72
00:05:34,510 --> 00:05:40,175
компоненты jQuery и использовать их на своей веб-странице.

73
00:05:40,175 --> 00:05:44,480
Теперь это подход, который вы всегда можете принять, потому что jQuery

74
00:05:44,480 --> 00:05:48,170
уже будет включен в вашу веб-страницу Bootstrap,

75
00:05:48,170 --> 00:05:52,910
если вы собираетесь использовать компоненты на основе JavaScript.

76
00:05:52,910 --> 00:05:56,545
Bootstrap делает этот шаг дальше,

77
00:05:56,545 --> 00:05:59,145
а затем, глядя на

78
00:05:59,145 --> 00:06:04,395
подход Bootstrap, чтобы взять рестлера сумо, а затем положить его в коробку.

79
00:06:04,395 --> 00:06:09,730
По существу стоит для упаковки

80
00:06:09,730 --> 00:06:18,935
ваших плагинов JavaScript в компонент, который вы можете более легко использовать на ваших веб-страницах.

81
00:06:18,935 --> 00:06:24,775
Таким образом, компоненты на основе Bootstrap JavaScript по существу принимают поддержку на основе JQuery,

82
00:06:24,775 --> 00:06:28,760
но затем упаковывают их таким образом, чтобы вы могли использовать их на

83
00:06:28,760 --> 00:06:34,390
своей веб-странице даже без написания одной строки кода JavaScript.

84
00:06:34,390 --> 00:06:38,955
Здесь компонент Bootstrap JavaScript

85
00:06:38,955 --> 00:06:43,030
можно использовать без написания одной строки кода.

86
00:06:43,030 --> 00:06:46,620
Способ поддержки в Bootstrap заключается в

87
00:06:46,620 --> 00:06:51,400
том, что компоненты JavaScript поддерживают ряд

88
00:06:51,400 --> 00:06:56,940
атрибутов дефиса данных, которые вы можете применить к вашим HTML-тегам.

89
00:06:56,940 --> 00:07:00,120
Итак, вы увидите, что я использую такие вещи, как переключение

90
00:07:00,120 --> 00:07:04,370
данных, шпион данных, цель данных и так далее.

91
00:07:04,370 --> 00:07:07,795
Если вы помните, когда мы разработали Nav-бар,

92
00:07:07,795 --> 00:07:11,120
вы видели пару этих атрибутов.

93
00:07:11,120 --> 00:07:15,660
Там мы разработали кнопку для дополнительных маленьких экранов.

94
00:07:15,660 --> 00:07:21,550
Теперь настало время для нас [неразборчиво], почему мы сделали это в предыдущем модуле.

95
00:07:21,550 --> 00:07:26,935
Таким образом, мы подробно рассмотрим этот подход в этом модуле,

96
00:07:26,935 --> 00:07:33,000
рассматривая несколько компонентов Bootstrap, которые используют поддержку JavaScript.

97
00:07:33,000 --> 00:07:35,015
Конечно, вы можете использовать

98
00:07:35,015 --> 00:07:38,650
полный API JavaScript, который

99
00:07:38,650 --> 00:07:42,945
доступен для всех этих компонентов, фактически написав код JavaScript.

100
00:07:42,945 --> 00:07:46,130
Мы отложим это до следующего модуля,

101
00:07:46,130 --> 00:07:51,370
где мы рассмотрим, как вы можете написать простой код JavaScript на основе

102
00:07:51,370 --> 00:07:54,580
синтаксиса jQuery, чтобы добавить

103
00:07:54,580 --> 00:08:00,070
больше функциональности для ваших компонентов Bootstrap на основе JavaScript.