1
00:00:03,730 --> 00:00:06,755
В предыдущих лекциях

2
00:00:06,755 --> 00:00:12,055
мы узнали о адаптивном дизайне и системе bootstrap grid.

3
00:00:12,055 --> 00:00:18,050
Мы видели, как сетка начальной загрузки позволяет нам создавать отзывчивые веб-сайты.

4
00:00:18,050 --> 00:00:21,890
Пришло время перейти к следующему упражнению.

5
00:00:21,890 --> 00:00:27,755
Мы начнем работать с индексной html-страницей, которую мы создали в

6
00:00:27,755 --> 00:00:34,945
предыдущем упражнении, и применим классы сетки начальной загрузки, чтобы сделать ее отзывчивой.

7
00:00:34,945 --> 00:00:40,760
Кратко взглянув на нашу веб-страницу в браузере, мы видим, что

8
00:00:40,760 --> 00:00:46,415
это все еще ужасно, хотя шрифты немного улучшились,

9
00:00:46,415 --> 00:00:50,645
и теперь мы используем шрифты по умолчанию bootstraps.

10
00:00:50,645 --> 00:01:00,930
Давайте теперь попробуем применить классы сетки bootstrap к index.html, чтобы улучшить его макет.

11
00:01:00,930 --> 00:01:03,805
Перейдя на страницу index.html,

12
00:01:03,805 --> 00:01:07,960
позвольте мне быстро обратить ваше внимание на эту конкретную строку на

13
00:01:07,960 --> 00:01:12,805
странице index.html, которую мы уже включили в предыдущее упражнение.

14
00:01:12,805 --> 00:01:14,660
Я говорил об этой строке,

15
00:01:14,660 --> 00:01:17,065
а потом мы говорили о системе загрузочной сетки.

16
00:01:17,065 --> 00:01:23,895
Итак, здесь мы видим, что мы указали мета-теги с портом представления и содержимым,

17
00:01:23,895 --> 00:01:26,090
ширину как ширину устройства,

18
00:01:26,090 --> 00:01:29,205
и начальный масштаб один и уменьшить, чтобы соответствовать нет.

19
00:01:29,205 --> 00:01:33,210
Таким образом, этот метатег позволяет нам сделать

20
00:01:33,210 --> 00:01:39,225
нашу веб-страницу отзывчивым, глядя на характер порта представления.

21
00:01:39,225 --> 00:01:42,630
Двигаемся вперед к следующему шагу.

22
00:01:42,630 --> 00:01:49,080
Мы собираемся сворачиваться к телу этой страницы index.html,

23
00:01:49,080 --> 00:01:54,570
а затем искать первый div, который приходит прямо под тегом заголовка там,

24
00:01:54,570 --> 00:02:00,480
к этому div вы собираетесь применить контейнер класса.

25
00:02:00,480 --> 00:02:05,550
Мы уже узнали о классе контейнера в предыдущей лекции.

26
00:02:05,550 --> 00:02:09,125
Поэтому, как только мы применим класс контейнера,

27
00:02:09,125 --> 00:02:12,410
затем взглянув на нашу веб-страницу, мы видим,

28
00:02:12,410 --> 00:02:16,620
что часть содержимого прямо там уже адаптировалась.

29
00:02:16,620 --> 00:02:23,080
Посмотрите на разницу между содержанием здесь и тем, что ниже.

30
00:02:23,080 --> 00:02:25,370
Теперь этот контент ниже здесь,

31
00:02:25,370 --> 00:02:30,960
находится в нижнем колонтитуле нашей страницы index.html, и этот контент находится в заголовке.

32
00:02:30,960 --> 00:02:36,890
Но этот контент посередине является фактическим содержимым нашей веб-страницы,

33
00:02:36,890 --> 00:02:40,785
то есть внутри div, к которому мы применяем контейнер.

34
00:02:40,785 --> 00:02:47,480
Таким образом, применяя класс контейнера, вы можете сразу увидеть, что ширина страницы, внутри

35
00:02:47,480 --> 00:02:50,700
которой размещен наш контент, теперь

36
00:02:50,700 --> 00:02:54,660
сократилась, а затем у вас есть дополнительное пространство

37
00:02:54,660 --> 00:02:58,935
с обеих сторон, поэтому, поскольку эта ширина контейнера является контейнером фиксированного размера,

38
00:02:58,935 --> 00:03:02,330
наш контент будет фиксирован в этом определенную ширину

