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
:
1 |
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> |
Jednak do działania niektórych funkcji Bootstrapa wymagany jest również plik JavaScript bootstrap.js
(czyli zminifikowany bootstrap.min.js
):
1 |
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> |
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):
1 |
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script> |
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:
- Bootstrap CSS
bootstrap.css
- jQuery
jquery.js
- Bootstrap JS
bootstrap.js
- AngularJS
angular.js
- nasz kontroler AngularJS
controller.js
W naszej aplikacji AgendaEditor będzie to wyglądało tak:
1 2 3 4 |
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script> |
Później, gdy rozbudujemy projekt, kolejność ładowania plików będzie wyglądała następująco:
- Pliki CSS:
- Bootstrap
bootstrap.css
- nasze style np.
style.css
- Bootstrap
- Pliki JavaScript:
- jQuery
jquery.js
- Bootstrap
bootstrap.js
- AngularJS
angular.js
- moduły AngularJS np.
angular-route.js
- nasze kontrolery np.
controller.js
- jQuery
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.
Pingback: Korzystanie z Bootstrapa | Marcin Kowalczyk – Blog IT
Pingback: Menu w AngularJS czyli routing | Marcin Kowalczyk – Blog IT
Pingback: Drag & drop w AngularJS | Marcin Kowalczyk – Blog IT