Takip Edin

BOOTSTRAP

Bootstrap 4 İle Fiyat Tablosu Tasarımı

Bootstrap 4 İle Fiyat Tablosu Tasarımı - Featured Resim

Bu yazıda, Bootstrap 4 kullanılarak fiyat tablosu tasarlanacaktır.

Öncelikle ilk kartın tasarımını gerçekleştirelim. Bunun için Bootstrap 4’te bulunan .card sınıfını kullanalım. İleride ekleyeceğimiz diğer kartlarla şu an tasarlayacağımız kartın eşit genişlik ve yüksekliğe sahip olması için .card sınıfını .card-deck sınıfı içerisinde belirtelim:

EDIT ON CODEPEN yazısına tıklayarak kodlar üzerinde düzenlemeler yapabilirsiniz.

Diğer kartları da .card-deck sınıfı içerisine yerleştirelim:

Kartlara arka plan rengi verelim:

Bir arka plan resmi ekleyelim:

Kartın font stilini değiştirelim.

.card-header sınıfı içerisinde bulunan başlıkların ve /Ay kelimesinin rengini değiştirelim.

Butonlara Font Awesome‘dan birer ikon ekleyelim:

Son olarak kartların üzerinde gezindiğimizde boyutlarının artmasını sağlayalım:

Devamını oku

Popüler

error: Content is protected !!