TechBlogSD - Kaikki WordPressin ja WEB: n kehittämiseen
WEB- ja WordPress - ohjeet, uutiset, arvostelut teemoista ja laajennuksista

Bootstrap -hinnoittelutaulukon widget

1

Bootstrap on kehys, joka perustuu ruudukon asetteluun jaettuna katselualueen leveyteen kahdentoista yhtä suureen osaan. On monia oletuskomponentteja, kuten taulukoita, hälytyksiä, modaaleja jne., Jotka voidaan lisätä ilman koodaustaitoja. Räätälöityjen komponenttien lisääminen Bootstrap -sivustoon vaatii kuitenkin CSS- ja HTML -perustiedot sekä kehyksen käytettävissä olevien ominaisuuksien käytön tuntemuksen. Hinnoittelutaulukko on yksi tällainen komponentti, jota useimmat Bootstrap -sivuston omistajat tarvitsevat. Tässä artikkelissa luomme Bootstrap -hinnoittelutaulukon widgetin mukautetulla CSS: llä.

Alla on yksinkertainen ja tyylikäs CSS -hinnoittelutaulukko Bootstrapin avulla.

Bootstrap -hinnoittelutaulukon widget

Bootstrap -hinnoittelutaulukon widget

Hinnoittelutaulukko on valmistettu puhtaasta CSS: stä, joten JavaScript -tiedostoja ei tarvita. Lisää hinnoittelutaulukko lisäämällä sivullesi CSS- ja HTML -koodi.

CSS hinnoittelutaulukon widgetille

Lisää alla oleva CSS -koodi otsikko -osion alle sivusi… tunnisteiden väliin. Voit joko lisätä sivulle mukautetun CSS: n… -tagien avulla tai tallentaa sen ulkoisena tyylitaulukkona ja linkkinä sivulla.

Taulukossa on kaksi osaa – otsikko ja tiedot. Ylätunniste -osassa on hintamäärä, joka näyttää suuremman kirjasinkoko, $ -merkki lisätään yläindeksillä ja kuukaudessa pienellä kirjasinkokolla. Tiedot-osio on järjestämätön luettelo, jonka luettelomerkit poistetaan luettelotyylillä: ei mitään.

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

Hinnoittelutaulukon widgetin HTML

Lisää nyt alla oleva HTML -koodi sivusi runkoon. Esimerkki -widget sisältää kolme suunnitelmaa, joista jokainen sisältää otsikon, 7 ominaisuutta ja painikkeen. Kunkin suunnitelman lohkon koodi on korostettu kommenteilla, joita voit muokata omilla tiedoillasi.

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

Se siitä!!! Tallenna muutokset ja katso sivu selaimessa nähdäksesi kaunis hinnoittelutaulukko, jossa on kolme suunnitelmaa. Muista korvata sisältö omalla omallasi. Jos haluat käyttää enemmän suunnitelmia, säädä ruudukko "col-md-4" ja "col-sm-4" tarvittavien sarakkeiden perusteella.

Leave A Reply

Tämä verkkosivusto käyttää evästeitä parantaakseen käyttökokemustasi. Oletamme, että olet kunnossa, mutta voit halutessasi kieltäytyä. Hyväksyä Lisätietoja