Bootstrap to tzw. front-end framework, czyli platforma ułatwiająca projektantom błyskawiczne przystąpienie do tworzenia interfejsu strony WWW.

Podobne dokumenty
Pierwsza strona internetowa

Tworzenie prezentacji w MS PowerPoint

Bootstrap. Tworzenie serwisów Web 2.0. dr inż. Robert Perliński

Pokaz slajdów na stronie internetowej

Bootstrap w 24 godziny / Jennifer Kyrnin. Gliwice, cop Spis treści

Adobe InDesign lab.1 Jacek Wiślicki, Paweł Kośla. Spis treści: 1 Podstawy pracy z aplikacją Układ strony... 2.

ABC języka HTML i XHTML / Maria Sokół. wyd. 2. Gliwice, cop Spis treści

Za pomocą atrybutu ROWS moŝemy dokonać podziału ekranu w poziomie. Odpowiedni kod powinien wyglądać następująco:

Jak dodać wpis? Po zalogowaniu na blog znajdujesz się w panelu administracyjnym. Po lewej stronie widzisz menu:

1. Przypisy, indeks i spisy.

2 Podstawy tworzenia stron internetowych

Access - Aplikacja. Tworzenie bazy danych w postaci aplikacji

e-wsparcie Barbara Muszko Aktualizacja Twojej witryny internetowej tak prosta, jak obsługa Worda

Archiwum Prac Dyplomowych

Podstawy tworzenia prezentacji w programie Microsoft PowerPoint 2007

INSTRUKCJA OBSŁUGI DIODOWEGO WYŚWIETLACZA TEKSTÓW PIEŚNI STEROWANEGO Z TABLETU 10,1 '

Tworzenie infografik za pomocą narzędzia Canva

TECHNIKI WWW (WFAIS.IF-C125) (zajęcia r.)

Spis treści. Warto zapamiętać...2. Podstawy...3

W ogólności znaczniki mogą również posiadać atrybuty które pozwalają wpływać i manipulować własnościami znaczników lub przenosić dodatkowe informacje:

Słowa kluczowe Sterowanie klawiaturą, klawiatura, klawisze funkcyjne, przesuwanie obiektów ekranowych, wydawanie poleceń za pomocą klawiatury

Instrukcja modułu BKD - Wykonawca

1. Logowanie do Systemu BCW

BAZY DANYCH Panel sterujący

5.4. Efekty specjalne

ADMINISTRACJA STRONĄ EMPIRE MUSIC

Podręcznik użytkownika programu. Ceremonia 3.1

Instrukcja obsługi funkcji specjalnych szablonu C01 v.1.0

MS Word Długi dokument. Praca z długim dokumentem. Kinga Sorkowska

cms S INSTRUKCJA OBSŁUGI System cms S, którego dotyczy ta instrukcja, można zobaczyć, wypróbować i kupić na stronie:

Archiwum Prac Dyplomowych

Podstawy technologii WWW

Zadanie 1. Stosowanie stylów

Danuta ROZPŁOCH-NOWAKOWSKA Strona Moduł 4. Przykład 1. Przykład 2. HTML 4.01 Transitional).

Podział na strony, sekcje i kolumny

I. Menu oparte o listę

DODAJEMY TREŚĆ DO STRONY

Instrukcja użytkownika BIP

1. Dockbar, CMS + wyszukiwarka aplikacji Dodawanie portletów Widok zawartości stron... 3

Proste kody html do szybkiego stosowania.

Prezentacje multimedialne w Powerpoint

Dodawanie grafiki i obiektów

e-podręcznik dla seniora... i nie tylko.

Kadry Optivum, Płace Optivum

Instrukcja użytkownika Systemu Elektronicznej Faktury

Instrukcja obsługi uczelnianego systemu zarządzania stronami internetowymi (CMS)

Formatowanie tekstu przy uz yciu stylo w

UONET+ moduł Dziennik

1. Wstawianie macierzy

Utworzenie aplikacji mobilnej Po uruchomieniu Visual Studio pokazuje się ekran powitalny. Po lewej stronie odnośniki do otworzenia lub stworzenia

Tworzenie stron internetowych w kodzie HTML Cz 5

Pliki zorganizowano w strukturze drzewiastej odzwierciedlając strukturę logiczną aplikacji:

Zmiana logo. Dziękujemy za wybór naszych rozwiązań. apjoo od Apláuz. Wspólnie przebrniemy przez proces konfiguracji strony www i wstawiania treści.

1. Umieść kursor w miejscu, w którym ma być wprowadzony ozdobny napis. 2. Na karcie Wstawianie w grupie Tekst kliknij przycisk WordArt.

