Следующее упражнение рассматривает способы отображения контента на нашей веб-странице.
Они смотрят на то, как мы можем включать таблицы в нашу веб-страницу и как мы можем
стилизовать эти таблицы, используя классы Bootstrap для стилизации таблиц,
включая адаптивный дизайн таблиц.
Мы также рассмотрим другой универсальный компонент
, который доступен в Bootstrap называется как карта.
Карточка позволяет отображать контент миллионами способов.
Итак, мы рассмотрим два разных способа использования карты для отображения контента.
Позже мы будем видеть использование карт снова и снова
для будущих проектов определенных частей нашего сайта.
Чтобы начать работу, откройте страницу aboutus.html.
Мы собираемся вставить таблицу и две карты на
странице aboutus.html, чтобы отобразить некоторые карты.
Во-первых, давайте медленно прокручиваем вниз, пока после этой карты для информации о лидерстве,
и прямо там я собираюсь представить еще один div, в
котором я собираюсь заключить таблицу здесь.
Итак, я введу новую строку здесь,
с классом в качестве строки содержимого.
И внутри этого div
мы введем столбец, в котором будет размещена таблица здесь.
Итак, я введу столбец, столбец 12,
столбец sm-9 и закрою div.
И внутри div, позвольте мне дать заголовок здесь
Факты и цифры и закрыть h2.
Сразу после этого позвольте мне представить еще один div,
что столбец классов sm и столбец sm-3 и закрыть этот div там.
Прямо сейчас мы оставим второй div пустым.
Я собираюсь заполнить таблицу в первый div здесь, а
затем мы быстро посмотрим на таблицу после того, как я добавлю код для таблицы.
Поэтому здесь я перечислил в коде для таблицы.
Давайте посмотрим на стол, а потом вернемся, чтобы обсудить этот код здесь.
Перейдя на страницу «О программе», над которой мы уже работали ранее,
после раздела «Корпоративное лидерство»,
вы увидите новую строку, представляющую таблицу.
Итак, обратите внимание, как стиль таблицы,
поэтому у нас есть заголовок с h2 включенным там,
но давайте сосредоточимся конкретно на этой таблице.
Таким образом, вы видите, что эта таблица была стилизована
с использованием некоторых классов Bootstrap, которые используются для улучшения таблицы.
Заголовок был отрисован с темным фоном,
а затем все правила разработаны таким образом, что альтернативные строки имеют
разный цвет, так что вы можете четко различать строки этой таблицы.
Это то, что в терминах Bootstrap называется полосатой таблицей.
Это один из примеров того, как вы можете стилизовать таблицу.
Теперь интересно, если вы посмотрите на ту же таблицу в небольшом устройстве,
вы заметите, что таблица все еще
видна, за исключением того, что эта таблица теперь становится прокручиваемой.
Таким образом, все, что может отображаться в содержимом, будет показано, а
остальная часть таблицы может быть прокручена по горизонтали на месте.
Таким образом, это отзывчивый компонент поддержки Bootstrap для таблиц в действии.
Теперь давайте посмотрим на сам код.
Теперь, очевидно, эта таблица довольно проста,
она имеет кучу строк и некоторые столбцы.
Таким образом, вы будете ожидать, что я буду использовать типичные
теги th, td и tr.
Возвращаясь к коду,
вы заметите, что я прилагаю эту таблицу внутри
div, к которому я применил таблицу классов, реагирующую.
Это то, что делает эту таблицу отзывчивой, так что на
небольших экранах вы можете горизонтально прокручивать таблицу.
Теперь для самой таблицы
обратите внимание, как я применил два класса.
Одним из них является класс таблицы,
поэтому это переопределяет
рендеринг таблицы по умолчанию в браузерах, предоставляя собственные классы Bootstrap.
А второй говорит «полосатый стол».
Так вот, что проектирует таблицу с альтернативными строками в разных цветах здесь.
Затем сама голова,
так что вы можете видеть, что заголовки, описанные здесь с классом thead-dark,
поэтому это делает голову темной.
И тогда вы увидите, что таблица рисует себя описанной здесь с тегов здесь.
Таким образом, это стандартное определение таблицы.
Тело самой таблицы - это стандартное html5 использование tr,
td и th элементов, с которыми вы уже знакомы в html5.
Таким образом, это то, с чем построена таблица,
а затем вы закрываете тело таблицы. Так вот об этом.
Таким образом, мы все, что уникально в самом Bootstrap,
это применение этих конкретных классов Bootstrap к
самому элементу таблицы, чтобы стиль его дальше,
чтобы вписаться в веб-страницу дизайна Bootstrap.
Следующий компонент, который я собираюсь добавить на
страницу aboutus.html, - это компонент карты в Bootstrap.
Компонент карты позволяет нам отображать контент
, устанавливая его отдельно от остальной части этого контента.
Теперь здесь, прокручивая первую строку здесь,
там у нас есть наша история во втором использовании div,
обратите внимание, что первый div уже занимает col-sm-6,
второй div в настоящее время пуст.
Поэтому к этому div
я добавлю в класс как col-sm.
После этого, перейдя в этот div, я введу еще один div в карточку класса здесь.
Поэтому внутри этих div
я собираюсь создать свою карту, чтобы отобразить здесь какой-то контент.
Таким образом, в этом div мы введем h3, что
класс как заголовок карты bg-первичный.
Таким образом, вы увидите, что этот h3 будет отображаться как
заголовок карты с этим фоном в качестве основного,
а затем белый текст, который класс Bootstrap определит текст, который будет белым в цвете.
И затем внутри этого h3,
я собираюсь представить название этой карты, которая
называется «Факты с первого взгляда».
Чтобы я мог показать некоторый контент внутри этого div здесь.
Теперь, к этой карте,
затем я собираюсь добавить в другой внутренний div
здесь с классом как card-body,
и внутри этого body будет
фактическое содержимое, которое было отображено в этой карте.
Давайте сохраним изменения, а затем пойдем и быстро посмотрим на нашу веб-страницу.
Перейдя на нашу веб-страницу,
мы уже можем увидеть карту, которая принимает форму на нашей веб-странице,
так что вы можете видеть, что левая половина занята историей,
а правая половина вы увидите карту положить на место.
Давайте добавим немного контента в эту карту.
Перейдя в этот блок карты,
теперь я собираюсь использовать список описаний,
и этот список описаний в Bootstrap позволяет мне
применить к нему классы строк и столбцов и тем самым форматировать содержимое внутри.
Поэтому внутри этого списка описаний
я собираюсь добавить
в dt, что класс и col-6 здесь,
так что это означает, что это будет занимать шесть столбцов
внутри этого списка описаний, который сам по себе является строкой здесь.
Так что гнездование, как вы видите, приходя в картинку здесь.
Поэтому к этому dt
я собираюсь добавить в этот заголовок описания здесь,
а затем ниже, что я добавлю в dd с
классом col-6 здесь, а затем я могу добавить в некотором контексте здесь.
И дд здесь.
Давайте сохраним изменения и быстро взглянем на нашу карту.
Перейдя к нашей карте, теперь вы можете увидеть
, как список описания позволяет мне отображать информацию.
Внутри моей карты вы можете видеть левую и правую стороны четко отображаются.
Здесь мы пользуемся списком описаний и,
добавляя в информацию там.
Позвольте мне закончить оставшиеся части здесь, добавив код,
а затем вернуться и взглянуть на окончательную версию этой карты.
Здесь вы можете увидеть, что я завершил добавление
в остальные части моего списка описаний.
Пойдем и посмотрим на нашу последнюю версию этой карты.
Взгляните на карту,
и как она принимает форму.
Здесь вы можете увидеть, как мы можем использовать карточку для отображения
некоторого контента на нашей веб-странице и установить его
отдельно от остальной части контента на веб-странице.
Таким образом, карта является очень универсальным компонентом, который позволяет нам отображать контент, как это.
Давайте продолжим это упражнение,
добавив еще одну карточку на эту веб-страницу.
Давайте теперь снова вернемся к нашей странице aboutus.html.
И прямо под картой, которую мы уже добавили ранее,
я собираюсь добавить в другой div с классом «col-12» здесь.
И затем, внутри этого div,
я собираюсь построить еще одну карту здесь, чтобы отобразить некоторую дополнительную информацию.
Итак, внутри этого div,
я построю карту с
классом «карта-тело bg-light».
Итак, вы увидите, что я применяю и карту, и тело карты к одному и тому же div здесь.
Таким образом, это означает, что эта конкретная карта не будет иметь
заголовок карты, а вместо этого просто содержит тело карты здесь.
А затем, также, bg-light означает, что фон будет в выцветенном цвете.
Несколько сероватого цвета добавляется на фон.
Таким образом, это также ищет эту карту отдельно от остальной части содержания здесь.
Теперь, внутри этой карты,
я собираюсь использовать блочный код, чтобы отобразить
немного интересной забавной информации там.
Поэтому я буду использовать блоккавычку.
Это также HTML-тег здесь.
И тогда к этому я применим класс blockquote Bootstrap.
Таким образом, Bootstrap стилирует эту blockquote по-своему.
Так что давайте закроем блоккавычку.
И внутри этой blockquote,
я собираюсь включить цитату здесь.
Поэтому я начну с p
и применим класс под названием mb-0.
MB-0 является классом утилиты, который предоставляет Bootstrap.
Это означает, что маржиная-нижний ноль.
Для этого конкретного, независимо от того, что он включен в этот тег p,
мы будем иметь нижнее поле нуля.
И это помогает мне правильно отображать контент здесь.
Итак, здесь я собираюсь добавить в фактическое содержание там,
а затем закрыть этот p. Так что это p содержит фактическую цитату.
Теперь, к этой цитате,
так что вы видите, что в своем
контенте вы также можете включить цитаты в свой код там.
Поэтому к этому я также могу добавить нижний колонтитул с классом.
Поэтому позвольте мне нажать нижний колонтитул.
Поэтому этот нижний колонтитул также является классом, который поддерживает blockquote.
Таким образом, все, что вы включите в
blockquote, вместе с нижним колонтитулом,
позволит вам отобразить автора этой цитаты.
Так вот я включаю автора,
а потом еще одну.
Используя цитату, я могу даже привести источник этой цитаты.
Так что вы можете это видеть.
Опять же, это просто цитата, которую я использую только для удовольствия, чтобы показать вам,
также в то же время иллюстрируя,
как работает blockquote,
а также как мы можем создать другой вид карты в Bootstrap.
Таким образом, мы добавили в код для отображения blockquote здесь.
Итак, позвольте мне посмотреть, изменится ли это,
а затем мы пойдем и посмотрим, как эта цитата отображается на нашей веб-странице.
Перейдя в браузер, на нашей странице,
вы можете увидеть, что наша история и факты с первого взгляда отображаются бок о бок.
Ниже этого у меня есть этот длинный фрагмент контента.
Давайте посмотрим на ту же страницу в дополнительном маленьком экране.
Таким образом, на дополнительном маленьком экране,
вы можете увидеть, что история и факты сложены сверху,
и цитата прямо ниже здесь, в своей собственной карте.
Таким образом, вы можете увидеть две карты,
одна под другой здесь,
а затем сама таблица отображается внизу.
Таким образом, сама таблица является прокручиваемой таблицей здесь.
Таким образом, мы завершим это упражнение.
В этом упражнении
мы узнали о том, как мы можем использовать таблицы и карты для отображения контента на нашей веб-странице.
Теперь, когда мы завершили это упражнение,
пришло время сделать git commit.