39
00:03:02,330 --> 00:03:07,425
на экране, оставляя достаточно поля с обеих сторон в качестве пробела.

40
00:03:07,425 --> 00:03:13,315
Давайте применим один и тот же класс контейнера как к заголовку, так и к нижнему колонтитулу,

41
00:03:13,315 --> 00:03:17,355
а затем посмотрим, как изменяется содержимое.

42
00:03:17,355 --> 00:03:20,200
Возвращаясь к нашей веб-странице,

43
00:03:20,200 --> 00:03:24,940
то, что я собираюсь сделать сейчас, это для

44
00:03:24,940 --> 00:03:28,165
внутреннего содержимого здесь, внутреннего div внутри контейнера,

45
00:03:28,165 --> 00:03:34,110
я собираюсь применить класс в качестве класса строки здесь,

46
00:03:34,110 --> 00:03:35,885
к этому первому,

47
00:03:35,885 --> 00:03:38,125
и я просто скопирую это.

48
00:03:38,125 --> 00:03:44,675
Я собираюсь применить то же самое ко второму div здесь, который выстроен для div,

49
00:03:44,675 --> 00:03:49,230
а также прокрутите вниз, а затем к третьему div здесь,

50
00:03:49,230 --> 00:03:51,375
я также применяю класс строки здесь.

51
00:03:51,375 --> 00:03:56,110
Итак, теперь содержимое внутри этого внешнего класса контейнера

52
00:03:56,110 --> 00:03:57,950
теперь разделено на три строки,

53
00:03:57,950 --> 00:04:01,395
поэтому все, что внутри здесь, будет одна строка,

54
00:04:01,395 --> 00:04:02,640
что бы там ни было,

55
00:04:02,640 --> 00:04:06,150
будет второй строкой, а одна здесь будет третьей строкой.

56
00:04:06,150 --> 00:04:10,380
Позже мы применим классы столбцов к этому.

57
00:04:10,380 --> 00:04:17,695
Давайте теперь перейдем к заголовку в нашем теле index.html.

58
00:04:17,695 --> 00:04:23,970
И к заголовку я собираюсь применить класс, называемый jumbotron.

59
00:04:23,970 --> 00:04:28,265
Компонент jumbotron позволяет

60
00:04:28,265 --> 00:04:33,805
выделить содержимое внутри jumbotron от остальной части страницы.

61
00:04:33,805 --> 00:04:39,035
Мы увидим результат в короткое время, когда мы на результирующей веб-странице.

62
00:04:39,035 --> 00:04:42,215
Теперь, к div внутри этого заголовка,

63
00:04:42,215 --> 00:04:46,360
я собираюсь применить класс как контейнер,

64
00:04:46,360 --> 00:04:49,410
так что все, что находится внутри содержимого,

65
00:04:49,410 --> 00:04:52,945
теперь будет ограничено шириной контейнера там.

66
00:04:52,945 --> 00:04:57,670
Аналогичным образом, двигаясь вниз к нижнему колонтитулу здесь,

67
00:04:58,780 --> 00:05:01,650
в нижнем колонтитуле также,

68
00:05:01,650 --> 00:05:04,720
первый div внутри нижнего колонтитула,

69
00:05:04,720 --> 00:05:09,360
я собираюсь применить класс как контейнер.

70
00:05:09,360 --> 00:05:13,055
И div внутри,

71
00:05:13,055 --> 00:05:16,755
я собираюсь применить класс как строку там,

72
00:05:16,755 --> 00:05:19,735
к div внутри.

73
00:05:19,735 --> 00:05:25,225
Таким образом, этот div приведет нас к этому конкретному div здесь.

74
00:05:25,225 --> 00:05:29,105
И затем следующий div также, который находится прямо ниже этого,

75
00:05:29,105 --> 00:05:31,820
я применим класс как строку.

76
00:05:31,820 --> 00:05:35,380
Итак, теперь мой нижний колонтитул содержит две строки здесь,

77
00:05:35,380 --> 00:05:38,520
мы будем стилизовать содержимое, используя столбец,

78
00:05:38,520 --> 00:05:40,110
классы в короткое время.

79
00:05:40,110 --> 00:05:42,365
Перейдя к заголовку также,

80
00:05:42,365 --> 00:05:51,500
я применим класс строки ко второму div внутри контейнера div здесь.

81
00:05:51,500 --> 00:05:54,920
Таким образом, этот div, который соответствует мне это,

