TechBlogSD - Все для WordPress и WEB разработки
WEB и WordPress инструкции, новости, обзоры тем и плагинов

Виджет таблицы цен Bootstrap

43

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

Ниже представлена ​​простая и элегантная таблица цен на CSS с использованием Bootstrap.

Виджет таблицы цен Bootstrap

Виджет таблицы цен Bootstrap

Таблица цен составлена ​​с использованием чистого CSS, поэтому файлы JavaScript не нужны. Вам необходимо вставить код CSS и HTML на свою страницу, чтобы добавить таблицу цен.

CSS для виджета таблицы цен

Добавьте приведенный ниже код CSS в раздел заголовка между… тегами вашей страницы. Вы можете добавить собственный CSS на страницу с помощью тегов… или сохранить его как внешнюю таблицу стилей и ссылку на странице.

Таблица состоит из двух разделов – заголовка и деталей. Раздел заголовка содержит сумму цены, показывающую больший размер шрифта, символ $ вставлен с использованием надстрочного индекса, а месяц отображается с использованием небольшого размера шрифта. Раздел сведений представляет собой неупорядоченный список с «стилем списка: нет» для удаления маркеров.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> <style> #price-section { background-color: #fafafa; } .pricing .pricing-head { position: relative; background: rgb(158, 188, 133); color: #ffffff; text-align: center; font-weight: bold; } .pricing .price { display: inline-block; position: relative; } .pricing .price sup { position: absolute; top: 50px; left: -10px; font-size: 24px; } .pricing .price .price-amount { font-size: 108px; letter-spacing: -4px; } .pricing .price small { position: relative; left: -10px; font-size: 18px; } .pricing ul { list-style: none; margin: 0; background: #eee; text-align: center; padding-left: 0px; } .pricing ul li { border-bottom: solid 1px #e1e1e1; padding-top: 20px; padding-bottom: 20px; } .pricing .pricing-grab { display: block; text-align: center; font-size: 20px; font-weight: bold; padding: 20px 12px; color: #ffffff; background: rgb(211, 123, 123); } </style>

HTML для виджета таблицы цен

Теперь добавьте приведенный ниже HTML-код в тело вашей страницы. Пример виджета содержит три плана, каждый из которых содержит заголовок, 7 функций и кнопку. Код для каждого блока плана выделен комментариями, которые вы можете изменить, добавив свои собственные данные.

<div class="row row main-low-margin"> <!-- Details for Plan 1 --> <div class="col-md-4 col-sm-4"> <div class="pricing"> <div class="pricing-head"> <span class="price"> <sup>$</sup> <span class="price-amount">12 </span> <small>per month</small> </span> </div> <ul> <li><strong>BASIC PLAN</strong></li> <li><strong>1 GB </strong> Data</li> <li>10 <strong>Emails</strong></li> <li>Limit Of <strong>10</strong> Users</li> <li><strong>24x7</strong> Support</li> <li><strong>Online</strong> Access Available</li> <li><strong>Online</strong> Management Tool</li> </ul> <a href="#" class="pricing-grab">GET IT NOW</a> </div> </div> <!-- Details for Plan 2 --> <div class="col-md-4 col-sm-4"> <div class="pricing"> <div class="pricing-head"> <span class="price"> <sup>$</sup> <span class="price-amount">15 </span> <small>per month</small> </span> </div> <ul> <li><strong>MEDIUM PLAN</strong></li> <li><strong>5 GB </strong> Data</li> <li>15 <strong>Emails</strong></li> <li>Limit Of <strong>15</strong> Users</li> <li><strong>24x7</strong> Support</li> <li><strong>Online</strong> Access Available</li> <li><strong>Online</strong> Management Tool</li> </ul> <a href="#" class="pricing-grab">GET IT NOW</a> </div> </div> <!-- Details for Plan 3 --> <div class="col-md-4 col-sm-4"> <div class="pricing"> <div class="pricing-head"> <span class="price"> <sup>$</sup> <span class="price-amount">18 </span> <small>per month</small> </span> </div> <ul> <li><strong>ADVANCE PLAN</strong></li> <li><strong>10 GB </strong> Data</li> <li>20 <strong>Emails</strong></li> <li>Limit Of <strong>20</strong> Users</li> <li><strong>24x7</strong> Support</li> <li><strong>Online</strong> Access Available</li> <li><strong>Online</strong> Management Tool</li> </ul> <a href="#" class="pricing-grab">GET IT NOW</a> </div> </div> </div>

Вот и все!!! Сохраните изменения и просмотрите страницу в браузере, чтобы увидеть красивую таблицу цен с тремя планами. Убедитесь, что вы заменили контент своим. Если вы хотите использовать больше планов, настройте классы сетки «col-md-4» и «col-sm-4» на основе нужных столбцов.

Источник записи: www.webnots.com
Leave A Reply

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