Jak szybko zrobić ładny interfejs graficzny aplikacji? Skorzystajmy z front-endowego frameworka Bootstrap. Wystarczy dodać plik z Bootstrapem, kilka klas i już mamy przyzwoity wygląd. W przyszłości z łatwością będziemy mogli rozbudowywać aplikację, a jednocześnie dbać o to, żeby wyglądała poprawnie.

Stroną domową Bootstrapa jest: http://getbootstrap.com/.

Istnieje książka pt. Bootstrap. Tworzenie interfejsów stron WWW. Technologia na start! (autor: Syed Fazle Rahman, oryginalny tytuł Jump Start Bootstrap). Jednak dokumentacja jest na tyle dobra, a Boostrap na początku na tyle prosty, że zazwyczaj nie ma potrzeby sięgania po dodatkowe źródła. Jeśli będziemy chcieli zgłębić dokładne działanie frameworku, to ta pozycja może się kiedyś przydać.

Dodanie Bootstrapa do aplikacji

W zakładce Getting Started na oficjalnej stronie jest opisane skąd ściągnąć Bootstrapa. Podobnie jak w przypadku Angulara, tu też możemy ściągnąć plik na dysk i dołączyć do projektu lub wykorzystać udostępniony link wykorzystujący zewnętrzne serwery. Dołączmy Bootstrapa w podobny sposób jak to robiliśmy z Angularem.

Obecnie najnowszą wersją Bootstrapa 3 jest 3.3.6. Możemy użyć pliku bootstrap.css lub co zalecane zminifikowanego bootstrap.min.css:

Jednak do działania niektórych funkcji Bootstrapa wymagany jest również plik JavaScript bootstrap.js (czyli zminifikowany bootstrap.min.js):

Jednak, aby on działał, prawidłowo potrzebne jest dołączenie biblioteki jQuery. Można ją znaleźć tutaj lub tutaj. Do wyboru mamy wersje 1.x lub 2.x. Wersja 2.x nie wspiera Internet Explorera 6, 7 i 8. A do działania Bootstrapa wystarczy nam wersja 1.x, dlatego ją wybierzmy (obecnie jest to wersja 1.12.3):

Kolejność dodawania

Musimy pamiętać o poprawnej kolejności dodawania plików zewnętrznych do projektu. Najpierw dodajmy te, które nie zależą od niczego, a potem te, które zależą od bibliotek wyżej. Czyli w naszym przypadku:

1. Bootstrap CSS bootstrap.css
2. jQuery jquery.js
3. Bootstrap JS bootstrap.js
4. AngularJS angular.js
5. nasz kontroler AngularJS controller.js

W naszej aplikacji AgendaEditor będzie to wyglądało tak:

Później, gdy rozbudujemy projekt, kolejność ładowania plików będzie wyglądała następująco:

1. Pliki CSS:
   1. Bootstrap bootstrap.css
   2. nasze style np. style.css
2. Pliki JavaScript:
   1. jQuery jquery.js
   2. Bootstrap bootstrap.js
   3. AngularJS angular.js
   4. moduły AngularJS np. angular-route.js
   5. nasze kontrolery np. controller.js

Jeśli liczba plików zacznie nam się rozrastać, będziemy używać wielu bibliotek, warto zainteresować się frameworkiem RequireJS do zarządzania zależnościami, który ulepszy sposób ładowania plików. Na razie jednak pozostańmy przy najprostszym rozwiązaniu.

Sprawdzenie czy Bootstrap działa

Nasza aplikacja na razie wyglądała tak:

Po dodaniu Bootstrapa, nastąpił reset stylów dodanych domyślnie przez przeglądarkę. Jeśli dodaliśmy poprawnie pliki, aplikacja powinna wyglądać w ten sposób:

W kolejnej części przedstawię jak zastosować Bootstrapa do naszych elementów interfejsu graficznego.