82
00:05:54,920 --> 00:05:58,605
будет одной строкой в заголовке.

83
00:05:58,605 --> 00:06:02,400
Давайте посмотрим на нашу результирующую веб-страницу.

84
00:06:02,400 --> 00:06:04,365
Перейдя на нашу веб-страницу,

85
00:06:04,365 --> 00:06:09,300
теперь вы можете увидеть, что содержимое заголовка теперь отдельно от

86
00:06:09,300 --> 00:06:14,935
остальных внутри этого серого окна сверху.

87
00:06:14,935 --> 00:06:22,735
Но сам контент теперь выстроился с содержанием ниже.

88
00:06:22,735 --> 00:06:25,685
Теперь это результат использования контейнера.

89
00:06:25,685 --> 00:06:27,550
Переходя к нижнему колонтитулу,

90
00:06:27,550 --> 00:06:32,635
теперь вы можете видеть, что содержимое нижнего колонтитула также выстроилось внутри контейнера.

91
00:06:32,635 --> 00:06:36,800
Но страница все еще выглядит не так здорово,

92
00:06:36,800 --> 00:06:44,705
теперь мы применим классы столбцов к внутренним divs.

93
00:06:44,705 --> 00:06:48,665
Возвращаясь к странице index.html,

94
00:06:48,665 --> 00:06:51,865
мы теперь начнем применять классы столбцов.

95
00:06:51,865 --> 00:06:58,365
Поэтому, перейдя к заголовку, ко второму внутреннему div внутри jumbotron здесь,

96
00:06:58,365 --> 00:07:06,230
позвольте мне применить класс как столбец 12, столбец sm-6.

97
00:07:06,230 --> 00:07:09,960
Итак, здесь контент в

98
00:07:09,960 --> 00:07:15,525
этом первом div будет занимать всю строку для дополнительных небольших размеров экрана,

99
00:07:15,525 --> 00:07:18,770
а затем будет занимать половину строки, поэтому столбец

100
00:07:18,770 --> 00:07:24,235
sm-6 для небольших и очень больших размеров экрана.

101
00:07:24,235 --> 00:07:26,480
Теперь, аналогично для второго div здесь,

102
00:07:26,480 --> 00:07:28,715
хотя он не содержит никакого содержания,

103
00:07:28,715 --> 00:07:37,840
я собираюсь определить классы столбцов здесь как столбец 12, а затем столбец sm.

104
00:07:37,840 --> 00:07:40,990
Итак, обратите внимание, что здесь, указав столбец 12,

105
00:07:40,990 --> 00:07:45,270
я явно заявляю, что для дополнительных небольших размеров экрана любой контент

106
00:07:45,270 --> 00:07:49,860
внутри этого div будет уложен ниже содержания здесь.

107
00:07:49,860 --> 00:07:54,150
А затем для небольших и очень больших размеров экрана,

108
00:07:54,150 --> 00:07:59,270
этот контент будет занимать оставшееся количество

109
00:07:59,270 --> 00:08:04,925
столбцов в строке для небольших или очень больших размеров экрана.

110
00:08:04,925 --> 00:08:09,255
Поэтому здесь, в этом случае, поскольку шесть столбцов заняты этим содержимым,

111
00:08:09,255 --> 00:08:12,745
это получит оставшиеся шесть столбцов там.

112
00:08:12,745 --> 00:08:18,030
Перемещение вниз к строкам содержимого здесь,

113
00:08:18,030 --> 00:08:20,110
для содержимого здесь,

114
00:08:20,110 --> 00:08:22,860
поэтому для этого первого контента,

115
00:08:22,860 --> 00:08:24,590
который является меткой здесь,

116
00:08:24,590 --> 00:08:29,240
я собираюсь применить классы как столбец 12,

117
00:08:29,240 --> 00:08:34,985
столбец sm-4, столбец md-3.

118
00:08:34,985 --> 00:08:39,770
Таким образом, заявляя, что для дополнительных небольших размеров экрана

119
00:08:39,770 --> 00:08:42,650
это будет занимать всю строку, для малых

120
00:08:42,650 --> 00:08:44,160
он будет занимать полные столбцы,

121
00:08:44,160 --> 00:08:46,585
а затем для средних и сверхбольших,

122
00:08:46,585 --> 00:08:50,395
он будет занимать три столбца в строке.

