1
00:00:03,550 --> 00:00:05,885
В предыдущей лекции

2
00:00:05,885 --> 00:00:08,860
мы узнали о адаптивном дизайне.

3
00:00:08,860 --> 00:00:12,300
Мы также кратко упомянули, что система Grid Bootstrap

4
00:00:12,300 --> 00:00:16,505
предназначена для поддержки отзывчивых веб-сайтов.

5
00:00:16,505 --> 00:00:20,275
Как сетка Bootstraps поддерживает это?

6
00:00:20,275 --> 00:00:23,765
И что именно включает в себя Grid Bootstrap,

7
00:00:23,765 --> 00:00:27,710
что позволяет нам создавать отзывчивые веб-сайты?

8
00:00:27,710 --> 00:00:32,535
Давайте поговорим немного подробнее о системе Grid Bootstrap

9
00:00:32,535 --> 00:00:36,700
и о том, как она поддерживает отзывчивость.

10
00:00:36,700 --> 00:00:45,450
Мы видели использование метатега viewport в предыдущем уроке,

11
00:00:45,450 --> 00:00:53,590
когда мы сделали первоначальное упражнение по настройке Bootstrap на нашей странице index.html.

12
00:00:53,590 --> 00:00:58,790
Тогда я кратко сослался на эту конкретную строку в коде.

13
00:00:58,790 --> 00:01:05,015
Давайте попробуем понять, почему мы используем это на нашей странице index.html.

14
00:01:05,015 --> 00:01:08,090
Здесь мы указываем, что,

15
00:01:08,090 --> 00:01:14,555
когда наша веб-страница визуализируется браузером в определенном устройстве, то

16
00:01:14,555 --> 00:01:20,970
их рендеринг в браузере будет учитывать размер экрана и

17
00:01:20,970 --> 00:01:28,080
автоматически адаптировать рендеринг страницы к ширине экрана устройств.

18
00:01:28,080 --> 00:01:32,090
Таким образом, у нас есть адаптивные классы,

19
00:01:32,090 --> 00:01:35,740
классы CSS, встроенные в нашу структуру пользовательского интерфейса,

20
00:01:35,740 --> 00:01:39,030
то это гарантирует, что наша веб-страница

21
00:01:39,030 --> 00:01:42,855
правильно отображается для этого конкретного размера экрана.

22
00:01:42,855 --> 00:01:46,930
Это место, где система Grid Bootstrap приходит нам на помощь и

23
00:01:46,930 --> 00:01:51,000
позволяет нам создавать отзывчивые веб-сайты.

24
00:01:51,000 --> 00:01:53,480
Поэтому снова, подчеркивая этот момент,

25
00:01:53,480 --> 00:01:57,100
сетка Bootstrap предназначена для отзывчивой.

26
00:01:57,100 --> 00:02:01,525
Вы уже видели, что это означает в предыдущей лекции,

27
00:02:01,525 --> 00:02:07,845
и мобильный сначала, о котором мы уже говорили в предыдущей лекции, а затем жидкости,

28
00:02:07,845 --> 00:02:11,055
автоматически адаптируясь к ширине экрана.

29
00:02:11,055 --> 00:02:16,220
Сетка Bootstrap использует преимущества макета CSS flexbox.

30
00:02:16,220 --> 00:02:19,860
Макет CSS flexbox, который поддерживается

31
00:02:19,860 --> 00:02:23,955
более поздними версиями различных браузеров,

32
00:02:23,955 --> 00:02:30,070
позволяет гораздо более простые и гибкие варианты макета в CSS.

33
00:02:30,070 --> 00:02:31,980
Теперь фактическое обсуждение того,

34
00:02:31,980 --> 00:02:36,800
как работает макет CSS flexbox, выходит за рамки этого курса,

35
00:02:36,800 --> 00:02:41,040
мы ограничимся тем, как CSS flexbox

36
00:02:41,040 --> 00:02:45,565
используется Bootstrap для своей системы сетки.

37
00:02:45,565 --> 00:02:54,710
Ранее у Bootstrap была своя система сетки, которая предшествовала макету CSS flexbox,

38
00:02:54,710 --> 00:02:58,840
но последняя версия Bootstrap

39
00:02:58,840 --> 00:03:06,650
сделала макет CSS flexbox в качестве стандарта для сетки Bootstrap.

40
00:03:06,650 --> 00:03:10,375
Эта компоновка flexbox может легко обрабатывать

41
00:03:10,375 --> 00:03:17,390
динамический контент и может адаптировать контейнеры к динамическому контенту,

42
00:03:17,390 --> 00:03:20,780
а также может легко адаптироваться к

43
00:03:20,780 --> 00:03:24,890
неизвестному размеру фактического содержимого, заключенного внутри контейнеров.

44
00:03:24,890 --> 00:03:30,320
Макет flexbox также поддерживает агностический макет направления.

