Korzystanie z Bootstrapa

W poprzedniej części poznaliśmy jak podłączyć Bootstrapa do aplikacji AngularJS. W tym zobaczymy jak wykorzystać jego możliwości i zmienić wygląd naszej aplikacji.

Oczywiście strony internetowe napisane z wykorzystaniem samego Bootstrapa będą wyglądać podobnie jak inne. Dlatego nie zaleca się pozostawienia jej końcowo w takiej formie, szczególnie jeśli ma być dla klienta i użytkowników końcowych. Należałoby wtedy chociaż zastosować jakiś unikalny, ładny szablon (niektórzy uważają, że Bootstrap nadaje się tylko do prototypowania, a końcowa wersja jednak powinna być specjalnie napisanym szablonem). Jednak dla naszego zastosowania, Bootstrap w zupełności wystarczy, aby nadać trochę lepszy niż surowy wygląd. W końcu to aplikacja narzędziowa, a nie strona wizytówka. Podobnie, wykorzystaniem Bootstrapa bardzo fajnie tworzy się przeróżne panele administracyjne.

Stosowanie klas CSS Bootstrapa

Jeśli mamy dołączone pliki Bootstrapa do naszej aplikacji, możemy przystąpić do działania.

Dokumentacja Bootstrapa jest naprawdę dobra. W zakładkach na górze znajdziemy link do CSS, czyli opis jakie klasy możemy zastosować i jak to będzie wyglądać.

Nasza aplikacja wyglądała tak:

Przed Bootstrapem

Po dodaniu Bootstrapa, nastąpił reset stylów dodanych domyślnie przez przeglądarkę:

Dodany Bootstrap

Pierwsze zastosowanie – przyciski

W naszym projekcie mamy przyciski <button>. W dokumentacji możemy sprawdzić przykłady jak dodać do nich klasy i z czego możemy wybierać. Mamy do wyboru różne klasy, różniące się kolorami: default, primary (domyślnie niebieski, zwykły przycisk), success (można wykorzystać np. dla zatwierdzania czegoś), info, warning (przyciski nad którymi użytkownik powinien się zastanowić zanim kliknie), danger (zazwyczaj usuwanie czegoś).

Oczywiście nie zapominajmy zachować funkcjonalności wcześniej stworzonej w naszej aplikacji:

Analogicznie postąpmy z przyciskiem do usuwania wiersza. Mamy do wyboru różne rozmiary przycisków: standardowy (bez dopisywania niczego), duży btn-lg, mały btn-sm, bardzo mały btn-xs.

Teraz przyciski w naszej aplikacji wyglądają już lepiej:

Bootstrap przyciski

Tak samo możemy postąpić z innymi elementami.

Pola tekstowe

Dodajmy klasę form-control do pól <input>, dzięki czemu będą ładniej się prezentować:

Inputy Bootstrap

Ogólnie, na przyszłość, formularze należy zamykać w tagach <form>. Więcej o nich w dokumentacji.

Komponenty

Oprócz stosowania stylów CSS, mamy możliwość dodawania komponentów z Bootstrapa. Na wyniki dodajmy panel, żeby były bardziej widoczne.

Co da efekt:

Panel Bootstrap

Siatka Bootstrapa (Grid system)

Tworzenie szablonów w Bootstrapie jest szybkie. Przyjęto system „siatkowy” (grid) do tworzenia responsywnych stron. To znaczy, że stronę można podzielić na maksymalnie 12 kolumn w każdym rzędzie. Kolumny na różnej wielkości ekranów (lub zmian rozmiarów okna) będą zachowywały się inaczej. Podczas zmniejszania okna, kolumny stają się węższe, a jeśli już się nie mieszczą, to przeskakują jedna pod drugą.

Rzędy (klasa row) umieszcza się w kontenerze (klasa container). Czyli tak naprawdę tam będzie znajdować się główna zawartość strony.

Jeśli chcemy podzielić stronę na dwie kolumny, musimy pogrupować je po 6 kolumn bootstrapowych (bo 12/2=6). Będzie to wyglądać w ten sposób:

Więcej o gridach można poczytać w dokumentacji lub sprawdzić kod źródłowy i działanie oficjalnego przykładu.

W naszej aplikacji na dużych (szerokich) ekranach będą widoczne dwie kolumny:

Grid 6 duży

Jednak na mniejszych (węższych) ekranach lub po zmniejszeniu okna, jedna kolumna przeskoczy na dół:
Grid 6 mały

Menu

Dodajmy menu do naszej aplikacji. Na razie jeszcze nie będzie wykorzystywane, ale już niedługo to się zmieni.

Możemy wykorzystać najprostszy szablon z oficjalnej strony, w którym umieszczono menu (wystarczy zajrzeć w źródło strony). Po drobnym dostosowaniu kodu do własnych potrzeb, może on przyjąć taką formę:

Więcej o nawigacji i jej różnych typach można, jak zawsze, przeczytać w dokumentacji.

Jest jednak jeszcze jeden haczyk. Po dodaniu manu, zasłonił on część naszej aplikacji. Należy dodać margines na naszej stronie o wysokości takiej, jakiej jest menu (50px, ale dodajmy przy okazji większy odstęp, czeli razem np. 70px).

Gdzie to dodać? Utwórzmy nowy plik style.css – w przyszłości pewnie jeszcze nieraz nam się przyda, będziemy w nim umieszczać nasze reguły stylów. Oczywiście musimy również załadować nasz plik w aplikacji (tzn. dołączyć go do index.html):

Nasza aplikacje wygląda tak:
Szablon BootstrapZauważmy, że jeśli zmniejszymy okno, to kolumna przechodzi na dół, a linki w menu znikają:
Szablon mały 1Oczywiście mamy do nich dostęp poprzez przycisk. Jeśli go klikniemy, pozycje menu pokazują w wysuwanym polu:

Szablon mały 2

Podsumowanie

To co wyszło w dzisiejszym wpisie, możecie podejrzeć tutaj na żywo:

Jak zawsze, udostępniam kod na GitHubie w repozytorium agenda-editor w  branchu bootstrap-angularjs:
https://github.com/mkczyk/agenda-editor/tree/bootstrap-angularjs

One response on “Korzystanie z Bootstrapa

Dodaj komentarz

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