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

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.

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.

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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/boots trap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstra p.min.js"></script>

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.

Wersje Bootstrap Aktualna wersja stabilna 3.3.7 / 25.07.2016r. Aktualna wersja alpha: 4.0.0-alpha.6 / 6.01.2017r. Prezentacja dotyczy Bootstrap-a 3, czyli wersji stabilnej 3.3.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.

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.

Szablon na ekranie monitora

Szablon na ekranie tabletu

Szablon na ekranie smartfona

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.

IF IT IE 9 <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/h tml5shiv/3.7.0/html5shiv.js"> </script> <script src="https://oss.maxcdn.com/libs/r espond.js/1.4.2/respond.min.js"> </script> <![endif]-->

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

Kilka zastosowań w bootstrap 

Formularze

Alerty

Przyciski

Panele

Dziękuję za uwagę 

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;