Sergio Pinna

Web Designer

Tabella dei prezzi con Bootstrap

Tabella dei prezzi con Bootstrap

Tabella dei prezzi con Bootstrap è un’idea che nmi è venuta pensando a come impostare la pagina Richiedi un preventivo

Bootstrap è sicuramente il framework per CSS più potente, versatile e con una documentazione decisamente solida che esista su internet. Tutto sergiopinna.it si basa su di esso e su sulle sue potenzialità; a riguardo basta che tu legga l’ultimo articolo che ho scritto rispetto all’uso di un pop-up modale ad una risposta positiva di CF7.

Per quel che concerne la documentazione basti pensare alla documentazione ufficiale di Bootstrap, oppure a quella più semplificata, ma altrettanto interessante, edita dal noto sito HTML.it: “Guida Bootstrap“. Senza dimenticare che anche il sito W3Schools con quest’altra guida “Bootstrap 3 Tutorial“.

La tabella dei prezzi con Bootstrap ho avuto necessità di usarla nella mia pagina Le domande più frequenti ho avuto necessità di creare una tabella per i prezzi che fosse responsive e ovviamente… fatta con Bootstrap! 😉

Ho utilizzato questo snippet Responsive pricing table della comunità internazionale che crea snippet per Bootstrap e alla qualche molto caldamente partecipo anch’io, creando la tabella dei prezzi con Bootstrap
Dunque i passaggi per avere una tabella dei prezzi responsive e bootstrappata sono molto semplici:

Tabella dei prezzi con Bootstrap

1. HTML del codice

Vai alla pagina suddetta, Responsive pricing table, e clicca su HTML (è in alto a sinistra dello schermo 😉 ), preleva dalla pagina il codice sorgente; per semplificare l’operazione lo riporto anche qua:

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-offset-4 col-sm-8">
            <div class="row">
                <div class="col-xs-4 my_planHeader my_plan1">
                    <div class="my_planTitle">Plan 1</div>
                    <div class="my_planPrice">Free</div>
                    <div class="my_planDuration"> </div>
                    <a type="button" class="btn btn-default">Sign Up</a>
                </div>
                <div class="col-xs-4 my_planHeader my_plan2">
                    <div class="my_planTitle">Plan 2</div>
                    <div class="my_planPrice">2€</div>
                    <div class="my_planDuration">per month</div>
                    <a type="button" class="btn btn-default">Sign Up</a>
                </div>
                <div class="col-xs-4 my_planHeader my_plan3">
                    <div class="my_planTitle">Plan 3</div>
                    <div class="my_planPrice">3.75€</div>
                    <div class="my_planDuration">per month</div>
                    <a type="button" class="btn btn-default">Sign Up</a>
                </div>
            </div>
        </div>
    </div>
    <div class="row my_featureRow">
        <div class="col-xs-12 col-sm-4 my_feature">
            Feature 1
        </div>
        <div class="col-xs-12 col-sm-8">
            <div class="row">
                <div class="col-xs-4 col-sm-4 my_planFeature my_plan1">
                    <i class="fa fa-check my_check"></i>
                </div>
                <div class="col-xs-4 col-sm-4 my_planFeature my_plan2">
                    <i class="fa fa-check my_check"></i>
                </div>
                <div class="col-xs-4 col-sm-4 my_planFeature my_plan3">
                    <i class="fa fa-check my_check"></i>
                </div>
            </div>
        </div>
    </div>
    <div class="row my_featureRow">
        <div class="col-xs-12 col-sm-4 my_feature">
            Feature 2
        </div>
        <div class="col-xs-12 col-sm-8">
            <div class="row">
                <div class="col-xs-4 col-sm-4 my_planFeature my_plan1">
                    <i class="fa"></i>
                </div>
                <div class="col-xs-4 col-sm-4 my_planFeature my_plan2">
                    <i class="fa fa-check my_check"></i>
                </div>
                <div class="col-xs-4 col-sm-4 my_planFeature my_plan3">
                    <i class="fa fa-check my_check"></i>
                </div>
            </div>
        </div>
    </div>
    <div class="row my_featureRow">
        <div class="col-xs-12 col-sm-4 my_feature">
            Feature 3
        </div>
        <div class="col-xs-12 col-sm-8">
            <div class="row">
                <div class="col-xs-4 col-sm-4 my_planFeature my_plan1">
                    <i class="fa"></i>
                </div>
                <div class="col-xs-4 col-sm-4 my_planFeature my_plan2">
                    <i class="fa"></i>
                </div>
                <div class="col-xs-4 col-sm-4 my_planFeature my_plan3">
                    <i class="fa fa-check my_check"></i>
                </div>
            </div>
        </div>
    </div>     
