Darmowy kurs projektowania UI/UX

Dowiedz się, jak tworzyć wyjątkowe projekty, czytając mój nowy samouczek.

Karty

Sprawdź angielską wersje tej lekcji w naszym rozszerzonym tutorialu Bootstrap.

Karty są jednym z najpopularniejszych komponentów Bootstrapa. Są to bardzo elastyczne "kontenery na treść" z rozszerzalnymi opcjami dla nagłówków, stopek, obrazków oraz szerokiej gamy różnego rodzaju treści.

W tej lekcji dowiemy się, jak tworzyć karty cenowe. Ale zaczniemy od podstaw.

Podstawowy przykład

Oto prosty element karty z tytułem, tekstem i przyciskiem.

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

                                    
                                      <div class="card">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <button type="button" class="btn btn-primary">Button</button>
  </div>
</div>

Jak to działa:

Klasa card dostarcza podstawowe style (na przykład cienie) i zapewnia, że karta zostanie poprawnie wyświetlona.
Klasa card-body dostarcza podstawowy margines wewnątrz karty dla treści.
Klasy card-title i card-text są puste. Są to puste klasy, które możemy używać, jeśli chcemy globalnie stylizować tytuły i tekst w kartach. Możesz je nawet usunąć, jeśli chcesz.
button to zwykły przycisk. Rozmawialiśmy o nim w poprzedniej lekcji.

Karta z obrazem

Możesz bardzo łatwo dodać obraz do swojej karty, dodając prosty element <img> z klasą card-img-top.

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Button

                                    
                                      <div class="card">
  <img src="https://mdbcdn.b-cdn.net/img/new/standard/nature/184.webp" class="card-img-top" alt="Fissure in Sandstone"/>
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#!" class="btn btn-primary">Button</a>
  </div>
</div>

Obraz z efektem falowania

Aby dodać efekt rozpryskiwania i subtelny efekt po najechaniu, musisz zmodyfikować znacznik HTML obrazu w karcie (kliknij na obraz, aby zobaczyć efekt).

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Button

                                    
                                      <div class="card">
  <div class="bg-image hover-overlay ripple" data-mdb-ripple-color="light">
    <img src="https://mdbcdn.b-cdn.net/img/new/standard/nature/111.webp" class="img-fluid"/>
    <a href="#!">
      <div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>
    </a>
  </div>
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#!" class="btn btn-primary">Button</a>
  </div>
</div>

Nagłówek i stopka

Możesz również dodać opcjonalne sekcje nagłówka i stopki do karty.

Featured

Special title treatment

With supporting text below as a natural lead-in to additional content.

Button

2 days ago

                                    
                                      <div class="card text-center">
  <div class="card-header">Featured</div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Button</a>
  </div>
  <div class="card-footer text-muted">2 days ago</div>
</div>

Uwaga: Karty posiadają mnóstwo dostępnych opcji. Nie omówimy ich wszystkich w tej lekcji, ponieważ musimy ukończyć nasz projekt. Jeśli jednak chcesz dowiedzieć się więcej o kartach, zajrzyj na stronę dokumentacji kart.

Krok 1 - dodaj sekcję z cenami przy użyciu siatki

Poniżej sekcji "Details" dodaj kolejną sekcję "Pricing". Umieść w niej siatkę z 3 równymi kolumnami.

                                    
                                      <!-- Section: Pricing -->
<section class="mb-5 mb-lg-10">

  <h3 class="fw-bold text-center mb-5">Pricing</h3>

  <div class="row gx-xl-5">
    <div class="col-lg-4 col-md-12 mb-4 mb-lg-0">


    </div>

    <div class="col-lg-4 col-md-6 mb-4 mb-lg-0">


    </div>

    <div class="col-lg-4 col-md-6 mb-4 mb-lg-0">


    </div>
  </div>

</section>
<!-- Section: Pricing -->

