1
00:00:03,800 --> 00:00:07,660
Мы продолжим упражнение сетки начальной загрузки

2
00:00:07,660 --> 00:00:11,074
, которое мы начали в предыдущем упражнении.

3
00:00:11,074 --> 00:00:14,535
Мы собираемся сделать еще несколько вещей на нашей

4
00:00:14,535 --> 00:00:18,965
странице index.html, чтобы улучшить ее макет.

5
00:00:18,965 --> 00:00:24,085
Мы собираемся использовать некоторые пользовательские классы CSS и добавить некоторый цвет

6
00:00:24,085 --> 00:00:30,535
на нашу страницу index.html, используя пользовательские классы CSS.

7
00:00:30,535 --> 00:00:39,265
Следующее, что я собираюсь сделать, это пойти вниз к нижнему колонтитулу и для этого UL здесь,

8
00:00:39,265 --> 00:00:42,790
вы заметите, что этот список, когда вы смотрите на

9
00:00:42,790 --> 00:00:49,705
нашу веб-страницу отображается на веб-странице, используя этот маркированный список здесь.

10
00:00:49,705 --> 00:00:52,820
Я не слишком доволен этим маркированным списком,

11
00:00:52,820 --> 00:00:59,350
я хочу удалить эти пулевые точки, а затем просто показать их как только ссылки там.

12
00:00:59,350 --> 00:01:03,440
Поэтому, чтобы сделать это, я собираюсь использовать другой стиль списка, называемый как

13
00:01:03,440 --> 00:01:08,120
list- unstyled и применить его к этому тегу UL там.

14
00:01:08,120 --> 00:01:09,950
Возвращаясь к нашей веб-странице,

15
00:01:09,950 --> 00:01:12,425
к этому тегу UL в нижнем колонтитуле,

16
00:01:12,425 --> 00:01:21,520
я собираюсь применить класс как список без стиля,

17
00:01:23,230 --> 00:01:32,275
и это устранит эти пули перед этими ссылками там.

18
00:01:32,275 --> 00:01:40,375
Теперь позвольте мне добавить несколько пользовательских классов CSS на страницу index.html.

19
00:01:40,375 --> 00:01:49,635
Для этого мы теперь создадим папку здесь и назовем ее как папка CSS здесь.

20
00:01:49,635 --> 00:01:51,650
Внутри папки CSS

21
00:01:51,650 --> 00:01:59,670
я собираюсь создать новый файл и назову файл как styles.css.

22
00:01:59,670 --> 00:02:02,835
Теперь, внутри файла styles.css,

23
00:02:02,835 --> 00:02:11,685
я могу добавить некоторые классы CSS, чтобы стилизовать нашу страницу.

24
00:02:11,685 --> 00:02:14,600
Позвольте мне добавить некоторые классы CSS здесь.

25
00:02:14,600 --> 00:02:18,765
Итак, я бы добавил свой первый класс в качестве заголовка строки.

26
00:02:18,765 --> 00:02:21,035
Таким образом, как следует из названия,

27
00:02:21,035 --> 00:02:23,770
этот класс я применяю к заголовку.

28
00:02:23,770 --> 00:02:28,865
И затем я бы применил маржу как

29
00:02:28,865 --> 00:02:34,330
нулевой пиксель авто, а

30
00:02:34,330 --> 00:02:40,150
затем заполнял как нулевой пиксель авто.

31
00:02:40,150 --> 00:02:41,820
Итак, это для заголовка строки.

32
00:02:41,820 --> 00:02:46,100
Итак, у меня будет нулевое поле и нулевое заполнение для заголовка строки.

33
00:02:46,100 --> 00:02:48,840
А затем для содержимого строки,

34
00:02:48,840 --> 00:02:54,005
поэтому я собираюсь добавить еще один класс CSS под названием row-content.

35
00:02:54,005 --> 00:03:01,470
И тогда для этого я добавлю маржу нулевой пиксель автоматически,

36
00:03:01,470 --> 00:03:07,815
а затем заполнение имеет его на 50 пикселей,

37
00:03:07,815 --> 00:03:16,170
ноль пикселей, 50 и ноль пикселей.

38
00:03:16,170 --> 00:03:21,060
Затем я собираюсь добавить границу в

39
00:03:21,060 --> 00:03:28,880
нижней части моей строки здесь.

40
00:03:28,880 --> 00:03:35,195
А потом, границу я дам ему один пиксель, а потом назову его хребтом.

41
00:03:35,195 --> 00:03:45,915
И я установлю минимальную высоту 400 пикселей для содержания здесь.

42
00:03:45,915 --> 00:03:51,910
Таким образом, моя веб-страница будет выглядеть более приятной на экране.

43
00:03:51,910 --> 00:03:55,475
Теперь это снова, вы должны попробовать и