123
00:08:50,395 --> 00:08:56,810
Теперь, поэтому оставшаяся часть будет занята содержимым ниже здесь,

124
00:08:56,810 --> 00:09:00,575
так что я буду применять классы как col,

125
00:09:00,575 --> 00:09:05,715
указывая, что это будет уложено ниже

126
00:09:05,715 --> 00:09:11,025
содержания здесь в дополнительных небольших размерах экрана,

127
00:09:11,025 --> 00:09:12,690
а затем я скажу столбец sm,

128
00:09:12,690 --> 00:09:16,940
так что это означает, что это будет занимать оставшиеся восемь столбцов здесь,

129
00:09:16,940 --> 00:09:19,300
потому что четыре столбца заняты этим,

130
00:09:19,300 --> 00:09:22,360
а затем мы скажем столбец md,

131
00:09:22,360 --> 00:09:24,320
так что это означает, что это будет занимать

132
00:09:24,320 --> 00:09:27,300
оставшиеся девять столбцов, потому что три столбца заняты

133
00:09:27,300 --> 00:09:33,230
для средних и сверхбольших размеров экрана содержимым выше здесь.

134
00:09:33,230 --> 00:09:37,810
Теперь, когда я определил для первой строки содержимого,

135
00:09:37,810 --> 00:09:43,070
я собираюсь взять то же приложение класса столбцов здесь,

136
00:09:43,070 --> 00:09:49,415
а затем применить это ко второй строке здесь,

137
00:09:49,415 --> 00:09:52,345
а также к третьей строке содержимого здесь.

138
00:09:52,345 --> 00:09:57,240
Аналогичным образом, я собираюсь скопировать этот, а затем применить то же самое к

139
00:09:57,240 --> 00:10:04,690
контенту divs ниже здесь.

140
00:10:04,690 --> 00:10:11,950
Итак, теперь мы настроили как заголовок, так и столбцы содержимого там.

141
00:10:11,950 --> 00:10:14,690
Давайте теперь спустимся к нижнему колонтитулу.

142
00:10:14,690 --> 00:10:21,260
В нижнем колонтитуле вы заметите, что этот div содержит три внутренних div здесь,

143
00:10:21,260 --> 00:10:23,720
поэтому для каждого из этих трех внутренних div здесь

144
00:10:23,720 --> 00:10:26,570
я собираюсь применить соответствующие классы столбцов.

145
00:10:26,570 --> 00:10:27,680
Итак, для первого,

146
00:10:27,680 --> 00:10:35,280
который содержит ссылки на различные страницы, которые будут являться частью этого веб-сайта,

147
00:10:35,280 --> 00:10:38,395
я собираюсь применить класс столбца,

148
00:10:38,395 --> 00:10:46,045
как столбец четыре, столбец sm-2 здесь.

149
00:10:46,045 --> 00:10:50,840
Таким образом, это означает, что для дополнительных небольших размеров экрана

150
00:10:50,840 --> 00:10:55,320
это будет занимать четыре столбца, а для малых и очень больших,

151
00:10:55,320 --> 00:10:58,660
он будет занимать только два столбца здесь.

152
00:10:59,040 --> 00:11:01,790
Затем для второго,

153
00:11:01,790 --> 00:11:08,425
второй div там я буду применять классы как столбец семь.

154
00:11:08,425 --> 00:11:12,050
Так что обратите внимание, что у меня есть четыре здесь, а затем семь здесь,

155
00:11:12,050 --> 00:11:14,755
так что общее количество занимает 11 столбцов.

156
00:11:14,755 --> 00:11:16,430
Я оставил один столбец пустым.

157
00:11:16,430 --> 00:11:21,520
Я вернусь позже, чтобы применить смещение, чтобы позаботиться о дополнительном столбце.

158
00:11:21,520 --> 00:11:23,400
Итак, это столбец семь,

159
00:11:23,400 --> 00:11:31,345
а затем кол-см-5 ко второму.

160
00:11:31,345 --> 00:11:33,630
Так что это два плюс пять, семь.

161
00:11:33,630 --> 00:11:36,390
Поэтому у меня все еще осталось пять столбцов,

162
00:11:36,390 --> 00:11:40,685
которые я могу использовать для третьего div здесь.

163
00:11:40,685 --> 00:11:44,610
Теперь для дополнительных небольших размеров экрана

164
00:11:44,610 --> 00:11:47,700
эти два содержимого будут размещены бок о бок,

165
00:11:47,700 --> 00:11:52,080
а затем этот div, который содержит ссылки на

