1
00:00:03,750 --> 00:00:11,555
Следующее упражнение рассматривает способы отображения контента на нашей веб-странице.

2
00:00:11,555 --> 00:00:17,190
Они смотрят на то, как мы можем включать таблицы в нашу веб-страницу и как мы можем

3
00:00:17,190 --> 00:00:23,845
стилизовать эти таблицы, используя классы Bootstrap для стилизации таблиц,

4
00:00:23,845 --> 00:00:27,720
включая адаптивный дизайн таблиц.

5
00:00:27,720 --> 00:00:30,860
Мы также рассмотрим другой универсальный компонент

6
00:00:30,860 --> 00:00:34,290
, который доступен в Bootstrap называется как карта.

7
00:00:34,290 --> 00:00:39,125
Карточка позволяет отображать контент миллионами способов.

8
00:00:39,125 --> 00:00:44,495
Итак, мы рассмотрим два разных способа использования карты для отображения контента.

9
00:00:44,495 --> 00:00:49,275
Позже мы будем видеть использование карт снова и снова

10
00:00:49,275 --> 00:00:56,635
для будущих проектов определенных частей нашего сайта.

11
00:00:56,635 --> 00:01:02,520
Чтобы начать работу, откройте страницу aboutus.html.

12
00:01:02,520 --> 00:01:06,035
Мы собираемся вставить таблицу и две карты на

13
00:01:06,035 --> 00:01:10,215
странице aboutus.html, чтобы отобразить некоторые карты.

14
00:01:10,215 --> 00:01:19,130
Во-первых, давайте медленно прокручиваем вниз, пока после этой карты для информации о лидерстве,

15
00:01:19,130 --> 00:01:23,170
и прямо там я собираюсь представить еще один div, в

16
00:01:23,170 --> 00:01:28,045
котором я собираюсь заключить таблицу здесь.

17
00:01:28,045 --> 00:01:31,640
Итак, я введу новую строку здесь,

18
00:01:31,640 --> 00:01:38,135
с классом в качестве строки содержимого.

19
00:01:38,135 --> 00:01:41,185
И внутри этого div

20
00:01:41,185 --> 00:01:51,205
мы введем столбец, в котором будет размещена таблица здесь.

21
00:01:51,205 --> 00:01:55,850
Итак, я введу столбец, столбец 12,

22
00:01:55,870 --> 00:02:05,045
столбец sm-9 и закрою div.

23
00:02:05,045 --> 00:02:11,605
И внутри div, позвольте мне дать заголовок здесь

24
00:02:11,605 --> 00:02:21,940
Факты и цифры и закрыть h2.

25
00:02:23,490 --> 00:02:29,770
Сразу после этого позвольте мне представить еще один div,

26
00:02:33,140 --> 00:02:43,320
что столбец классов sm и столбец sm-3 и закрыть этот div там.

27
00:02:43,320 --> 00:02:46,850
Прямо сейчас мы оставим второй div пустым.

28
00:02:46,850 --> 00:02:53,140
Я собираюсь заполнить таблицу в первый div здесь, а

29
00:02:53,140 --> 00:03:00,435
затем мы быстро посмотрим на таблицу после того, как я добавлю код для таблицы.

30
00:03:00,435 --> 00:03:04,525
Поэтому здесь я перечислил в коде для таблицы.

31
00:03:04,525 --> 00:03:12,190
Давайте посмотрим на стол, а потом вернемся, чтобы обсудить этот код здесь.

32
00:03:12,190 --> 00:03:20,075
Перейдя на страницу «О программе», над которой мы уже работали ранее,

33
00:03:20,075 --> 00:03:23,080
после раздела «Корпоративное лидерство»,

34
00:03:23,080 --> 00:03:27,645
вы увидите новую строку, представляющую таблицу.

35
00:03:27,645 --> 00:03:30,270
Итак, обратите внимание, как стиль таблицы,

36
00:03:30,270 --> 00:03:36,695
поэтому у нас есть заголовок с h2 включенным там,

37
00:03:36,695 --> 00:03:40,465
но давайте сосредоточимся конкретно на этой таблице.

38
00:03:40,465 --> 00:03:43,735
Таким образом, вы видите, что эта таблица была стилизована

39
00:03:43,735 --> 00:03:48,125
с использованием некоторых классов Bootstrap, которые используются для улучшения таблицы.

40
00:03:48,125 --> 00:03:54,735
Заголовок был отрисован с темным фоном,

41
00:03:54,735 --> 00:04:00,770
а затем все правила разработаны таким образом, что альтернативные строки имеют

42
00:04:00,770 --> 00:04:07,295
разный цвет, так что вы можете четко различать строки этой таблицы.

