22 czerwca 2020

Kurs Bootstrap 5 – od podstaw

Kategoria: Programowanie
Tagi: dla profesjonalistów,
Autor: Paweł Mansfeld

Kurs Bootstrap 5 – od podstaw

W tym artykule nauczę na prostym przykładzie jak tworzyć ultra-nowoczesne strony internetowe wykorzystując najnowszą wersję Bootstrapa. Korzystanie z najnowszych wersji (języków, technologii, usług, systemów) ma zazwyczaj same zalety.

Aby kurs był przydatny dla początkujących, wykorzystam we wszystkich przypadkach najprostsze rozwiązania. Nie będziemy automatyzować pracy, komplikować ale też nie będziemy pomijać żadnego elementu.

Ten artykuł to tylko kurs. O tym co to jest Bootstrap i dlaczego warto go używać napisałem w artykule: Co to jest Bootstrap – czy warto używać. W dużym skrócie:

  • przyspiesza tworzenie atrakcyjnych layoutów stron internetowych,
  • automatycznie zapewnia działanie mechanizmu responsive web design,
  • rozwiązuje problemy z krzyżową kompatybilnością przeglądarek.

Tworząc UI strony internetowej mamy do napisania kod HTML i CSS. Bootstrap dostarcza kod CSS, który uatrakcyjnia wygląd elementów najczęściej za pomocą gotowych klas. Oczywiście, nic nie stoi na przeszkodzie aby tak stworzony projekt dostosować potem do swoich potrzeb dodając własne reguły CSS.

Co nowego w Bootstrap 5?

Wersja alfa Bootstrap 5 jest już oficjalnie wydany i można go pobrać tutaj:

https://v5.getbootstrap.com/docs/5.0/getting-started/download/

Link do czytelnej dokumentacji jest poniżej:

https://v5.getbootstrap.com/docs/5.0/getting-started/introduction/

W Bootstrapie 5 jest wiele pozytywnych zmian, które przede wszystkim polepszają wydajność strony internetowej. To powoduje szereg zalet zarówno dla programistów jak i użytkowników końcowych.

  • rezygnacja z jQuery
  • wprowadzenie dedykowanych ikon SVG
  • rezygnacja ze wsparcia Internet Explorer 10
  • zmiana środowiska do testów (QUnit na Jasmine)
  • Oczywiste (patrz punk 1.), liczne zmiany w kodzie JavaScript,
  • nieznaczne zmiany w CSS,
  • odświeżenie kontenerów i wprowadzenie do nich “responsywności”.

W ramach ciekawostki można wspomnieć, że oficjalna strona Bootstrapa zmieniła CMS z Jekyll na Hugo. Są to systemy CMS do stron statycznych, czyli takich które nie używają standardowej bazy danych SQL w swoim funkcjonowaniu.

Z tego wszystkiego dość rewolucyjnym posunięciem jest usunięcie zależności jQuery. Choć trzeba przyznać, że jQuery mocno ułatwia tworzenie interfejsów, jego dodawanie do strony tylko po to aby obsłużyć Bootstrapowe harmonijki lub przycisk rozwijania menu mobilnego było marnotrastwem zasobów. Nawet kompilacja jQuery Slim to ok. 80KB kodu – szkoda dodawać cały plik tylko po to, by obsłużyć harmonijkę, pasek postępu lub wspomniane menu. Osobiście uważam, że jest to dobre posunięcie twórców nowego Bootstrapa. Jeżeli chcemy wykorzystywać jQuery nadal można go dodać do strony i używać jak dotychczas.

Dla osób, które są mocno przyzwyczajone do korzystania z jQuery a chciałyby spróbować jak to jest kodować w Vanilla JS stworzyłem specjalny wpis: metody jQuery w czystym JavaSript.

Obsługiwane przeglądarki

Bootstrap wspiera najnowsze stabilne wersje przeglądarek popularnych dostawców. Takie przeglądarki jak Chrome, Firrefox, Edge, Safari są z nim kompatybilne. W przypadku innych przeglądarek bazujących na silniku WebKit, Blink, Gecko nie powinny występować istotne problemy.

Responsywna siatka Bootstrap 5

Siatka Bootstrap 5 korzysta z tzw. punktów granicznych (ang. breakpoint). Za pomocą breakpointów dostosowujemy układ strony do aktualnego pola roboczego (ang. viewport) przeglądarki.