45
00:03:30,320 --> 00:03:37,084
То, что макет flexbox приносит в сетки Bootstrap, -

46
00:03:37,084 --> 00:03:44,005
это возможность сделать легкое вертикальное выравнивание содержимого внутри родительского элемента.

47
00:03:44,005 --> 00:03:48,595
Мы увидим использование этого в упражнении, которое следует.

48
00:03:48,595 --> 00:03:52,625
Кроме того, он позволяет легко переупорядочить содержание

49
00:03:52,625 --> 00:03:58,170
на различных устройствах и разрешения экрана с помощью медиа-запросов.

50
00:03:58,170 --> 00:04:03,050
Опять же, мы увидим немного этого в упражнении о том, как Bootstrap

51
00:04:03,050 --> 00:04:08,645
использует это для поддержки интересных способов выкладки контента.

52
00:04:08,645 --> 00:04:11,670
Кроме того, само содержимое,

53
00:04:11,670 --> 00:04:19,275
контейнеры содержимого также могут быть спроектированы как столбцы равной высоты, так что

54
00:04:19,275 --> 00:04:25,245
контейнер содержимого с наибольшей высотой определяет

55
00:04:25,245 --> 00:04:32,915
высоту всех оставшихся контейнеров, которые расположены в той же строке.

56
00:04:32,915 --> 00:04:39,375
Давайте теперь поговорим немного подробнее о сетке Bootstrap и о том, как она на самом деле работает.

57
00:04:39,375 --> 00:04:41,400
Способ работы сетки Bootstrap

58
00:04:41,400 --> 00:04:48,765
заключается в применении контейнера плюс к самому внешнему слою.

59
00:04:48,765 --> 00:04:51,815
Мы можем использовать div для

60
00:04:51,815 --> 00:04:57,075
определения элемента, для которого мы применяем класс контейнера в целом.

61
00:04:57,075 --> 00:05:03,855
Контейнер является самой внешней единицей, в пределах которой выкладывается фактическое содержимое.

62
00:05:03,855 --> 00:05:10,220
Bootstrap поддерживает как класс контейнера, который является макетом фиксированной ширины,

63
00:05:10,220 --> 00:05:16,010
что означает, что сам контент ограничен фиксированной шириной на экране.

64
00:05:16,010 --> 00:05:22,420
Этот класс контейнера позволяет этой фиксированной ширине автоматически адаптироваться

65
00:05:22,420 --> 00:05:25,920
к размеру экрана с помощью медиа-запросов, так

66
00:05:25,920 --> 00:05:29,695
что реагирующий дизайн приходит в наше спасение.

67
00:05:29,695 --> 00:05:36,340
Позже мы увидим, как этот контейнер будет подстраиваться под различные размеры экрана.

68
00:05:36,340 --> 00:05:39,490
Теперь у нас также есть гибкость использования в

69
00:05:39,490 --> 00:05:42,684
другой классической жидкости контейнера, которая

70
00:05:42,684 --> 00:05:49,200
позволяет контейнер автоматически адаптироваться к размеру экрана.

71
00:05:49,200 --> 00:05:50,855
Но контейнер с фиксированной шириной

72
00:05:50,855 --> 00:05:56,270
фиксирует размер фактической ширины макета.

73
00:05:56,270 --> 00:06:01,370
Внутри контейнера содержимое будет выложено в виде строк,

74
00:06:01,370 --> 00:06:04,770
поэтому, как правило, то, что мы будем делать внутри

75
00:06:04,770 --> 00:06:08,360
и из div, к которому мы применяем класс контейнера,

76
00:06:08,360 --> 00:06:12,440
мы включим внутренний div, к которому мы будем применять класс строки.

77
00:06:12,440 --> 00:06:17,550
Таким образом, сам контент будет разбит по вертикали на несколько строк.

78
00:06:17,550 --> 00:06:21,000
И как только это будет разделено на строки, в каждой строке

79
00:06:21,000 --> 00:06:25,995
вы можете затем разместить содержимое с помощью столбцов.

80
00:06:25,995 --> 00:06:28,810
Таким образом, каждая строка в Bootstrap

81
00:06:28,810 --> 00:06:34,565
будет разделена на 12 столбцов одинакового размера.

82
00:06:34,565 --> 00:06:43,820
Теперь вы можете создать свой контент, чтобы занять любое количество этих 12 столбцов.

83
00:06:43,820 --> 00:06:48,900
Итак, и тот факт, что сам контент адаптируется к

84
00:06:48,900 --> 00:06:51,310
ширине экрана и сама строка,

85
00:06:51,310 --> 00:06:54,710
заключенная внутри контейнера, автоматически адаптируется к ширине экрана,

86
00:06:54,710 --> 00:06:58,120
а также к столбцам,

87
00:06:58,120 --> 00:07:01,320
будут определены 12 столбцов.

88
00:07:01,320 --> 00:07:05,010
Их ширина будет определяться строкой сама по себе.

