Darmowy kurs projektowania UI/UX

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

Ikony i listy

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

Korzystaliśmy z ikon w poprzednich lekcjach, ale tym razem przyjrzymy się im bliżej.

Jak pamiętasz, masz do dyspozycji setki ikon (dokładnie 1541 ikon). Możesz znaleźć je wszystkie w naszej wyszukiwarce ikon.

Składnia ikon

Oto jak wygląda typowa ikona:

A oto jej kod:

<i class="fas fa-gem"></i>

Składnia jest tutaj prosta:

Klasa fa-gem określa, jaką ikonę chcemy wyświetlić. Możesz zobaczyć wszystkie dostępne ikony i ich odpowiadające klasy w wyszukiwarce ikon.

Klasa fas oznacza dwie rzeczy: fa = "font awesome" (to nazwa tego zestawu ikon) i s oznacza "solid" (pełne).

Możesz zmienić s na r, co oznacza "regular", i w ten sposób możesz uzyskać wersję zarysowaną ikony gem:

A oto jej kod:

<i class="far fa-gem"></i>

Uwaga: Ta zasada nie działa dla wszystkich ikon, ale działa dla wielu z nich. Zawsze możesz to sprawdzić w wyszukiwarce ikon.

Rozmiar

Zwróć uwagę, że wszystkie ikony są wektorowe. Oznacza to, że można je dowolnie powiększać, a nigdy nie stracą jakości.

Aby zwiększyć rozmiar ikon w stosunku do ich kontenera, użyj fa-xs, fa-sm, fa-lg (33% zwiększenia), lub użyj konkretnych rozmiarów (aby skalować od 1x do 10x) fa-2x, fa-3x, fa-4x, fa-5x, fa-6x, fa-7x, fa-8x, fa-9x, fa-10x.

<i class="fas fa-gem fa-xs"></i>
<i class="fas fa-gem fa-sm"></i>
<i class="fas fa-gem fa-lg"></i>
<i class="fas fa-gem fa-2x"></i>
<i class="fas fa-gem fa-3x"></i>
<i class="fas fa-gem fa-4x"></i>
<i class="fas fa-gem fa-5x"></i>
<i class="fas fa-gem fa-6x"></i>
<i class="fas fa-gem fa-7x"></i>
<i class="fas fa-gem fa-8x"></i>
<i class="fas fa-gem fa-9x"></i>
<i class="fas fa-gem fa-10x"></i>

Kolor

Możesz zmieniać kolor ikon w ten sam sposób, w jaki zmieniasz kolor tekstu, czyli używając klasy text- + color.

<i class="fas fa-gem fa-3x text-primary me-2"></i>
<i class="fas fa-gem fa-3x text-secondary me-2"></i>
<i class="fas fa-gem fa-3x text-success me-2"></i>
<i class="fas fa-gem fa-3x text-danger me-2"></i>
<i class="fas fa-gem fa-3x text-warning me-2"></i>
<i class="fas fa-gem fa-3x text-info me-2"></i>
<i class="fas fa-gem fa-3x text-dark me-2"></i>

Uwaga: Wszystkie dostępne kolory możesz zobaczyć na stronie dokumentacji kolorów.

Listy

Z HTML-a znasz 2 podstawowe typy list:

Lista uporządkowana

Lorem
Ipsum
Dolor

<ol>
  <li>Lorem</li>
  <li>Ipsum</li>
  <li>Dolor</li>
</ol>

I lista nieuporządkowana

Lorem
Ipsum
Dolor

<ul>
  <li>Lorem</li>
  <li>Ipsum</li>
  <li>Dolor</li>
</ul>

Sprawa jest taka, że kropki i numery mogą być użyteczne, ale czasem mogą wydawać sięm nudne i monotonne.

Co powiesz na wykorzystanie naszej nowej wiedzy na temat ikon do zastąpienia domyślnych list bardziej efektownymi listami z kolorowymi ikonami?

Jednak na początek musimy usunąć domyślne kropki z listy. Możemy to zrobić, dodając klasę list-unstyled do listy.

Lorem
Ipsum
Dolor

<ul class="list-unstyled">
  <li>Lorem</li>
  <li>Ipsum</li>
  <li>Dolor</li>
</ul>

Teraz możemy połączyć to z ikonami i tworzyć kompozycje takie jak:

What is the latest version?
What are the changes in the latest version compared to the previous one?
Is the latest version stable already?

<ul class="list-unstyled">
  <li class="mb-1"><i class="fas fa-question-circle me-2 text-warning"></i>What is the latest version?</li>
  <li class="mb-1"><i class="fas fa-question-circle me-2 text-warning"></i>What are the changes in the latest
    version compared to the previous one?</li>
  <li class="mb-1"><i class="fas fa-question-circle me-2 text-warning"></i>Is the latest version stable already?
  </li>
</ul>

Now it is even easier, lighter and better
Improved documentation
Improved modularity

<ul class="list-unstyled">
  <li class="mb-1"><i class="fas fa-long-arrow-alt-right me-2 text-info"></i>Now it is even easier, lighter and better</li>
  <li class="mb-1"><i class="fas fa-long-arrow-alt-right me-2 text-info"></i>Improved documentation</li>
  <li class="mb-1"><i class="fas fa-long-arrow-alt-right me-2 text-info"></i>Improved modularity</li>
</ul>

Hundreds of additional quality components
Much better design
Integration with TypeScript

<ul class="list-unstyled">
  <li class="mb-1"><i class="fas fa-check-circle me-2 text-success"></i>Hundreds of additional quality components</li>
  <li class="mb-1"><i class="fas fa-check-circle me-2 text-success"></i>Much better design</li>
  <li class="mb-1"><i class="fas fa-check-circle me-2 text-success"></i>Integration with TypeScript</li>
</ul>

Uzupełnij sekcję "Details"

Teraz wykorzystajmy nową wiedzę zdobytą z tej lekcji i uzupełnijmy sekcję "Details" cennymi informacjami wspieranymi niestandardową listą z kolorowymi ikonami.

Dodaj ten kod do drugiej kolumny w sekcji "Details" (oczywiście możesz dostosować zawartość według swoich preferencji):

<div class="col-lg-5">

  <h3 class="fw-bold mb-4">Details</h3>

  <p>This beginner-friendly, example-based course will guide you through the essential knowledge of MDB
    ecosystem.</p>

  <p class="mb-2"><strong>What will you learn:</strong></p>

  <ul class="list-unstyled">
    <li><i class="fas fa-check text-success me-2"></i>Bootstrap</li>
    <li><i class="fas fa-check text-success me-2"></i>MDBootstrap</li>
    <li><i class="fas fa-check text-success me-2"></i>UI & UX design</li>
    <li><i class="fas fa-check text-success me-2"></i>Responsive web design</li>
  </ul>

  <a class="btn btn-link btn-rounded" href="#" role="button" data-mdb-ripple-color="primary">Learn more</a>

</div>

Po zapisaniu pliku i odświeżeniu przeglądarki powinieneś zobaczyć treść podobną do tej:

Details

This beginner-friendly, example-based course will guide you through the essential knowledge of MDB ecosystem.

What will you learn:

Bootstrap
MDBootstrap
UI & UX design
Responsive web design

Learn more

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