TechBlogSD - Wszystko do WordPressa i tworzenia stron internetowych
Instrukcje WEB i WordPress, nowości, recenzje motywów i wtyczek

Widżet tabeli cen Bootstrap

9

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

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: www.webnots.com
Leave A Reply

Ta strona korzysta z plików cookie, aby poprawić Twoje wrażenia. Zakładamy, że nie masz nic przeciwko, ale możesz zrezygnować, jeśli chcesz. Akceptuję Więcej szczegółów