43
00:04:07,295 --> 00:04:13,185
Это то, что в терминах Bootstrap называется полосатой таблицей.

44
00:04:13,185 --> 00:04:17,360
Это один из примеров того, как вы можете стилизовать таблицу.

45
00:04:17,360 --> 00:04:23,250
Теперь интересно, если вы посмотрите на ту же таблицу в небольшом устройстве,

46
00:04:23,250 --> 00:04:25,420
вы заметите, что таблица все еще

47
00:04:25,420 --> 00:04:29,450
видна, за исключением того, что эта таблица теперь становится прокручиваемой.

48
00:04:29,450 --> 00:04:34,280
Таким образом, все, что может отображаться в содержимом, будет показано, а

49
00:04:34,280 --> 00:04:39,120
остальная часть таблицы может быть прокручена по горизонтали на месте.

50
00:04:39,120 --> 00:04:47,840
Таким образом, это отзывчивый компонент поддержки Bootstrap для таблиц в действии.

51
00:04:47,840 --> 00:04:52,120
Теперь давайте посмотрим на сам код.

52
00:04:52,120 --> 00:04:54,970
Теперь, очевидно, эта таблица довольно проста,

53
00:04:54,970 --> 00:04:57,924
она имеет кучу строк и некоторые столбцы.

54
00:04:57,924 --> 00:05:02,070
Таким образом, вы будете ожидать, что я буду использовать типичные

55
00:05:02,070 --> 00:05:06,365
теги th, td и tr.

56
00:05:06,365 --> 00:05:08,225
Возвращаясь к коду,

57
00:05:08,225 --> 00:05:12,490
вы заметите, что я прилагаю эту таблицу внутри

58
00:05:12,490 --> 00:05:16,840
div, к которому я применил таблицу классов, реагирующую.

59
00:05:16,840 --> 00:05:19,700
Это то, что делает эту таблицу отзывчивой, так что на

60
00:05:19,700 --> 00:05:24,490
небольших экранах вы можете горизонтально прокручивать таблицу.

61
00:05:24,490 --> 00:05:26,720
Теперь для самой таблицы

62
00:05:26,720 --> 00:05:29,800
обратите внимание, как я применил два класса.

63
00:05:29,800 --> 00:05:31,230
Одним из них является класс таблицы,

64
00:05:31,230 --> 00:05:34,825
поэтому это переопределяет

65
00:05:34,825 --> 00:05:39,375
рендеринг таблицы по умолчанию в браузерах, предоставляя собственные классы Bootstrap.

66
00:05:39,375 --> 00:05:41,760
А второй говорит «полосатый стол».

67
00:05:41,760 --> 00:05:48,280
Так вот, что проектирует таблицу с альтернативными строками в разных цветах здесь.

68
00:05:48,280 --> 00:05:50,610
Затем сама голова,

69
00:05:50,610 --> 00:05:55,050
так что вы можете видеть, что заголовки, описанные здесь с классом thead-dark,

70
00:05:55,050 --> 00:05:57,925
поэтому это делает голову темной.

71
00:05:57,925 --> 00:06:06,630
И тогда вы увидите, что таблица рисует себя описанной здесь с тегов здесь.

72
00:06:06,630 --> 00:06:09,480
Таким образом, это стандартное определение таблицы.

73
00:06:09,480 --> 00:06:16,410
Тело самой таблицы - это стандартное html5 использование tr,

74
00:06:16,410 --> 00:06:22,760
td и th элементов, с которыми вы уже знакомы в html5.

75
00:06:22,760 --> 00:06:27,180
Таким образом, это то, с чем построена таблица,

76
00:06:27,180 --> 00:06:31,075
а затем вы закрываете тело таблицы. Так вот об этом.

77
00:06:31,075 --> 00:06:36,670
Таким образом, мы все, что уникально в самом Bootstrap,

78
00:06:36,670 --> 00:06:40,060
это применение этих конкретных классов Bootstrap к

79
00:06:40,060 --> 00:06:47,130
самому элементу таблицы, чтобы стиль его дальше,

80
00:06:47,130 --> 00:06:51,360
чтобы вписаться в веб-страницу дизайна Bootstrap.

81
00:06:51,360 --> 00:06:55,360
Следующий компонент, который я собираюсь добавить на

82
00:06:55,360 --> 00:06:59,595
страницу aboutus.html, - это компонент карты в Bootstrap.

83
00:06:59,595 --> 00:07:02,650
Компонент карты позволяет нам отображать контент

84
00:07:02,650 --> 00:07:06,850
, устанавливая его отдельно от остальной части этого контента.