166
00:11:52,080 --> 00:11:58,585
сайт социальных сетей, будет в отдельной строке, сложенной ниже.

167
00:11:58,585 --> 00:12:04,390
Но для небольших и очень больших размеров экрана

168
00:12:04,390 --> 00:12:07,680
первый будет занимать две колонки,

169
00:12:07,680 --> 00:12:10,240
второй будет занимать пять, а остальные будут

170
00:12:10,240 --> 00:12:13,545
заняты ссылками в социальных сетях здесь.

171
00:12:13,545 --> 00:12:15,230
Итак, для третьего

172
00:12:15,230 --> 00:12:18,650
я собираюсь применить класс

173
00:12:18,650 --> 00:12:26,515
как col-12 col-sm-4 здесь.

174
00:12:26,515 --> 00:12:32,625
Таким образом, col-12 col-sm-4, что означает, что это будет занимать

175
00:12:32,625 --> 00:12:37,090
отдельный набор из 12 столбцов,

176
00:12:37,090 --> 00:12:42,310
уложенных ниже предыдущего содержимого для дополнительных небольших размеров экрана,

177
00:12:42,310 --> 00:12:45,040
но для небольших и очень больших он будет занимать четыре столбца.

178
00:12:45,040 --> 00:12:46,815
Итак, здесь мы четыре плюс пять,

179
00:12:46,815 --> 00:12:48,430
девять плюс два 11.

180
00:12:48,430 --> 00:12:52,635
Таким образом, один столбец все еще остается для небольших и очень больших.

181
00:12:52,635 --> 00:12:57,510
Так вот как я собираюсь применить этот столбец ближе всего к этому.

182
00:12:57,510 --> 00:13:03,250
Теперь у нас все еще есть тот, который ниже, где мы имеем авторские права на это.

183
00:13:03,250 --> 00:13:08,745
Я собираюсь применить класс как автоматический столбец,

184
00:13:08,745 --> 00:13:12,050
что означает, что этот контент будет занимать

185
00:13:12,050 --> 00:13:15,515
достаточно столбцов, как того требует содержание там.

186
00:13:15,515 --> 00:13:20,405
Позже вы увидите, что я буду позиционировать этот контент в центре

187
00:13:20,405 --> 00:13:26,385
экрана, тем самым используя еще один класс bootstrap CSS.

188
00:13:26,385 --> 00:13:29,035
Мы подойдем к этому в следующем упражнении.

189
00:13:29,035 --> 00:13:33,405
Таким образом, с этим мы применили различные классы столбцов к заголовку

190
00:13:33,405 --> 00:13:35,880
, содержимому и нижнему колонтитулу.

191
00:13:35,880 --> 00:13:39,280
Это хорошее время для нас, чтобы сохранить изменения, а затем пойти и

192
00:13:39,280 --> 00:13:43,475
взглянуть на обновленные индексированные или HTML страницы.

193
00:13:43,475 --> 00:13:46,690
Взглянув на нашу страницу index.html,

194
00:13:46,690 --> 00:13:51,315
вы заметите, как в заголовке, который является Jumbotron,

195
00:13:51,315 --> 00:13:55,145
содержимое теперь занимает только половину экрана.

196
00:13:55,145 --> 00:14:00,210
Другая половина экрана этой строки теперь остается пустой.

197
00:14:00,210 --> 00:14:03,180
Спускаясь к строкам содержимого,

198
00:14:03,180 --> 00:14:07,685
вы видите, что метка на левой стороне занимает

199
00:14:07,685 --> 00:14:14,280
три или четыре столбца в зависимости от того, какой размер экрана используется,

200
00:14:14,280 --> 00:14:18,250
а остальное занято остальной частью содержимого.

201
00:14:18,250 --> 00:14:19,780
Итак, здесь у нас есть одна

202
00:14:19,780 --> 00:14:21,770
строка, вторая и третья строка.

203
00:14:21,770 --> 00:14:26,330
И затем нижний колонтитул здесь вы можете увидеть, что ссылки находятся на левой стороне,

204
00:14:26,330 --> 00:14:28,065
остальные в середине,

205
00:14:28,065 --> 00:14:31,150
а затем ссылки в социальных сетях на правой стороне.

206
00:14:31,150 --> 00:14:35,460
Так что это для экрана среднего размера.

