1
00:00:03,910 --> 00:00:06,210
Пристегните сапоги,

2
00:00:06,210 --> 00:00:08,470
и давайте начнем с Bootstrap.

3
00:00:08,470 --> 00:00:13,045
Уверен, твои пальцы зудятся, чтобы обнять Bootstrap.

4
00:00:13,045 --> 00:00:18,250
Итак, первый шаг, перейдите к

5
00:00:18,250 --> 00:00:22,280
инструкциям по упражнению, которые следуют этому видео

6
00:00:22,280 --> 00:00:27,805
на странице курса Bootstrap на Coursera.

7
00:00:27,805 --> 00:00:29,840
А затем в инструкции

8
00:00:29,840 --> 00:00:35,520
вы увидите ссылку на этот файл Bootstrap4-starter.zip.

9
00:00:35,520 --> 00:00:39,695
Загрузите zip-файл на свой компьютер.

10
00:00:39,695 --> 00:00:46,610
Кроме того, пошаговые инструкции, проиллюстрированные в этом видео,

11
00:00:46,610 --> 00:00:52,995
также будут приведены в инструкциях по упражнению, которые следуют этому видео.

12
00:00:52,995 --> 00:01:00,595
Там у вас будет доступ к любому фрагменту кода, который вам нужен для этого упражнения.

13
00:01:00,595 --> 00:01:04,920
Это было бы справедливо и в отношении всех учений в будущем.

14
00:01:04,920 --> 00:01:08,125
Итак, если вам нужно завладеть фрагментами кода,

15
00:01:08,125 --> 00:01:10,145
вот где вы их найдете.

16
00:01:10,145 --> 00:01:12,180
После того, как вы скачаете zip-файл,

17
00:01:12,180 --> 00:01:16,230
переместите этот zip-файл в удобное место на вашем компьютере.

18
00:01:16,230 --> 00:01:23,375
Итак, здесь я переместил его в папку с именем Coursera на моем компьютере,

19
00:01:23,375 --> 00:01:27,145
а затем у меня есть zip-файл с таким длинным именем.

20
00:01:27,145 --> 00:01:28,765
Просто разархивируйте файл.

21
00:01:28,765 --> 00:01:30,445
После того, как вы распакуете файл,

22
00:01:30,445 --> 00:01:36,715
вы найдете папку с именем Bootstrap4, созданную на вашем компьютере.

23
00:01:36,715 --> 00:01:38,965
Внутри папки Bootstrap4,

24
00:01:38,965 --> 00:01:42,450
вы увидите другую папку с именем Mistration, там.

25
00:01:42,450 --> 00:01:46,260
Перейдите в папку Mistration, и вы увидите там два файла,

26
00:01:46,260 --> 00:01:49,600
index.html и файл package.json.

27
00:01:49,600 --> 00:01:53,795
Теперь откройте окно команд или

28
00:01:53,795 --> 00:02:00,290
терминал, а затем перейдите в эту папку в окне команд или терминале.

29
00:02:00,290 --> 00:02:05,125
В командной строке введите npm install.

30
00:02:05,125 --> 00:02:09,150
Обратите внимание, что у меня уже есть файл package.json.

31
00:02:09,150 --> 00:02:12,745
Таким образом, файл package.json настроен так, чтобы

32
00:02:12,745 --> 00:02:19,200
зависимость разработки lite-сервера была установлена, если я введу npm install.

33
00:02:19,200 --> 00:02:21,150
Таким образом, как только вы введете npm install,

34
00:02:21,150 --> 00:02:27,160
вы увидите, что сервер lite-будет установлен в вашей папке node_modules каждый.

35
00:02:27,160 --> 00:02:30,415
Как только это будет завершено,

36
00:02:30,415 --> 00:02:35,930
откройте эту папку в своем любимом редакторе.

37
00:02:35,930 --> 00:02:39,060
После того, как папка открыта в редакторе,

38
00:02:39,060 --> 00:02:45,170
создайте файл.gitignore, а

39
00:02:45,170 --> 00:02:50,530
затем поместите node_modules в файл gitignore и сохраните.

40
00:02:50,530 --> 00:02:54,940
Таким образом, это должно гарантировать, что при выполнении gitcommit

41
00:02:54,940 --> 00:02:57,615
папка node_modules не будет зафиксирована.

42
00:02:57,615 --> 00:03:05,475
После этого пришло время пойти и получить Bootstrap для использования в нашем проекте.

43
00:03:05,475 --> 00:03:08,050
Прежде чем мы получим Bootstrap

44
00:03:08,050 --> 00:03:11,810
, давайте сделаем фиксацию текущего состояния файла.

45
00:03:11,810 --> 00:03:18,535
Итак, сделайте git init и инициализируйте свой репозиторий git.

46
00:03:18,535 --> 00:03:21,600
Затем вы можете проверить статус git,

47
00:03:21,600 --> 00:03:25,290
и вы увидите, что эти файлы должны быть зафиксированы,

48
00:03:25,290 --> 00:03:29,315
добавьте все файлы,

49
00:03:29,315 --> 00:03:38,885
gitcommit -m «Начальная настройка».

50
00:03:38,885 --> 00:03:43,745
Таким образом, это отправная точка вашей папки в данный момент.

51
00:03:43,745 --> 00:03:52,785
Таким образом, с этим ваша отправная точка вашего веб-проекта теперь была привержена git.

52
00:03:52,785 --> 00:03:57,770
Теперь вы можете настроить этот git для синхронизации с онлайн-репозиторием,

53
00:03:57,770 --> 00:04:00,800
как мы говорили в упражнениях git.

54
00:04:00,800 --> 00:04:05,690
Таким образом, вы можете настроить репозиторий либо на Bitbucket, либо на Github, а затем

55
00:04:05,690 --> 00:04:11,430
синхронизировать этот проект с этим репозиторием git.

56
00:04:11,430 --> 00:04:15,265
Наш следующий шаг - пойти и получить Bootstrap.

57
00:04:15,265 --> 00:04:25,260
Для этого добавьте тип приглашения npm install bootstrap @4 .0.0, а также —save,

58
00:04:25,260 --> 00:04:29,470
и пусть Bootstrap будет установлен.

59
00:04:29,470 --> 00:04:31,880
После установки Bootstrap

60
00:04:31,880 --> 00:04:35,535
мы понимаем, что нам также нужно установить его одноранговый узел,

61
00:04:35,535 --> 00:04:38,975
который является jQuery, а также Popper.js.

62
00:04:38,975 --> 00:04:46,350
Итак, давайте продолжим и установим как jQuery, так и Popper.js в эту папку проекта.

63
00:04:46,350 --> 00:04:50,905
Итак, чтобы сделать это, добавьте тип приглашения npm install

64
00:04:50,905 --> 00:04:55,115
jquery @3 .3.1

65
00:04:55,115 --> 00:05:03,185
и Popper.js @1 .12.9 —save.

66
00:05:03,185 --> 00:05:06,385
Теперь, всякий раз, когда я устанавливаю любой из пакетов

67
00:05:06,385 --> 00:05:11,620
npm, я явно указываю версию пакета, который вы должны установить.

68
00:05:11,620 --> 00:05:17,580
Причина этого в том, что я хочу убедиться, что по мере прохождения этого упражнения

69
00:05:17,580 --> 00:05:19,500
все шаги будут работать правильно.

70
00:05:19,500 --> 00:05:25,380
Поэтому я указываю точную версию модулей npm, которые будут установлены.

71
00:05:25,380 --> 00:05:33,235
Итак, здесь мы устанавливаем jQuery версии 3.3.1 и Popper.js версии 1.12.9.

72
00:05:33,235 --> 00:05:40,895
Впоследствии, также, я уточню точные версии модулей, которые будут установлены.

73
00:05:40,895 --> 00:05:44,130
Так что давайте продолжим и установим их.

74
00:05:46,530 --> 00:05:49,030
И как только они будут установлены,

75
00:05:49,030 --> 00:05:51,055
мы можем перейти к следующему шагу.

76
00:05:51,055 --> 00:05:55,615
Возвращаясь к нашей папке проекта,

77
00:05:55,615 --> 00:05:58,070
вы увидите, что если вы заходите в node_modules,

78
00:05:58,070 --> 00:06:02,675
вы увидите там папку с именем Bootstrap.

79
00:06:02,675 --> 00:06:04,865
И внутри папки с именем Bootstrap

