Сделайте впечатляющий нижний колонтитул электронной коммерции в Bootstrap

  1. Контент для нижнего колонтитула страницы
  2. Структура нижнего колонтитула
  3. Форма подписки по электронной почте
  4. Раздел для ссылок
  5. Показать адрес магазина и номер телефона
  6. Navbar для вашего нижнего колонтитула
  7. Место для авторского права
  8. Подводя итоги

Bootstrap позволяет быстро размещать веб-страницы, создавая шаблоны, которые можно использовать на многих платформах электронной коммерции.

В нижнем или нижнем разделе веб-страницы электронной коммерции часто покупатели ищут политики конфиденциальности, возвращают информацию или даже могут связаться с владельцем или менеджером магазина. Хорошо спланированный и организованный нижний колонтитул может помочь вашим покупателям.

начальная загрузка облегчает размещение привлекательного и функционального колонтитула для электронной коммерции. Платформа Bootstrap использует HTML, CSS, а иногда и JavaScript для предоставления набора классов, которые сделают вашу страницу хорошо выглядящей без значительного объема разработки пользовательских таблиц стилей.

Bootstrap может использоваться со многими платформами электронной коммерции, включая темы для Shopify, Volusion, WooCommerce и LemonStand, например.

Эта статья является третьей в моей серии статей об использовании Bootstrap. Я обратился как выложить отзывчивые страницы с описанием товара и как разработать заголовок страницы это как фиксированное положение, так и отзывчивое для мобильных устройств. Обе эти статьи опирались на Bootstrap и служат основой для этой статьи в нижнем колонтитуле.

Чтобы использовать Bootstrap, вам нужно добавить его в свой проект. Вот, например, ссылка для включения в раздел заголовка вашей страницы.

<link href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel = "stylesheet" целостность = "sha384-1q8mTJOASx8j1Au + a5WDVnPi2lkFfwwEAalhgjhghgWhgHD

Контент для нижнего колонтитула страницы

Есть много мнений о том, какой контент принадлежит в нижнем колонтитуле веб-страницы. Более исчерпывающее обсуждение темы может заполнить еще одну статью или две. Тем не менее, для описания того, как вы можете использовать Bootstrap для размещения нижнего колонтитула страницы электронной коммерции, я включу пять разделов контента, которые:

  • Форма подписки по электронной почте;
  • Раздел для ссылок;
  • Адрес магазина и номер телефона;
  • Панель навигации нижнего колонтитула для ссылок с указанием нижнего колонтитула;
  • Раздел о бренде и авторских правах.

Структура нижнего колонтитула

Нижний колонтитул страницы будет опираться на отзывчивую, основанную на мобильных устройствах систему сетки. Эта сетка позволяет вам размещать элементы страницы без создания большого количества CSS. Элементы сетки будут перетекать до 12 столбцов по мере увеличения размера устройства.

Сетка Bootstrap имеет особую структуру. В приведенном ниже коде я буду использовать семантический тег нижнего колонтитула HTML5 для обозначения всего раздела нижнего колонтитула. Внутри этого элемента нижнего колонтитула я включаю div с классом контейнера. Этот контейнерный класс, если хотите, является первым уровнем в сетке Bootstrap.

<footer class = "navbar-default"> <div class = "container"> ... </ div> <! - конечный контейнер -> </ footer>

Внутри контейнера мы добавляем строку, которая является следующим уровнем в сетке Bootstrap.

<footer class = "navbar-default"> <div class = "container"> <div class = »row bottom-rule»>… </ div> </ div> <! - конец контейнера -> </ footer >

Класс нижнего правила ссылается на пользовательское объявление CSS, которое добавляет светло-серую рамку к нижней части элемента. Bootstrap предоставляет множество классов для работы, и это не мешает нашей возможности использовать пользовательский CSS, как мы считаем нужным.

.bottom-rule {border-bottom: 1px solid lightgray; }

Внутри этой строки я размещу дополнительные элементы div , каждый из которых занимает определенное количество столбцов в сетке Bootstrap.

Я также могу назначить верхний колонтитул верхнему краю, чтобы отделить его от остального содержимого страницы.