44
00:03:55,475 --> 00:03:59,900
увидеть, пока вы не будете удовлетворены тем, как страница выложена.

45
00:03:59,900 --> 00:04:03,560
Теперь также, я собираюсь включить

46
00:04:03,560 --> 00:04:08,320
еще один класс, называемый как нижний колонтитул, который, как вы могли уже догадаться,

47
00:04:08,320 --> 00:04:13,560
я собираюсь применить к нижнему колонтитулу, и я

48
00:04:13,560 --> 00:04:21,100
применим цвет фона к нижнему колонтитулу как D1C4E9.

49
00:04:29,140 --> 00:04:32,465
Если вы спросите меня, как я выбрал цвет,

50
00:04:32,465 --> 00:04:37,630
я просто посмотрел вверх цвет, а затем я был доволен этим цветом.

51
00:04:37,630 --> 00:04:41,460
Вы можете выбрать любой цвет, который вы хотите применить,

52
00:04:41,460 --> 00:04:44,460
но этот цвет кажется хорошим для меня.

53
00:04:44,460 --> 00:04:46,950
Итак, я добавил этот цвет.

54
00:04:46,950 --> 00:04:50,110
И для заполнения, для нижнего колонтитула,

55
00:04:50,110 --> 00:04:58,890
я бы добавил 20 пикселей и нулевых пикселей.

56
00:04:59,100 --> 00:05:06,160
Теперь, как только я добавил эти стили в свой файл CSS,

57
00:05:06,160 --> 00:05:10,610
позвольте мне применить файл CSS к странице index.html.

58
00:05:10,610 --> 00:05:12,820
Я перехожу на страницу index.html.

59
00:05:12,820 --> 00:05:18,950
Очевидно, мне нужно использовать этот файл CSS внутри моей страницы index.html.

60
00:05:18,950 --> 00:05:22,160
Поэтому сразу после файла CSS bootstrap

61
00:05:22,160 --> 00:05:32,200
я собираюсь сделать ссылку и таблицу стилей,

62
00:05:32,970 --> 00:05:39,900
и это файл style.css там.

63
00:05:39,900 --> 00:05:43,525
Так вот где хранится мой файл CSS.

64
00:05:43,525 --> 00:05:49,760
Итак, я собираюсь включить это в мою страницу index.html.

65
00:05:49,760 --> 00:05:56,350
Теперь я собираюсь пойти в тело и применить классы, которые я только что создал.

66
00:05:56,350 --> 00:05:57,955
Поэтому, перейдя к заголовку,

67
00:05:57,955 --> 00:06:03,055
я применим класс заголовка строки к div в заголовке.

68
00:06:03,055 --> 00:06:07,475
Затем, для содержимого,

69
00:06:07,475 --> 00:06:14,085
я бы применил классы содержимого строк к строкам там.

70
00:06:14,085 --> 00:06:21,180
Итак, к трем строкам в содержимом

71
00:06:21,190 --> 00:06:26,690
я применяю класс содержимого строки, а затем спускаюсь к нижнему колонтитулу,

72
00:06:26,690 --> 00:06:28,325
к тегу нижнего колонтитула,

73
00:06:28,325 --> 00:06:32,315
я применим нижний колонтитул класса здесь,

74
00:06:32,315 --> 00:06:35,240
а затем сохраню изменения.

75
00:06:35,240 --> 00:06:38,290
Пойдем и взглянем на эту страницу сейчас.

76
00:06:38,290 --> 00:06:40,430
Перейдя на вашу веб-страницу,

77
00:06:40,430 --> 00:06:45,970
мы уже начинаем видеть некоторые интересные изменения в веб-странице.

78
00:06:45,970 --> 00:06:48,960
Итак, теперь вы можете видеть, что контент

79
00:06:48,960 --> 00:06:52,445
на веб-странице был выложен немного более чистым.

80
00:06:52,445 --> 00:06:58,290
Это нижняя граница, которую мы добавили к содержимому строки,

81
00:06:58,290 --> 00:07:03,200
поэтому вы можете видеть, что существует достаточное разделение между строками, хотя

82
00:07:03,200 --> 00:07:08,530
содержимое строк по-прежнему позиционируется в верхней части строк,

83
00:07:08,530 --> 00:07:11,900
поэтому у вас есть эти три строки, а затем посмотрите на нижний колонтитул, нижний

84
00:07:11,900 --> 00:07:17,740
колонтитул теперь имеет приобрел цвет фона, который я применил,

85
00:07:17,740 --> 00:07:26,717
и обратите внимание, как ссылки стилизованы со списком без стиля на левой стороне здесь.

86
00:07:26,717 --> 00:07:33,495
Мы еще не закончили, нам нужно сделать еще несколько изменений на странице index.html,