89
00:07:05,010 --> 00:07:08,520
Таким образом, это означает, что для разных размеров экрана,

90
00:07:08,520 --> 00:07:12,470
любой контент, который вы макетируете, все эти 12 столбцов

91
00:07:12,470 --> 00:07:18,220
автоматически настраиваются на ширину, разрешенную для содержимого.

92
00:07:18,220 --> 00:07:21,990
Таким образом, это то, как отзывчивость

93
00:07:21,990 --> 00:07:27,370
встроена в сетку Bootstrap для выкладки содержимого.

94
00:07:27,370 --> 00:07:30,285
Итак, как именно мы планируем содержание?

95
00:07:30,285 --> 00:07:33,845
Мы поговорим об этом в следующих нескольких слайдах.

96
00:07:33,845 --> 00:07:36,315
Сетка Bootstrap сама,

97
00:07:36,315 --> 00:07:45,160
предоставляет нам пять классов для указания различных размеров экрана по умолчанию.

98
00:07:45,160 --> 00:07:49,870
Существует класс по умолчанию, который нацелен на все размеры экрана,

99
00:07:49,870 --> 00:07:53,210
начиная от сверхмалого до сверхбольшого.

100
00:07:53,210 --> 00:07:59,205
Таким образом, весь диапазон ширины экрана в терминах Bootstrap

101
00:07:59,205 --> 00:08:02,884
делится на дополнительные малые, малые,

102
00:08:02,884 --> 00:08:07,405
средние, большие и очень большие размеры экрана.

103
00:08:07,405 --> 00:08:11,180
Затем посмотрите, как эти различные классы

104
00:08:11,180 --> 00:08:16,350
размеров экрана подробно определены на одном из последующих слайдов.

105
00:08:16,350 --> 00:08:18,540
Таким образом, в вашем коде

106
00:08:18,540 --> 00:08:22,830
вы определите спецификацию макета,

107
00:08:22,830 --> 00:08:29,060
указав sm для малого размера экрана,

108
00:08:29,060 --> 00:08:32,195
md для среднего, lg для большого

109
00:08:32,195 --> 00:08:35,905
и xl для очень больших размеров экрана.

110
00:08:35,905 --> 00:08:37,400
Таким образом, когда вы делаете макет,

111
00:08:37,400 --> 00:08:40,345
как мы видели на предыдущем слайде,

112
00:08:40,345 --> 00:08:45,405
каждая строка в системе сетки Bootstrap делится на 12 столбцов.

113
00:08:45,405 --> 00:08:50,905
Теперь мы будем размещать контент, используя то, что называется классами столбцов.

114
00:08:50,905 --> 00:08:52,450
Для классов столбцов,

115
00:08:52,450 --> 00:08:59,162
мы можем указать, как макет делается для различной ширины экрана.

116
00:08:59,162 --> 00:09:04,735
Посмотрите на детали этого в последующих слайдах позже.

117
00:09:04,735 --> 00:09:11,020
Но позвольте мне быстро обратить ваше внимание на то, как мы указываем размеры колонок.

118
00:09:11,020 --> 00:09:13,655
Они могут указать размеры столбцов как col,

119
00:09:13,655 --> 00:09:19,485
который является одним из классов, которые они скажут col-sm для

120
00:09:19,485 --> 00:09:25,360
малых и col-md для средних и больших и очень больших и так далее.

121
00:09:25,360 --> 00:09:29,810
Теперь эти классы столбцов используются, чтобы

122
00:09:29,810 --> 00:09:38,260
точно указать, сколько столбцов в строке будет занимать каждый кусок содержимого.

123
00:09:38,260 --> 00:09:40,015
Как это работает?

124
00:09:40,015 --> 00:09:42,215
Увидим это на следующем слайде.

125
00:09:42,215 --> 00:09:45,565
Итак, возвращаясь к нашей Bootstrap Grid,

126
00:09:45,565 --> 00:09:50,345
предположим, что у нас есть часть контента, и мы хотим выложить спокойствие контента.

127
00:09:50,345 --> 00:09:54,915
Мы можем указать, что этот контент заключен внутри другого div,

128
00:09:54,915 --> 00:09:57,815
к которому мы применяем класс столбца,

129
00:09:57,815 --> 00:10:00,390
например, col-sm-5.

130
00:10:00,390 --> 00:10:08,560
Таким образом, в этом случае мы указываем, что для небольших и очень больших размеров экрана

131
00:10:08,560 --> 00:10:15,890
этот фрагмент контента будет занимать пять столбцов из этих 12 столбцов.

132
00:10:15,890 --> 00:10:17,505
Теперь ты сразу спросишь меня,

133
00:10:17,505 --> 00:10:19,835
как насчет дополнительного курения?

134
00:10:19,835 --> 00:10:23,465
Если он явно не указан для дополнительной смарт-блокировки

