Bootstrap -hinnoittelutaulukon widget
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
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.