Zauważ, że na dużych ekranach mamy 3 równe kolumny, a na średnich ekranach jedna kolumna jest rozciągnięta na pełną szerokość (col-md-12), a poniżej znajdziesz 2 równe kolumny (col-md-6). To jest typowy widok pionowy dla tabletów.

Krok 2 - dodaj karty z cenami

Teraz dodajmy puste karty zawierające tylko header z tytułem.

                                    
                                      <!-- Section: Pricing -->
<section class="mb-5 mb-lg-10">

  <h3 class="fw-bold text-center mb-5">Pricing</h3>

  <div class="row gx-xl-5">
    <div class="col-lg-4 col-md-12 mb-4 mb-lg-0">

      <div class="card">
        <div class="card-header text-center pt-4">
          <p class="text-uppercase">
            <strong>Basic</strong>
          </p>

        </div>
        <div class="card-body">

        </div>
      </div>

    </div>

    <div class="col-lg-4 col-md-6 mb-4 mb-lg-0">

      <div class="card">
        <div class="card-header text-center pt-4">
          <p class="text-uppercase">
            <strong>Advanced</strong>
          </p>
        </div>
        <div class="card-body">
        </div>
      </div>

    </div>

    <div class="col-lg-4 col-md-6 mb-4 mb-lg-0">

      <div class="card">
        <div class="card-header text-center pt-4">
          <p class="text-uppercase">
            <strong>Enterprise</strong>
          </p>
        </div>
        <div class="card-body">
        </div>
      </div>

    </div>
  </div>

</section>
<!-- Section: Pricing -->

Jedną nową rzeczą jest wykorzystanie klasy text-uppercase, która służy do zamiany liter na wielkie litery.

Pricing

Basic

Advanced

Enterprise

Krok 3 - dodaj ceny, przyciski oraz listy

Wszystko to już się nauczyliśmy w poprzednich lekcjach, więc nie ma sensu się nad tym rozwodzić.

                                    
                                      <div class="card">
  <div class="card-header text-center pt-4">
    <p class="text-uppercase">
      <strong>Basic</strong>
    </p>

    <h3 class="mb-4">
      <strong>$ 129</strong>
      <small class="text-muted" style="font-size: 16px">/year</small>
    </h3>

    <button type="button" class="btn btn-secondary btn-rounded w-100 mb-3">
      Buy
    </button>

  </div>
  <div class="card-body">

    <ol class="list-unstyled mb-0">
      <li class="mb-3">
        <i class="fas fa-check text-success me-3"></i>Unlimited
        updates
      </li>
      <li class="mb-3">
        <i class="fas fa-check text-success me-3"></i>Git repository
      </li>
      <li class="mb-3">
        <i class="fas fa-check text-success me-3"></i>npm
        installation
      </li>
    </ol>

  </div>
</div>

Basic

$ 129 /year

Unlimited updates
Git repository
npm installation

Dodajmy podobną zawartość do pozostałych kart. Oczywiście, możesz dostosować teksty według własnych preferencji.

Tak powinna wyglądać ukończona sekcja "Pricing":

                                    
                                      <!-- Section: Pricing -->