85
00:07:06,850 --> 00:07:12,925
Теперь здесь, прокручивая первую строку здесь,

86
00:07:12,925 --> 00:07:16,925
там у нас есть наша история во втором использовании div,

87
00:07:16,925 --> 00:07:20,915
обратите внимание, что первый div уже занимает col-sm-6,

88
00:07:20,915 --> 00:07:23,915
второй div в настоящее время пуст.

89
00:07:23,915 --> 00:07:25,355
Поэтому к этому div

90
00:07:25,355 --> 00:07:31,320
я добавлю в класс как col-sm.

91
00:07:31,320 --> 00:07:40,670
После этого, перейдя в этот div, я введу еще один div в карточку класса здесь.

92
00:07:40,670 --> 00:07:42,325
Поэтому внутри этих div

93
00:07:42,325 --> 00:07:46,755
я собираюсь создать свою карту, чтобы отобразить здесь какой-то контент.

94
00:07:46,755 --> 00:07:53,870
Таким образом, в этом div мы введем h3, что

95
00:07:53,870 --> 00:08:05,235
класс как заголовок карты bg-первичный.

96
00:08:05,235 --> 00:08:08,110
Таким образом, вы увидите, что этот h3 будет отображаться как

97
00:08:08,110 --> 00:08:12,755
заголовок карты с этим фоном в качестве основного,

98
00:08:12,755 --> 00:08:21,165
а затем белый текст, который класс Bootstrap определит текст, который будет белым в цвете.

99
00:08:21,165 --> 00:08:24,715
И затем внутри этого h3,

100
00:08:24,715 --> 00:08:31,090
я собираюсь представить название этой карты, которая

101
00:08:31,090 --> 00:08:37,580
называется «Факты с первого взгляда».

102
00:08:37,580 --> 00:08:41,950
Чтобы я мог показать некоторый контент внутри этого div здесь.

103
00:08:41,950 --> 00:08:44,915
Теперь, к этой карте,

104
00:08:44,915 --> 00:08:48,520
затем я собираюсь добавить в другой внутренний div

105
00:08:48,520 --> 00:08:55,950
здесь с классом как card-body,

106
00:08:55,950 --> 00:08:59,080
и внутри этого body будет

107
00:08:59,080 --> 00:09:03,370
фактическое содержимое, которое было отображено в этой карте.

108
00:09:03,370 --> 00:09:10,310
Давайте сохраним изменения, а затем пойдем и быстро посмотрим на нашу веб-страницу.

109
00:09:10,310 --> 00:09:12,100
Перейдя на нашу веб-страницу,

110
00:09:12,100 --> 00:09:15,860
мы уже можем увидеть карту, которая принимает форму на нашей веб-странице,

111
00:09:15,860 --> 00:09:19,620
так что вы можете видеть, что левая половина занята историей,

112
00:09:19,620 --> 00:09:24,085
а правая половина вы увидите карту положить на место.

113
00:09:24,085 --> 00:09:27,135
Давайте добавим немного контента в эту карту.

114
00:09:27,135 --> 00:09:29,140
Перейдя в этот блок карты,

115
00:09:29,140 --> 00:09:32,220
теперь я собираюсь использовать список описаний,

116
00:09:32,220 --> 00:09:36,080
и этот список описаний в Bootstrap позволяет мне

117
00:09:36,080 --> 00:09:45,705
применить к нему классы строк и столбцов и тем самым форматировать содержимое внутри.

118
00:09:45,705 --> 00:09:48,360
Поэтому внутри этого списка описаний

119
00:09:48,360 --> 00:09:52,190
я собираюсь добавить

120
00:09:54,890 --> 00:10:00,110
в dt, что класс и col-6 здесь,

121
00:10:00,110 --> 00:10:03,420
так что это означает, что это будет занимать шесть столбцов

122
00:10:03,420 --> 00:10:07,085
внутри этого списка описаний, который сам по себе является строкой здесь.

123
00:10:07,085 --> 00:10:13,785
Так что гнездование, как вы видите, приходя в картинку здесь.

124
00:10:13,785 --> 00:10:16,250
Поэтому к этому dt

125
00:10:16,250 --> 00:10:20,190
я собираюсь добавить в этот заголовок описания здесь,

126
00:10:20,190 --> 00:10:25,470
а затем ниже, что я добавлю в dd с

127
00:10:25,470 --> 00:10:33,330
классом col-6 здесь, а затем я могу добавить в некотором контексте здесь.

128
00:10:36,960 --> 00:10:40,310
И дд здесь.

129
00:10:41,880 --> 00:10:46,755
Давайте сохраним изменения и быстро взглянем на нашу карту.