207
00:14:35,460 --> 00:14:42,765
Теперь, если вы хотите посмотреть на один и тот же вид для дополнительных небольших или малых размеров экрана,

208
00:14:42,765 --> 00:14:45,045
если вы используете Chrome,

209
00:14:45,045 --> 00:14:47,960
тогда у Chrome есть инструменты разработчика, которые вы можете

210
00:14:47,960 --> 00:14:51,010
включить, нажав на инструменты разработчика представления,

211
00:14:51,010 --> 00:14:53,105
и когда

212
00:14:53,105 --> 00:14:56,890
появятся инструменты разработчика, вы заметите, позвольте мне уменьшить размер Здесь.

213
00:14:56,890 --> 00:15:00,930
Вы заметите это маленькое окно там.

214
00:15:00,930 --> 00:15:06,500
Поэтому нажатие на это включит отзывчивый вид для этих сайтов там.

215
00:15:06,500 --> 00:15:15,680
Таким образом, вы можете видеть, что здесь вид этой же веб-страницы на пикселе к сайту,

216
00:15:15,680 --> 00:15:19,300
который составляет 411 на 731 в портретном режиме,

217
00:15:19,300 --> 00:15:22,805
так что это соответствует дополнительному маленькому размеру экрана,

218
00:15:22,805 --> 00:15:25,300
так что вы можете увидеть, как содержание выложено.

219
00:15:25,300 --> 00:15:28,145
Таким образом, вы можете увидеть содержание Jumbotron там

220
00:15:28,145 --> 00:15:31,745
, а затем оставшуюся часть контента ниже здесь.

221
00:15:31,745 --> 00:15:34,585
А потом вниз к нижнему колонтитулу.

222
00:15:34,585 --> 00:15:40,500
Таким образом, в нижнем колонтитуле вы можете увидеть, как ссылки и объявление размещены бок о бок.

223
00:15:40,500 --> 00:15:45,880
Теперь уменьшает размер экрана, чтобы мы могли видеть, как этот нижний колонтитул проложен здесь.

224
00:15:45,880 --> 00:15:48,735
Остальная часть, у вас есть ссылки на левой стороне,

225
00:15:48,735 --> 00:15:51,470
у вас есть адрес на правой стороне,

226
00:15:51,470 --> 00:15:56,515
а затем ссылки на социальные сети внизу в отдельной строке здесь,

227
00:15:56,515 --> 00:15:59,775
а затем авторские права внизу.

228
00:15:59,775 --> 00:16:04,935
Так что это интересный вид, который мы видим для дополнительных небольших размеров экрана.

229
00:16:04,935 --> 00:16:07,450
Возвращаясь к нашему коду здесь,

230
00:16:07,450 --> 00:16:11,710
я собираюсь применить классы порядка и смещения к

231
00:16:11,710 --> 00:16:17,255
этому контенту, чтобы отобразить содержимое немного по-другому.

232
00:16:17,255 --> 00:16:21,850
Поэтому перейдя к строке содержимого здесь,

233
00:16:21,850 --> 00:16:27,820
для двух div здесь, которые содержат содержимое,

234
00:16:27,820 --> 00:16:32,020
я собираюсь применить классы как

235
00:16:32,020 --> 00:16:40,150
order-sm-last для первой строки здесь.

236
00:16:40,150 --> 00:16:50,120
И затем для этого внизу я сначала применим заказ sm к ряду здесь.

237
00:16:50,120 --> 00:16:53,300
Это означает, что когда этот контент отображается,

238
00:16:53,300 --> 00:16:56,090
это содержимое будет вытащить в левую сторону экрана, а затем

239
00:16:56,090 --> 00:16:58,880
этот столбец будет нажат в правую сторону экрана.

240
00:16:58,880 --> 00:17:02,400
Так что это будет заказано с правой стороны, и это будет заказано с левой стороны.

241
00:17:02,400 --> 00:17:08,075
Как я объяснил о положениях заказа в предыдущей лекции.

242
00:17:08,075 --> 00:17:09,880
Аналогично со второй строки,

243
00:17:09,880 --> 00:17:13,330
я собираюсь оставить его как таковой, но из третьей строки я собираюсь применить

244
00:17:13,330 --> 00:17:17,240
тот же набор классов порядка.

245
00:17:17,240 --> 00:17:20,290
Поэтому я собираюсь перейти к третьей строке здесь,

246
00:17:20,290 --> 00:17:25,425
а затем применить order-sm-last к этому,