87
00:07:33,495 --> 00:07:39,320
а затем вернуться и посмотреть на окончательный результат этого упражнения.

88
00:07:39,320 --> 00:07:41,485
Возвращаясь к вашему редактору,

89
00:07:41,485 --> 00:07:46,955
я собираюсь добавить еще несколько классов CSS в мою структуру стиля,

90
00:07:46,955 --> 00:07:53,290
это файл, поэтому я собираюсь пойти туда, а затем добавить класс под названием Jumbotron.

91
00:07:53,290 --> 00:07:59,265
Итак, вы увидите, что мы уже применили Jumbotron к нашему заголовку там.

92
00:07:59,265 --> 00:08:03,145
Теперь, если я добавлю больше свойств к этому классу Jumbotron,

93
00:08:03,145 --> 00:08:05,875
это будет применено к Jumbotron,

94
00:08:05,875 --> 00:08:11,535
в дополнение к стандартному Jumbotron по умолчанию, который уже включает в себя bootstrap.

95
00:08:11,535 --> 00:08:13,835
Я собираюсь добавить еще несколько вещей,

96
00:08:13,835 --> 00:08:17,355
я собираюсь добавить в дополнение

97
00:08:17,735 --> 00:08:28,765
70 и 30 пикселей на его окрестности,

98
00:08:29,095 --> 00:08:38,515
а затем поле нулевого пикселя вокруг,

99
00:08:38,515 --> 00:08:51,685
и я установлю фон этого на 9575CD.

100
00:08:51,685 --> 00:09:01,065
Это несколько более темный фиолетовый цвет, который, кажется, очень хорошо идет на Jumbotron.

101
00:09:01,065 --> 00:09:03,430
Опять же, методом проб и ошибок,

102
00:09:03,430 --> 00:09:04,975
я выбрал этот цвет,

103
00:09:04,975 --> 00:09:11,735
а также цвет текста как цветочный белый.

104
00:09:13,205 --> 00:09:15,305
Итак, для Jumbotron

105
00:09:15,305 --> 00:09:18,615
мы собираемся применить эти классы, а также,

106
00:09:18,615 --> 00:09:24,765
я собираюсь применить еще один класс к классу адресов.

107
00:09:24,765 --> 00:09:26,520
У нас есть адрес в нижнем колонтитуле,

108
00:09:26,520 --> 00:09:34,685
поэтому я собираюсь изменить размер шрифта на 80 процентов,

109
00:09:34,685 --> 00:09:38,935
немного меньший шрифт, чем обычный шрифт,

110
00:09:38,955 --> 00:09:43,455
и поле, я дам ему нулевой пиксель,

111
00:09:43,455 --> 00:09:50,285
а цвет, я собираюсь использовать ноль F,

112
00:09:50,285 --> 00:09:52,350
ноль F, ноль F,

113
00:09:52,350 --> 00:09:54,730
а затем сохранить изменения.

114
00:09:54,730 --> 00:09:58,730
Таким образом, добавлено еще несколько классов CSS,

115
00:09:58,730 --> 00:10:01,530
переключившись обратно на index.html.

116
00:10:01,530 --> 00:10:03,475
То, что я собираюсь сделать сейчас,

117
00:10:03,475 --> 00:10:07,775
это перейти к строкам содержимого, а затем

118
00:10:07,775 --> 00:10:11,990
я попытаюсь разместить этот контент в середине,

119
00:10:11,990 --> 00:10:14,605
вертикально в этой строке.

120
00:10:14,605 --> 00:10:17,930
Здесь я собираюсь воспользоваться помощью

121
00:10:17,930 --> 00:10:23,050
вертикального выравнивания, которое поддерживает сетка начальной загрузки через поддержку Flexbox.

122
00:10:23,050 --> 00:10:31,395
Чтобы сделать это, я бы сказал align-items-center,

123
00:10:31,495 --> 00:10:38,620
поэтому это другой класс, который мне нужно добавить, align-items-center.

124
00:10:38,620 --> 00:10:45,475
И я собираюсь добавить это к остальным двум строкам также,

125
00:10:45,475 --> 00:10:51,735
align-items-center ко второй и третьей строкам,

126
00:10:53,185 --> 00:11:01,965
и это должно сделать вертикальное выравнивание содержимого строк.

127
00:11:01,965 --> 00:11:03,880
Мы увидим результат через минуту.

128
00:11:03,880 --> 00:11:06,230
Спустимся в нижний колонтитул.

129
00:11:06,230 --> 00:11:09,835
В нижнем колонтитуле вы видите, что мы использовали

130
00:11:09,835 --> 00:11:13,825
колонку auto для этого контента авторских прав там.

131
00:11:13,825 --> 00:11:18,265
Теперь я собираюсь разместить это прямо в середине по горизонтали,

