Darmowy kurs projektowania UI/UX
Dowiedz się, jak tworzyć wyjątkowe projekty, czytając mój nowy samouczek.
Rozpocznij naukę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>
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>
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
O autorze
Michal Szymanski
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.