DOKUMENTACJA CMS/Framework BF5.0

Zasady tworzenia podstron

TURNINGPOINT KROKI DO URUCHOMIENIA TESTU NA PC

2018/10/16 20:47 1/5 3 Ekrany

INSTRUKCJA OBSŁUGI BIULETYNU INFORMACJI PUBLICZNEJ

Laboratorium 1: Szablon strony w HTML5

APLIKACJA SHAREPOINT

Problemy techniczne. Jak umieszczać pliki na serwerze FTP?

Instrukcja wprowadzania graficznych harmonogramów pracy w SZOI Wg stanu na r.

Archiwum Prac Dyplomowych

CMS- kontakty (mapa)

Główne elementy zestawu komputerowego

Rys. 3. Kod elementów na stronie po dodaniu kontrolek podstawowych.

MATERIAŁY - udostępnianie materiałów dydaktycznych w sieci SGH

Widżety KIWIPortal. tworzenie umieszczanie na stronach internetowych opcje zaawansowane. Autor: Damian Rebuś Data: Wersja: 1.

Front-end: solidne podstawy. Wszystko, co warto wiedzieć o HTML, CSS, JavaScript i Bootstrap.

System UONET+ przystosowany jest do dokumentowania zajęć w szkołach zawodowych, w których nauczanie odbywa się w oparciu o programy modułowe.

Dokumentowanie zajęć realizowanych w ramach kształcenia modułowego

Instrukcja 3wcms najważniejsze funkcje

Studia Podyplomowe Grafika komputerowa i Techniki Multimedialne, 2015, semestr II, dr inż. Robert Banasiak Projektowanie Stron WWW.

Przedszkolaki Przygotowanie organizacyjne

Strukturę naszego Biuletynu tworzą następujące elementy:

INSTRUKCJA OBSŁUGI SYSTEM ZARZĄDZANIA TREŚCIĄ

Tworzenie stron internetowych RAMKI

Prezentacja multimedialna MS PowerPoint 2010 (podstawy)

Integracja z Facebook. Wersja 7.2.4

PROGRAMOWANIE. WNPiD UAM, Programowanie, inż. Piotr Jabłoński

Nowy szablon stron pracowników ZUT

Edytor Edit+ - dodawanie zdjęć i. załączników. Instrukcja użytkownika

Expo Composer Garncarska Szczecin tel.: info@doittechnology.pl. Dokumentacja użytkownika

Przewodnik... Tworzenie Landing Page

,Aplikacja Okazje SMS

Bazy danych raporty. 1. Przekopiuj na dysk F:\ bazę M5BIB.mdb z dysku wskazanego przez prowadzącego.

Zadanie 9. Projektowanie stron dokumentu

Czynności Wychowawców

Instrukcja obsługi uczelnianego cmsa

Jak założyć stronę na blogu?

4.6 OpenOffice Draw tworzenie ilustracji

WAŻNE! colour.me Google Fonts tutaj

BAZY DANYCH Formularze i raporty

I. Wstawianie rysunków

BAZA_1 Temat: Tworzenie i modyfikowanie formularzy.

Pomoc dla systemu WordPress

Jak ustawić cele kampanii?

Tabele. Przykład 15a.htm. <HTML><HEAD><TITLE> Cennik</TITLE></HEAD><BODY><H3>Cennik</H3> <TABLE BORDER="1"> <TR>

Transkrypt:

Bootstrap Bootstrap to tzw. front-end framework, czyli platforma ułatwiająca projektantom błyskawiczne przystąpienie do tworzenia interfejsu strony WWW. Przygotowanie do pracy z Bootstrapem Przede wszystkim będziemy potrzebowali samego Bootstrapa, odwiedź więc oficjalną stronę projektu pod adresem http://getbootstrap.com i pobierz najnowszą wersję, Otwórz archiwum i wypakuj z niego następujące foldery: - /css - /js Pobierz wymaganą w bootstrapie bibliotekę jquery i wypakuj ją do folderu js a następnie utwórz plik o nazwie index.php i umieść w nim następujący kod: System siatkowy Bootstrapa System siatkowy umożliwia poprawne rozmieszczenie zawartości strony WWW. Dzieli on ekran na rzędy i kolumny, które następnie można wykorzystać do projektowania różnych układów treści. Po zdefiniowaniu rzędów i kolumn możemy zadecydować o rozlokowaniu poszczególnych elementów HTML. System siatkowy dzieli ekran na kolumny do 12 w każdym rzędzie. Szerokość kolumny jest uzależniona od wielkości ekranu, na którym jest wyświetlana strona. Właśnie to sprawia, że system siatkowy Bootstrapa jest responsywny, bo kolumny dynamicznie dopasowują się do każdej zmiany okna przeglądarki. Liczba rzędów może być dowolna; wszystko zależy od wymogów projektu. Przecięcia rzędów i kolum n tworzą prostokątną siatkę, w której rozmieszcza się treść strony. Autorzy Bootstrapa zalecają umieszczenie wszystkich rzędów i kolumn w kontenerze, który gwarantuje ich poprawne wyrównanie i zachowanie odstępów. W Bootstrapie istnieją