247
00:17:25,425 --> 00:17:30,850
а затем я применим order-sm-сначала к этому.

248
00:17:31,460 --> 00:17:36,450
И поэтому этот снова будет переупорядочен

249
00:17:36,450 --> 00:17:38,300
таким образом, что этот контент будет отображаться

250
00:17:38,300 --> 00:17:40,870
слева, и этот контент будет отображаться справа.

251
00:17:40,870 --> 00:17:46,640
Это просто способ позиционирования контента немного более интересным способом.

252
00:17:46,640 --> 00:17:50,210
Теперь, двигаясь вниз в нижний колонтитул здесь,

253
00:17:50,210 --> 00:17:54,690
теперь я собираюсь применить класс offset здесь.

254
00:17:54,690 --> 00:18:00,440
Так что обратите внимание, что я упомянул, что эти два столбца будут занимать четыре плюс семь, 11.

255
00:18:00,440 --> 00:18:02,130
Таким образом, один столбец оставлен.

256
00:18:02,130 --> 00:18:07,295
Поэтому я собираюсь применить класс offset-1 к этому.

257
00:18:07,295 --> 00:18:12,320
Таким образом, это означает, что этот контент на этом div будет нажат прямо на один столбец здесь.

258
00:18:12,320 --> 00:18:14,710
Точно так же, поскольку я сказал, что смещение,

259
00:18:14,710 --> 00:18:23,145
это будет применяться к дополнительным маленьким вплоть до очень больших размеров экрана.

260
00:18:23,145 --> 00:18:28,235
И так это использование класса offset.

261
00:18:28,235 --> 00:18:30,060
Так что теперь, когда мы внесли изменения,

262
00:18:30,060 --> 00:18:36,285
давайте сохраним изменения, а затем пойдем и взглянем на нашу веб-страницу в браузере.

263
00:18:36,285 --> 00:18:38,430
Возвращаясь к этому

264
00:18:38,430 --> 00:18:43,715
браузеру, вы теперь видите, как заголовок выглядит как раньше,

265
00:18:43,715 --> 00:18:46,850
но в первой строке содержимого

266
00:18:46,850 --> 00:18:49,090
вы видите, что этот контент был нажат на

267
00:18:49,090 --> 00:18:51,925
левую сторону, а метка — на правую сторону.

268
00:18:51,925 --> 00:18:56,090
Вторая строка отличается, как и раньше.

269
00:18:56,090 --> 00:18:58,330
Но для третьего вы увидите, что это было

270
00:18:58,330 --> 00:19:00,780
нажато вправо, и это было нажато влево.

271
00:19:00,780 --> 00:19:06,900
Так что есть использование класса order-sm-last и order-sm-first.

272
00:19:06,900 --> 00:19:08,530
Теперь, перейдя к нижнему колонтитулу,

273
00:19:08,530 --> 00:19:18,195
вы видите, что содержимое в первом div здесь было нажато прямо на один столбец,.

274
00:19:18,195 --> 00:19:21,560
Таким образом, вы можете видеть, что здесь есть один столбец пробелов,

275
00:19:21,560 --> 00:19:27,790
и это не толкается вправо, а остальные были отформатированы соответствующим образом.

276
00:19:27,790 --> 00:19:32,235
Таким образом, мы завершаем изменения

277
00:19:32,235 --> 00:19:37,790
на нашей странице index.html или дополнительной странице для этого конкретного упражнения.

278
00:19:37,790 --> 00:19:41,665
Этим мы завершаем это конкретное упражнение.

279
00:19:41,665 --> 00:19:46,235
В этом упражнении мы рассмотрели использование

280
00:19:46,235 --> 00:19:53,800
классов контейнеров, строк и столбцов, чтобы создать нашу веб-страницу немного приятнее.

281
00:19:53,800 --> 00:19:57,705
Во второй части упражнения, которое будет следовать за этим,

282
00:19:57,705 --> 00:20:04,680
мы собираемся добавить больше, чтобы попытаться улучшить способ отображения этих веб-страниц.

283
00:20:04,680 --> 00:20:08,375
Это до сих пор не к моему удовлетворению.

284
00:20:08,375 --> 00:20:12,920
Очевидно, что все еще есть возможности для улучшения.

285
00:20:12,920 --> 00:20:16,290
Это может быть подходящее время для вас сделать комментарий git с

286
00:20:16,290 --> 00:20:21,470
сообщением Bootstrap Grid Part One.