135
00:10:23,465 --> 00:10:27,120
по всей ширине 12 столбцов,

136
00:10:27,120 --> 00:10:31,575
они могут явно указать, от какого диапазона до

137
00:10:31,575 --> 00:10:38,135
какого диапазона макет столбца будет занимать сколько столбцов.

138
00:10:38,135 --> 00:10:39,890
Итак, в этом конкретном случае,

139
00:10:39,890 --> 00:10:42,470
когда я указываю, я называю их только sm-5,

140
00:10:42,470 --> 00:10:48,295
я имею в виду, что этот конкретный контент, который заключен внутри этих div,

141
00:10:48,295 --> 00:10:52,375
будет занимать пять столбцов для

142
00:10:52,375 --> 00:10:56,595
всех размеров экрана, от малого до очень большого.

143
00:10:56,595 --> 00:11:00,595
Теперь мы видим, что из 12 столбцов

144
00:11:00,595 --> 00:11:02,515
мы уже заняли пять столбцов.

145
00:11:02,515 --> 00:11:05,070
Осталось еще семь столбцов.

146
00:11:05,070 --> 00:11:09,925
Я мог бы взять еще один кусок контента, а затем разместить его справа от этого,

147
00:11:09,925 --> 00:11:14,085
защитив другой div, а затем применив столбец sm-7.

148
00:11:14,085 --> 00:11:15,855
Теперь, в этом случае,

149
00:11:15,855 --> 00:11:18,065
вы видите, что 5 плюс 7 равно 12.

150
00:11:18,065 --> 00:11:22,900
Таким образом, эти две части содержимого, которые заключены в два div,

151
00:11:22,900 --> 00:11:25,530
теперь будут расположены бок

152
00:11:25,530 --> 00:11:30,070
о бок, и общая сумма из них занимает всю ширину столбца 12.

153
00:11:30,070 --> 00:11:35,765
Итак, вот как мы можем указать и работать с 12 столбцами

154
00:11:35,765 --> 00:11:42,630
в определении макета текущего уровня.

155
00:11:42,630 --> 00:11:46,960
С использованием макета гибкого окна CSS

156
00:11:46,960 --> 00:11:51,660
Bootstrap также поддерживает то, что называется столбцами автокомпоновки.

157
00:11:51,660 --> 00:11:52,905
Итак, в этом случае

158
00:11:52,905 --> 00:11:55,380
я могу просто указать

159
00:11:55,380 --> 00:12:00,060
столбец sm, не указывая, сколько столбцов он должен занимать.

160
00:12:00,060 --> 00:12:07,570
Но в случае, если я указываю три столбца ширины

161
00:12:07,570 --> 00:12:13,575
Doobs sm в моем heml 5, то сетка начальной загрузки автоматически разместит это содержимое внутри этих div

162
00:12:13,575 --> 00:12:14,905
, бок о бок, так

163
00:12:14,905 --> 00:12:18,875
что каждый из них получает одну треть от общей ширины.

164
00:12:18,875 --> 00:12:22,220
Итак, поскольку у нас 12 столбцов здесь,

165
00:12:22,220 --> 00:12:26,045
каждый из этих трех получит по четыре столбца.

166
00:12:26,045 --> 00:12:32,525
И об этом автоматически заботится механизм макета bootstraps.

167
00:12:32,525 --> 00:12:35,550
Теперь мы можем явно указать

168
00:12:35,550 --> 00:12:40,375
количество столбцов, которые занимают определенный фрагмент контента.

169
00:12:40,375 --> 00:12:45,625
Так, например, предположим, что я указываю три класса столбцов,

170
00:12:45,625 --> 00:12:49,565
но средний я указываю столбец sm 6.

171
00:12:49,565 --> 00:12:52,615
Затем, что происходит, когда bootstrap делает макет,

172
00:12:52,615 --> 00:12:55,760
средний будет занимать шесть столбцов,

173
00:12:55,760 --> 00:13:01,885
а затем левый и правый части контента будут занимать все, что осталось.

174
00:13:01,885 --> 00:13:04,785
Итак, из 12 столбцов, которые у нас есть,

175
00:13:04,785 --> 00:13:08,630
если 6 столбцов, которые занимают средний кусок контента,

176
00:13:08,630 --> 00:13:12,855
то мы оставили с нами еще 6 столбцов и которые будут

177
00:13:12,855 --> 00:13:17,965
поровну разделены между содержимым и двумя сторонами этого среднего столбца.

178
00:13:17,965 --> 00:13:23,585
Таким образом, каждый из них получит свободные столбцы пространства каждый.

179
00:13:23,585 --> 00:13:27,730
Таким образом, макет автоматически выполняется с помощью Bootstrap.

180
00:13:27,730 --> 00:13:34,110
В упражнении мы увидим различные комбинации использования такого рода

181
00:13:34,110 --> 00:13:43,680
спецификаций, сколько столбцов каждый кусок контента будет занимать в цветовой компоновке.