dwie klasy kontenerów: Container oraz container-fluid. Ta pierwsza służy do tworzenia kontenerów o stałej szerokości w oknie przeglądarki, zaś druga umożliwia tworzenie kontenerów o płynnie zmieniających się rozmiarach. Następnie wewnątrz kontenera utworzymy rząd. Po zdefiniowaniu rzędu będziemy mogli przystąpić do tworzenia kolumn. Do tworzenia rzędów siatki w Bootstrapie służy klasa row. W Bootstrapie kolumny są tworzone pośrednio, poprzez określenie, jak wiele spośród 12 standardowych kolumn chciałbyś połączyć. Przypuśćmy, że potrzebujesz tylko jednej dużej kolumny, rozciągającej się na całą szerokość okna. Taka kolumna powinna obejmować wszystkie dwanaście kolumn Bootstrapa. Aby uzyskać taki efekt, należy użyć klasy o nazwie col-xs-12, gdzie liczba 12 określa liczbę kolumn do połączenia. W Bootstrapie są cztery rodzaje prefiksów klas służących do tworzenia kolumn przeznaczonych dla ekranów o różnych wielkościach: 1. col-xs dla bardzo małych wyświetlaczy (szerokość ekranu < 768 pikseli), 2. col-sm dla małych wyświetlaczy (szerokość ekranu > 768 pikseli), 3. col-md dla średnich wyświetlaczy (szerokość ekranu > 992 piksele), 4. co l-lg dla dużych wyświetlaczy (szerokość ekranu > 1200 pikseli). Jeśli używamy klasy col-xs-12, to znaczy, że na bardzo małych ekranach dany element powinien obejmować wszystkie 12 dostępnych kolumn Bootstrapa. Rozmiar SM

Rozmiar XS Zadanie. Wykorzystując siatkę bootstrapa wykonaj następujący układ: Rozmiar MD

Rozmiar SM Rozmiar XS

Przesuwanie kolumn Kolejną funkcją systemu siatkowego bootstrapa jest możliwość przesuwania kolumn względem siebie. Klasy służące do przemieszczenia mają następujące nazwy: col-xs-offset -* col-sm-offset-* col-md-offset-* col-lg-offset-* Przypuśćmy, że chcemy przenieść kolumnę obejmującą trzy kolumny w prawą stronę: Komponenty Bootstrapa W tej części omówimy najbardziej przydatne komponenty HTML Bootstrapa. Nagłówki stron Jeżeli chcemy użyć znacznika jako tytułu strony, wystarczy że umieścimy go w elemencie klasy page-header, odpowiedzialnej za komponent w postaci nagłówka.

Panele Panele służą do wyświetlania elementów w ramce. Panele są dostępne w różnych wariantach. panel-primary kolor niebieski. panel-succes kolor zielony. panel-info kolor błękitny. panel-warning kolor żółty. panel-danger kolor czerwony. Obiekt mediów Obiekt mediów służy do tworzenia komponentów zawierających różne materiały multimedialne (obraz, wideo, audio), wyrównanych do lewej albo prawej strony względem tekstu. Miniatury Wyświetlanie miniatur obrazków i filmów zrealizujemy dzięki komponentowi thumbnails. Służy on do wyświetlania podglądu obrazów i materiałów wideo w tamce, która sugeruje użytkownikowi możliwość kliknięcia miniatury. Do każdej miniatury możemy dodać podpis:

Zadanie. Wykorzystując komponent miniatur Bootstrapa wykonaj następujący układ: Listy Komponent o nazwie list group przydaje się do tworzenia list: Kolor pozycji na liście można zmienić przez dodanie jednej z klas list-group-item. Mają one postać: list-group-item-success kolor zielony list-group-item-info kolor błękitny list-group-item-warning kolor żółty list-group-item-danger kolor czerwony Grupy list pozwalają nie tylko na tworzenie prostych zestawień. Możemy do każdego punktu dodawać opisy:

Menu nawigacyjne Menu nawigacyjne to grupa odsyłaczy umieszczona w jednej linii, obok siebie, prowadzących do różnych działów serwisu. Odsyłacze możemy wyświetlić w postaci zakładek albo małych przycisków z zaokrąglonymi rogami, w Bootstrapie zwanymi pigułkami (ang. Pills). Odsyłacze w postaci zakładek tworzy się następująco: Odsyłacze w postaci przycisków tworzy się następująco: Równie dobrze możemy ułożyć przyciski pionowo; wystarczy do istniejących klas dodać klasę o nazwie nav-stacked. Zadanie Utwórz panele z zakładkami umieść w nich przykładowe dane i powiąż je z odsyłaczami w poszczególnych zakładkach. Każdy odsyłacz w komponencie nav-tabs powinien być wyposażony w atrybut data-toggle o wartości tab. To pozwala Bootstrapowi na powiązanie zdarzeń kliknięcia z odpowiednim panelem. Atrybuty href w odsyłaczach powinny mieć identyfikatory zgodne z docelowymi panelami. Przykładowy kod panela:

Pasek nawigacji Komponent navbar, czyli pasek nawigacji, należy do najbardziej ciekawych komponentów Bootstrapa. Najpierw należy utworzyć element blokowy i przypisać mu dwie klasy: navbar i navbar-default. Następnie wewnątrz elementu navbar należy utworzyć kolejny element klasy containerfluid. Będzie on zawierał całą treść paska nawigacji i zarazem posłuży jako kontener obejmujący dostępną szerokość strony. Jako pierwsze element w pasku wstawimy element klasy navbar-header. Służy on do umieszczania elementów identyfikujących stronę, takich jak tytuł albo logo firmy. Ponadto w elemencie navbar-header umieścimy ukryty przycisk, który będzie się pojawiał tylko na małych wyświetlaczach. Przycisk będzie rozwijał ukryte menu. Przycisk ten jest wyposażony w dwa niestandardowe atrybuty: data-toggle i data-target. Pierwszy informuje skrypt, jak zareagować na kliknięcie przycisku, drugi określa sekcje paska którą należy wtedy wyświetlić. W nagłówku znajduje się jeszcze element klasy navbar-brand, w którym znajduje się nazwa strony. Utwórzmy teraz kolejny element który będzie rodzeństwem elementu navbar-header. Temu elementowi należy przypisać dwie klasy: collapse oraz navbar-collapse. Ponieważ ten element będzie zawierał cały pasek nawigacji nadamy mu identyfikator mynavbar-content. Teraz możemy wypełnić element navbar-collapse zestawem odsyłaczy. Użyjemy w tym celu elementu ul klas nav oraz navbar-nav.

Aby przekształcić element li w rozwijaną listę, przypisz mu klasę dropdown. Następnie ustaw do niego listę ul klasy dropdown-menu, która będzie zawierała poszczególne odsyłacze. Formularze Aby utworzyć formularz niezbędny jest element form klasy form. Każdy opis i pole wejściowe wymaga elementu klasy form-group.

Zadanie Posługując się systemem siatkowym Bootstrapa zmodyfikuj powyższy formularz w taki sposób aby etykiety wyświetlały się obok pól formularza. Formularz w jednej linii Aby umieścić elementy formularza w jednej linii klasę form należy zastąpić klasą form-inline. Harmonijka Plugin collapse umożliwia uzyskanie efektu populrnie nazywanego harmonijką. W Bootstrapie efekt harmonijki powstaje dzięki umieszczeniu kilku komponentów z panelami w jednym kontenerze. Każdy panel jest podzielony na dwa elementy: klasy panel-heading oraz panel-body. Odsyłacz powinien mieć zdefiniowane trzy ważne atrybuty: data-toggle, dataparent oraz href. Oznaczają odpowiednio nazwę identyfikującą typ pluginu, identyfikator elementu klasy panel-group oraz identyfikator elementu nadrzędnego względem panelbody.

Pokaz slajdów Pokaz slajdów w postaci karuzeli utworzymy w Bootstrapie przy użyciu pluginu carousel. Główny kontener karuzeli powinien mieć przypisane klasy carousel oraz slide. Klasa slide służy to efektu płynnego przejścia slajdów w karuzeli. Dzięki atrybutowi data-ride pokaz uruchomi się od razu po wczytaniu strony. Każda karuzela składa się z trzech sekcji: wskaźników, treści i kontrolek. Sekcja wskaźników to uporządkowana lista klasy carousel-indicators. Liczba elementów tej listy odpowiada liczbie slajdów pokazu. Następnie należy utworzyć kontener dla wszystkich slajdów. Będzie to element klasy carousel-inner. Każdy slajd będzie zdefiniowany przez element klasy item.

Przykładowy kod umożliwiający utworzenie karuzeli: