Darmowy kurs projektowania UI/UX
Dowiedz się, jak tworzyć wyjątkowe projekty, czytając mój nowy samouczek.
Rozpocznij naukęOdznaki (Badges)
Sprawdź angielską wersje tej lekcji w naszym rozszerzonym tutorialu Bootstrap.
Odznaki to małe komponenty przydatne do oznaczania i dostarczania dodatkowych informacji. Będziemy ich używać, aby ukończyć naszą sekcję Contact.
Podstawowy przykład
Użyj klasy .badge w połączeniu z klasą koloru (na przykład badge-primary) , aby dostarczyć odwiedzającym wyróżnione, nowe lub nieprzeczytane elementy, dodając je do linków, nawigacji tekstowych i innych elementów.
<h2>Example heading <span class="badge badge-primary">New</span></h2>
Example heading New
Rozmiary
Odznaki skalują się, aby dopasować się do rozmiaru bezpośredniego elementu nadrzędnego, używając względnych rozmiarów czcionki i jednostek em.
<h1>Example heading <span class="badge badge-primary">New</span></h1>
<h2>Example heading <span class="badge badge-primary">New</span></h2>
<h3>Example heading <span class="badge badge-primary">New</span></h3>
<h4>Example heading <span class="badge badge-primary">New</span></h4>
<h5>Example heading <span class="badge badge-primary">New</span></h5>
<h6>Example heading <span class="badge badge-primary">New</span></h6>
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Kolory
Użyj naszych klas kolorów do odznak, aby szybko zmienić wygląd odznaki.
<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-dark">Dark</span>
Pills
Użyj klasy narzędzia .rounded-pill, aby sprawić, że odznaki będą bardziej zaokrąglone z większym promieniem zaokrąglenia brzegów(border-radius).
<span class="badge rounded-pill badge-primary">Primary</span>
<span class="badge rounded-pill badge-secondary">Secondary</span>
<span class="badge rounded-pill badge-success">Success</span>
<span class="badge rounded-pill badge-danger">Danger</span>
<span class="badge rounded-pill badge-warning">Warning</span>
<span class="badge rounded-pill badge-info">Info</span>
<span class="badge rounded-pill badge-light">Light</span>
<span class="badge rounded-pill badge-dark">Dark</span>
Z ikoną wewnątrz
Możesz umieścić ikonę wewnątrz odznaki. Przeczytaj dokumentację ikon, aby zobaczyć wszystkie dostępne ikony.
<div class="badge badge-primary p-3 rounded-4">
<i class="fas fa-chart-pie"></i>
</div>
Krok 1 - dodaj tekst do odznaki
W naszym projekcie będziemy używać odznaki z ikoną wewnątrz. Umieść ją w kontenerze flexbox i dodaj do niej tekst.
<div class="d-flex align-items-start">
<div class="p-3 badge-primary rounded-4">
<i class="fas fa-headset fa-lg fa-fw"></i>
</div>
<div class="ms-4">
<p class="fw-bold mb-1">Technical support</p>
<p class="text-muted mb-0">support@example.com</p>
<p class="text-muted mb-0">+1 234-567-89</p>
</div>
</div>
Technical support
support@example.com
+1 234-567-89
Dzięki flexboxowi możemy zdefiniować, w jaki sposób odznaka powinna być wyrównana w stosunku do tekstu.
Klasa align-items-start powoduje wyrównanie z górą. Jeśli jednak zmienimy ją na klasę align-items-center lub align-items-end, będziemy mogli zmieniać wyrównanie.
<!-- Top-aligned -->
<div class="d-flex align-items-start mb-5">
<div class="p-3 badge-primary rounded-4">
<i class="fas fa-headset fa-lg fa-fw"></i>
</div>
<div class="ms-4">
<p class="fw-bold mb-1">Technical support</p>
<p class="text-muted mb-0">support@example.com</p>
<p class="text-muted mb-0">+1 234-567-89</p>
</div>
</div>
<!-- Center-aligned -->
<div class="d-flex align-items-center mb-5">
<div class="p-3 badge-primary rounded-4">
<i class="fas fa-headset fa-lg fa-fw"></i>
</div>
<div class="ms-4">
<p class="fw-bold mb-1">Technical support</p>
<p class="text-muted mb-0">support@example.com</p>
<p class="text-muted mb-0">+1 234-567-89</p>
</div>
</div>
<!-- Bottom-aligned -->
<div class="d-flex align-items-end mb-5">
<div class="p-3 badge-primary rounded-4">
<i class="fas fa-headset fa-lg fa-fw"></i>
</div>
<div class="ms-4">
<p class="fw-bold mb-1">Technical support</p>
<p class="text-muted mb-0">support@example.com</p>
<p class="text-muted mb-0">+1 234-567-89</p>
</div>
</div>
Technical support
support@example.com
+1 234-567-89
Technical support
support@example.com
+1 234-567-89
Technical support
support@example.com
+1 234-567-89
Dodatkowo używamy klas text-muted, aby nadać pomocniczemu tekstowi szary kolor oraz klasy fa-fw (fixed width), aby wszystkie ikony w odznakach miały tę samą szerokość (domyślnie ikony mogą być różne, co sprawiałoby, że nasze odznaki byłyby nierówne).
Krok 2 - stwórz 4 odznaki w obrębie siatki
Stwórzmy 4 odznaki dla naszego formularza kontaktowego i umieśćmy je w siatce, dwie kolumny w rzędzie.
Zwróć uwagę, że nie musisz dodawać 2 elementów <div class="row">. Jeden wystarczy, a jeśli dodasz 4 kolumny wewnątrz, każda o szerokości 6 jednostek siatki, to automatycznie będą układać się pod sobą, jeśli przekroczą 12 jednostek siatki. Tutaj mamy łącznie 24 jednostki (4 kolumny po 6 jednostek szerokości każda), więc pięknie podzielą się na 2 rzędy.
<div class="row gx-lg-5">
<div class="col-md-6 mb-4 mb-md-5">
<div class="d-flex align-items-start">
<div class="p-3 badge-primary rounded-4">
<i class="fas fa-headset fa-lg fa-fw"></i>
</div>
<div class="ms-4">
<p class="fw-bold mb-1">Technical support</p>
<p class="text-muted mb-0">support@example.com</p>
<p class="text-muted mb-0">+1 234-567-89</p>
</div>
</div>
</div>
<div class="col-md-6 mb-4 mb-md-5">
<div class="d-flex align-items-start">
<div class="p-3 badge-primary rounded-4">
<i class="fas fa-dollar-sign fa-lg fa-fw"></i>
</div>
<div class="ms-4">
<p class="fw-bold mb-1">Sales questions</p>
<p class="text-muted mb-0">sales@example.com</p>
<p class="text-muted mb-0">+1 234-567-88</p>
</div>
</div>
</div>
<div class="col-md-6 mb-4 mb-md-5">
<div class="d-flex align-items-start">
<div class="p-3 badge-primary rounded-4">
<i class="fas fa-newspaper fa-lg fa-fw"></i>
</div>
<div class="ms-4">
<p class="fw-bold mb-1">Press</p>
<p class="text-muted mb-0">press@example.com</p>
<p class="text-muted mb-0">+1 234-567-87</p>
</div>
</div>
</div>
<div class="col-md-6 mb-4 mb-md-5">
<div class="d-flex align-items-start">
<div class="p-3 badge-primary rounded-4">
<i class="fas fa-bug fa-lg fa-fw"></i>
</div>
<div class="ms-4">
<p class="fw-bold mb-1">Bug report</p>
<p class="text-muted mb-0">bugs@example.com</p>
<p class="text-muted mb-0">+1 234-567-86</p>
</div>
</div>
</div>
</div>
Technical support
support@example.com
+1 234-567-89
Sales questions
sales@example.com
+1 234-567-88
Press
press@example.com
+1 234-567-87
Bug report
bugs@example.com
+1 234-567-86
Krok 3 - dodaj odznaki do sekcji Kontakt
Teraz dodajmy nasze odznaki do second column w sekcji Contact.
<!-- Section: Contact -->
<section class="mb-5 mb-lg-10">
<h3 class="fw-bold text-center mb-5">Contact us</h3>
<div class="row gx-xl-5">
<div class="col-lg-5 mb-4 mb-lg-0">
<form>
<!-- Name input -->
<div class="form-outline mb-4">
<input type="text" id="form4Example1" class="form-control" />
<label class="form-label" for="form4Example1">Name</label>
</div>
<!-- Email input -->
<div class="form-outline mb-4">
<input type="email" id="form4Example2" class="form-control" />
<label class="form-label" for="form4Example2">Email address</label>
</div>
<!-- Message input -->
<div class="form-outline mb-4">
<textarea class="form-control" id="form4Example3" rows="4"></textarea>
<label class="form-label" for="form4Example3">Message</label>
</div>
<!-- Checkbox -->
<div class="form-check d-flex justify-content-center mb-4">
<input class="form-check-input me-2" type="checkbox" value="" id="form4Example4" checked />
<label class="form-check-label" for="form4Example4">
Send me a copy of this message
</label>
</div>
<!-- Submit button -->
<button type="submit" class="btn btn-primary btn-block mb-4">Send</button>
</form>
</div>
<div class="col-lg-7 mb-4 mb-lg-0">
<div class="row gx-lg-5">
<div class="col-md-6 mb-4 mb-md-5">
<div class="d-flex align-items-start">
<div class="p-3 badge-primary rounded-4">
<i class="fas fa-headset fa-lg fa-fw"></i>
</div>
<div class="ms-4">
<p class="fw-bold mb-1">Technical support</p>
<p class="text-muted mb-0">support@example.com</p>
<p class="text-muted mb-0">+1 234-567-89</p>
</div>
</div>
</div>
<div class="col-md-6 mb-4 mb-md-5">
<div class="d-flex align-items-start">
<div class="p-3 badge-primary rounded-4">
<i class="fas fa-dollar-sign fa-lg fa-fw"></i>
</div>
<div class="ms-4">
<p class="fw-bold mb-1">Sales questions</p>
<p class="text-muted mb-0">sales@example.com</p>
<p class="text-muted mb-0">+1 234-567-88</p>
</div>
</div>
</div>
<div class="col-md-6 mb-4 mb-md-5">
<div class="d-flex align-items-start">
<div class="p-3 badge-primary rounded-4">
<i class="fas fa-newspaper fa-lg fa-fw"></i>
</div>
<div class="ms-4">
<p class="fw-bold mb-1">Press</p>
<p class="text-muted mb-0">press@example.com</p>
<p class="text-muted mb-0">+1 234-567-87</p>
</div>
</div>
</div>
<div class="col-md-6 mb-4 mb-md-5">
<div class="d-flex align-items-start">
<div class="p-3 badge-primary rounded-4">
<i class="fas fa-bug fa-lg fa-fw"></i>
</div>
<div class="ms-4">
<p class="fw-bold mb-1">Bug report</p>
<p class="text-muted mb-0">bugs@example.com</p>
<p class="text-muted mb-0">+1 234-567-86</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Section: Contact -->
A oto, jak to powinno wyglądać na koniec:
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.