182
00:13:43,680 --> 00:13:49,135
В этой таблице кратко описывается, как Bootstrap

183
00:13:49,135 --> 00:13:54,860
обрабатывает различные сетки экрана и, соответственно, как вы идентифицируете эти сетки экрана.

184
00:13:54,860 --> 00:13:57,095
Итак, как я указывал ранее,

185
00:13:57,095 --> 00:14:04,580
Bootstrap делит весь диапазон ширины экрана на 5 классов.

186
00:14:04,580 --> 00:14:12,890
Дополнительные маленькие экраны — это те, чьи сетки находятся ниже 776 пикселей.

187
00:14:12,890 --> 00:14:22,090
Небольшие экраны - это те, которые находятся между 576 и ниже 768 пикселей.

188
00:14:22,090 --> 00:14:25,600
Средние экраны от 768 до 992,

189
00:14:25,600 --> 00:14:31,380
большие от 992 до 1200 и все около 1200 пикселей ширина

190
00:14:31,380 --> 00:14:34,685
рассматривается как очень большой экран.

191
00:14:34,685 --> 00:14:39,390
Таким образом, так настраивается сетка Bootstrap по умолчанию.

192
00:14:39,390 --> 00:14:43,570
Теперь, как только вам будет комфортно с Bootstrap,

193
00:14:43,570 --> 00:14:48,595
вы также можете настроить эти подразделения самостоятельно.

194
00:14:48,595 --> 00:14:50,770
Но для этого курса

195
00:14:50,770 --> 00:14:56,210
мы собираемся остаться с конфигурацией по умолчанию, поддерживаемой bootstrap.

196
00:14:56,210 --> 00:14:59,195
Теперь поведение сетки в этом случае

197
00:14:59,195 --> 00:15:01,825
заключается в том, что все, что выложено для сверхмалого,

198
00:15:01,825 --> 00:15:04,885
будет горизонтально во все времена,

199
00:15:04,885 --> 00:15:09,235
для более высоких битов они будут свернуты до ширины 2start,

200
00:15:09,235 --> 00:15:13,040
но горизонтально относительно точек разрыва.

201
00:15:13,040 --> 00:15:17,855
Мы увидим, как это работает в короткое время с некоторыми примерами.

202
00:15:17,855 --> 00:15:24,980
Теперь мы видели использование контейнера на предыдущем слайде.

203
00:15:24,980 --> 00:15:28,545
Для небольших экранов

204
00:15:28,545 --> 00:15:32,895
ширина контейнера автоматически определяется шириной экрана.

205
00:15:32,895 --> 00:15:34,575
Но для малых, средних,

206
00:15:34,575 --> 00:15:36,045
больших и очень больших,

207
00:15:36,045 --> 00:15:39,425
ширина контейнера как указано.

208
00:15:39,425 --> 00:15:42,600
Итак, если вы используете div с контейнером класса,

209
00:15:42,600 --> 00:15:46,105
то для небольших экранов это 540 пикселей.

210
00:15:46,105 --> 00:15:52,330
Таким образом, вы заметите, что если у вас есть ширина экрана от 576 до 768,

211
00:15:52,330 --> 00:15:56,485
ваш контент будет выложен в 540 пикселей,

212
00:15:56,485 --> 00:16:00,670
будет центрирован по ширине экрана.

213
00:16:00,670 --> 00:16:08,435
Таким образом, оставшееся пространство будет оставлено в виде полей по обе стороны от этого содержимого.

214
00:16:08,435 --> 00:16:12,795
Аналогично, для среды это 720 пикселей и так далее.

215
00:16:12,795 --> 00:16:17,640
Теперь вы указываете, сколько столбцов занимает каждый контент.

216
00:16:17,640 --> 00:16:20,885
Затем префиксы класса столбцов, которые вы будете использовать

217
00:16:20,885 --> 00:16:26,670
is.col для дополнительных маленьких, .col-sm для малых,

218
00:16:26,670 --> 00:16:29,420
вплоть до очень больших.

219
00:16:29,420 --> 00:16:31,625
Если вы укажете что-то с.col-md,

220
00:16:31,625 --> 00:16:36,530
то это применимо для средних и сверхбольших экранов.

221
00:16:36,530 --> 00:16:41,785
Итак, всякий раз, когда вы указываете какие-либо col- и некоторые числа,

222
00:16:41,785 --> 00:16:47,895
то это относится к этому конкретному размеру экрана и всему, что касается этого размера экрана.

223
00:16:47,895 --> 00:16:51,035
Теперь, во всех случаях размера экрана,

224
00:16:51,035 --> 00:16:54,955
количество столбцов определяется как 12 столбцов.

225
00:16:54,955 --> 00:17:02,345
Сетка в случае bootstrap предназначена для 12 столбцов и это настраивается,

