Framework css Prezentacje wykonał: szymon kupper

Prezentacja na temat: "Framework css Prezentacje wykonał: szymon kupper"— Zapis prezentacji:

1 Framework css Prezentacje wykonał: szymon kupper
Bootstrap 3 Framework css Prezentacje wykonał: szymon kupper

2 Co to jest framework? Szkielet do budowy aplikacji. Definiuje on strukturę aplikacji oraz ogólny mechanizm jej działania, a także dostarcza zestaw komponentów i bibliotek ogólnego przeznaczenia do wykonywania określonych zadań. Przykłady frameworków: Bootstrap, Pure, TukTuk, Groundwork, Foundation.

3 Co to jest Bootstrap? Bootstrap to framework CSS, rozwijany przez programistów Twittera. Zawiera zestaw przydatnych narzędzi ułatwiających tworzenie interfejsu graficznego stron oraz aplikacji internetowych. Bazuje głównie na gotowych rozwiązaniach HTML oraz CSS i może być stosowany m.in. do stylizacji takich elementów jak teksty, formularze, przyciski, wykresy, nawigacje i innych komponentów wyświetlanych na stronie. Bootstrap korzysta z języków programowania takich jak HTML, CSS, Sass, Less, JavaScript.

4 Jak dodać bibliotekę Bootstrap?
Jeżeli chcemy dodać bibliotekę bootstrap do strony internetowej, CSS oraz opcjonalnie JS (bez pliku JS nie zadziałają wszelkie animacje, np. rozwijane menu). <link rel="stylesheet" href=" trap.min.css"> <script src=" p.min.js"></script>

5 Czy muszę znać język JS aby korzystać z Bootstrap?
Nie. Aby korzystać z biblioteki Bootstrap wystarczy znać podstawy języków CSS i HTML.

6 Wersje Bootstrap Aktualna wersja stabilna 3.3.7 / 25.07.2016r.
Aktualna wersja alpha: alpha.6 / r. Prezentacja dotyczy Bootstrap-a 3, czyli wersji stabilnej 3.3.7

7 Dlaczego Bootstrap? Współczesne strony powinny być elastyczne, eleganckie, szybkie oraz poprawnie działać na urządzeniach mobilnych. Bootstrap spełnia te warunki najlepiej. Bootstrap daje szeroką gamę gotowych komponentów HTML oraz elastycznej struktury.

8 Projektowanie responsywne
Ma na celu tworzenie stron internetowych, które dynamicznie adaptują się do swojego środowiska. Dzięki temu autor może utworzyć jeden projekt działający na dowolnym urządzeniu: smartfonie, tablecie, integralnym telewizorze lub zwykłym komputerze. Strony responsywne mają płynną, elastyczną strukturę. Dopasowują się do rozmiaru ekranu, na którym są wyświetlane, a ponadto są kompatybilne z interfejsami dotykowymi urządzeń mobilnych.

9 Szablon na ekranie monitora

10 Szablon na ekranie tabletu

11 Szablon na ekranie smartfona

12 Zapewnienie obsługi HTML5 i CSS3 dla Internet Explorer 8
Jako, że Bootstrap 3 korzysta z wielu elementów HTML5 oraz właściwości CSS3, które nie funkcjonują poprawnie w IE8, musimy dodać kilka skryptów, które zostaną wywołane tylko w przypadku otwarcia strony w IE8 i pośrednio zapewnią obsługę HTML5 i CSS3, te skrypty to: – html5shiv.js, – respond.js.

13 IF IT IE 9 <!--[if lt IE 9]> <script src=" tml5shiv/3.7.0/html5shiv.js"> </script> <script src=" espond.js/1.4.2/respond.min.js"> </script> <![endif]-->

14 Bootstrap – poradniki, kursy
Pomoc znajdziemy na stronach takich jak: getbootstrap.com w3schools.com kursbootstrap.com

15 Kilka zastosowań w bootstrap 

16 Formularze

17 Alerty

18 Przyciski

19 Panele

20 Dziękuję za uwagę 

21 Zadanie! Stwórz stronę internetową z otrzymanego, darmowego szablonu ze strony getbootstrap.com na dowolnie wybrany temat. Edytuj <tittle>, dodaj autora strony, dodaj język polski; Umieść na stronie (min. 3) zdjęcia rounded cornes lub slider; Umieść 2 alerty w różnych kolorach; Dodaj 1 podstronę; Dodaj 2 przyciski (button) (nie default); Dodaj popover (trzeba dodać ajax do head); Dodaj progressbar; Dodaj modal dowolnych wymiarów; Dodaj formularz z oknami (Input, Input 2) Nazwa, Hasło;