80
00:06:04,865 --> 00:06:07,845
вы найдете папку с именем dist.

81
00:06:07,845 --> 00:06:09,910
Итак, внутри папки dist

82
00:06:09,910 --> 00:06:13,705
вы найдете две подпапки с именами CSS и js.

83
00:06:13,705 --> 00:06:15,775
Если вы войдете в папку CSS,

84
00:06:15,775 --> 00:06:20,820
вы найдете здесь целую кучу предварительно скомпилированных файлов CSS.

85
00:06:20,820 --> 00:06:27,630
Тот, который представляет интерес для нас в начале, - это Bootstrap min.css.

86
00:06:27,630 --> 00:06:31,620
Это файл, который мы собираемся включить в наш

87
00:06:31,620 --> 00:06:36,020
файл index.html, чтобы использовать Bootstrap в нашем проекте.

88
00:06:36,020 --> 00:06:38,820
Аналогичным образом, перейдя в папку js,

89
00:06:38,820 --> 00:06:42,165
вы увидите, что есть файл Bootstrap min.js.

90
00:06:42,165 --> 00:06:45,680
Мы собираемся включить это также в наш index.htm.

91
00:06:45,680 --> 00:06:48,790
Так что это будет следующий шаг, который вы увидите, как я делаю.

92
00:06:48,790 --> 00:06:51,215
Прежде чем перейти к следующему шагу,

93
00:06:51,215 --> 00:06:55,550
давайте запустим наш lite-сервер, чтобы мы могли видеть изменения, которые мы вносим в

94
00:06:55,550 --> 00:07:01,860
index.html немедленно отражаются на нашей веб-странице в режиме реального времени.

95
00:07:01,860 --> 00:07:03,630
Итак, давайте запустим lite-серверы.

96
00:07:03,630 --> 00:07:07,240
Итак, введите тип приглашения npm start,

97
00:07:07,240 --> 00:07:09,915
а затем это должно запустить ваш сервер lite-сервера.

98
00:07:09,915 --> 00:07:13,485
Теперь вы можете увидеть на экране

99
00:07:13,485 --> 00:07:21,785
мой редактор слева и текущую версию страницы index.html справа.

100
00:07:21,785 --> 00:07:23,215
Итак, как вы можете видеть,

101
00:07:23,215 --> 00:07:27,615
я уже настроил страницу index.html с некоторым контентом.

102
00:07:27,615 --> 00:07:33,820
Эта веб-страница выглядит как типичная веб-страница профессора информатики.

103
00:07:33,820 --> 00:07:41,170
Давайте теперь откроем страницу index.html в нашем редакторе.

104
00:07:41,170 --> 00:07:45,645
И затем в головной части страницы index.html,

105
00:07:45,645 --> 00:07:47,360
прямо перед заголовком,

106
00:07:47,360 --> 00:07:49,935
я собираюсь вставить немного кода.

107
00:07:49,935 --> 00:07:53,730
Этот фрагмент кода дается вам в инструкциях.

108
00:07:53,730 --> 00:07:56,740
Таким образом, вы можете просто скопировать и вставить этот фрагмент кода,

109
00:07:56,740 --> 00:08:00,765
и я расскажу вам о том, что пытается сделать этот фрагмент кода.

110
00:08:00,765 --> 00:08:05,585
Вы заметите, что у меня есть три мета-тэга.

111
00:08:05,585 --> 00:08:09,130
Первый говорит, что charset = «utf-8".

112
00:08:09,130 --> 00:08:11,860
Таким образом, это Unicode, который будет использоваться.

113
00:08:11,860 --> 00:08:17,675
Вторая строка, в которой говорится meta name = «viewport»,

114
00:08:17,675 --> 00:08:21,100
я собираюсь вернуться и объяснить эту конкретную строку

115
00:08:21,100 --> 00:08:25,745
вам в следующем уроке, когда мы посмотрим на отзывчивый веб-дизайн.

116
00:08:25,745 --> 00:08:30,100
Теперь позвольте мне обратить ваше внимание на эту конкретную строку, в которой

117
00:08:30,100 --> 00:08:34,840
говорится ссылка rel = «stylesheet», а затем href.

