kontakt
Software house
>
Tag
>
Bootstrap | Wykorzystanie Bootstrapa w projektowaniu UI/UX
Bootstrap

Bootstrap | Wykorzystanie Bootstrapa w projektowaniu UI/UX

Data wpisu
Tomasz Kozon
Autor
Tomasz Kozon

Bootstrap jest jedną z najpopularniejszych bibliotek css typu open source wspomagających pracę frontendowców. Z wykorzystaniem szeregu predefiniowanych klas i mixinów umożliwia szybką pracę i stylowanie aplikacji.

Bootstrap najbardziej rozpowszechnił się wśród aplikacji Wordpressowych. Jeśli kiedyś zobaczysz dwie podobne do siebie strony www wykorzystujące silnik Wordpress jest duża szansa, że będą wykorzystywać Bootstrap

Zalety i wady Bootstrap

Zaletą Bootstrap jest zdecydowanie jego popularność, oraz dostęp do programistów posiadających doświadczenie w stylizowaniu z jego wykorzystaniem. Coś co jednakże, jest jego zaletą z czasem stało się też wadą. Interfejsy użytkownika tworzona za pomocą Bootstrap są bardzo do siebie podobne. Wraz z upływem czasu powstało dużo zamienników, które są też proste w obsłudze, ale dają element unikalności, czego oczekują użytkownicy. Dodatkowo inne nowoczesne rozwiązania dają też możliwość dostosowania wyglądu i zmiany jego niektórych parametrów. Działanie Bootstrapa jest typowo szablonowe z mniejszą możliwością dostosowywania się do zmian.

Gotowe komponenty w Bootstrap

Bootstrap posiada wbudowane szereg klas, które dodane do znacznika "class" zmieniają wygląd komponentu. Przykładowym wykorzystaniem będzie dodanie klasy badge, która będzie miała efekt jak na poniższym zdjęciu w postaci zaokrąglonego kontenera, w którym można wpisać dowolny tekst.

Zaawansowane użycie Bootstrap

Bootstrap posiada również swój odpowiednik dla ReactJs. Upraszcza on składnie i zamiast korzystać z klasy importujemy interesujące nas gotowe komponenty, np.

import Button from 'react-bootstrap/Button';

Co więcej daje on możliwość zmiany wyglądu komponentów, poprzez nadpisanie określonych klas css. To co trudno jest zrobić bez wykorzystania Reacta to przekazywanie propsów do poszczególnych komponentów. Dodanie stanu takiego jak "show" do komponentu Alert sprawia, że komponent przestaje być statyczny, a zaczyna być dynamiczny i reagować na zachowania użytkowników.

Praca: #bootstrap
0 Aktualnie brak ofert pracy
Wszystkie oferty
Case study: #bootstrap
0 Aktualnie brak case study
Zobacz wszystkie