</div>

<h4 class="text-center"> A responsive pricing table that shows the comparison between the different plans even on small devices.</h4>

2. Il CSS del codice

Adesso tocca al CSS, segui la stessa procedura: alla pagina, Responsive pricing table, e clicca su CSS, per esemplificazione lo riporto anche qui sotto:


/* Use a wide full screen for small screens like tablets. */
@media (min-width: 768px) and (max-width:992px) {
    .container {
		width: initial;
        padding-left: 2em;
        padding-right: 2em;        
	}
}

/* --- Plans ---------------------------- */

.my_planHeader {
    text-align: center;
    color: white;
    padding-top:0.2em;
    padding-bottom:0.2em;
}
.my_planTitle {
    font-size:2em;
    font-weight: bold;
}
.my_planPrice {
    font-size:1.4em;
    font-weight: bold;    
}
.my_planDuration {
    margin-top: -0.6em;
}

@media (max-width: 768px) {
    .my_planTitle {
        font-size:small;
    }    
}

/* --- Features ------------------------- */

.my_feature {
    line-height:2.8em;   
}

@media (max-width: 768px) {
    .my_feature {
        text-align: center
    }
 }

.my_featureRow {
    margin-top: 0.2em;
    margin-bottom: 0.2em;
    border: 0.1em solid rgb(163, 163, 163);
}    

/* --- Plan 1 --------------------------- */
.my_plan1 {
    background: rgb(224,234,242);
}

.my_planHeader.my_plan1 a {
    background: rgb(72, 109, 139);
    color:white;
}

.my_planHeader.my_plan1 {
    background: rgb(105, 153, 193);
    border-bottom: thick solid rgb(72, 109, 139);
}

/* --- Plan 2 --------------------------- */
.my_plan2 {
    background: rgb(230,235,218);
}

.my_planHeader.my_plan2 a {
    background: rgb(108, 131, 62);
    color:white;
}

.my_planHeader.my_plan2 {
    background: rgb(134, 162, 77);
    border-bottom: thick solid rgb(108, 131, 62);
}

/* --- Plan 3 --------------------------- */
.my_plan3 {
    background: rgb(254,235,212);
}

.my_planHeader.my_plan3 a {
    background: rgb(199, 127, 40);
    color:white;
}

.my_planHeader.my_plan3 {
    background: rgb(253, 161, 49);
    border-bottom: thick solid rgb(199, 127, 40);
}




.my_planFeature {
    text-align: center;
    font-size: 2em;
}

.my_planFeature i.my_check {
    color: green;
}



3. Personalizzazione

Personalizza a tuo piacimento il codice inserendo, modificando, eliminando tutto il codice sia HTML che CSS che ti sia utile ai tuoi fini o meno.

4.Il risultato (…quasi!) finale

…lo puoi vedere a pagina Le domande piu frequenti, “e vai ce l’ho fatta”, pensai, …quello che non pensai fu: “e a livello smartphone… come si vede…”…

Questo me lo ho fatto notare il mio amico Lorenzo Puliti di Viaggi-usa.it che vedendolo dal suo Nexux4 mi ha cordialmente detto che “non mi convince molto il sistema a spunte immediatamente successivo non è immediato capire che si riferisce ai 3 tipi di sito”…

Dunque ho rimesso mano al codice ed ho forkato il codice aggiungendo questi altri due codici

5. Il fork dell’HTML

Qui sotto puoi vedere il codice HTML che ho aggiunto, è sufficiente che compi il copia ed incolla nella tua pagina di WordPress:

<div class="accordion-profilo scelta-profilo">
    <div class="row my_planHeaderRow">
    	<div class="col-xm-6 col-xs-offset-6">
    		<div class="my_planHeader my_plan1">
                <div class="my_planTitle">Basic</div>
                <div data-mh="my_planPrice" class="my_planPrice">€ 800</div>
                <div class="my_planDuration">una tantum</div>
                <a class="btn btn-default" type="button">Sign Up</a>
            </div>
    	</div>
    </div>
	<div class="row my_featureRow">
		<div class="col-xs-6 my_feature" data-mh="stessa-altezza-nei-box">
    		<p><span class="bold"><strong>Assistenza tecnica</strong> garantita</span><br><small>30 ore annue</small></p>
    	</div>
		<div class="col-xs-6 my_planFeature my_plan1" data-mh="stessa-altezza-nei-box">
    		<i class="fa fa-check my_check"></i>
    	</div>
	</div>
	<div class="row my_featureRow">
		<div class="col-xs-6 my_feature" data-mh="stessa-altezza-nei-box">
    		<p><span class="bold"><strong>Assistenza tecnica</strong> garantita</span><br><small>30 ore annue</small></p>
    	</div>
		<div class="col-xs-6 my_planFeature my_plan1" data-mh="stessa-altezza-nei-box">
    		<i class="fa fa-check my_check"></i>
    	</div>
	</div>
	<div class="row my_featureRow">
		<div class="col-xs-6 my_feature" data-mh="stessa-altezza-nei-box">
    		<p><span class="bold"><strong>Assistenza tecnica</strong> garantita</span><br><small>30 ore annue</small></p>
    	</div>
		<div class="col-xs-6 my_planFeature my_plan1" data-mh="stessa-altezza-nei-box">
    		<i class="fa fa-check my_check"></i>
    	</div>
	</div>
    <div class="row my_planHeaderRow">
    	<div class="col-xm-6 col-xs-offset-6">
    		<div class="my_planHeader my_plan2">
	    		<div class="my_planTitle">Business</div>
	    		<div class="my_planPrice" data-mh="my_planPrice">€ 1600</div>
	    		<div class="my_planDuration">una tantum</div>
	    		<a class="btn btn-default" type="button">Sign Up</a>
            </div>
    	</div>
    </div>
	<div class="row my_featureRow">
		<div class="col-xs-6 my_feature" data-mh="stessa-altezza-nei-box">
    		<p><span class="bold"><strong>Assistenza tecnica</strong> garantita</span><br><small>30 ore annue</small></p>
    	</div>
		<div class="col-xs-6 my_planFeature my_plan2" data-mh="stessa-altezza-nei-box">
    		<i class="fa fa-check my_check"></i>
    	</div>
	</div>
	<div class="row my_featureRow">
		<div class="col-xs-6 my_feature" data-mh="stessa-altezza-nei-box">
    		<p><span class="bold"><strong>Assistenza tecnica</strong> garantita</span><br><small>30 ore annue</small></p>
    	</div>
		<div class="col-xs-6 my_planFeature my_plan2" data-mh="stessa-altezza-nei-box">
    		<i class="fa fa-check my_check"></i>
    	</div>
	</div>
	<div class="row my_featureRow">
		<div class="col-xs-6 my_feature" data-mh="stessa-altezza-nei-box">
    		<p><span class="bold"><strong>Assistenza tecnica</strong> garantita</span><br><small>30 ore annue</small></p>
    	</div>
		<div class="col-xs-6 my_planFeature my_plan2" data-mh="stessa-altezza-nei-box">
    		<i class="fa fa-check my_check"></i>
    	</div>
	</div>
	<div class="row my_featureRow">
		<div class="col-xs-6 my_feature" data-mh="stessa-altezza-nei-box">
    		<p><span class="bold">Caricamento della pagina <strong>rapido</strong></span><br><small>cache, concatenamento file CSS e JS</small></p>
    	</div>
		<div class="col-xs-6 my_planFeature my_plan2" data-mh="stessa-altezza-nei-box">
    		<i class="fa fa-check my_check"></i>
    	</div>
	</div>
	<div class="row my_featureRow">
		<div class="col-xs-6 my_feature" data-mh="stessa-altezza-nei-box">
    		<p><span class="bold"><strong>Multilingua</strong>, per adeguarsi a qualsiasi tipo di clientela</span><br><small>qTranslateX</small></p>
    	</div>
		<div class="col-xs-6 my_planFeature my_plan2" data-mh="stessa-altezza-nei-box">
    		<i class="fa fa-check my_check"></i>
    	</div>
	</div>
    <div class="row my_planHeaderRow">
    	<div class="col-xm-6 col-xs-offset-6">
    		<div class="my_planHeader my_plan3">
    		<div class="my_planTitle">Professional</div>
    		<div class="my_planPrice" data-mh="my_planPrice">€ 2400 una tantum</div>
    		<div class="my_planDuration">+ € 100 al mese</div>
    		<a class="btn btn-default" type="button">Sign Up</a>
            </div>
    	</div>
    </div>
	<div class="row my_featureRow">
		<div class="col-xs-6 my_feature" data-mh="stessa-altezza-nei-box">
    		<p><span class="bold"><strong>Assistenza tecnica</strong> garantita</span><br><small>30 ore annue</small></p>
    	</div>
		<div class="col-xs-6 my_planFeature my_plan3" data-mh="stessa-altezza-nei-box">
    		<i class="fa fa-check my_check"></i>
    	</div>
	</div>
	<div class="row my_featureRow">
		<div class="col-xs-6 my_feature" data-mh="stessa-altezza-nei-box">
    		<p><span class="bold"><strong>Assistenza tecnica</strong> garantita</span><br><small>30 ore annue</small></p>
    	</div>
		<div class="col-xs-6 my_planFeature my_plan3" data-mh="stessa-altezza-nei-box">
    		<i class="fa fa-check my_check"></i>
    	</div>
	</div>
	<div class="row my_featureRow">
		<div class="col-xs-6 my_feature" data-mh="stessa-altezza-nei-box">
    		<p><span class="bold"><strong>Assistenza tecnica</strong> garantita</span><br><small>30 ore annue</small></p>
    	</div>
		<div class="col-xs-6 my_planFeature my_plan3" data-mh="stessa-altezza-nei-box">
    		<i class="fa fa-check my_check"></i>
    	</div>
	</div>
	<div class="row my_featureRow">
		<div class="col-xs-6 my_feature" data-mh="stessa-altezza-nei-box">
    		<p><span class="bold">Caricamento della pagina <strong>rapido</strong></span><br><small>cache, concatenamento file CSS e JS</small></p>
    	</div>
		<div class="col-xs-6 my_planFeature my_plan3" data-mh="stessa-altezza-nei-box">
    		<i class="fa fa-check my_check"></i>
    	</div>
	</div>
	<div class="row my_featureRow">
		<div class="col-xs-6 my_feature" data-mh="stessa-altezza-nei-box">
    		<p><span class="bold"><strong>Multilingua</strong>, per adeguarsi a qualsiasi tipo di clientela</span><br><small>qTranslateX</small></p>
    	</div>
		<div class="col-xs-6 my_planFeature my_plan3" data-mh="stessa-altezza-nei-box">
    		<i class="fa fa-check my_check"></i>
    	</div>
	</div>
	<div class="row my_featureRow">
		<div class="col-xs-6 my_feature" data-mh="stessa-altezza-nei-box">
    		<p><span class="bold"><strong>Negozio online</strong>, per vendere qualsiasi tipo di prodotto</span><br><small>WooCommerce</small></p>
    	</div>
		<div class="col-xs-6 my_planFeature my_plan3" data-mh="stessa-altezza-nei-box">
    		<i class="fa fa-check my_check"></i>
    	</div>
	</div>
	<div class="row my_featureRow">
		<div class="col-xs-6 my_feature" data-mh="stessa-altezza-nei-box">
    		<p><span class="bold"><strong>Sicurezza</strong> di protocollo massima</span><br><small>HTTPS</small></p>
    	</div>
		<div class="col-xs-6 my_planFeature my_plan3" data-mh="stessa-altezza-nei-box">
    		<i class="fa fa-check my_check"></i>
    	</div>
	</div>
