Widżet tabeli cen Bootstrap
Bootstrap to framework, który działa w oparciu o układ siatki dzielący szerokość obszaru wyświetlania na dwanaście równych części. Istnieje wiele domyślnych komponentów, takich jak tabele, alerty, modalności itp., które można dodać bez umiejętności kodowania. Jednak dodawanie niestandardowych komponentów w witrynie Bootstrap wymaga podstawowej znajomości CSS i HTML wraz ze znajomością korzystania z dostępnych właściwości z frameworka. Tabela cen jest jednym z takich elementów, których potrzebuje większość właścicieli witryn Bootstrap. W tym artykule stworzymy widżet tabeli cen Bootstrap z niestandardowym kodem CSS.
Poniżej znajduje się prosta i elegancka tabela cen CSS przy użyciu Bootstrap.
Widżet tabeli cen Bootstrap
Tabela cenowa jest wykonana w czystym CSS, więc nie ma potrzeby używania plików JavaScript. Aby dodać tabelę cen, musisz wstawić kod CSS i HTML na swojej stronie.
CSS dla widżetu tabeli cen
Dodaj poniższy kod CSS pod sekcją nagłówka między … tagami swojej strony. Możesz dodać niestandardowy CSS na stronie za pomocą … tagów lub zapisać go jako zewnętrzny arkusz stylów i link na stronie.
Tabela ma dwie sekcje – nagłówek i szczegóły. Sekcja nagłówka zawiera kwotę ceny pokazującą większy rozmiar czcionki, symbol $ jest wstawiany za pomocą indeksu górnego, a miesięcznie jest wyświetlany za pomocą małego rozmiaru czcionki. Sekcja szczegółów to nieuporządkowana lista z „list-style:none" do usuwania punktorów.
<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 dla widżetu tabeli cen
Teraz dodaj poniższy kod HTML w treści swojej strony. Przykładowy widżet zawiera trzy plany, z których każdy zawiera nagłówek, 7 funkcji i przycisk. Kod dla każdego bloku planu jest wyróżniony komentarzami, które możesz modyfikować własnymi danymi.
<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>Otóż to!!! Zapisz zmiany i wyświetl stronę w przeglądarce, aby zobaczyć piękną tabelę cen z trzema planami. Upewnij się, że zastępujesz zawartość swoją własną. Jeśli chcesz korzystać z większej liczby planów, dostosuj klasy siatki „col-md-4″ i „col-sm-4″ na podstawie potrzebnych kolumn.
Źródło nagrywania: webnots.com