<section class="mb-5 mb-lg-10">

  <h3 class="fw-bold text-center mb-5">Pricing</h3>

  <div class="row gx-xl-5">
    <div class="col-lg-4 col-md-12 mb-4 mb-lg-0">

      <div class="card">
        <div class="card-header text-center pt-4">
          <p class="text-uppercase">
            <strong>Basic</strong>
          </p>

          <h3 class="mb-4">
            <strong>$ 129</strong>
            <small class="text-muted" style="font-size: 16px">/year</small>
          </h3>

          <button type="button" class="btn btn-secondary btn-rounded w-100 mb-3">
            Buy
          </button>

        </div>
        <div class="card-body">

          <ol class="list-unstyled mb-0">
            <li class="mb-3">
              <i class="fas fa-check text-success me-3"></i>Unlimited
              updates
            </li>
            <li class="mb-3">
              <i class="fas fa-check text-success me-3"></i>Git repository
            </li>
            <li class="mb-3">
              <i class="fas fa-check text-success me-3"></i>npm
              installation
            </li>
          </ol>

        </div>
      </div>

    </div>

    <div class="col-lg-4 col-md-6 mb-4 mb-lg-0">

      <div class="card">
        <div class="card-header text-center pt-4">
          <p class="text-uppercase">
            <strong>Advanced</strong>
          </p>

          <h3 class="mb-4">
            <strong>$ 299</strong>
            <small class="text-muted" style="font-size: 16px"
                   >/year</small
              >
          </h3>

          <button type="button" class="btn btn-primary btn-rounded w-100 mb-3">
            Buy
          </button>
        </div>
        <div class="card-body">
          <ol class="list-unstyled mb-0">
            <li class="mb-3">
              <i class="fas fa-check text-success me-3"></i>Unlimited
              updates
            </li>
            <li class="mb-3">
              <i class="fas fa-check text-success me-3"></i>Git repository
            </li>
            <li class="mb-3">
              <i class="fas fa-check text-success me-3"></i>npm
              installation
            </li>
            <li class="mb-3">
              <i class="fas fa-check text-success me-3"></i>Code examples
            </li>
            <li class="mb-3">
              <i class="fas fa-check text-success me-3"></i>Premium
              snippets
            </li>
          </ol>
        </div>
      </div>

    </div>

    <div class="col-lg-4 col-md-6 mb-4 mb-lg-0">

      <div class="card">
        <div class="card-header text-center pt-4">
          <p class="text-uppercase">
            <strong>Enterprise</strong>
          </p>
          <h3 class="mb-4">
            <strong>$ 499</strong>
            <small class="text-muted" style="font-size: 16px"
                   >/year</small
              >
          </h3>

          <button
                  type="button"
                  class="btn btn-secondary btn-rounded w-100 mb-3"
                  >
            Buy
          </button>
        </div>
        <div class="card-body">
          <ol class="list-unstyled mb-0">
            <li class="mb-3">
              <i class="fas fa-check text-success me-3"></i>Unlimited
              updates
            </li>
            <li class="mb-3">
              <i class="fas fa-check text-success me-3"></i>Git repository
            </li>
            <li class="mb-3">
              <i class="fas fa-check text-success me-3"></i>npm
              installation
            </li>
            <li class="mb-3">
              <i class="fas fa-check text-success me-3"></i>Code examples
            </li>
            <li class="mb-3">
              <i class="fas fa-check text-success me-3"></i>Premium
              snippets
            </li>
            <li class="mb-3">
              <i class="fas fa-check text-success me-3"></i>Premium
              support
            </li>
            <li class="mb-3">
              <i class="fas fa-check text-success me-3"></i>Drag&amp;Drop
              builder
            </li>
          </ol>
        </div>
      </div>

    </div>
  </div>

</section>
<!-- Section: Pricing -->

Demo i kod źródłowy do tej lekcji

Zadaj pytanie

Wróć Dalej

O autorze

Michal Szymanski

@ascensus_mdb

Współzałożyciel MDBootstrap / Umieszczony na liście Forbes „30 under 30” / Entuzjasta oprogramowania open-source / Tancerz, miłośnik wiedzy i książek.

Autor setek artykułów na temat programowania, biznesu, marketingu i efektywności. W przeszłości pracował jako edukator z młodzieżą z problemami w sierocińcach i zakładach karnych.

Podstawy

Bootstrap

Karty

Podstawowy przykład

Card title

Karta z obrazem

Card title

Obraz z efektem falowania

Card title

Nagłówek i stopka

Special title treatment

Krok 1 - dodaj sekcję z cenami przy użyciu siatki

Krok 2 - dodaj karty z cenami

Pricing

Krok 3 - dodaj ceny, przyciski oraz listy

$ 129 /year

Michal Szymanski

Wypróbuj więcej narzędzi dla Bootstrapa