132
00:11:18,265 --> 00:11:24,160
используя этот класс justofy-content-center,

133
00:11:24,160 --> 00:11:32,755
поэтому там есть оправдание контента и несколько других классов.

134
00:11:32,755 --> 00:11:35,890
Я собираюсь использовать для оправдания класса Content-center для этого.

135
00:11:35,890 --> 00:11:44,605
Это по существу разместит этот столбец в центре строки там.

136
00:11:44,725 --> 00:11:48,560
Это применимо к этому, а затем,

137
00:11:48,560 --> 00:11:51,415
одно небольшое изменение, которое я собираюсь сделать,

138
00:11:51,415 --> 00:11:53,370
- это этот внутренний div там,

139
00:11:53,370 --> 00:12:01,665
я собираюсь применить класс в качестве текстового центра к

140
00:12:01,665 --> 00:12:06,435
этому, чтобы эти ссылки центрировались на экране.

141
00:12:06,435 --> 00:12:11,340
С этими изменениями, давайте посмотрим на веб-страницу,

142
00:12:11,340 --> 00:12:14,135
в конце этого упражнения.

143
00:12:14,135 --> 00:12:16,120
Перейдя на нашу веб-страницу,

144
00:12:16,120 --> 00:12:20,020
наша веб-страница уже начинает выглядеть еще лучше,

145
00:12:20,020 --> 00:12:25,885
так что теперь вы можете видеть, что Jumbotron теперь стилизован с новым цветом фона,

146
00:12:25,885 --> 00:12:28,955
который немного темно-фиолетовый там,

147
00:12:28,955 --> 00:12:34,980
и надпись теперь в цветочном белом цветочном цвете,

148
00:12:34,980 --> 00:12:37,190
немного отступом там,

149
00:12:37,190 --> 00:12:44,345
затем теперь можно увидеть, что содержимое в строках содержимого теперь центрируется по вертикали,

150
00:12:44,345 --> 00:12:47,500
для трех строк содержимого.

151
00:12:47,500 --> 00:12:54,645
Это использование align-items-center, который мы применили к строкам там.

152
00:12:54,645 --> 00:12:56,525
Затем, перейдя в нижний колонтитул,

153
00:12:56,525 --> 00:13:03,380
теперь можно увидеть, что это авторское право теперь оправдано до центра экрана.

154
00:13:03,380 --> 00:13:08,155
Посмотрите, как здесь были сосредоточены ссылки.

155
00:13:08,155 --> 00:13:15,985
Я понял, что хочу также позиционировать это вертикально центрирование в этой конкретной строке,

156
00:13:15,985 --> 00:13:19,855
поэтому давайте пойдем и применим еще один класс, чтобы переместить это

157
00:13:19,855 --> 00:13:24,540
в центр этой конкретной строки по вертикали.

158
00:13:24,540 --> 00:13:27,100
Так что, чтобы сделать это, возвращаясь к индексу.

159
00:13:27,100 --> 00:13:34,115
html, в нижнем колонтитуле для этого конкретного столбца, который содержит их,

160
00:13:34,115 --> 00:13:41,795
я буду применять класс как align-self-center.

161
00:13:41,795 --> 00:13:48,485
Это должно быть применено к div, который использует класс столбца.

162
00:13:48,485 --> 00:13:54,185
При этом конкретное содержимое будет выровнено по центру строки.

163
00:13:54,185 --> 00:13:56,570
Оставшийся контент останется на вершине.

164
00:13:56,570 --> 00:13:59,575
Давайте в конце взглянем на нижний колонтитул.

165
00:13:59,575 --> 00:14:01,705
Перейдя к нижнему колонтитулу на нашей веб-странице,

166
00:14:01,705 --> 00:14:06,345
теперь вы можете увидеть, как это было позиционировано вертикально в центре.

167
00:14:06,345 --> 00:14:10,715
Эти два фрагментов содержимого все еще выровнены в верхней части строки,

168
00:14:10,715 --> 00:14:15,215
это нормально, потому что это выглядит там хорошо,

169
00:14:15,215 --> 00:14:21,340
но этот я перетащил его вертикально в центр этой конкретной строки.

170
00:14:21,340 --> 00:14:25,545
С этим мы завершаем это упражнение.

171
00:14:25,545 --> 00:14:30,005
В этом упражнении мы видели использование пользовательских классов CSS,

172
00:14:30,005 --> 00:14:35,125
а также использовали некоторые классы для

173
00:14:35,125 --> 00:14:41,660
обоснования содержимого по горизонтали и вертикали в наших строках.

174
00:14:41,660 --> 00:14:45,695
Это хорошее время для вас сделать хороший комментарий с сообщением,

175
00:14:45,695 --> 00:14:48,735
Bootstrap grid, часть вторая.