footer {padding-top: 20px; граница сверху: 10px solid # 332e20; цвет фона: белый; }

Форма подписки по электронной почте

Первым разделом нижнего колонтитула будет форма подписки по электронной почте. Это займет до четырех столбцов в маленькой сетке Bootstrap. Размер сетки и количество столбцов содержатся в одном классе Bootstrap, col-sm-4 .

<div class = "col-sm-4 footer-section"> ... </ div>

Класс нижнего колонтитула является пользовательским объявлением, которое добавляет нижнюю границу и некоторые дополнительные отступы.

.footer-section {margin-bottom: 20px; отступ - 20 пикселей; бордюр: сплошной светло-серый 1px; }

Когда нижний колонтитул отображается на мобильном устройстве, мы хотим четко разделить форму подписки на электронную почту и нижеследующую. Это связано с тем, что на мобильных устройствах с относительно небольшими экранами столбцы будут накладываться друг на друга. Таким образом, форма электронной почты будет выше следующего раздела, который включает ссылки.

Bootstrap является мобильным и отзывчивым. Когда ширина экрана меньше указанной сетки, Bootstrap будет складывать элементы с классом столбца. Таким образом, на мобильном устройстве форма укладывается поверх следующего раздела. Нижняя граница помогает определить различные разделы.

Однако мы не хотим, чтобы нижнее правило или дополнительный интервал появлялись на устройствах с экранами размером более 768 пикселей. На этих экранах разделы в этом ряду будут располагаться горизонтально, поэтому форма электронной почты будет расположена рядом с разделом ссылок.

В этом примере, когда нижний колонтитул отображается на экране размером 768 пикселей или более, раздел формы электронной почты и раздел ссылок располагаются рядом друг с другом.

Для управления этим мы используем медиа-запрос CSS.

@media (min-width: 768px) {...}

Объявления CSS внутри медиазапроса будут применяться только на устройствах с экранами шириной не менее 768 пикселей. Обратите внимание, что теперь класс нижнего колонтитула не добавляет пробела или границы.

@media (min-width: 768px) {.footer-section {margin-bottom: 0; padding-bottom: 0; граница снизу: нет; }}

Теперь, когда мы позаботились о том, как раздел размещен на устройствах разных размеров, давайте добавим контент «Connect». Мы можем использовать простой сильный тег, чтобы подчеркнуть этот раздел. И такой же простой тег p (абзац) содержит описание раздела.

<div class = "col-sm-4 footer-section"> <strong> Связаться с Best Store </ strong> <p> Поощрение, новости и информация по электронной почте </ p> <form class = "form-inline"> <div class = "form-group"> <label class = "sr-only" for = "inputEmail"> Электронная почта </ label> <input type = "email" class = "form-control" id = "inputEmail" placeholder = "[email protected]"> </ div> <button type = "submit" class = "btn btn-default"> Подписаться </ button> </ form> </ div>

Класс встроенной формы Bootstrap определяет общий вид формы и размещает ее горизонтально.

Классы in- form, inline -group и form-control происходят из Bootstrap. Эти классы выложат основную форму подписки по электронной почте. Там нет больше CSS работы, чтобы сделать. Это так просто.

Следует отметить три других класса: sr-only , который показывает только связанный элемент для программы чтения с экрана; btn , который выкладывает кнопку подписки; и btn-default , который применяет к фону цвета фона, рамки и шрифтов. Опять же, они являются стандартными для Bootstrap, поэтому нам нужно только включить Bootstrap в наш проект и ссылаться на классы здесь.

Это макет, а не полностью функциональная страница. Итак, на данный момент мы закончили. Если бы вы интегрировали это с платформой электронной коммерции, вам понадобился бы некоторый код для захвата адреса электронной почты и добавления его в список.

Раздел для ссылок

Работая в той же строке Bootstrap, что и наша форма электронной почты, давайте добавим раздел для ссылок. Этот раздел будет занимать пять столбцов в маленькой сетке Bootstrap.

<div class = "col-sm-5 footer-section"> <ul class = "list-inline"> <li class = "text-uppercase"> Служба поддержки клиентов: </ li> <li> <a href = " # "> Возвраты </a> </ li> <li> <a href="#"> Политика конфиденциальности </a> </ li> <li> <a href="#"> Наша гарантия </a> </ li> <li> <a href="#"> Доставка </a> </ li> <li> <a href="#"> руководства по продукту </a> </ li> <li> <a href = "#"> Служба поддержки </a> </ li> </ ul> <ul class = "list-inline"> <li class = "text-uppercase"> Социальные сети и amp; Статьи: </ li> <li> <a href="#"> Instagram </a> </ li> <li> <a href="#"> Pinterest </a> </ li> <li> < a href = "#"> Twitter </a> </ li> <li> <a href="#"> Facebook </a> </ li> <li> <a href="#"> Лучший журнал </a> </ li> </ ul> <ul class = "list-inline"> <li class = "text-uppercase"> События: </ li> <li> <a href="#"> видеовстреча 30 апреля </a> </ li> <li> <a href="#"> Faers Faire </a> </ li> </ ul> </ div>

Обратите внимание, что раздел состоит из трех неупорядоченных списков ( ul ). Мы используем встроенный список Bootstrap, чтобы указать, что эти списки должны располагаться горизонтально. Bootstrap позаботится обо всем остальном.

Три неупорядоченных списка составляют раздел ссылок.

Мы также можем немного настроить этот класс Bootstrap. Приведенное ниже объявление CSS помещает светло-серую рамку с правой стороны каждого элемента списка, исключая первый и последний элемент в каждом списке.

нижний колонтитул .list-inline li: not (: first-child): not (: last-child) {border-right: 1px solid lightgray; }

Показать адрес магазина и номер телефона

Третий раздел в этой строке нижнего колонтитула показывает основную информацию о магазине.

<div class = "col-sm-3"> <адрес> <strong> Лучший магазин </ strong> <br> 1000 Some Fantastic Place в Сан-Франциско, Калифорния 94103 <br> (123) 456-7890 (телефон & amp; текст) <br> <a href="#"> Свяжитесь с нами </a> </ address> </ div>

Bootstrap имеет стили для этого макета и адреса, поэтому приведенный выше код - это все, что нам нужно.

Добавление привлекательного стиля адреса в нижний колонтитул не требует ничего, кроме основного HTML.

Navbar для вашего нижнего колонтитула

Внутри новой строки Bootstrap я добавлю навигационную панель в нижний колонтитул. На этой панели будет несколько дополнительных ссылок.

<div class = "row bottom-rule"> <div class = "col-sm-12"> <nav class = "navbar navbar-default navbar-footer"> <ul class = "nav navbar-nav"> <li > <a href="#"> Служба поддержки </a> </ li> <li> <a href="#"> Summer Lookbook </a> </ li> <li> <a href = "#" > Подарочные карты </a> </ li> <li> <a href="#"> О Best Store </a> </ li> <li> <a href="#"> Карьера </a> < / li> <li> <a href="#"> Свяжитесь с нами </a> </ li> <li> <a href="#"> Лучший журнал </a> </ li> </ ul> </ nav> </ div> </ div> <! - конец строки ->

Этот код, приведенный выше, является хорошим примером того, что Bootstrap может сделать для ваших страниц. Есть базовый HTML, который приправлен, если хотите, несколькими классами.

  • row - устанавливает строку в сетке Bootstrap.
  • bottom-rule - Пользовательское (не Bootstrap) объявление для добавления нижней границы.
  • col-sm-12 - определяет, сколько столбцов будет занимать этот раздел в сетке Bootstrap.
  • navbar , navbar-default , nav и navbar-nav - классы начальной загрузки, которые описывают, как должен выглядеть navbar и как он должен быть расположен.
  • navbar-footer - еще одно пользовательское (не Bootstrap) объявление CSS, и единственный новый класс для нас.

Во-первых, класс navbar-footer помогает изменить внешний вид панели навигации Bootstrap, используя цель, которой мы можем назначить наши собственные объявления CSS.

.navbar-footer {background-color: наследовать; радиус границы: 0; граница: нет; }

Когда панель навигации отображается на экране 768 пикселей или шире, мы хотим, чтобы ссылки были в центре. Это не является стандартным для панели навигации Bootstrap, поэтому нам нужно сделать пару CSS-объявлений.

.navbar-footer {margin-bottom: 0; выравнивание текста: по центру; } нижний колонтитул .navbar .navbar-nav {display: inline-block; плавать: нет; выравнивание по вертикали: верх; }

Обратите внимание, что первый из них ссылается на класс navbar-footer , а второй - на класс navbar-nav . По сути, эти классы удаляют float, изменяют способ отображения ссылок и центрируют ссылки.

Панель навигации показывает избранные ссылки нижнего колонтитула.

Место для авторского права

Последний раздел нижнего колонтитула содержит информацию об авторских правах - еще один шанс показать бренд магазина.

Последний раздел в нижнем колонтитуле также является новой строкой Bootstrap.

<div class = "row leg-room"> <div class = "col-md-12 text-center"> <h1 class = "text-uppercase"> Лучший магазин </ h1> <p class = "monospaced"> & copy; 2016 Best Store Company Inc. <span class = "text-uppercase"> Все права защищены </ span> </ p> </ div> </ div> <! - конец строки ->

В этом разделе есть несколько незнакомых классов. Первый из них это место для ног . Этот пользовательский класс добавляет поля и отступы внизу раздела.

.leg-room {margin-bottom: 20px; отступ - 20 пикселей; }

Класс текстового центра происходит из Bootstrap. Он делает именно то, что подразумевает его название. Текст в верхнем регистре также из Bootstrap.

Моноширинный класс является обычаем. Он устанавливает семейство шрифтов для затронутого текста.

.monospaced {font-family: 'Ubuntu Mono', моноширинный; }

Это будет работать, только если доступен шрифт Ubuntu Mono. Итак, давайте включим это в заголовок документа.

<link href = 'https: //fonts.googleapis.com/css? family = Ubuntu + Mono' rel = 'stylesheet' type = 'text / css'>

Подводя итоги

Эта статья демонстрирует один из способов использования Bootstrap для размещения нижнего колонтитула на веб-странице электронной коммерции.

Нижний колонтитул опирается на систему сетки Bootstrap и несколько пользовательских CSS-объявлений.

Похожие

Оптимизация сайта с первого взгляда
... для поисковых систем. Это всегда предшествует правильному процессу позиционирования. Необходимо эффективно продвигать сайт в результатах поиска - влияет на устранение любых ошибок на сайте, повторение контента и минимизацию риска получения штрафа в виде фильтр из поиска Google , В случае наиболее популярных CMS (например, WordPress, Drupal), оптимизация контента может осуществляться с их уровня.
Подарок для механика • 3D движок ~ средняя статуэтка
Впечатляющая гравюра на трехмерной модели двигателя, выполненная в хрустальной статуэтке размером 11х7х7 см. Для более интересного эффекта модель была вырезана в характерном месте, чтобы поршни и все механизмы были лучше видны. Ниже мы оставили место для вас для вашего собственного контента посвящения . Это прекрасная возможность сказать что-нибудь приятное любимому человеку. То, что останется там навсегда. Это могут быть поздравления с окончанием учебы, желание комфортного
Правительство утвердило 11 документов, которыми можно подтвердить место проживания учащихся
Кабмин утвердил 11 документов, которыми можно подтвердить фактическое место проживания ребенка и включить ее в реестр детей школьного возраста на определенной территории. Такое решение приняла 19 сентября, постановления правительства "Об утверждении Порядка ведения учета детей школьного возраста и учеников", передает
Стандарты YouTube
Настройка вашего канала YouTube Теперь, когда вы определили, что YouTube подходит для вашего отдела или организации, вот несколько вещей, о которых стоит подумать, когда вы начнете. Создать стратегию канала Наличие плана поможет вам достичь ваших целей и установить общий тон для вашего канала, чтобы ваши подписчики знали, чего ожидать. Установите некоторые цели. Используйте свои цели, чтобы сформировать контент на своем канале, чтобы обеспечить
Microsoft выпускает новый Fast Ring собирает как Windows 10 "Redstone" для ПК, так и для телефонов Win...
Microsoft выпускает новый Fast Ring собирает как Windows 10 "Redstone" для ПК, так и для телефонов Windows в тот же день, 24 февраля.
Google ограничивает доступ к сайтам фильмов, сериалам и файлам
... для удаления определенного контента из Google вам нужно уведомление, которое относится к определенному URL. Даже веб-сайты, на которые подано много таких заявок, на самом деле сумма заявок составляет небольшой процент от общего числа страниц в поисковом индексе. Поэтому было бы неправильно удалять весь домен из результатов поиска. Что изменилось с октября 2014 года , поисковая система подняла важность этого сигнала. Отныне вы можете четко видеть уменьшение
Visforms бесплатно Joomla! Компонент генератора форм
... адреса Иногда вы хотите отправлять письма на разные почтовые адреса, в зависимости от того, какой выбор пользователь сделал в форме. Плагин «Custom Mail Address» предоставляет именно эту функцию для адресов mailto, mailcc и mailbcc. Поиск представленных данных формы Плагин, который расширяет Joomla! Функция поиска (поисковый модуль Joomla! и поисковый компонент)
Обзор Samsung Galaxy Tab S 10.5: тонкий, легкий и очень впечатляющий
Samsung предлагает то, что может показаться ошеломляющим набором планшетов, включая стандартную Galaxy Tab, ориентированную на бизнес Galaxy Tab PRO и оснащенные стилусом линейки Galaxy Note. Теперь есть еще одна линейка - Galaxy Tab S, который доступен в размерах 8,4 и 10,5 дюймов, а также в вариантах с поддержкой Wi-Fi и Wi-Fi-Plus-LTE. 10,5-дюймовый Galaxy Tab S рассмотренный здесь предоставляет широкий набор функций
Как получить бесплатные книги для вашего Amazon Kindle
Когда у вас есть Amazon Kindle, стоимость поддержки жадной привычки к чтению может очень быстро возрасти. Быстрый взгляд на список Amazon «Лучшие книги месяца» показывает, что при достойном чтении вы можете получить от 13 до 15 долларов за книгу Kindle. Конечно, Amazon предлагает выгодные предложения по электронным книгам, но ожидание сделки может занять вечность. Многие названия можно получить за два доллара или меньше, но для того, чтобы найти драгоценные камни среди шлаков, требуется работа.
Новый macOS - это macOS Mojave. Вот список самых важных новостей
Apple только что показала свою новую операционную систему для Mac. Добро пожаловать macOS Мохаве. Предсказания злонамеренных людей, которые предсказывали, что новый macOS будет называться «высшей Сьеррой», не оправдались. Новый macOS - это macOS Mojave. Первая новинка - Dark Mode в macOS Мохаве!
Следите за температурой вашего компьютера. 5 советов, которые защитят вашу машину от коррупции
... для процессора? Можете ли вы сделать тяжелый фильм с высоким разрешением? С помощью программ эту проблему можно отследить. Некоторые эксперты устанавливают предел безопасности на уровне 70 ° C, если температура выше, вы должны начать проверять, что может быть не так. Что делать, если компьютер перегревается?

Комментарии

Так что же нужно думать предприятиям электронной коммерции?
Так что же нужно думать предприятиям электронной коммерции? Какие именно разные правила и положения? Что нужно сделать, чтобы убедиться, что вы соответствуете требованиям? А что будет, если вы не будете соблюдать? Правила Есть несколько фундаментальных вопросов, которые необходимо задать:
Что если мы не добавим описание страницы?
Что если мы не добавим описание страницы? Каждая страница должна иметь свое собственное описание. Если мы этого не сделаем, Google использует контент на нем и дает правильное описание. Жаль потерять способность мотивировать клиента использовать наше предложение, поэтому мы советуем вам лично позаботиться о правильном описании страницы. Хорошее описание пути для новых клиентов Google никогда не даст нам готовых рецептов для появления в вашей поисковой системе.
Сколько стоит позиционирование страницы?
Сколько стоит позиционирование страницы? Многие клиенты задаются вопросом, за что они действительно платят компании позиционирование ? Общее мнение платит за приобретение SEO-ссылок, но так ли это на самом деле? Какие расходы, связанные с позиционированием, не видят наши клиенты? Стоит посмотреть инфографику, подготовленную marketingwsieci.pl , которая очень хорошо
Требуется ли оптимизация вашего сайта, как это сделать и устранить потенциальные проблемы?
Требуется ли оптимизация вашего сайта, как это сделать и устранить потенциальные проблемы? Почему оптимизация важна? Время загрузки сайта является одним из наиболее важных элементов пользовательского опыта, а также одним из факторов, когда речь заходит о SEO. В настоящее время у пользователей нет терпения ждать долгой загрузки страницы. Более 40% пользователей покидают сайт, если он загружается 3 секунды или более (
Ошибки отображения страницы на мобильных устройствах - правильно ли отображается веб-сайт на мобильных устройствах?
Ошибки отображения страницы на мобильных устройствах - правильно ли отображается веб-сайт на мобильных устройствах? Индексирование статуса и ошибок проиндексированных подстраниц - индексируют ли роботы Google все подстраницы и видят больше колебаний в проиндексированных подстраницах? Заблокированные ресурсы (недоступные для роботов поисковых систем) - блокируем ли мы файлы, необходимые для интерпретации содержимого страницы роботами? Ошибки в XML-картах подстраниц
Может ли быть лучшая и более выгодная форма продвижения?
Может ли быть лучшая и более выгодная форма продвижения? Безопасное позиционирование (White Hat SEO) Алгоритм Google, отвечающий за рейтинг сайта, постоянно меняется. В 2012 году
Что такое оптимизация страницы?
Что такое оптимизация страницы? Оптимизация сайта - это адаптация кода, контента и графики для поисковых систем. Это всегда предшествует правильному процессу позиционирования. Необходимо эффективно продвигать сайт в результатах поиска - влияет на устранение любых ошибок на сайте, повторение контента и минимизацию риска получения штрафа в виде фильтр из поиска Google , В случае
Это вообще узкое место во всем этом?
Это вообще узкое место во всем этом? Все ли кабели HDMI должны быть 4K (Ultra HD)? Короче говоря: нет , не все кабели HDMI поддерживают 4k. Если вы хотите быть уверены, вам лучше достичь одного Высокоскоростной кабель HDMI с надписью Premium , Но больше о том же. Сначала быстрый взгляд назад: После отмены номеров версий кабели HDMI были разделены
Я понимаю, что домашний попкорн ушел в прошлое, и его место заменило то, что сделано в микроволновке, но зачем есть химию, если вы можете приготовить все самостоятельно с нуля за короткое время?
Я понимаю, что домашний попкорн ушел в прошлое, и его место заменило то, что сделано в микроволновке, но зачем есть химию, если вы можете приготовить все самостоятельно с нуля за короткое время? Как приготовить попкорн? Нам нужно: Нагрейте в большой кастрюле с маслом - налейте его достаточно, чтобы покрыть дно примерно на 5 мм. Когда масло начнет гореть, вылейте его на дно горшочка с кукурузой, чтобы оно покрыло все дно. Накройте кастрюлю
Вас могут попросить возместить убытки, если вы бронируете номер или назначаете встречу?
Вас могут попросить возместить убытки, если вы бронируете номер или назначаете встречу? На прием к врачу попасть сложно, особенно у медицинских специалистов. Часто они связаны с длительным временем ожидания, потому что многие пациенты хотят пользоваться услугами. Это будет раздражать вас, если вы по какой-то причине не сможете записаться на прием и, следовательно, вынуждены ждать покупки гораздо дольше. Но нужно ли считаться с расходами на возмещение ущерба для врача? С точки зрения врача,
Если у кого есть хорошая идея перенести фотографии с телефона Android HTC на iPad?
Если у кого есть хорошая идея перенести фотографии с телефона Android HTC на iPad? Я считаю, что есть определенный тип людей, которые являются пользователями телефонов Android, но также имеют под рукой iPad. Это хороший способ насладиться различными впечатлениями от операционных систем Android и iOS, и нет сомнений, что просматривать фотографии на iPad гораздо удобнее, чем на мобильном телефоне Android. Более того, объем памяти телефона Android ограничен, скорость работы телефона стала

Com/css?
Для процессора?
Можете ли вы сделать тяжелый фильм с высоким разрешением?
Что делать, если компьютер перегревается?
Так что же нужно думать предприятиям электронной коммерции?
Какие именно разные правила и положения?
Что нужно сделать, чтобы убедиться, что вы соответствуете требованиям?
А что будет, если вы не будете соблюдать?
Что если мы не добавим описание страницы?
Сколько стоит позиционирование страницы?

Добро пожаловать , Гость !

Мы настоятельно рекомендуем Вам зарегистрироваться, если вы ещё этого не сделали. регистрация откроет Вам новые функции.

Войти или Зарегистрироваться

www.silvio-berluskoni.ru © Все права защищены © 2016.