Uwaga: O aktualnym trybie nie decyduje faktyczna ilość pikseli na ekranie a pojęcie piksela CSS, które jest zależne od ustawień systemowych i przykładowo przybliżenia (zoomu), który można włączyć w przeglądarkach.

W Bootstrapie rozróżniamy aktualnie 6 szerokości:

  • X-Small: od 0 do 576px – (brak wrostka)
  • Small: ≥576px – sm
  • Medium: ≥768px – md
  • Large: ≥992px – lg
  • Extra large: ≥1200px – xl
  • Extra extra large: ≥1400px – xxl

Te klasy powodują, że dla konkretnych elementów HTML zastosowywane są konkretne zapytania medialne. Działanie w praktyce będą ilustrowały przykłady w tym kursie.

1. Projektowanie układu strony Bootstrap 5

To będzie praktyczny kurs korzystania z dobrodziejstw jakie oferuje Bootstrap 5. Dla celów dydaktycznych stwórzmy prostą stronę na temat, który nas bardzo interesuje. Dla mnie będzie to tytułowa biblioteka. Aby było ciekawiej, nadam jej charakterystycznej dla mnie stylistyki. Aby rozpocząć tworzenie stron najpierw musimy poznać różne techniki rozmieszczania i organizowania elementów.

Wykorzystywanie kawałków kodu, których nie rozumiemy co prawda pozwoli nam szybko stworzyć stronę internetową ale będziemy mieć trudności z dostosowaniem jej do naszych potrzeb. Aby tego uniknąć “przelecimy” przez najważniejsze mechanizmy Bootstrapa a szczególnie pozycjonowanie elementów względem siebie. Proste przykłady można rozwinąć do pełnoprawnej strony internetowej.

1. Instalacja

Na początek musimy mieć fundament jak na każdej poprawnej stronie internetowej zgodnej z HTML5:

<!doctype html>
<html lang="pl">
   <head>
      <meta charset="utf-8">
      <title>Kurs Bootstrap</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
   </head>
   <body>
      <p>Treść strony...</p>
   </body>
</html>

Wystarczy teraz do sekcji head dodać plik CSS z Bootstrapem:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css">

Kompontent JS jest opcjonalny. Skoro jest to kurs nowej wersji sprawdźmy jak wypada całość w praktyce. Przed tagiem zamykającym </body> dołączamy plik ze skryptem.

<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" ></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"></script>

JavaScript zapewnia działanie karuzel, harmonijek, menu mobilnego i tego typu rozwiązań które są opcjonalne i wzbogacają doświadczenia.

Pełny kod źródłowy tego przykładu: https://github.com/mansfeld/bootstrap-5-tutorial/blob/master/start.html

Instalację Bootstrapa można automatyzować za pomocą narzędzi npm, yarn, Composer, NuGet itd. Opis tych metod znajduje się tutaj: https://v5.getbootstrap.com/docs/5.0/getting-started/download/

2. Kontenery

Kontenery były także w poprzednich wersjach Bootstrapa. W Bootstrapie 5 wprowadzono kontenery o różnych wielkościach. Sprawdźmy ich funkcjonowanie w praktyce. Od tej pory wszelki kod dodajemy do części <body>:

<div class="container-sm"><h2>container-sm</h2></div>
<div class="container-md"><h2>container-md</h2></div>
<div class="container-lg"><h2>container-lg</h2></div>
<div class="container-xl"><h2>container-xl</h2></div>
<div class="container-xxl"><h2>container-xxl</h2></div>

Oczywiście nadal można korzystać z domyślnego container i container-fluid. Ten drugi zawsze się rozciąga od lewej do prawej krawędzi elementu nadrzędnego.

Demonstracja działania:

Pełny kod źródłowy tego przykładu: https://github.com/mansfeld/bootstrap-5-tutorial/blob/master/container.html

3. Siatka

Za pomocą siatki (ang. grid) rozmieszczamy elementy na stronie internetowej. Za pomocą równych podziałów możemy tworzyć estetycznie wyglądające bloki z dowolną treścią.

W Bootstrapie nie posługujemy się już rozmiarem xs. Wynika to z zastosowania podejścia mobile-first.

Równy podział typu 1/2 lub 1/3 można wykonać za pomocą metody auto-layout. Przykładowo chcąc otrzymać układ 1/3 niezależnie od wielkości widoku kod będzie wyglądał tak:

<div class="row">
   <div class="col">
      1 z 3
   </div>
   <div class="col">
      2 z 3
   </div>
   <div class="col">
      3 z 3
   </div>
</div>