226
00:17:02,345 --> 00:17:04,830
но значение по умолчанию 12 столбцов.

227
00:17:04,830 --> 00:17:10,355
Причина выбора 12 заключается в том, что 12 является хорошим кратным двум, трем,

228
00:17:10,355 --> 00:17:11,755
четырем и так далее.

229
00:17:11,755 --> 00:17:14,965
Таким образом, это дает вам много гибкости с точки зрения того,

230
00:17:14,965 --> 00:17:19,065
сколько столбцов вы выбираете, чтобы раскладывать свой контент.

231
00:17:19,065 --> 00:17:22,345
Между каждым столбцом, поэтому, если вы

232
00:17:22,345 --> 00:17:25,510
выложите две части содержимого бок о бок с их divs,

233
00:17:25,510 --> 00:17:31,035
между этими двумя фрагментами контента они будут небольшим желоба, который будет оставлен.

234
00:17:31,035 --> 00:17:37,255
Пустое пространство, которое будет оставлено без ширины желоба,

235
00:17:37,255 --> 00:17:41,030
которая по умолчанию составляет всего 30 пикселей.

236
00:17:41,030 --> 00:17:45,855
Таким образом, 15 пикселей от одного фрагмента контента и 15 пикселей от другого фрагмента контента.

237
00:17:45,855 --> 00:17:48,600
SumTotal вместе 30 пикселей

238
00:17:48,600 --> 00:17:53,470
пробела останется между двумя фрагментами содержимого.

239
00:17:53,470 --> 00:17:57,465
Подумайте о том, как

240
00:17:57,465 --> 00:18:01,530
выполняется макет столбца

241
00:18:01,530 --> 00:18:04,970
газеты, и вы начинаете видеть соответствие между макетом столбца газеты и как

242
00:18:04,970 --> 00:18:10,815
сетка начальной загрузки делает макет содержимого на этом поле.

243
00:18:10,815 --> 00:18:14,725
Сетка Bootastrap позволяет вам делать контент следующего уровня,

244
00:18:14,725 --> 00:18:20,710
поэтому вы можете заключать контент внутри содержимого, а затем делать вложенный макет содержимого.

245
00:18:20,710 --> 00:18:23,790
Кроме того, он поддерживает смещения.

246
00:18:23,790 --> 00:18:28,712
Мы увидим использование смещений также в некоторых примерах позже.

247
00:18:28,712 --> 00:18:36,555
Итак, давайте рассмотрим наш первый пример того, как вы применяете классы столбцов bootstraps

248
00:18:36,555 --> 00:18:41,515
и как они будут фактически отображаться на разных размерах экрана.

249
00:18:41,515 --> 00:18:47,310
Вот пример ситуации, когда я применил к двум div,

250
00:18:47,310 --> 00:18:53,510
дефис столбца 12, а затем дефис столбца sm дефис пять для

251
00:18:53,510 --> 00:18:56,050
красного кусочка контента, а для

252
00:18:56,050 --> 00:19:00,980
другого я применил дефис столбца 12 и столбец sm семь.

253
00:19:00,980 --> 00:19:06,045
Таким образом, способ этого контента будет выложен для дополнительных небольших экранов,

254
00:19:06,045 --> 00:19:10,690
два фрагмента контента будут сложены один поверх другого.

255
00:19:10,690 --> 00:19:15,450
Таким образом, красный будет уложен на вершине морской зеленого цвета.

256
00:19:15,450 --> 00:19:19,010
Но для небольших и очень больших экранов

257
00:19:19,010 --> 00:19:22,310
два фрагмента контента будут выложены бок о бок.

258
00:19:22,310 --> 00:19:27,490
Причина этого в том, что мы сказали столбец см пять и столбец см семь для двух.

259
00:19:27,490 --> 00:19:31,510
Таким образом, для небольших и очень больших они раскладываются бок

260
00:19:31,510 --> 00:19:36,210
о бок, так что красный контент будет занимать самые левые

261
00:19:36,210 --> 00:19:45,945
пять столбцов, а зеленое содержимое будет занимать правильные семь столбцов вашей строки,

262
00:19:45,945 --> 00:19:50,440
вплоть до небольших размеров экрана.

263
00:19:50,440 --> 00:19:55,605
Так вот как мы бы указывали макет контента для разных размеров экрана.

264
00:19:55,605 --> 00:20:00,220
Bootstrap также предоставляет дополнительные классы

265
00:20:00,220 --> 00:20:07,055
, называемые как классы дефисов Order, которые позволяют вам изменить порядок содержимого на экране.

266
00:20:07,055 --> 00:20:11,440
Так, например, если вы применяете порядок sm первым, то

267
00:20:11,440 --> 00:20:15,200
порядок некоторого последнего класса к divs,

268
00:20:15,200 --> 00:20:19,265
как показано в примере здесь, в этом случае

269
00:20:19,265 --> 00:20:26,160
div, для которого вы применяете порядок sm last, будет нажата в

