Odwieczny problem programisty... i nie tylko
Ileż to razy mamy głowę pełną pomysłów a brak nam odpowiednich narzędzi, aby wprowadzić je w życie? Programiści również często są w tej sytuacji. Mają wizję świetnej aplikacji zapowiadającej się na miarę Facebooka, wszystkie funkcjonalności spisane na kartce, architektura przygotowana. Wydaje się, że nic tylko siadać i wdrażać pomysły w życie. Niestety, gdy przychodzi do zaprojektowania interakcji z użytkownikiem oraz związanego z nimi interfejsu użytkownika rodzi się problem. Cała twórczość wizualna programisty na studiach ogranicza się zazwyczaj do kilku godzin na laboratoriach z grafiki komputerowej oraz do rysowania diagramów encji. Owszem, zdarzają się wyjątki, ale ciężko spotkać dobrego backendowca i śledzącego zmieniające się z zawrotną prędkością trendy UI/UX frontendowca w jednym.Jednak nie tylko programiści mogą mieć problem z UI. Stworzenie ładnego, funkcjonalnego i reagującego(!) na akcje użytkownika interfejsu może być skomplikowane i dość uciążliwe dla początkujących (magiczne sztuczki i niezrozumiałe zachowania CSS) oraz czasochłonne dla profesjonalistów. Sam wiem, że stworzenie nawet prostej strony w standardowych technologiach (HTML,CSS,JavaScript) od podstaw zabiera sporo czasu.
Jest problem? To trzeba go rozwiązać :)
Na pierwszy ogień idą gotowe szablony. Są dziesiątki stron oferujących takie usługi. Jednak ładniejsze szablony są zazwyczaj płatne. Po drugie trendy w internecie zmieniają się bardzo szybko i musielibyśmy dość często wyrzucać do kosza stare i zastępować nowymi. Poza tym jakakolwiek modyfikacja funkcjonalności bez znajomości frontendowych technologii mogłaby być frustrująca dla backendowca.Bootstrap, czyli jak prosto i szybko mieć coś ładnego
Z pomocą przychodzi framework Bootstrap. Zakłada on podstawową znajomość HTMLa oraz CSS. Oferuje szeroki wybór gotowych komponentów, które pozwalają na realizację zarówno podstawowych jak i zaawansowanych funkcjonalności. UI powstaje w nim bardzo szybko - wystarczy skopiować kawałek kodu z przykładu z oficjalnej strony, pozamieniać treść i mamy już działający komponent. Dzięki systemowi kolumn nie musimy martwić się o "rozejechanie elementów na stronie" czy inne nieciekawe efekty obecne przy pracy z CSS.Zaczynamy
Wchodzimy na stronę:http://getbootstrap.com/getting-started/#download
i wybieramy Download Bootstrap. Kopiujemy pliki do folderu naszej web-apki i tworzymy plik tekstowy style.css oraz index.html z poniższą zawartością (zmieniamy lokalizacje plików na odpowiednie):
<!DOCTYPE html> <html lang="pl"> <head> <meta charset="utf-8" /> <title>Nasza strona</title> <link rel="stylesheet" href="style.css" /> <link rel="stylesheet" href="bootstrap/3.3.4 /css/bootstrap.css"> <link rel="stylesheet" href="bootstrap/3.3.4/css/bootstrap-theme.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> </head> <body> </body> </html>Układ elementów i responsywność Bootstrap oferuje system podziału zawartości strony na 12 równych kolumn, które charakteryzują się pełną responsywnością. Naszym zadaniem jest jedynie określenie jak dużo kolumn będzie zajmował dany element strony w różnych rozdzielczościach.
Wyróżniamy 4 różne rozdzielczości urządzeń: extra-small (xs), small (sm), medium (md) i large (lg).
Aby zdefiniować jeden rząd kolumn na stronie, piszemy np:
<div class="row"> <div class="col-md-8">.col-md-8</div> <div class="col-md-4">.col-md-4</div> </div>
Jak widać, nie musimy definiować szerokości dla wszystkich czterech powyższych rozdzielczości urządzeń. Wystarczy, że zdefiniujemy szerokość dla jednej. Inny przykład:
<div class="row"> <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> </div>
Tutaj widzimy, że pierwszy div dla urządzeń o rozdzielczości medium będzie zajmował 2/3 szerokości strony, a drugi 1/3. Dla rozdzielczości extra-small pierwszy będzie zajmował całą szerokość strony. Wynika z tego więc, że drugi zostanie wyświetlony pod nim.
Możemy teraz powyższy kod umieścić w divie z klasą container, dzięki czemu treść naszej strony będzie wyśrodkowana i nie będzie zajmowała 100% szerokości strony. Jeśli chcemy jednak zawartość na całej szerokośći okna przeglądarki używamy klas
y container-fluid.Więcej nt kolumn można znaleźć tutaj:
http://getbootstrap.com/css/#grid
Komponenty
Przetestujemy teraz kilka komponentów Bootstrapa. Stworzymy przykładową stronę korzystając tylko z nich.Zaczynamy od nagłówka. Korzystając z gotowego kodu, wstawiamy go na naszą stronę i dopasowujemy wg potrzeb. Posiada on tytuł strony oraz linki, które mogą być rozwijane. Przykładowy kod tutaj:
Następnie wykorzystamy prosty slider, któremu w Bootstrapie odpowiada komponent carousel. Przykładowy kod poniżej:
Następnie wstawiamy trzy kolumny korzystając z siatki Bootstrapa oraz wykorzystując buttony:
Możemy również dodać panele i paginację:
Ostatecznie cała strona wraz z kodem wygląda tak:
Bootstrap jes zbudowany na preprocesorze Less, który umożliwia tworzenie zmiennych wewnątrz definicji CSS. Przydatne jest to np. w definiowaniu palety kolorów, czy innych stałych na stronie parametrów. Bootstrap wspiera również preprocesor Sass. Aby skompilować i wygenerować swój kod css Bootstrapa przechodzimy na stronę getbootstrap.com/customize i wypełniamy formularz zgodnie z własnymi preferencjami.Jak widać dzięki Bootstrapowi można łatwo i szybko tworzyć przyjemne dla oka i responsywne aplikacje www. Jedyną wadą mogą być ograniczenia i powtarzalność, ale przy odrobinie wysiłku włożonego w modyfikację kodu css, można spersonalizować każdy komponent.
Brak komentarzy:
Prześlij komentarz