TechBlogSD - Tutto per WordPress e sviluppo WEB
Istruzioni WEB e WordPress, notizie, recensioni di temi e plugin

Widget tabella prezzi Bootstrap

1

Bootstrap è un framework basato sul layout della griglia che divide la larghezza dell’area di visualizzazione in dodici parti uguali. Esistono molti componenti predefiniti come tabelle, avvisi, modali, ecc. che possono essere aggiunti senza alcuna abilità di codifica. Ma l’aggiunta di componenti personalizzati nel sito Bootstrap richiede una conoscenza di base di CSS e HTML insieme alla conoscenza dell’utilizzo delle proprietà disponibili dal framework. La tabella dei prezzi è uno di questi componenti necessari per la maggior parte dei proprietari di siti Bootstrap. In questo articolo creiamo un widget per la tabella dei prezzi Bootstrap con CSS personalizzato.

Di seguito è riportata la tabella dei prezzi CSS semplice ed elegante che utilizza Bootstrap.

Widget tabella prezzi Bootstrap

Widget tabella prezzi Bootstrap

La tabella dei prezzi è realizzata con puro CSS quindi non ci sarà bisogno di file JavaScript. Devi inserire il codice CSS e HTML nella tua pagina per aggiungere la tabella dei prezzi.

CSS per widget tabella prezzi

Aggiungi il codice CSS sottostante sotto la sezione dell’intestazione tra … i tag della tua pagina. Puoi aggiungere CSS personalizzati alla pagina utilizzando i tag … o salvarlo come foglio di stile esterno e collegarlo alla pagina.

La tabella ha due sezioni: intestazione e dettagli. La sezione dell’intestazione contiene l’importo del prezzo che mostra una dimensione del carattere più grande, il simbolo $ viene inserito utilizzando l’apice e al mese viene mostrato con una dimensione del carattere piccola. La sezione dei dettagli è un elenco non ordinato con "list-style:none" per rimuovere i punti elenco.

<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 per widget tabella prezzi

Ora aggiungi il codice HTML sottostante all’interno del corpo della tua pagina. Il widget di esempio contiene tre piani con ogni piano contiene un’intestazione, 7 funzioni e un pulsante. Il codice per ogni blocco di piano è evidenziato con commenti che puoi modificare con i tuoi dati.

<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>

Questo è tutto!!! Salva le tue modifiche e visualizza la pagina sul browser per vedere una bella tabella dei prezzi con tre piani. Assicurati di sostituire il contenuto con il tuo. Se desideri utilizzare più piani, regola le classi della griglia "col-md-4" e "col-sm-4" in base alle colonne di cui hai bisogno.

Fonte di registrazione: webnots.com
Lascia una risposta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More