Chcąc wymusić szerokość jednego z elementów, wystarczy dodać liczbę odpowiadającą szeroości, np. col-6:

<div class="row">
   <div class="col">
      1 z 3
   </div>
   <div class="col-6">
      2 z 3
   </div>
   <div class="col">
      3 z 3
   </div>
</div>

Jeżeli chcemy aby dany podział obowiązywał tylko na konkretnej szerokości pola roboczego, wystarczy dodać odpowiadający infiks, przykładowo col-sm. Wówczas podział będzie obowiązywał w szerokości odpowiadającej punktowi Small:

<div class="row">
   <div class="col-sm">
      1 z 3
   </div>
   <div class="col-sm-6">
      2 z 3
   </div>
   <div class="col-sm">
      3 z 3
   </div>
</div>

Najlepszą metodą pozwalającą w pełni zrozumieć siatkę są własne eksperymenty.

Link do kodu: https://github.com/mansfeld/bootstrap-5-tutorial/blob/master/grid.html

W ramach tworzonych siatek możemy dodawać dodatkowe klasy do wyrównywania, tworzenia odstępów oraz zmiany kolejności. tutaj odeślę do dokumentacji, która porusza szczegółowe przypadki:

https://v5.getbootstrap.com/docs/5.0/layout/columns/

Zmiana kolejności kolumn

Częstym problemem z tego działu jest zmiana kolejności kolumn w widoku mobilnym (ang. reordering). Internet i serwisy typu StackOverflow czy CodePen są dosłownie zawalony wszelkiego rodzaju rozwiązaniami bazującymi na CSS lub sztuczkach JavaScript. W Bootstrapie 5 bardzo łatwo możemy użyć klasy order. Zobacz jak to działa w praktyce na przykładzie szachownicy, która często sprawia problem w responsywności:

<div class="row">
   <div class="col-md-6 bg-dark">
      <h2>1</h2>
   </div>
   <div class="col-md-6">
      <h2>2</h2>
   </div>
</div>
<div class="row">
   <div class="col-md-6 bg-dark order-md-last">
      <h2>3</h2>
   </div>
   <div class="col-md-6">
      <h2>4</h2>
   </div>
</div>

Efekt:

Kod źródłowy: https://github.com/mansfeld/bootstrap-5-tutorial/blob/master/columns-checkerboard.html

4. Odstępy i marginesy

Pomiędzy kolumnami siatek, można dostosować responsywną przestrzeń. Jak to działa?

Kierunek poziomy

W kierunku poziomym możemy dostosowywać odstęp za pomocą klasy -gx-*.

<div class="container">
   <div class="row gx-5">
      <div class="col">
         <div class="p-3 border">col</div>
      </div>
      <div class="col">
         <div class="p-3 border">col</div>
      </div>
   </div>
</div>
Odstępy pomiędzy kolumnami Bootstrap 5

W takich sytuacjach możemy też użyć dla dowolnego elementu klasy dodającej margines wewnętrzny (ang. padding) w kierunku osi x np. .px-4.

Kierunek pionowy

W kierunku pionowym, czyli osi Y, wystarczy użyć odpowiednio klas: gy-* dla odstępów pomiędzy kolumnami oraz py-* dla dowolnego elementu. Klasy odpowiedzialne za odstępy można kombinować ze sobą. Np:

Odstępy pomiędzy kolumnami i wierszami Bootstrap 5

Ukrywanie elementów

Standardowo, w Bootstrapie mamy też możliwość ukrywania elementów w danym punkcie granicznym lub np. dla wydruków. Służą do tego klasy:

  • d-none – ukrywa element globalnie
  • d-none d-sm-block – ukrywa element tylko dla widoku xs
  • d-sm-none d-md-block 0 ukrywa element tylko dla widoku sm
  • d-block d-sm-none – widoczne tylko dla widoku xs
  • d-none d-lg-block d-xl-none – widoczne tylko dla widoku lg

I tak dalej i tak dalej…

d-print-none – ukrywa coś na wydruku strony. Jest to przydatne w przypadku formularzy i przykładowo ukrywania elementów nawigacyjnych strony.

Więcej przykładów można znaleźć w dokumentacji: https://v5.getbootstrap.com/docs/5.0/utilities/display/

5. Wyrównywanie zawartości za pomocą d-flex

Klasa d-flex z może być przydatna w wielu różnych przypadkach. Począwszy od tak podstawowych elementów jak paski nawigacyjne, stopki czy nagłówki, kończąc na treści i skomplikowanych, kreatywnych layoutach.