270
00:20:26,160 --> 00:20:29,390
правую сторону экрана, а порядок

271
00:20:29,390 --> 00:20:33,125
sm first div будет перемещен в левую сторону Экран.

272
00:20:33,125 --> 00:20:38,570
Таким образом, применение этих классов заказов позволяет переупорядочить содержимое скрипта.

273
00:20:38,570 --> 00:20:45,000
Не только это, заказ sm также позволяет указать тот же порядок sm один на

274
00:20:45,000 --> 00:20:51,750
заказ sm 12, чтобы указать порядок, в котором контент должен быть отрисован на экране.

275
00:20:51,750 --> 00:20:53,850
Таким образом, используя большее число,

276
00:20:53,850 --> 00:20:57,395
вы можете сдвинуть содержимое в правую сторону

277
00:20:57,395 --> 00:21:01,795
строки, а меньшее число сместит содержимое в левую сторону строки.

278
00:21:01,795 --> 00:21:05,785
Пример этого мы увидим и в упражнении.

279
00:21:05,785 --> 00:21:10,850
Смешанная интересная поддержка, которую Bootstrap Grid приносит с использованием

280
00:21:10,850 --> 00:21:16,195
макета Flexbox, заключается в вертикальном выравнивании содержимого.

281
00:21:16,195 --> 00:21:19,530
Более ранние версии Bootstrap,

282
00:21:19,530 --> 00:21:22,315
такие как Bootstrap 3 и более ранние,

283
00:21:22,315 --> 00:21:27,915
не имели возможности выполнять вертикальное выравнивание контента.

284
00:21:27,915 --> 00:21:34,870
Используя Flexbox для проектирования Bootstrap Grid в Bootstrap 4,

285
00:21:34,870 --> 00:21:41,365
мы получаем гибкость, которую CSS Flexbox приносит с точки зрения вертикального выравнивания.

286
00:21:41,365 --> 00:21:46,295
Поэтому, если вы хотите, чтобы содержимое было вертикально центрировано,

287
00:21:46,295 --> 00:21:48,370
то к строке

288
00:21:48,370 --> 00:21:52,765
вы примените класс под названием «центр выравнивания элементов».

289
00:21:52,765 --> 00:21:55,585
Таким образом, в этом случае, независимо от того, какой контент выложен,

290
00:21:55,585 --> 00:22:00,750
будет выложен по вертикали в пределах этой конкретной строки.

291
00:22:00,750 --> 00:22:03,560
Таким образом, содержимое, которое занимает

292
00:22:03,560 --> 00:22:08,780
наибольшую высоту, будет тот, к которому остальные будут

293
00:22:08,780 --> 00:22:16,905
выровнены, когда он выложен в этой строке или если вы предварительно укажете высоту строки,

294
00:22:16,905 --> 00:22:24,935
то все содержимое будет центрировано вертикально внутри этой конкретной строки.

295
00:22:24,935 --> 00:22:30,795
Мало того, что Grid Bootstrap также поддерживает горизонтальное выравнивание содержимого.

296
00:22:30,795 --> 00:22:32,400
Давайте посмотрим на пример.

297
00:22:32,400 --> 00:22:35,060
Поэтому, если вы укажете свой контент таким образом.

298
00:22:35,060 --> 00:22:40,320
Скажем, у вас есть три столбца, а первый вы указываете столбец класса div три,

299
00:22:40,320 --> 00:22:44,140
а затем средний вы скажете div class class auto.

300
00:22:44,140 --> 00:22:47,010
Я собираюсь вернуться к этой колонке авто через короткое время.

301
00:22:47,010 --> 00:22:50,045
И правый говорит столбец класса div 3.

302
00:22:50,045 --> 00:22:53,065
Таким образом, в этом случае мы указываем, что левая и

303
00:22:53,065 --> 00:22:58,540
крайняя правая части контента будут занимать три столбца каждый.

304
00:22:58,540 --> 00:23:02,120
Средний, когда я говорю, «column auto»,

305
00:23:02,120 --> 00:23:07,200
это означает, что количество столбцов, которые

306
00:23:07,200 --> 00:23:14,090
занимает этот конкретный div, будет автоматически определяться содержимым, которое заключено внутри.

307
00:23:14,090 --> 00:23:16,840
Таким образом, исходя из содержимого,

308
00:23:16,840 --> 00:23:21,710
количество столбцов, занятых div, автоматически настраивается.

309
00:23:21,710 --> 00:23:25,070
В этом конкретном случае, в данном макете,

310
00:23:25,070 --> 00:23:31,040
этот конкретный контент размещается в четырех колонках.

311
00:23:31,040 --> 00:23:34,985
Итак, теперь у вас есть четыре столбца, используемые центром div,

312
00:23:34,985 --> 00:23:38,020
три столбца слева и три столбца справа.

313
00:23:38,020 --> 00:23:40,650
Итак, общая сумма, у вас есть 10 столбцов.

314
00:23:40,650 --> 00:23:43,730
Таким образом, у вас есть два столбца, которые остаются пустыми.

315
00:23:43,730 --> 00:23:46,070
Теперь, если для строки задан

316
00:23:46,070 --> 00:23:50,165
параметр «Выравнивание центра содержимого», то

317
00:23:50,165 --> 00:23:54,570
все содержимое этой строки будет центрировано

318
00:23:54,570 --> 00:23:59,365
относительно строки по горизонтали.

319
00:23:59,365 --> 00:24:02,080
Вы также можете иметь содержимое с выравниванием по левому краю,

320
00:24:02,080 --> 00:24:05,584
выравнивание по правому краю и несколько других опций.

321
00:24:05,584 --> 00:24:09,260
Подробности приведены в документации по загрузкам.

322
00:24:09,260 --> 00:24:13,755
Bootstrap также позволяет делать смещения столбцов.

323
00:24:13,755 --> 00:24:16,725
Как это работает? Давайте посмотрим на пример.

324
00:24:16,725 --> 00:24:18,710
В этом столбце смещение,

325
00:24:18,710 --> 00:24:21,320
мы можем указать часть содержимого,

326
00:24:21,320 --> 00:24:27,750
добавить к этому, если мы применим класс как дефис sm дефис один.

327
00:24:27,750 --> 00:24:33,585
То, что мы указываем, это для небольших и очень больших экранов,

328
00:24:33,585 --> 00:24:38,425
этот фрагмент контента должен быть смещен вправо на один столбец.

329
00:24:38,425 --> 00:24:41,970
Поэтому, когда этот контент выложен, как вы можете видеть,

330
00:24:41,970 --> 00:24:49,560
самый левый столбец остается пустым, а содержимое смещается вправо на один столбец.

331
00:24:49,560 --> 00:24:52,925
А оставшийся контент можно размещать на правой стороне.

332
00:24:52,925 --> 00:24:55,860
Таким образом, общая сумма, вы можете видеть, что два div будут

333
00:24:55,860 --> 00:24:59,670
занимать 11 столбцов, но один столбец смещен вправо.

334
00:24:59,670 --> 00:25:05,910
Так вот как мы можем контролировать макет содержимого, используя смещение столбца.

335
00:25:05,910 --> 00:25:07,380
Таким образом, как вы можете видеть,

336
00:25:07,380 --> 00:25:11,280
используя спецификации размера столбца,

337
00:25:11,280 --> 00:25:13,540
вертикальное и горизонтальное выравнивание

338
00:25:13,540 --> 00:25:15,975
, смещение, толчок и тянуть,

339
00:25:15,975 --> 00:25:18,635
и flex сначала и flex последний,

340
00:25:18,635 --> 00:25:23,925
мы можем получить много контроля над тем, как мы выкладываем

341
00:25:23,925 --> 00:25:29,825
содержимое для различной ширины экрана и разных размеров экрана .

342
00:25:29,825 --> 00:25:36,800
Bootstrap идет еще дальше, позволяя вам вставлять контент внутри divs.

343
00:25:36,800 --> 00:25:39,585
Так, например, если вы укажете два div,

344
00:25:39,585 --> 00:25:43,130
как вы видите с столбцом sm пять и столбцом sm семь,

345
00:25:43,130 --> 00:25:45,725
два содержимого будут выложены так, как показано здесь.

346
00:25:45,725 --> 00:25:48,265
Теперь, внутри правого div,

347
00:25:48,265 --> 00:25:50,630
я могу снова войти и

348
00:25:50,630 --> 00:25:58,080
разделить ширину div на строку, а затем эта строка автоматически даст мне

349
00:25:58,080 --> 00:26:04,960
еще 12 столбцов для этой части экрана, а затем я могу сделать макет, используя

350
00:26:04,960 --> 00:26:13,330
вложенность div и сделать макет для разных частей этого столбца .

351
00:26:13,330 --> 00:26:15,595
Таким образом, вложенность, как это,

352
00:26:15,595 --> 00:26:23,570
приносит вам еще большую гибкость в том, как вы раскладываете контент на своем поле.

353
00:26:23,570 --> 00:26:27,910
Со всеми обсуждениями о Bootstrap Grid System и о том, как

354
00:26:27,910 --> 00:26:34,280
Bootstrap Grid поддерживает различные способы размещения контента

355
00:26:34,280 --> 00:26:39,670
, мы перейдем к следующему набору упражнений.

356
00:26:39,670 --> 00:26:45,820
Мы собираемся применить сетку Bootstrap к нашей странице index.html,

357
00:26:45,820 --> 00:26:52,770
чтобы сделать макет содержимого внутри или index.html страницы.

358
00:26:52,770 --> 00:26:57,350
Мы также будем использовать некоторые пользовательские классы CSS.