</div>

6. Il fork del CSS

Qui sotto c’è il fork da inserire nel tuo style.css:

.accordion-profilo .my_planHeaderRow {
	margin-top: 30px;
}
.accordion-profilo .my_planHeaderRow:first-type-child {
	margin-top: 0;
}
.accordion-profilo .col-xs-offset-6 {
	margin-left: 0;
	padding-left: 15px;
	padding-right: 15px;
}
.accordion-profilo .row.my_featureRow {
  margin-left: 0;
  margin-right: 0;
}
.accordion-profilo .row.my_planHeaderRow {
  padding-left: 15px;
  padding-right: 15px;
}
@media (min-width: 480px) {
	.accordion-profilo .col-xs-offset-6 {
		margin-left: 50%;
	}
}

7. Eliminare la “vecchia” tabella in dimensioni inferiori a 768px

Per raggiungere lo scopo, e usare la tabella dei prezzi con Bootstrap, la tabella che hai costruito non deve essere più visibile a dimensioni inferiori a 768px, altrimenti verranno stampate due tabelle, appunto.

Modifica il tuo html da

<div class="scelta-profilo">

a

<div class="scelta-profilo hidden-xs">

aggiungendo semplicemente la classe CSS hidden-xs che fa il suo ottimo lavoro di cancellazione 🙂

Il risultato è stato davvero egregio e funzionale: grafica ben puliti e semplice

Oltre che all’articolo presente, tabella dei prezzi con Bootstrap, un articolo che dal punto di vista delle vendita può esserti interessante è: WooCommerce: aggiungere il responsive alla tabella “Ordine ricevuto”

Condividi questo articolo