Wyrównanie w poziomie

Dodając klasę d-flex, bezpośrednim elementom potomnym nadawana jest właściwość flex. Najlepiej wszystko pokazać na przykładach:

d-flex w praktyce – wyrównanie w poziomie

Kod źródłowy: https://github.com/mansfeld/bootstrap-5-tutorial/blob/master/d-flex.html

Wyrównanie w pionie

Wyrównanie w pionie latami było problemem webmasterów. Istniały przeróżne techniki bazujące czy to na display:table-cell czy sztuczkach typu top:50% w kombinacji z transform: translateY(-50%). Te bolączki jakiś czas temu wyeliminował flexbox a w Bootstrapie można również wykorzystać wygodne klasy:

d-flex w praktyce – wyrównanie w pionie

Kod źródłowy: https://github.com/mansfeld/bootstrap-5-tutorial/blob/master/d-flex-vertical-align.html

Automatyczny margines

Na koniec pokażę jeszcze ja działa ml-auto i mr-auto, które można nadać obiektom wewnątrz d-flex:

Automatyczny margines ml-auto i mr-auto

Kod źródłowy:

<div class="container">
   <div class="d-flex">
      <div class="mr-auto">Flex mr-auto</div>
      <div>Flex</div>
      <div>Flex</div>
   </div>
   <div class="d-flex">
      <div>Flex</div>
      <div>Flex</div>
      <div class="ml-auto">Flex ml-auto</div>
   </div>
</div>

Sprawdź inne szczegółowe przypadki związane z klasami flex-wrap i align-content: https://v5.getbootstrap.com/docs/5.0/utilities/flex/

W celu wyrównania do lewej i prawej można użyć tradycyjnych właściwości:

  • float-left,
  • float-right,
  • float-none

Można użyć różnego opływania dla konkretnych punktów granicznych np. float-sm-left.

Właściwości position też można szybko dodać do obiektu HTML:

  • position-static,
  • position-relative,
  • position-absolute,
  • position-fixed,
  • position-sticky.

2. Projektowanie treści Bootstrap 5

Poniższe elementy są wykorzystywane bezpośrednio w treści. Ich zakodowanie w edytorze CMSa może w łatwy sposób wzbogacić jego funkcjonalność i uatrakcyjnić treść.

W Bootstrapie 5 w nieskrępowany sposób można korzystać z nagłówków różnego stopnia, elementów <pre><code>, list numerowanych i punktorów. Bootstrap posiada też dodatkowe klasy, które usprawnią budowanie atrakcyjnych interfejsów.

2.1. Typografia

Z różnych rozmiarów nagłówków można korzystać w dwojaki sposób. Za pomocą natywnych tagów <h1>, <h2>, <h3> oraz klas h1, h2, h3. Użycie konkretnej techniki zależy od celu i kwestii SEO:

Domyślne stylowanie nagłówków h1, h2, h3, h4, h5, h6
<h1>Nagłówek h1</h1>
<h2>Nagłówek h2</h2>
<h3>Nagłówek h3</h3>

Dam nam wizualnie to samo co:

<p class="h1">Nagłówek 1</p>
<p class="h2">Nagłówek 2</p>
<p class="h3">Nagłówek 3</p>

Wyrównanie do lewej, prawej i środka

Chcąc wykonać wyrównanie tekstu, wykorzystujemy klasy:

  • text-left,
  • text-right,
  • text-center

Sprawdź też pozostałe klasy wykorzystywane w tworzeniu treści takie jak display-*, lead, text-muted w dokumentacji: https://v5.getbootstrap.com/docs/5.0/content/typography/

2.2 Grafika

Wszelkim obrazkom można dodać klasę img-fluid. Zapewnia ona, że konkretna grafika nigdy nie będzie większa od swojego elementu nadrzędnego i będzie skalowana z zachowaniem proporcji za pomocą height:auto.

<img src="obrazek.png" class="img-fluid" alt="obrazek">

Mamy też do dyspozycji img-thumbnail. Do przyspieszenia tworzenia galerii. Dodaje lekkie zaokrąglenie i margines, co można wykorzystać we wszelkiego rodzaju galeriach.

<img src="obrazek.png" class="img-thumbnail" alt="obrazek">

Wyrównanie zdjęć do krawędzi mogą zapewniać klasy, które już poznaliśmy tzn. float-left, float-right. Wyrównanie zdjęcia do środka można osiągnąć za pomocą klas mx-auto d-block lub nadając elementowi nadrzędnemu klasę text-center.

