TechBlogSD - Alt for WordPress- og WEB -utvikling
WEB- og WordPress -instruksjoner, nyheter, anmeldelser av temaer og plugins

Bootstrap pristabell -widget

3

Bootstrap er et rammeverk som er basert på rutenettoppsettet som deler bredden på visningsområdet i tolv like deler. Det er mange standardkomponenter som tabeller, varsler, modeller, etc. som kan legges til uten kodingskunnskaper. Men å legge til tilpassede komponenter på Bootstrap -nettstedet trenger grunnleggende CSS- og HTML -kunnskap sammen med kunnskapen om bruk av tilgjengelige egenskaper fra rammeverket. Pristabell er en slik komponent som de fleste av Bootstrap -nettstedseierne trenger. I denne artikkelen la oss lage en Bootstrap -pristabell -widget med tilpasset CSS.

Nedenfor er den enkle og elegante pristabellen for CSS ved bruk av Bootstrap.

Bootstrap pristabell -widget

Bootstrap pristabell -widget

Pristabellen er laget med ren CSS, og derfor er det ikke behov for JavaScript -filer. Du må sette inn CSS og HTML -kode på siden din for å legge til pristabellen.

CSS for pristabell -widget

Legg til CSS -koden nedenfor under toppteksten mellom … tagger på siden din. Du kan enten legge til egendefinert CSS på siden ved hjelp av … tagger eller lagre det som et eksternt stilark og lenke på siden.

Tabellen har to seksjoner – topptekst og detaljer. Overskriftsdelen inneholder prisbeløpet som viser større skriftstørrelse, $ -symbolet settes inn med overskrift og per måned vises med liten skriftstørrelse. Detaljeringsdelen er en uordnet liste med "listestil: ingen" for å fjerne kulene.

<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 for pristabell -widget

Legg til HTML -koden nedenfor inne i sidens brødtekst. Eksempel -widgeten inneholder tre planer, hver plan inneholder en overskrift, 7 funksjoner og en knapp. Koden for hver planblokk er uthevet med kommentarer som du kan endre med dine egne 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 er det!!! Lagre endringene og se siden i nettleseren for å se en vakker pristabell med tre planer. Sørg for å erstatte innholdet med det du eier. Hvis du vil bruke flere planer, kan du justere "col-md-4" og "col-sm-4" rutenettklasser basert på kolonnene du trenger.

Opptakskilde: www.webnots.com
Leave A Reply

Dette nettstedet bruker informasjonskapsler for å forbedre din opplevelse. Vi antar at du er ok med dette, men du kan velge bort det hvis du ønsker det. jeg aksepterer Mer informasjon