118
00:08:34,840 --> 00:08:43,495
Обратите внимание, что я указываю href как «node_modules/bootstrap/dist/css/bootstrap.min.css».

119
00:08:43,495 --> 00:08:49,150
Итак, я указываю, что файл bootstrap.min.css,

120
00:08:49,150 --> 00:08:52,970
который содержит классы CSS, соответствующие Bootstrap, которые мы

121
00:08:52,970 --> 00:08:57,995
загрузили с помощью NPM в нашу папку node_modules,

122
00:08:57,995 --> 00:09:05,350
я собираюсь включить это в главу моей страницы index.html.

123
00:09:05,350 --> 00:09:09,370
Поэтому вам нужно включить классы CSS, предоставляемые Bootstrap.

124
00:09:09,370 --> 00:09:15,150
Вам также нужно включить классы JavaScript, предоставляемые Bootstrap,

125
00:09:15,150 --> 00:09:19,445
что мы собираемся сделать внизу этой страницы.

126
00:09:19,445 --> 00:09:23,465
Перейдя к нижней части этой страницы, обратите внимание,

127
00:09:23,465 --> 00:09:27,400
непосредственно перед закрывающим тегом тела,

128
00:09:27,400 --> 00:09:32,820
я собираюсь вставить в код, чтобы включить все скрипты там.

129
00:09:32,820 --> 00:09:35,105
Поэтому, чтобы сделать это,

130
00:09:35,105 --> 00:09:41,300
я просто вставляю в три строки для сценария, чтобы включить jQuery,

131
00:09:41,300 --> 00:09:45,085
Popper.js, а также Bootstrap min.js.

132
00:09:45,085 --> 00:09:48,635
И обратите внимание на порядок, в который я включил это.

133
00:09:48,635 --> 00:09:50,895
Таким образом, Bootstrap находится внизу.

134
00:09:50,895 --> 00:09:57,340
Затем, поскольку Bootstrap зависит как от jQuery, так и от Popper в этом порядке,

135
00:09:57,340 --> 00:09:59,945
поэтому я сначала введу jQuery.

136
00:09:59,945 --> 00:10:03,835
И затем, после этого, мы вводим Popper, а затем, наконец,

137
00:10:03,835 --> 00:10:09,585
Bootstrap min.js в нижней части файла index.html.

138
00:10:09,585 --> 00:10:13,400
Теперь это включено в нижней части страницы.

139
00:10:13,400 --> 00:10:18,665
Потому что, когда вы загружаете страницу с веб-сервера,

140
00:10:18,665 --> 00:10:24,360
вы хотите, чтобы классы CSS были загружены немедленно, так что,

141
00:10:24,360 --> 00:10:26,430
когда страница начинает рендеринг, когда

142
00:10:26,430 --> 00:10:29,810
JavaScript извлекается, JavaScript должен выполнить, чтобы внести изменения

143
00:10:29,810 --> 00:10:33,395
на вашу страницу с кодом JavaScript,

144
00:10:33,395 --> 00:10:34,970
и что займет немного времени.

145
00:10:34,970 --> 00:10:38,060
Таким образом, вы не хотите, чтобы пользователь ожидал

146
00:10:38,060 --> 00:10:43,805
загрузки всей страницы, прежде чем они увидят что-то в окне своего браузера.

147
00:10:43,805 --> 00:10:48,720
Вот почему мы обычно загружаем классы JavaScript в

148
00:10:48,720 --> 00:10:55,325
конце нашей html-страницы непосредственно перед body tech.

149
00:10:55,325 --> 00:10:58,270
После внесения этих изменений,

150
00:10:58,270 --> 00:11:00,065
сохраним файл.

151
00:11:00,065 --> 00:11:04,420
Теперь, причина, по которой я показываю

152
00:11:04,420 --> 00:11:09,385
файл index.html в моем редакторе, а также в браузере рядом с ним, в

153
00:11:09,385 --> 00:11:13,630
тот момент, когда вы сохраняете изменения, которые вы сделали в файле index.html,

154
00:11:13,630 --> 00:11:18,920
обратите внимание, как рендеринг браузера этого файла

155
00:11:18,920 --> 00:11:26,525
немедленно обновляется и смотрите Bootstrap уже в действии на на странице.

156
00:11:26,525 --> 00:11:33,150
Прямо сейчас вы увидите, что ваша страница использует Times New Roman для отображения всего контента.

157
00:11:33,150 --> 00:11:36,130
Как только я сохраняю веб-страницу,

158
00:11:36,130 --> 00:11:42,670
вы заметили, что шрифты, используемые на вашей веб-странице, изменились.

159
00:11:42,670 --> 00:11:48,425
Теперь ваша веб-страница настроена на использование классов Bootstrap,

160
00:11:48,425 --> 00:11:53,850
и она использует типографию Bootstraps по умолчанию для отображения всего содержимого.

161
00:11:53,850 --> 00:12:01,360
По умолчанию Bootstrap использует Helvetica Neue для шрифта.

162
00:12:01,360 --> 00:12:06,180
Вы можете изменить шрифт по умолчанию для bootstrap и т. Д.,

163
00:12:06,180 --> 00:12:09,905
Но это будет выходить за рамки нашего обсуждения прямо сейчас.

164
00:12:09,905 --> 00:12:15,120
Таким образом, как только вы настроите свою страницу index.html и сохраните ее,

165
00:12:15,120 --> 00:12:20,710
вы сразу увидите Bootstrap вступает в действие на нашей веб-странице.

166
00:12:20,710 --> 00:12:23,675
Так вот как я буду продолжать иллюстрировать,

167
00:12:23,675 --> 00:12:27,385
поскольку мы добавляем различные бутстрапы, классы CSS

168
00:12:27,385 --> 00:12:30,435
и компоненты на нашу веб-страницу,

169
00:12:30,435 --> 00:12:35,720
как рендеринг его в нашем браузере будет продолжать меняться.

170
00:12:35,720 --> 00:12:44,860
Теперь, очевидно, рендеринг страницы в нашем браузере все еще ужасен.

171
00:12:44,860 --> 00:12:49,230
Это лучше, чем типичная веб-страница профессоров информатики,

172
00:12:49,230 --> 00:12:51,715
но определенно не читается.

173
00:12:51,715 --> 00:12:58,320
Теперь нам нужно привести в действие различные классы CSS и

174
00:12:58,320 --> 00:12:59,910
компоненты JavaScript, которые

175
00:12:59,910 --> 00:13:06,960
предоставляет наш веб-интерфейс Bootstrap, чтобы создать нашу веб-страницу.

176
00:13:06,960 --> 00:13:12,720
Поэтому мы будем делать это шаг за шагом, когда мы проходим через это упражнение.

177
00:13:12,720 --> 00:13:18,535
Это может быть удобное время для вас, чтобы сделать git

178
00:13:18,535 --> 00:13:24,355
фиксацию изменений, которые вы сделали, чтобы в конце этого упражнения

179
00:13:24,355 --> 00:13:30,365
ваше состояние папки проекта будет сохранено в вашем репозитории git.

180
00:13:30,365 --> 00:13:36,610
Переходя в мою папку Mistration на другой вкладке моего окна терминала,

181
00:13:36,610 --> 00:13:38,990
если я введу статус git,

182
00:13:38,990 --> 00:13:44,455
теперь я вижу, что мой файл index.html и пакет JSON-файла были изменены.

183
00:13:44,455 --> 00:13:47,930
Так что я собираюсь сделать фиксацию.

184
00:13:59,540 --> 00:14:04,635
Итак, теперь мой статус

185
00:14:04,635 --> 00:14:10,610
папки в конце этого упражнения был зафиксирован в моем репозитории git.

186
00:14:10,610 --> 00:14:13,920
Вы можете синхронизировать это с вашим онлайн-репозиторием, чтобы

187
00:14:13,920 --> 00:14:18,390
состояние вашего проекта было сохранено на этом этапе.

188
00:14:18,390 --> 00:14:24,955
С этим мы завершаем наше первое упражнение Bootstrap.

189
00:14:24,955 --> 00:14:33,210
Теперь вы видели, как мы можем настроить Bootstrap для использования в нашем веб-проекте. По мере того ,

190
00:14:33,210 --> 00:14:36,140
как мы переходим к следующим несколько упражнений,

191
00:14:36,140 --> 00:14:42,470
мы собираемся сотрудников Bootstrap классы для разработки наших веб-страниц.