TechBlogSD - Allt för WordPress- och WEB -utveckling
WEB- och WordPress - instruktioner, nyheter, recensioner av teman och plugins

Bootstrap prissättningstabell -widget

1

Bootstrap är ett ramverk som bygger på att rutnätets layout delar bredden på visningsområdet i tolv lika stora delar. Det finns många standardkomponenter som tabeller, varningar, modeller etc. som kan läggas till utan kodningskunskaper. Men att lägga till anpassade komponenter på Bootstrap -webbplatsen behöver grundläggande CSS- och HTML -kunskap tillsammans med kunskapen om att använda tillgängliga egenskaper från ramverket. Prissättningstabellen är en sådan komponent som behövs av de flesta Bootstrap -webbplatsägare. I den här artikeln låt oss skapa en Bootstrap -pristabell -widget med anpassad CSS.

Nedan visas den enkla och eleganta CSS -pristabellen med Bootstrap.

Bootstrap prissättningstabell -widget

Bootstrap prissättningstabell -widget

Prissättningstabellen är gjord med ren CSS, därför behövs det inga JavaScript -filer. Du måste infoga CSS- och HTML -kod på din sida för att lägga till pristabellen.

CSS för prissättningstabell -widget

Lägg till nedanstående CSS -kod under rubriksektionen mellan … taggar på din sida. Du kan antingen lägga till anpassad CSS på sidan med … taggar eller spara den som ett externt formatmall och länk på sidan.

Tabellen har två sektioner – rubrik och detaljer. Rubriksektionen innehåller prisbeloppet som visar större teckenstorlek, $ -symbolen infogas med överskrift och per månad visas med liten teckenstorlek. Detaljavsnittet är en orörd lista med "list-style: none" för att ta bort kulorna.

<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 för prissättningstabell -widget

Lägg nu till nedanstående HTML -kod i sidans kropp. Exempelwidgeten innehåller tre planer där varje plan innehåller en rubrik, 7 funktioner och en knapp. Kod för varje planblock markeras med kommentarer som du kan ändra med dina egna detaljer.

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

Det är allt!!! Spara dina ändringar och visa sidan i webbläsaren för att se en vacker pristabell med tre planer. Se till att ersätta innehållet med ditt eget. Om du vill använda fler planer kan du justera rutorna "col-md-4" och "col-sm-4" baserat på de kolumner du behöver.

Inspelningskälla: webnots.com
Leave A Reply

Denna webbplats använder cookies för att förbättra din upplevelse. Vi antar att du är ok med detta, men du kan välja bort det om du vill. Jag accepterar Fler detaljer