TechBlogSD - Tout pour le développement WordPress et WEB
Instructions WEB et WordPress, actualités, revues de thèmes et plugins

Widget de tableau de prix Bootstrap

39

Bootstrap est un cadre de travail basé sur la disposition de la grille divisant la largeur de la zone de visualisation en douze parties égales. Il existe de nombreux composants par défaut tels que des tables, des alertes, des modaux, etc. qui peuvent être ajoutés sans aucune compétence en matière de codage. Mais l’ajout de composants personnalisés dans le site Bootstrap nécessite des connaissances de base en CSS et HTML, ainsi que la connaissance de l’utilisation des propriétés disponibles à partir du framework. Le tableau des prix est l’un de ces composants nécessaires à la plupart des propriétaires de sites Bootstrap. Dans cet article, créons un widget de table de tarification Bootstrap avec CSS personnalisé.

Vous trouverez ci-dessous le tableau de tarification CSS simple et élégant utilisant Bootstrap.

Widget de tableau de prix Bootstrap

Widget de tableau de prix Bootstrap

Le tableau des prix est fait avec du CSS pur, il n’y aura donc pas besoin de fichiers JavaScript. Vous devez insérer du code CSS et HTML sur votre page pour ajouter le tableau des prix.

CSS pour le widget de tableau de prix

Ajoutez le code CSS ci-dessous sous la section d’en-tête entre … les balises de votre page. Vous pouvez soit ajouter un CSS personnalisé sur la page à l’aide de balises …, soit l’enregistrer en tant que feuille de style externe et lien sur la page.

Le tableau comporte deux sections: l’en-tête et les détails. La section d’en-tête contient le montant du prix affichant une taille de police plus grande, le symbole $ est inséré à l’aide d’un exposant et par mois est affiché à l’aide d’une petite taille de police. La section des détails est une liste non ordonnée avec "list-style:none" pour supprimer les puces.

<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 pour le widget de tableau de tarification

Ajoutez maintenant le code HTML ci-dessous dans le corps de votre page. L’exemple de widget contient trois plans avec chaque plan contient un titre, 7 fonctionnalités et un bouton. Le code de chaque bloc de plan est mis en évidence avec des commentaires que vous pouvez modifier avec vos propres détails.

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

C’est ça!!! Enregistrez vos modifications et affichez la page sur le navigateur pour voir un beau tableau de prix avec trois plans. Assurez-vous de remplacer le contenu par le vôtre. Si vous souhaitez utiliser plus de plans, ajustez les classes de grille «col-md-4» et «col-sm-4» en fonction des colonnes dont vous avez besoin.

Source d’enregistrement: www.webnots.com
Leave A Reply

Ce site utilise des cookies pour améliorer votre expérience. Nous supposerons que cela vous convient, mais vous pouvez vous désinscrire si vous le souhaitez. J'accepte Plus de détails