3. Komponenty

Poza fundamentalnymi elementami na stronie, Bootstrap rozwiązuje wiele drobnych problemów, które można napotkać przy tworzeniu stron lub aplikacji internetowych. Za pomocą różnych komponentów możemy tworzyć przyciski, okna pop-up, karty, karuzele, paginację czy paski postępu.

3.1 Nawigacja

Nawigacja to jeden z najbardziej podstawowych elementów każdej konwencjonalnej strony internetowej. Za pomocą kawałka kodu możemy stworzyć responsywny i użyteczny pasek nawigacyjny typu główne menu:

Pasek nawigacyjny Bootstrap 5

Kod źródłowy: https://github.com/mansfeld/bootstrap-5-tutorial/blob/master/navbar.html

3.2 Przyciski

Przyciski mogą znaleźć zastosowanie w formularzach, nawigacji czy treści zasadniczej. W kombinacji z klasą zmieniającą kolor tła lub obramowania, szybko stworzymy skuteczne wezwanie do działania, uatrakcyjnimy popup lub stworzymy przyjemny dla oka formularz.

Przyciski w Bootstrapie

Niezależnie czy używamy elementu input, button czy a, używamy tych samych klas:

<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-info" type="submit">Przycisk</button>
<input class="btn btn-outline-success" type="button" value="Wyślij">
<input class="btn btn-dark" type="submit" value="Wyślij">
<input class="btn btn-light" type="reset" value="Reset">

Przyciski mogą mieć różny kolor, obramowanie lub rozmiar:

Rozmiary przycisków w Bootstrapie
<button type="button" class="btn btn-dark btn-lg">Duży</button>
<button type="button" class="btn btn-dark">Standardowy</button>
<button type="button" class="btn btn-dark btn-sm">Mały</button>

Można je też grupować za pomocą btn-group, co można wykorzystać np. nawigacji:

Grupy przycisków
<div class="btn-group">
   <button type="button" class="btn btn-outline-info">Wstecz</button>
   <button type="button" class="btn btn-success">Dalej</button>
</div>

Ale do paginacji mamy osobną konstrukcję:

Przykład paginacji w Bootstrapie
<nav>
<ul class="pagination">
<li class="page-item"><span class="page-link">Wstecz</span></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item active"><span class="page-link">3</span></li>
<li class="page-item"><a class="page-link" href="#">4</a></li>
<li class="page-item"><a class="page-link" href="#">5</a></li>
<li class="page-item"><a class="page-link" href="#">Dalej</a></li>
</ul>
</nav>

3.3 Karty

Karta to bardzo użyteczne i przyjazne idei responsive web design rozwiązanie. Może reprezontować artykuł na blogu, produkt w liście produktów lub poszczególne wpisy w feedzie.

Zestaw kart w Bootstrap 5

Pojedyncza karta w kodzie wygląda tak:

<div class="card">
<img src="obrazek.jpg" class="card-img-top" alt="…">
<div class="card-body">
<h5 class="card-title">Tytuł karty</h5>
<p class="small">Data: 2020 czerwca 22</p>
<p class="card-text">Tekst…</p>
</div>
</div>

Można je organizować za pomocą standardowej siatki: container, row i col.

Organizowanie kart jest możliwe także na inne sposoby. Dokładnie zostały omówione w przykładach w dokumentacji: https://v5.getbootstrap.com/docs/5.0/components/card/

3.4 Karuzela (pokaz slajdów)

Chęć wykorzystania karuzeli nie wymaga instalowania ciężkich wtyczek. Skoro korzystamy z Bootstrapa warto wykorzystać to co już mamy. Biblioteka ta już w poprzedniej wersji miała natywne rozwiązanie, które można wykorzystać na stronie za pomocą dość prostej konstrukcji. Działa na wszystkich urządzeniach, sprawdź przykład:

Kod źródłowy: https://github.com/mansfeld/bootstrap-5-tutorial/blob/master/carousel-header-slider.html

Jeżeli chcesz sprawdzić wszystkie komponenty jakie Bootstrap ma do zaoferowania, sprawdź je w dokumentacji: https://v5.getbootstrap.com/docs/5.0/components/alerts/

4. Formularze

Mocną stroną Bootstrapa jest obsługa formularzy. Dzięki tej bibliotece można szybko stworzyć estetyczne i skalowalne formularze.

Przykład formularza Bootstrap 5

Kod:

<form class="form-signin">
<h1 class="h3 mb-3 font-weight-normal">Logowanie</h1>
<label for="email" class="sr-only">Adres e-mail</label>
<input type="email" id="email" class="form-control" placeholder="Adres e-mail" required autofocus>
<label for="password" class="sr-only">Hasło</label>
<input type="password" id="password" class="form-control" placeholder="Hasło" required>
<div class="checkbox mb-3">
<label>
<input type="checkbox" value="remember-me"> Zapamiętaj mnie
</label>
</div>
<button class="btn btn-lg btn-dark btn-block" type="submit">Zaloguj</button>
</form>

Czytaj więcej o możliwościach formularzy w Bootstrap 5: https://v5.getbootstrap.com/docs/5.0/forms/overview/

5. Ikony

Ikony to sympatyczna nowość w Bootstrapie. Choć były dostępne trochę wcześniej, łączy się je z wydaniem nowej wersji Bootstrapa. Najbardziej mi się podoba w nich to, że istnieje kilka sposobów ich wykorzystania na stronie internetowej.

Ikony Bootstrap

Są to grafiki SVG, których kod można wkleić w kod strony,

<svg class="bi bi-star-fill" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.283.95l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
</svg>

Możemy też skorzystać z nich w elemencie img:

<img src=”icons/star.svg” alt=”” width=”32″ height=”32″>

oraz w stylach CSS, na przykład:

background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%23333' xmlns='http://www.w3.org/2000/svg'><path....

Katalog ikon Bootstrap: https://icons.getbootstrap.com/

Dodatek 1: Interakcja

Za pomocą Bootstrapa można zmieniać natywne zachowanie podstawowych zdarzeń. Dla treści mamy:

  • user-select-all – pojedyncze kliknięcie na paragraf zaznaczy cały tekst wewnątrz niego.
  • user-select-auto – przywraca domyślne zachowanie zaznaczania,
  • user-select-none – uniemożliwia zaznaczenie treści.

Dla linków mamy zaś:

  • pe-none – unimozliwa na kliknięcie,
  • pe-auto – przywraca naturalne zachowanie.

Dodatek 2: Cieniowanie

Bootstrap umożliwia dodać nieskomplikowane cienie:

Przykłady różnych cieni

Kod źródłowy:

<div class="shadow-none p-3 mb-5 bg-light rounded">Brak cienia</div>
<div class="shadow-sm p-3 mb-5 bg-white rounded">Lekki cień</div>
<div class="shadow p-3 mb-5 bg-white rounded">Średni cień</div>
<div class="shadow-lg p-3 mb-5 bg-white rounded">Mocny cień</div>

Źródła

https://v5.getbootstrap.com/docs/5.0/getting-started/introduction/

Oceń artykuł na temat: Kurs Bootstrap 5 – od podstaw
Średnia : 4.8 , Maksymalnie : 5 , Głosów : 8


 

Odpowiedz lub skomentuj

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *




Komentarze

Krzysztof Grodzki

22 czerwca 2020

Dzięki, może się przydać. Jak z szybkością stron opartych o te rozwiązanie ?

Paweł Mansfeld

22 czerwca 2020

Na pewno o wiele lepiej niż w przypadku zależnych od jQuery poprzednich wersji. Usunięcie tej zależności to naprawdę wielka zmiana. Wszystkie nowe strony domyślnie opieram o Bootstrap 5 kierując się właśnie wydajnością. W tym tygodniu rozpoczynam kolejny projekt i mimo, że mamy do czynienia z alfą, nawet nie rozważam korzystania z poprzednich wersji.

Patrząc na gołe fakty, pełny plik zminimalizowanego Bootstrapa w nowej wersji jest o 15KB mniejszy. Jeżeli wytniemy z niego rzadko wykorzystywane instrukcje być może zejdziemy do 50KB? Jednak nie łudźmy się, że spełnimy wytyczne AMP bo w kodzie niestety często występuje instrukcja !important.

Należy pamiętać, że można stworzyć własną kompilację Bootstrapa bez niektórych komponentów a cały plik JS z zależnym Popperem jest opcjonalna. Jeżeli chcemy używać karuzeli i innych efektów to wtedy bez nich się nie obejdzie.

. Jeśli chodzi o PageSpeed Insights i ostatnio wdrożone wskaźniki WebVitals, można śmiało osiągnąć zielone wyniki o ile nie zapomnimy o podstawowych technikach takich jak lazy-load czy nagłówki expires.

 

Wykryto brak połączenia z Internetem.