130
00:10:46,755 --> 00:10:50,445
Перейдя к нашей карте, теперь вы можете увидеть

131
00:10:50,445 --> 00:10:55,265
, как список описания позволяет мне отображать информацию.

132
00:10:55,265 --> 00:11:02,700
Внутри моей карты вы можете видеть левую и правую стороны четко отображаются.

133
00:11:02,700 --> 00:11:07,035
Здесь мы пользуемся списком описаний и,

134
00:11:07,035 --> 00:11:09,215
добавляя в информацию там.

135
00:11:09,215 --> 00:11:14,590
Позвольте мне закончить оставшиеся части здесь, добавив код,

136
00:11:14,590 --> 00:11:19,745
а затем вернуться и взглянуть на окончательную версию этой карты.

137
00:11:19,745 --> 00:11:22,850
Здесь вы можете увидеть, что я завершил добавление

138
00:11:22,850 --> 00:11:25,895
в остальные части моего списка описаний.

139
00:11:25,895 --> 00:11:31,155
Пойдем и посмотрим на нашу последнюю версию этой карты.

140
00:11:31,155 --> 00:11:33,290
Взгляните на карту,

141
00:11:33,290 --> 00:11:34,620
и как она принимает форму.

142
00:11:34,620 --> 00:11:39,340
Здесь вы можете увидеть, как мы можем использовать карточку для отображения

143
00:11:39,340 --> 00:11:41,760
некоторого контента на нашей веб-странице и установить его

144
00:11:41,760 --> 00:11:44,725
отдельно от остальной части контента на веб-странице.

145
00:11:44,725 --> 00:11:50,325
Таким образом, карта является очень универсальным компонентом, который позволяет нам отображать контент, как это.

146
00:11:50,325 --> 00:11:52,500
Давайте продолжим это упражнение,

147
00:11:52,500 --> 00:11:56,785
добавив еще одну карточку на эту веб-страницу.

148
00:11:56,785 --> 00:12:01,410
Давайте теперь снова вернемся к нашей странице aboutus.html.

149
00:12:01,410 --> 00:12:06,170
И прямо под картой, которую мы уже добавили ранее,

150
00:12:06,170 --> 00:12:14,790
я собираюсь добавить в другой div с классом «col-12» здесь.

151
00:12:14,790 --> 00:12:16,910
И затем, внутри этого div,

152
00:12:16,910 --> 00:12:24,670
я собираюсь построить еще одну карту здесь, чтобы отобразить некоторую дополнительную информацию.

153
00:12:24,670 --> 00:12:26,495
Итак, внутри этого div,

154
00:12:26,495 --> 00:12:30,210
я построю карту с

155
00:12:30,210 --> 00:12:38,915
классом «карта-тело bg-light».

156
00:12:38,915 --> 00:12:45,580
Итак, вы увидите, что я применяю и карту, и тело карты к одному и тому же div здесь.

157
00:12:45,580 --> 00:12:49,300
Таким образом, это означает, что эта конкретная карта не будет иметь

158
00:12:49,300 --> 00:12:54,835
заголовок карты, а вместо этого просто содержит тело карты здесь.

159
00:12:54,835 --> 00:12:59,545
А затем, также, bg-light означает, что фон будет в выцветенном цвете.

160
00:12:59,545 --> 00:13:05,120
Несколько сероватого цвета добавляется на фон.

161
00:13:05,120 --> 00:13:10,495
Таким образом, это также ищет эту карту отдельно от остальной части содержания здесь.

162
00:13:10,495 --> 00:13:12,815
Теперь, внутри этой карты,

163
00:13:12,815 --> 00:13:16,250
я собираюсь использовать блочный код, чтобы отобразить

164
00:13:16,250 --> 00:13:20,700
немного интересной забавной информации там.

165
00:13:20,700 --> 00:13:23,980
Поэтому я буду использовать блоккавычку.

166
00:13:23,980 --> 00:13:30,965
Это также HTML-тег здесь.

167
00:13:30,965 --> 00:13:37,005
И тогда к этому я применим класс blockquote Bootstrap.

168
00:13:37,005 --> 00:13:42,590
Таким образом, Bootstrap стилирует эту blockquote по-своему.

169
00:13:42,980 --> 00:13:46,429
Так что давайте закроем блоккавычку.

170
00:13:46,429 --> 00:13:47,870
И внутри этой blockquote,

171
00:13:47,870 --> 00:13:51,910
я собираюсь включить цитату здесь.

172
00:13:51,910 --> 00:13:54,320
Поэтому я начну с p

173
00:13:54,320 --> 00:13:56,760
и применим класс под названием mb-0.

174
00:13:56,760 --> 00:14:02,920
MB-0 является классом утилиты, который предоставляет Bootstrap.

175
00:14:02,920 --> 00:14:05,775
Это означает, что маржиная-нижний ноль.

176
00:14:05,775 --> 00:14:09,640
Для этого конкретного, независимо от того, что он включен в этот тег p,

177
00:14:09,640 --> 00:14:12,135
мы будем иметь нижнее поле нуля.

178
00:14:12,135 --> 00:14:15,865
И это помогает мне правильно отображать контент здесь.

179
00:14:15,865 --> 00:14:24,900
Итак, здесь я собираюсь добавить в фактическое содержание там,

180
00:14:49,850 --> 00:14:54,970
а затем закрыть этот p. Так что это p содержит фактическую цитату.

181
00:14:54,970 --> 00:14:56,560
Теперь, к этой цитате,

182
00:14:56,560 --> 00:14:59,180
так что вы видите, что в своем

183
00:14:59,180 --> 00:15:05,320
контенте вы также можете включить цитаты в свой код там.

184
00:15:05,320 --> 00:15:10,730
Поэтому к этому я также могу добавить нижний колонтитул с классом.

185
00:15:10,730 --> 00:15:14,900
Поэтому позвольте мне нажать нижний колонтитул.

186
00:15:14,900 --> 00:15:20,080
Поэтому этот нижний колонтитул также является классом, который поддерживает blockquote.

187
00:15:20,080 --> 00:15:26,620
Таким образом, все, что вы включите в

188
00:15:28,570 --> 00:15:31,105
blockquote, вместе с нижним колонтитулом,

189
00:15:31,105 --> 00:15:39,540
позволит вам отобразить автора этой цитаты.

190
00:15:40,420 --> 00:15:45,620
Так вот я включаю автора,

191
00:15:45,620 --> 00:15:49,165
а потом еще одну.

192
00:15:49,165 --> 00:15:58,860
Используя цитату, я могу даже привести источник этой цитаты.

193
00:16:01,740 --> 00:16:04,790
Так что вы можете это видеть.

194
00:16:24,870 --> 00:16:32,955
Опять же, это просто цитата, которую я использую только для удовольствия, чтобы показать вам,

195
00:16:32,955 --> 00:16:35,355
также в то же время иллюстрируя,

196
00:16:35,355 --> 00:16:42,405
как работает blockquote,

197
00:16:42,405 --> 00:16:47,800
а также как мы можем создать другой вид карты в Bootstrap.

198
00:16:47,800 --> 00:16:55,845
Таким образом, мы добавили в код для отображения blockquote здесь.

199
00:16:55,845 --> 00:16:57,890
Итак, позвольте мне посмотреть, изменится ли это,

200
00:16:57,890 --> 00:17:04,995
а затем мы пойдем и посмотрим, как эта цитата отображается на нашей веб-странице.

201
00:17:04,995 --> 00:17:09,270
Перейдя в браузер, на нашей странице,

202
00:17:09,270 --> 00:17:14,310
вы можете увидеть, что наша история и факты с первого взгляда отображаются бок о бок.

203
00:17:14,310 --> 00:17:22,360
Ниже этого у меня есть этот длинный фрагмент контента.

204
00:17:22,360 --> 00:17:27,850
Давайте посмотрим на ту же страницу в дополнительном маленьком экране.

205
00:17:27,850 --> 00:17:29,250
Таким образом, на дополнительном маленьком экране,

206
00:17:29,250 --> 00:17:33,840
вы можете увидеть, что история и факты сложены сверху,

207
00:17:33,840 --> 00:17:38,120
и цитата прямо ниже здесь, в своей собственной карте.

208
00:17:38,120 --> 00:17:40,130
Таким образом, вы можете увидеть две карты,

209
00:17:40,130 --> 00:17:42,225
одна под другой здесь,

210
00:17:42,225 --> 00:17:45,860
а затем сама таблица отображается внизу.

211
00:17:45,860 --> 00:17:50,685
Таким образом, сама таблица является прокручиваемой таблицей здесь.

212
00:17:50,685 --> 00:17:54,885
Таким образом, мы завершим это упражнение.

213
00:17:54,885 --> 00:17:56,330
В этом упражнении

214
00:17:56,330 --> 00:18:05,950
мы узнали о том, как мы можем использовать таблицы и карты для отображения контента на нашей веб-странице.

215
00:18:05,950 --> 00:18:08,690
Теперь, когда мы завершили это упражнение,

216
00:18:08,690 --> 00:18:12,610
пришло время сделать git commit.