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

Віджет таблиці ціноутворення

4

Bootstrap – це фреймворк, заснований на макеті сітки, що ділить ширину області перегляду на дванадцять рівних частин. Існує багато компонентів за замовчуванням, таких як таблиці, сповіщення, модальні параметри тощо, які можна додавати без навичок кодування. Але додавання індивідуальних компонентів на сайт Bootstrap потребує базових знань CSS та HTML разом із знанням використання доступних властивостей із фреймворку. Таблиця цін – один з таких компонентів, необхідний більшості власників сайтів Bootstrap. У цій статті давайте створимо віджет таблиці цін Bootstrap із користувацьким CSS.

Нижче наведена проста та елегантна таблиця цін CSS за допомогою Bootstrap.

Віджет таблиці ціноутворення

Віджет таблиці ціноутворення

Таблиця цін складається з чистого CSS, тому файли JavaScript не знадобляться. Вам потрібно вставити CSS і HTML -код на свою сторінку, щоб додати таблицю цін.

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

Додайте нижченаведений код CSS під розділом заголовка між… тегами вашої сторінки. Ви можете або додати користувацький CSS на сторінку, використовуючи… теги, або зберегти його як зовнішню таблицю стилів та посилання на сторінці.

Таблиця має два розділи – заголовок та деталі. Розділ заголовка містить суму ціни, що показує більший розмір шрифту, символ $ вставляється за допомогою верхнього індексу, а за місяць – за допомогою невеликого розміру шрифту. Розділ подробиць-це невпорядкований список із "list-style: none" для видалення маркерів.

<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
Залиште відповідь

Цей веб -сайт використовує файли cookie, щоб покращити ваш досвід. Ми припустимо, що з цим все гаразд, але ви можете відмовитися, якщо захочете. Прийняти Читати далі