Rahman S. - Bootstrap. Tworzenie interfejsów stron WWW.pdf

dareks_ EBooki Infornatyka

Użytkownik dareks_ wgrał ten materiał 6 lata temu.

Komentarze i opinie (1)

Gość • 4 lata temu

nie dziala

Transkrypt ( 25 z dostępnych 140 stron)

STRONA 1

JUMP ST#RT SERIES < sitepoint TECHNOLOGIA NA START! Syed Fazle Rahman Helionie

STRONA 2

Spis treści Przedmowa.................................................................................. 9 Kto powinien przeczytać tę książkę?..................................................................... 9 Przyjęte założenia....................................................................................................9 Fragmenty kodu.............................................................................................. 10 Wskazówki i uwagi.........................................................................................10 Materiały dodatkowe........................................................................................... 10 Rozdział 1. Bliskie spotkanie z Bootstrapem..............................................11 Czym jest Bootstrap?............................................................................................ 11 Po co powstał?................................................................................................11 W czym ułatwi mi pracę?...............................................................................12 Historia platform CSS............................................................................................ 12 Zalety prototypowania CSS............................................................................13 Początki platformy Bootstrap.........................................................................13 Konkurencja Bootstrapa................................................................................. 15 Kto używa Bootstrapa?...................................................................................15 Ogólne założenia projektowania responsywnego............................................. 16 Zmiana układu strony w oparciu o rozmiar ekranu......................................16 Przygotowanie do pracy z Bootstrapem..............................................................18 Rozdział 2. System siatkowy Bootstrapa.................................................... 25 Czym jest system siatkowy?................................................................................. 25 Tworzenie prostej siatki........................................................................................26 Analiza przypadku: tworzenie dynamicznego układu strony.............................31 Projektowanie dla zwykłych komputerów....................................................33 Projektowanie dla tabletów.......................................................................... 36 Projektowanie dla smartfonów.....................................................................38 Zagnieżdżanie kolumn..........................................................................................40 Przesuwanie kolumn............................................................................................ 43 Ręczna zmiana układu siatki................................................................................45 Podsumowanie......................................................................................................45 Rozdział 3. Omówienie komponentów Bootstrapa...................................47 Komponenty strony.............................................................................................. 47 Nagłówki stron............................................................................................... 47 Panele..............................................................................................................50 Obiekt mediów................................................................................................51

STRONA 3

6 Bootstrap. Tworzenie interfejsów stron WWW. Technologia na start! Miniatury......................................................................................................... 52 Listy..................................................................................................................55 Komponenty nawigacyjne....................................................................................59 Menu nawigacyjne.........................................................................................59 Pasek nawigacji.............................................................................................. 61 Nawigacja okruszkowa.................................................................................. 65 Eksponowanie treści............................................................................................. 66 Etykiety.............................................................................................................66 Przyciski........................................................................................................... 67 Glifikony.......................................................................................................... 68 Ramki...............................................................................................................69 Odznaki........................................................................................................... 70 Frajda z formularzami...........................................................................................71 Prosty formularz.............................................................................................. 71 Poziomy układ opisów formularzy.................................................................73 Formularz w jednej linii..................................................................................74 Klasy pomocnicze w formularzach.................................................................75 Sterowanie wielkością................................................................................... 76 Podsumowanie......................................................................................................77 Rozdział 4. Rozszerzenia Bootstrapa: ciekawe i użyteczne......................79 Zwiększanie funkcjonalności................................................................................80 Rozwijane menu............................................................................................. 80 Rozwijane listy z użyciem JavaScriptu.......................................................... 82 Komunikaty.....................................................................................................86 Komunikaty z użyciem JavaScriptu................................................................88 Przyciski........................................................................................................... 88 Przyciski z użyciem JavaScriptu..................................................................... 90 Zarządzanie wyświetlaniem treści....................................................................... 91 ScrollSpy.......................................................................................................... 91 ScrollSpy z użyciem JavaScriptu..................................................................... 94 Zakładki........................................................................................................... 95 Zakładki z użyciem JavaScriptu...................................................................... 97 Harmonijka......................................................................................................97 Harmonijka z użyciem JavaScriptu...............................................................100 Okienka podpowiedzi...................................................................................102 Okienka podpowiedzi z użyciem JavaScriptu............................................. 103 Dymki.............................................................................................................105 Dymki z użyciem JavaScriptu........................................................................106 Ozdobniki.............................................................................................................107 Karuzela........................................................................................................ 107 Karuzela z użyciem JavaScriptu...................................................................110 Okienka modalne........................................................................................ 111 Okienka modalne z użyciem JavaScriptu....................................................113 Podsumowanie....................................................................................................115

STRONA 4

SPISTREŚCI 7 Rozdział 5. Na głęboką wodę: modyfikowanie Bootstrapa...................117 Dostosowywanie arkuszy stylów Bootstrapa....................................................117 Dostosowywanie Bootstrapa przy użyciu CSS............................................ 118 Dostosowywanie Bootstrapa przy użyciu Less...........................................121 Zmienne Bootstrapa i domieszki.................................................................121 Pliki resetujące.............................................................................................. 121 Pliki główne...................................................................................................121 Pliki komponentów.......................................................................................122 Pliki rozszerzeń............................................................................................. 123 Pliki pomocnicze........................................................................................... 123 Zastępowanie stylów przy użyciu Less.......................................................123 Kompilowanie plików Less...........................................................................127 Konfigurowanie Bootstrapa przed pobraniem..................................................127 Zapytania o media a Bootstrap..........................................................................128 Podsumowanie....................................................................................................129 Rozdział 6. Optymalizowanie Bootstrapa................................................ 131 Techniki optymalizacji.........................................................................................131 Optymalizowanie CSS...................................................................................131 Optymalizowanie JavaScriptu..................................................................... 133 Optymalizacja grafiki....................................................................................135 Unikanie typowych błędów...............................................................................136 Kolejny krok........................................................................................................ 137 Skorowidz.................................................................................139

STRONA 5

8 Bootstrap. Tworzenie interfejsów stron WWW. Technologia na start!

STRONA 6

Przedmowa Zaprojektowanie od zera nowoczesnej, profesjonalnej strony internetowej wymaga wiele czasu i wysiłku. Współczesne strony powinny być elastyczne, eleganckie i szybkie oraz po prawnie działać na urządzeniach mobilnych. Bootstrap ułatwia projektantom i programistom pracę, oferując szeroką gamę gotowych komponentów HTML oraz elastyczną strukturę w postaci systemu siatkowego, dzięki którym tworzenie profesjonalnych, responsywnych szablonów stron internetowych jest bardzo proste i trwa zdecydowanie krócej niż w przy padku tradycyjnych rozwiązań. Bootstrap może się przydać każdemu, ale nieocenione usługi oddaje zwłaszcza początkują cym projektantom. Zawiły kod CSS i JavaScript, niezbędny przy tworzeniu zaawansowa nych komponentów stron WWW, jest już gotowy. Wystarczy trochę kodu HTML, by zacząć tych komponentów używać. Bardziej doświadczeni deweloperzy mogą skorzystać z wielu zaawansowanych możliwości, takich jak obsługa Less i Sass, ułatwiających dostosowanie Bootstrapa do konkretnych potrzeb. Starałem się napisać tę książkę tak, by stała się kompletnym przewodnikiem po platformie Bootstrap. Dowiesz się z niej, w jaki sposób projektować piękne, responsywne strony interne towe bez konieczności uczenia się zaawansowanych technik programowania. Przeczytasz w niej o różnych przydatnych komponentach CSS i rozszerzeniach JavaScript dla Boot- strapa. Dowiesz się z niej też, w jaki sposób zmodyfikować wygląd i działanie Bootstrapa, by móc tworzyć oryginalne, nietypowe projekty. Mam nadzieję, że rozpaliłem w Tobie chęć tworzenia stron internetowych przy użyciu Boot- strapa. Jestem zarazem pewien, że po przeczytaniu tej książki będziesz dysponować umie jętnościami umożliwiającymi szybkie stworzenie eleganckiego, elastycznego szablonu strony internetowej. Wierzę, że ta książka w połączeniu z platformą Bootstrap w pełni za spokoi Twoje potrzeby w zakresie projektowania stron WWW. Kto powinien przeczytać tę książkę?____________ Ta książka jest przeznaczona dla początkujących i średniozaawansowanych projektantów oraz programistów WWW. Założyłem, że w pewnym stopniu znasz HTML i CSS; pracę ułatwi Ci też podstawowa znajomość JavaScriptu. Przyjęte założenia_____________________________ Chciałbym zwrócić Twoją uwagę na pewne style typograficzne i schematy, które zostały zastosowane w tej książce w celu oznaczenia różnych rodzajów informacji. Zapoznaj się z poniższymi wskazówkami.

STRONA 7

10 Bootstrap. Tworzenie interfejsów stron WWW. Technologia na start! Fragmenty kodu Fragmenty kodu w tej książce zostały wydrukowane krojem pisma o stałej szerokości znaków:

Piękny l e t n i dz i eń
Był p ię kn y d z i e ń na s p a c e r po p a r k u . Śp ie wa ł y p t a k i , a d z i e c i w r ó c i ł y do s z k ó ł . < / p >Jeśli do istniejącego przykładu trzeba będzie dodać jakiś fragment kodu, taki dodatek zo stanie wyróżniony pogrubieniem: f u n c t i o n a n i m a t e ( ) { new _variable = "Hello"; } Niektóre wiersze kodu nie zmieściły się w jednej linii w książce ze względu na ograniczenia druku. W takich sytuacjach zostały one przeniesione do nowej linii za pomocą znaku strzałki ^ . Taki znak pełni jedynie funkcję informacyjną i należy go zignorować. URL. open("h t t p : / /www.si t e p o i n t . c o m / r e s p o n s i v e -w e b- de si g n - r e a l - u s e r - t e s t i n g / ? r e s p o n s i v e 1 " ) ; uwagi iu przydatne informacje, które są powiązane z opisywanym zagadnieniem, lecz nie mają kluczowego znaczenia. Można je sobie wyobrazić jako użyteczne, dodatkowe treści. Wskazówki i uwagiHej, Ty! Wskazówki dostarczą Ci krótkich, przydatnych informacji. Materiały dodatkowe Przykłady prezentowane w tej książce można pobrać z serwera FTP wydawnictwa Helion: ftp://ftp.helion.pl/przyklady/bootst.zip

STRONA 8

Rozdział Bliskie spotkanie z Bootstrapem W tym rozdziale zapoznasz się z podstawowymi informacjami na temat Bootstrapa i do wiesz się, w jaki sposób to przydatne narzędzie może przyspieszyć proces projektowania stron WWW. Rozpocznę od krótkiego omówienia różnych platform CSS, a następnie wy jaśnię założenia projektowania responsywnego. Na koniec dowiesz się, w jaki sposób skonfigurować nowy projekt Bootstrapa i wykorzystać go do utworzenia pierwszej, prostej strony internetowej. Czym jest Bootstrap?__________________________ Bootstrap to tzw. front-end framework, czyli platforma ułatwiająca projektantom błyska wiczne przystąpienie do tworzenia interfejsu strony WWW. Programiści, którzy chcą się nauczyć projektowania interfejsów, lecz dotychczas zajmowali się jedynie „twardym” ko dowaniem w językach takich jak Java czy PHP, często mają poważne problemy z opano waniem CSS i JavaScriptu. Dzięki Bootstrapowi, który przejmuje na siebie obsługę zawiło ści CSS i JavaScriptu, mogą skupić się na pisaniu poprawnego kodu HTML. Bootstrap przydaje się nie tylko początkującym projektantom. W dalszej części książki przeko nasz się, że ta platforma może oddać nieocenione usługi także doświadczonym koderom. Po co powstał? Wyobraź sobie, że musisz zaprojektować stronę internetową z atrakcyjną nawigacją, este tycznymi przyciskami, ładną typografią, gotowymi miejscami na tekst i obrazki, dużym pokazem slajdów i tak dalej — a nie jesteś ekspertem od projektowania stron. A jeśli miał byś do dyspozycji gotowe elementy tego typu i musiałbyś jedynie napisać kawałek kodu HTML, aby ich użyć? Na tym polega idea Bootstrapa.

STRONA 9

12 Bootstrap. Tworzenie interfejsów stron WWW. Technologia na start! Wszystkie niezbędne klasy CSS i kod JavaScript są gotowe i dostępne w pakiecie z Boot- strapem. Na przykład nadanie łączu (znacznik ) klasy btn spowoduje, że dany ele ment zostanie wyświetlony w postaci przycisku, jak na rysunku 1.1. Jeśli dodatkowo przy piszesz temu łączu klasę btn-primary, to będzie to przycisk w kolorze niebieskim.O dw ie dź Google|.= | E | SS 1 4- O Ä Ü localhost/bootstrap_przyklady/ □ H = Rysunek 1.1. Przycisk utworzony w Bootstrapie Ale Bootstrap to coś więcej niż tylko wygodne narzędzie do estetycznego formatowania odsyłaczy, obrazków i typografii. Jedną z jego najważniejszych funkcji jest system siatkowy. Nie sposób opracować elastycznej, przyjaznej dla urządzeń mobilnych strony internetowej bez tego rodzaju systemu. O siatkach i elastycznych stronach WWW przeczytasz w dalszej części tego rozdziału. W czym ułatwi mi pracę? Jak już wspomniałem, Bootstrap stanowi ułatwienie dla początkującego projektanta, ale jego zalety docenią nie tylko nowicjusze. Eksperci mogą wykorzystać istniejący kod Boot- strapa do stworzenia czegoś oryginalnego. Bootstrap umożliwia konfigurowanie stylów przy użyciu metajęzyków Less1i Sass2. Programiści znający te technologie mogą całkowicie zmie nić domyślny wygląd i działanie Bootstrapa. Tę platformę można konfigurować na wiele sposobów, z którymi zapoznasz się w dalszych rozdziałach tej książki. Historia platform CSS__________________________ Wszystko zaczęło się od powstania platform takich jak YUI3 (Yahoo User Interface Library) oraz Blueprint4, które zyskały popularność w latach 2006 - 2007. Były one wyposażone 1 http://lesscss.org/ 2 http://sass-lang.com/ 3 http://yuilibrary.com/ 4 http://www.blueprintcss.org/

STRONA 10

BLISKIE SPOTKANIE Z BOOTSTRAPEM 13 w wiele przydatnych funkcji i narzędzi, takich jak resetowanie stylów CSS, fonty, siatki, anima cje, przyciski itp. Projektanci stron uświadomili sobie, że tego rodzaju platformy ułatwiają radzenie sobie z wieloma uciążliwymi, rutynowymi zadaniami, jakich wymaga stworzenie strony internetowej, a tym samym pozwalają zdecydowanie skrócić czas realizacji projektu. Po tych prostych platformach przyszedł czas na nową generację zaawansowanych narzę dzi, takich jak Bootstrap, w których kod CSS został uzupełniony JavaScriptem. Bootstrap połączył często używane komponenty CSS i JavaScript i w ten sposób uprościł realizację wielu niezwykle często wykonywanych zadań, takich jak tworzenie animacji, zmienianie wyglądu elementu po wskazaniu go kursorem myszy czy tworzenie rozwijanych menu. Bootstrap zawiera wiele przydatnych komponentów, które można bez trudu wykorzystać w projektach stron WWW. Do obsługi każdego z tych komponentów wystarczy zwykły kod HTML. Dzięki Bootstrapowi projektanci mogą się więc skupić na tworzeniu popraw nego kodu HTML, który platforma Bootstrap będzie potrafiła zinterpretować i wyświetlić. Zalety prototypowania CSS Główną zaletą dobrej platformy CSS jest łatwość projektowania. Tworzenie strony inter netowej wymaga od autora wykonywania wielu rutynowych zadań. Czynności takie jak re- setowanie ustawień przeglądarki, opracowanie siatki szablonu strony WWW i zdefinio wanie reguł typograficznych szybko stają się frustrujące i czasochłonne, jeśli przy okazji każdego projektu trzeba wykonywać je od początku. Dobra platforma CSS powinna za pewniać rozbudowany zestaw narzędzi upraszczający tego rodzaju zadania. Oto przykłady zalet dobrej platformy CSS: ■ Przyspiesza projektowanie. ■ Zapewnia dobrą organizację kodu i łatwość jego utrzymania. Pozwala skupić się na innowacjach, a nie na „wynajdywaniu koła”. Początki platformy Bootstrap Bootstrap został opracowany w 2011 roku przez Marka Otto i Jacoba Throntona, dwóch projektantów WWW pracujących w Twitterze. Ich głównym celem było ujednolicenie i ułatwienie obsługi kodu. Oto cytat z bloga Marka Otto5dotyczący genezy Bootstrapa: ...wraz z bardzo małą grupą deweloperów mieliśmy opracować i wdrożyć nowe na rzędzie na potrzeby firmy, ale dostrzegliśmy okazję do zrobienia czegoś więcej. Pod czas pracy zauważyliśmy, że tworzona platforma ma potencjał znacznie wykraczający 5 http://m arkdotto.com /

STRONA 11

14 Bootstrap. Tworzenie interfejsów stron WWW. Technologia na start! poza typowe narzędzie do wewnętrznego użytku. Kilka miesięcy później wczesna wersja Bootstrapa była gotowa. Miała ona służyć do współdzielenia i dokumentowania ty powych szablonów projektowych i zasobów w ramach firmy. Bootstrap 1.0.0 został wdrożony w 2011 roku i zawierał wyłącznie komponenty CSS i HTML. Aż do wersji 1.3.0 nie obejmował rozszerzeń JavaScript — i dopiero ta wersja była zgodna także z IE7 i IE8. W 2012 roku ukazała się kolejna główna wersja, oznaczona numerem 2.0.0. Biblioteka Boot strapa została praktycznie przepisana od nowa, a przy okazji zyskała na elastyczności. Jej kom ponenty zostały przystosowane do działania z różnymi rodzajami urządzeń — smartfo- nami, tabletami i komputerami stacjonarnymi — a w pakiecie pojawiło się wiele nowych rozszerzeń CSS i JavaScript. Po 15 dużych aktualizacjach w 2013 roku pojawił się Bootstrap 3 pod hasłem „przede wszyst kim mobilny, zawsze responsywny”. W starszych wersjach platformy responsywność pro jektowanej strony była opcjonalna. W wydaniu z 2013 roku wprowadzono zmiany w na zwach klas oraz strukturze folderów projektu. Trzeba przy tym pamiętać, że Bootstrap 3 nie jest zgodny ze starszymi wersjami. Nie da się zaktualizować starszego projektu bez pośrednio do tej wersji poprzez zwykłe zastąpienie głównych plików CSS i JavaScript. Jeśli chciałbyś się zapoznać z całą historią Bootstrapa, przejrzyj poszczególne wydania w repo zytorium GitHub6. Można tam zarazem poczytać o zmianach wprowadzanych w kolej nych wersjach. Obecnie Bootstrap jest rozwijany przez wielkie grono programistów z całego świata, któ rzy regularnie aktualizują kod bazowy projektu w repozytorium GitHub. Bootstrap jest też tematem burzliwych dyskusji w serwisie Stack Overflow; warto poszukać ich pod hasłami takimi jak bootstrap7, twitter-bootstrap8oraz twitter-bootstrap-39. Bootstrap stał się jedną z najbardziej pożądanych technologii: dla wszechstronnego pro jektanta jego znajomość stała się praktycznie obowiązkowa, co zresztą świetnie ilustruje rysunek 1.2, przedstawiający tendencje na rynku pracy (za serwisem Indeed.com). W chwili gdy pisałem te słowa, najnowsza wersja Bootstrapa nosiła numer 3.1.110. Treść tej książki i kod są zgodne z tą oraz nowszymi wersjami Bootstrapa. 6 https://github.com/twbs/bootstrap/releases 7 http://stackoverflow.com/questions/tagged/bootstrap 8 http://stackoverflow.com/questions/tagged/twitter-bootstrap 9 http://stackoverflow.com/questions/tagged/twitter-bootstrap-3 10Podczas przygotowywania polskiej edycji książki była już dostępna wersja 3.2.0 — przyp. tłum.

STRONA 12

BLISKIE SPOTKANIE Z BOOTSTRAPEM 15 Trendy na rynku pracy wg lndeed.com — b o o t s tr ap 45 000 40 000 _c 35 000-t—• c 8 30 000 O Q_ 25 000 $ 20 000 ui O N 15 000 10 000 5 000 0 Sty'07 Sty'08 Sty'09 Sty'10 Sty'11 Sty'12 Sty 13 Serwis lndeed.com gromadzi dane o milionach ofert pracy z tysięcy serwisów. Ten wykres ilustruje relatywny wzrost zapotrzebowania na specjalistów z dziedziny zgodnej z określonymi kryteriami wyszukiwania Rysunek 1.2. Poszukiwani specjaliści od Bootstrapa Konkurencja Bootstrapa Istnieje wiele popularnych platform, które konkurują z Bootstrapem na polu narzędzi słu żących do projektowania interfejsów WWW. Oto kilka przykładowych: ■ platforma Foundation firmy Zurb11, ■ Semantic UI12, ■ platforma Gumby13, ■ Pure firmy Yahoo14. Kto używa Bootstrapa? Przed zapoznaniem się z konkretną technologią warto się przyjrzeć projektom zrealizowa nym na jej podstawie. Dzięki temu można lepiej sobie uświadomić, co da się za jej pomocą osiągnąć. Oto kilka przykładów stron WWW opracowanych przy użyciu Bootstrapa: 11 http://foundation.zurb.com / 12 http://semantic-ui.com/ 13 http://gumbyframework.com/ 14 http://purecss.io/

STRONA 13

16 Bootstrap. Tworzenie interfejsów stron WWW. Technologia na start! ■ OpenDesk15, ■ Riot Designs16, ■ 20Jeans17, ■ Red Antler18, ■ Uberflip19. Ogólne założenia projektowania responsywnego Projektowanie responsywne (ang. responsive — czuły, wrażliwy) 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, table cie, inteligentnym telewizorze albo 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. Korzystając z mechanizmów projektowania responsywnego, projektanci mogą tworzyć rozbudowane aplikacje internetowe dla systemów takich jak iOS czy Android, zastępujące typowe programy. Zmiana układu strony w oparciu o rozmiar ekranu Przyjrzyjmy się tej koncepcji na konkretnym przykładzie. Przypuśćmy, że dysponujemy szablonem strony takim jak na rysunku 1.3, przystosowanym do wyświetlania na ekranie zwykłego komputera. W tym układzie strony można wyróżnić trzy główne części: nagłówek, treść oraz stopkę. Nagłówek zawiera logo i prostokątny banner reklamowy. W górnej części obszaru treści znajdują się cztery niewielkie artykuły, ułożone poziomo obok siebie. Pod nimi są uloko wane dwa większe bloki informacyjne. Na samym dole widnieje stopka, w której znajduje się krótka informacja o prawach autorskich. Nie ulega wątpliwości, że takiej strony nie będzie można wygodnie oglądać na tablecie al bo smartfonie, gdyż nie zmieści się ona na ekranie. Dla użytkowników takich urządzeń projekt trzeba byłoby specjalnie przystosować. 15 https://www.opendesk.cc/ 16 http://riotdesign.eu/en/ 17 https://www.20jeans.com/ 18 http://redantler.com/ 19 http://www.uberflip.com

STRONA 14

BLISKIE SPOTKANIE Z BOOTSTRAPEM 17 MojaStrona.com Banner reklamowy 1. Wpis 1. Wpis 2. Wpis 3. Wpis 4. Duży blok Duży blok informacyjny 1. informacyjny 2. ©MojaStrona.com 2014 Rysunek 1.3. Układ strony na ekranie zwykłego komputera Przypuśćmy jednak, że do opracowania szablonu strony użyliśmy Bootstrapa. Zastosowa liśmy system siatkowy do utworzenia reponsywnego projektu, który automatycznie dosto sowuje się do wymogów tabletów i urządzeń mobilnych. Na tabletach strona zostanie wyświetlona tak jak na rysunku 1.4. Z nagłówka zniknęła re klama, a logo zostało wyśrodkowane. Układ doskonale mieści się na ekranie. Rysunek 1.4. Szablon strony dostosowany do ekranu tabletu W wariancie dla smarftonów pokazanym na rysunku 1.5 widzimy, że nagłówek wygląda podobnie jak w przypadku tabletów, ale w prezentacji treści zaszła istotna zmiana. Mniej sze informacje zostały przeniesione tak, że tworzą teraz dwa rzędy po dwa bloki. Większe bloki informacyjne zostały umieszczone pojedynczo, jeden pod drugim (drugi jest niewi doczny, pod dolną krawędzią ekranu).

STRONA 15

18 Bootstrap. Tworzenie interfejsów stron WWW. Technologia na start! MojaStrona.com Wpis 1. Wpis 2 Wpis 3. Wpis 4. Duży blok informacyjny 1 Rysunek 1.5. Układ strony dostosowany do smartfonów Zapoznałeś się z bardzo prostym przykładem działania responsywnego projektu. Oczywi ście nasze możliwości nie kończą się na rozwiązaniach zastosowanych w powyższym przy kładzie. Więcej o responsywnym projektowaniu stron dowiesz się w rozdziale 2., podczas lektury na temat systemów siatkowych. Przygotowanie do pracy z Bootstrapem_________ Wreszcie dotarliśmy do najważniejszego fragmentu tego rozdziału: rozpoczęcia 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ę, oznaczo ną numerem 3.x.x. Otwórz archiwum i wypakuj z niego następujące foldery: - /css - /fonts - /js Utwórz roboczy folder na projekty i nadaj mu dowolną nazwę. Ja nazwałem swój boot- strap_przyklady. Przenieś rozpakowane foldery do folderu roboczego. Uruchom ulubiony edytor HTML (osobiście polecam Sublime Text20), utwórz plik o na zwie index.html i umieść w nim następujący kod: 20 http://www.sublimetext.com/

STRONA 16

BLISKIE SPOTKANIE Z BOOTSTRAPEM 19< t i t l e > M o j a p i e r w s z a a p l i k a c j a w B o o t s t r a p i e < / t i t l e >Ta prosta struktura HTML będzie podstawą naszej pierwszej aplikacji w Bootstrapie. Katalog z projektem powinien teraz wyglądać tak jak na rysunku 1.6. Rysunek 1.6. Początkowa struktura folderów projektu Dołączmy teraz Bootstrapa do naszego dokumentu HTML. Najpierw powinniśmy zająć się plikiem CSS. Otwórz folder /css i sprawdź, czy znajduje się w nim plik o nazwie boot- strap.css. Jest to główny plik CSS Bootstrapa. Co się znajduje w pliku bootstrap.min.css? We wspomnianym folderze znajduje się także plik o nazwie bootstrap.min.css, który jest „odchu dzoną" wersją pliku bootstrap.css. Proces odchudzania, zwany minifikacją (ang. minity, polega na usunięciu zbędnych spacji i komentarzy, co zmniejsza objętość pliku. Ztej wersji pliku należy skorzystać po ukończeniu projektu, gdy będzie on gotowy do publikacji. Połączmy wspomniany plik CSS z dokumentem index.html. Umieść następujący wiersz kodu w znaczniku , poniżej znacznika :</p></article></section><section class="comments padding-b-5 padding-l-0"><article class="comment"><header><label class="muted pag"> STRONA 17</label></header><p class="padding-10">20 Bootstrap. Tworzenie interfejsów stron WWW. Technologia na start!< l i n k r e l = " s t y l e s h e e t " t y p e = " t e x t / c s s " h r e f = " c s s / b o o t s t r a p . c s s " >Bootstrap wymaga biblioteki jQuery do działania komponentów JavaScript. Odwiedź stronę jquery.com21 i pobierz jQuery w wersji 1.11.0. Bootstrap obsługuje przeglądarkę In ternet Explorer 8 (i nowsze). Ale jeśli pobierzesz jQuery w wersji 2, IE8+ nie będzie działał poprawnie, gdyż programiści jQuery w tej wersji (i nowszych) oficjalnie odcięli się od ob sługi IE8. Z tego względu najlepiej będzie użyć jQuery 1.11.0, najnowszej wersji jQuery 1. Po pobraniu pliku jquery.js umieść go w folderze /js w katalogu z projektem. Potem wy starczy odwołać się do niego w dokumencie index.html przy użyciu następującego kodu:< s c r i p t s r c = " j s / j q u e r y . j s " > < / s c r i pt>Zaleca się umieszczenie odwołania do jQuery w obrębie znacznika <body> zamiast w znaczni ku <head>. Chodzi o to, by biblioteka jQuery została załadowana po wczytaniu całej zawartości dokumentu HTML, bo w ten sposób skraca się czas potrzebny na wyświetlenie strony. Dołączmy teraz plik JavaScript z kodem Bootstrapa:< s c r i p t s r c = " j s / b o o t s t r a p . j s " > < / s c r i p t >Dokument index.html powinien teraz wyglądać tak:<!DOCTYPE ht ml ><html l a n g = " p l " ><head>< t i t l e > M o j a p i e r w s z a a p l i k a c j a w B o o t s t r a p i e < / t i t l e >< l ink r e l = " s t y l e s h e e t " t y p e = " t e x t / c s s " h r e f = " c s s / b o o t s t r a p . c s s " ></he ad><body>< s c r i p t s r c = " j s / j q u e r y . j s " > < / s c r i p t >< s c r i p t s r c = " j s / b o o t s t r a p . j s " > < / s c r i p t ></body></ ht ml >Aby zapewnić zgodność Bootstrapa ze wszystkimi rodzajami urządzeń, trzeba dodatkowo umieścić w pliku kilka znaczników meta. Najpierw musimy poinformować przeglądarkę, że nasza strona internetowa zawiera znaki z zestawu Unicode, znacznie obszerniejszego niż zestaw znaków ASCII22. Można to zrobić przy użyciu następującego znacznika meta: 21 http://jquery.com/ 22 Aby w przykładach były widoczne polskie znaki, należy pamiętać o zapisywaniu plików w standardzie kodow ania UTF-8 — przyp. tłum.</p></article></section><section class="comments padding-b-5 padding-l-0"><article class="comment"><header><label class="muted pag"> STRONA 18</label></header><p class="padding-10">BLISKIE SPOTKANIE Z BOOTSTRAPEM 21<meta c h a r s e t = " u t f - 8 " >Czasami Internet Explorer działa w trybie zgodności. Zastosowanie poniższego kodu wymusi na IE zastosowanie najnowszego silnika renderującego do wyświetlenia strony. W ten spo sób unikniemy błędów w wyświetlaniu, spowodowanych brakiem obsługi niektórych wła ściwości CSS w starszych silnikach.<meta h tt p- eq u iv =" X- UA -C omp at i bl e " c o n t en t= "I E =e d ge " >Teraz zadbajmy o to, by strona wypełniła całą przestrzeń dostępną w oknie przeglądarki, nie zależnie od tego, czy mamy do czynienia z tabletem, smartfonem, czy ekranem komputera. Poinformujemy przeglądarkę, by przeskalowała projektowaną stronę do rozmiarów okna:<meta name="viewport" c o n t e n t = " w i d t h = d e v i c e - w i d t h , i n i t i a l - s c a l e = 1 " >Wyrażenie initial-scale= 1 oznacza skalowanie do 100% wielkości ekranu. Teraz dokument index.html powinien wyglądać następująco:<!DOCTYPE ht ml ><html l a n g = " p l " ><head><meta c h a r s e t = " u t f - 8 " ><meta h ttp - eq ui v= "X -U A- Co mp at i bl e " c o n t en t= "I E =e d ge " ><meta name="viewport" c o n t e n t = " w i d t h = d e v i c e - w i d t h , i n i t i a l - s c a l e = 1 " >< t i t l e > M o j a p i e r w s z a a p l i k a c j a w B o o t s t r a p i e < / t i t l e >< l i n k r e l = " s t y l e s h e e t " t y p e = " t e x t / c s s " h r e f = " c s s / b o o t s t r a p . c s s " ></h ea d><body>< s c r i p t s r c = " j s / j q u e r y . j s " > < / s c r i p t >< s c r i p t s r c = " j s / b o o t s t r a p . j s " > < / s c r i p t ></body></ ht ml >W powyższym kodzie trzeba wprowadzić jeszcze jedną zmianę. Otóż Bootstrap 3 korzysta z wielu elementów HTML5 oraz właściwości CSS3, które nie funkcjonują poprawnie w Internet Explorerze 8. Musimy więc 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 oraz respond.js.< ! - - [ i f l t IE 9]>< s c r i p t s r c = " h t t p s : / / o s s . m a x c d n .com/l i b s / h t m l 5 s h i v / 3 . 7 . 0 / h t m l 5 s h i v . j s " > < / s c r i p t >< s c r i p t s r c = " h t t p s : / / o s s . m a x c d n . c o m / l i b s / r e s p o n d . j s / 1 . 4 . 2 / r e s p o n d . m i n . j s " > < / s c r i p t ><! [endi f ] - - ></p></article></section><section class="comments padding-b-5 padding-l-0"><article class="comment"><header><label class="muted pag"> STRONA 19</label></header><p class="padding-10">22 Bootstrap. Tworzenie interfejsów stron WWW. Technologia na start! Użycie tych skryptów Skryptów html5shiv.jsoraz respond.js nie trzeba pobierać z internetu. Można odwołać się bezpo średnio do ich repozytorium, jak w powyższym przykładzie. Teraz dokument index.html jest gotowy. Powinien on wyglądać tak:<!DOCTYPE ht ml ><html l a n g = " p l " ><head><meta c h a r s e t = " u t f - 8 " ><meta h ttp - eq ui v= "X -U A- Co mp at i bl e " c o n t en t= "I E =e d ge " ><meta name="viewport" c o n t e n t = " w i d t h = d e v i c e - w i d t h , i n i t i a l - s c a l e = 1 " >< t i t l e > M o j a p i e r w s z a a p l i k a c j a w B o o t s t r a p i e < / t i t l e >< l i n k r e l = " s t y l e s h e e t " t y p e = " t e x t / c s s " h r e f = " c s s / b o o t s t r a p . c s s " >< ! - - [ i f l t IE 9] >< s c r i p t s r c = " h t t p s : / / o s s . m a x c d n . c o m / l i b s / h t m l 5 s h i v / 3 . 7 . 0 / h t m l 5 s h i v . j s " > < / s c r i p t >< s c r i p t s r c = " h t t p s : / / o s s . m a x c d n . c o m / l i b s / r e s p o n d . j s / 1 . 4 . 2 / r e s p o n d . m i n . j s " > < / s c r i p t ><! [endi f ] - - ></h ea d><body><h1>Wi t a j , ś w i e c i e ! < / h 1 >< s c r i p t s r c = " j s / j q u e r y . j s " > < / s c r i p t >< s c r i p t s r c = " j s / b o o t s t r a p . j s " > < / s c r i p t ></body></ ht ml >Jak widać, dodatkowo umieściłem w kodzie element h1 zawierający tekst „Witaj, świecie!”. Teraz możesz otworzyć stronę w przeglądarce. Na ekranie powinien się pojawić napis „Witaj, świecie!”, sformatowany ładnym krojem pisma. Jeśli posługujesz się przeglądarką Google Chrome, możesz łatwo sprawdzić, czy JavaScript i CSS zostały poprawnie załadowane. Kliknij w obrębie strony prawym przyciskiem myszy i wybierz polecenie Zbadaj element. Kliknij zakładkę Console (konsola) i jeśli nie znaj dziesz w niej informacji o błędach, to znaczy, że wszystkie pliki JavaScript zostały popraw nie wczytane. Teraz otwórz zakładkę Network; jeśli nie ma w niej informacji o błędach 404, to także wszystkie dokumenty CSS zostały poprawnie dołączone (patrz rysunek 1.7). Nasz pierwszy projekt w Bootstrapie jest gotowy. Na podobnych podstawach będą się opierały pozostałe projekty w tej książce.</p></article></section><section class="comments padding-b-5 padding-l-0"><article class="comment"><header><label class="muted pag"> STRONA 20</label></header><p class="padding-10">BLISKIE SPOTKANIE Z BOOTSTRAPEM 23 ~W Q Moja pierwsza aplikacja v * V ir G Z ł Ü lo c a lh o st/b o o tstra p _ p rzy k la d y □ M = Witaj, świecie! Q Element:; |Network 1 Sources Timeline Profiles Resources Audit Console > - t y X 0 ® "W ! = □ Pre Name Path serve log Method L l Disable cache Status _ , ... . Size ¡ype Initiator _ . Text Content Time Latency Timeline 2ms 3ms | bootstrap.css.map 1 1 /Causera/Samsung/D... GET OB Finish... text/p... Other 4ms 4ms 1 requests 10 B transferred |Console |Search Emulation Rendering Rysunek 1.7. Sprawdzanie poprawności wczytywania plików w przeglądarce Chrome</p></article></section><section class="comments padding-b-5 padding-l-0"><article class="comment"><header><label class="muted pag"> STRONA 21</label></header><p class="padding-10">24 Bootstrap. Tworzenie interfejsów stron WWW. Technologia na start!</p></article></section><section class="comments padding-b-5 padding-l-0"><article class="comment"><header><label class="muted pag"> STRONA 22</label></header><p class="padding-10">Rozdział System siatkowy Bootstrapa________ W tym rozdziale zapoznasz się z jedną z najważniejszych funkcji Bootstrapa: systemem siatkowym. Przekonasz się, na czym polega jego działanie, i zobaczysz, w jaki sposób można go wykorzystać we własnych projektach. Opracujemy też kilka prostych szablonów stron, aby poznać ów system w praktyce. Czym jest system siatkowy?____________________ 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 kolumn tworzą prostokątną siatkę, w której rozmieszcza się treść strony. W ramach przykładu na rysunku 2.1 utworzyłem jeden rząd elementów i za pomocą sys temu siatkowego podzieliłem go na 12 kolumn. Tło każdej z kolumn zmieniłem tak, by wyraźnie się od siebie różniły. Dodatkowo każda kolumna jest oznaczona kolejną liczbą.</p></article></section><section class="comments padding-b-5 padding-l-0"><article class="comment"><header><label class="muted pag"> STRONA 23</label></header><p class="padding-10">26 Bootstrap. Tworzenie interfejsów stron WWW. Technologia na start! Rysunek 2.1. Przykładowa strona przedstawiająca 12-kolumnową siatkę Tworzenie prostej siatki_______________________ W tej części rozdziału zaprojektujemy szablon naszej pierwszej strony internetowej opierającej się na systemie siatkowym Bootstrapa. Za punkt wyjścia potraktujemy projekt w folderze bootstrap_przyklady, opracowany w poprzednim rozdziale. Skopiuj wszystkie pliki znajdujące się w folderze bootstrapprzyklady, a następnie utwórz nowy folder o nazwie rozdzial_2 i wklej do niego skopiowane pliki. Otwórz w edytorze dokument index.html, zmień tytuł strony na System siatkowy Bootstrapa i usuń znacznik <h1> wraz z treścią. Powinieneś otrzymać dokument HTML o następującej zawartości:<!DOCTYPE html><html lang ="e n"><head><meta c h a r s e t = " u t f - 8 " ><meta h ttp - eq ui v= "X -U A- Co mp at i bl e " c o n t en t= "I E =e d ge " ><meta name="viewport" c o n t e n t = " w i d t h = d e v i c e - w i d t h , i n i t i a l - s c a l e = 1 " >< t i t l e > S y s t e m s i a t k ow y B o o t s t r a p a < / t i t l e >< l i n k r e l = " s t y l e s h e e t " t y p e = " t e x t / c s s " h r e f = " c s s / b o o t s t r a p . c s s " >< ! - - [ i f l t IE 9] >< s c r i p t s r c = " h t t p s : / / o s s . m a x c d n . c o m / l i b s / h t m l 5 s h i v / 3 . 7 . 0 / h t m l 5 s h i v . j s " > < / s c r i p t >< s c r i p t s r c = " h t t p s : / / o s s . m a x c d n . c o m / l i b s / r e s p o n d . j s / 1 . 4 . 2 / r e s p o n d . m i n . j s " > < / s c r i p t ><! [endi f ] - - ></he ad><body>< ! - - T r eś ć s t r o n y - - >< s c r i p t s r c = " j s / j q u e r y . j s " > < / s c r i p t >< s c r i p t s r c = " j s / b o o t s t r a p . j s " > < / s c r i p t ></body></ ht ml ></p></article></section><section class="comments padding-b-5 padding-l-0"><article class="comment"><header><label class="muted pag"> STRONA 24</label></header><p class="padding-10">SYSTEM SIATKOWY BOOTSTRAPA 27 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 kon tenerów o płynnie zmieniających się rozmiarach. Kontener o stałej szerokości jest zapro jektowany tak, by znajdował się na środku ekranu, w równych odstępach od obydwu bo ków. Z tego względu warto zadbać o zawijanie tekstu i innych treści w obrębie kontenera. W kolejnym przykładzie utworzymy kontener klasy Container, czyli o stałej szerokości. Dodaj poniższy kod do strony HTML:<d iv c l a s s = " c o n t a i n e r " >< / d i v >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:<d iv c l a s s = " c o n t a i n e r " ><d iv c l a ss = " r ow " >< / d i v>< / d i v >Rzędów można utworzyć dowolnie dużo, ale wszystkie muszą zostać umieszczone w kon tenerze. W celu uzyskania optymalnych efektów zaleca się utworzenie jednego kontenera ze wszystkimi rzędami. W Bootstrapie kolumny są tworzone pośrednio, poprzez określenie, jak wiele spośród 12 stan dardowych 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 na zwie col-xs-12, gdzie liczba 12 określa liczbę kolumn do połączenia. (Na razie nie zasta nawiaj się nad członem xs w nazwie klasy; wrócimy do niego później). Na tej samej zasadzie aby utworzyć w danym rzędzie dwie kolumny o równej szerokości, należy użyć klasy col-xs-6 do zdefiniowania każdej z nich. Taka składnia oznacza dla Boot strapa, że potrzebujemy dwóch kolumn, obejmujących po sześć kolumn Bootstrapa każda:<d iv c l a s s = " c o n t a i n e r " ><d iv c l a ss = " r ow " ><d iv c l a s s = " c o l - x s - 6 " ><h4>Kolumna 1. </h4>< / di v ><d iv c l a s s = " c o l - x s - 6 " ><h4>Kolumna 2 . </ h4 >< / di v >< / d i v>< / d i v ></p></article></section><section class="comments padding-b-5 padding-l-0"><article class="comment"><header><label class="muted pag"> STRONA 25</label></header><p class="padding-10">Efekt został pokazany na rysunku 2.2. 28 Bootstrap. Tworzenie interfejsów stron WWW. Technologia na start! Rysunek 2.2. Tę siatkę tworzą dwie kolumny o równej szerokości Aby lepiej wyodrębnić kolumny, zmieńmy kolor każdej z nich. Utwórzmy nowy plik CSS o nazwie styles.css w folderze ze stylami CSS projektu. Podana nazwa pliku nie jest obliga toryjna; możesz ją zmienić, jak tylko chcesz. Dołączmy ten plik do dokumentu index.html przy użyciu znacznika link w elemencie head:< l ink h r e f = " c s s / s t y l e s . c s s " r e l = " s t y l e s h e e t " >Zdefiniujmy teraz w tym pliku reguły CSS, dzięki którym każda z kolumn będzie miała in ny kolor: . c o l i { ba ckg ro un d: #5C7080; } . co l2 { ba ckg ro un d: #6BC0FF; } Musimy jeszcze dodać klasy coli i col2 do kodu, aby kolumny zostały wyświetlone zgod nie ze zdefiniowanymi dla nich regułami (rysunek 2.3). Po modyfikacji ten fragment kodu wygląda tak:<d iv c l a s s = " c o n t a i n e r " ><d iv c l a ss = " r ow " ><d iv c l a s s = " c o l - x s - 6 c ol1" ><h4>Kolumna 1. </h4>< / di v ><d iv c l a s s = " c o l - x s - 6 c ol2" ><h4>Kolumna 2 . </ h4 >< / di v >< / d i v>< / d i v ></p></article></section></section></div></div></div><script type="text/javascript">var _qasp = _qasp || []; _qasp.push('go'); _qasp.push(['setFastPAID', 'sadDoci']);</script><script type="text/javascript">(function (d, x, a) { var z = d.createElement(x); z.type = 'text/javascript'; z.src = a; var s = d.getElementsByTagName(x)[0]; s.parentNode.insertBefore(z, s); })(document, 'script', '//a.spolecznosci.net/core/45e90454f0fad720f5b56a8634cc7f07/main.js');</script><div class="a-750" style="padding: 10px!important;"><iframe data-src="/aserver/campaign/397?lo=1" class="frame_shadow iframe_async" id="doublebillboard-2" name="doublebillboard_doci_18674" scrolling="no" frameborder=0 width=0 height=0></iframe></div><div class="a-300" style="padding: 10px!important;"><iframe data-src="/aserver/campaign/398?lo=1" class="frame_shadow iframe_async" id="square-2" name="square_doci_3853" scrolling="no" frameborder=0 width=0 height=0></iframe></div></div></div><div class="footer contentpage"><footer><div class="socialallthethings">Made in Warsaw · Copyright 2016 · All rights reserved -<a class="Grupa Webshark.pl" href="http://webshark.pl">webshark.pl</a><a class="" href="/regulations-pl">Regulamin</a><a class="" href="/privacy">Polityka Prywatności</a><a class="" href="/contact">Kontakt</a></div></footer><div class="banner"></div></div><script>function mouseMovedOrMouseCLicked(e) { var mainEl = document.getElementById("html"); mainEl.removeEventListener("mousemove", mouseMovedOrMouseCLicked); mainEl.removeEventListener("touchstart", mouseMovedOrMouseCLicked); mainEl.removeEventListener("touchmove", mouseMovedOrMouseCLicked); mainEl.removeEventListener("mousedown", mouseMovedOrMouseCLicked); mainEl.removeEventListener("scroll", mouseMovedOrMouseCLicked); /* var element = document.getElementById('square-1'); var element2 = document.getElementById('doublebillboard-1'); */ var element3 = document.getElementById('adrino-a1'); /* element.classList.remove('logg'); */ /* element.style.maxHeight = null; element2.style.maxHeight = null; */ if(element3!==null){ element3.style.maxHeight = null; element3.style.display = 'block'; } } var html = document.getElementById("html"); html.addEventListener("mousemove", mouseMovedOrMouseCLicked, false); html.addEventListener("touchstart", mouseMovedOrMouseCLicked, false); html.addEventListener("touchmove", mouseMovedOrMouseCLicked, false); html.addEventListener("mousedown", mouseMovedOrMouseCLicked, false); html.addEventListener("scroll", mouseMovedOrMouseCLicked, false);</script><script id="container-header-template" type="x-handlebars-template"></script><script id="search-container-template" type="x-handlebars-template"><div class="a-750" style="padding: 10px!important;"><iframe data-src="/aserver/campaign/397?lo=1" class="frame_shadow iframe_async" id="doublebillboard-4" name="doublebillboard_doci_19758" scrolling="no" frameborder=0 width=0 height=0></iframe></div><div class="a-300" style="padding: 10px!important;"><iframe data-src="/aserver/campaign/398?lo=1" class="frame_shadow iframe_async" id="square-4" name="square_doci_9900" scrolling="no" frameborder=0 width=0 height=0></iframe></div><div class="span8"><div class="content" ><section><h3 class="w-100-p overflow-a"><div class="float-l">Lista plików <span id="search_files_count_1"></span></div><div class="float-r" id="search_pages_1"></div></h3></section><section class="padding-0 margin-0" id="search_files_result"><div class="w-100-p extra centered"><i class="icon-spinner icon-spin"></i> Proszę czekać, szukam...</div></section><section><h3 class="w-100-p overflow-a"><div class="float-l padding-5">Lista plików <span id="search_files_count_2"></span></div><div class="float-r" id="search_pages_2"></div></h3></section></div></div><div class="span4"><div class="content"><section><h3>Lista użytkowników <span id="search_users_count"></span></h3></section><section id="search_users_result" class="comments-thread padding-l-r-0 margin-l-r-0"><div class="padding-0 margin-0 w-100-p centered"><i class="icon-spinner icon-spin"></i> Proszę czekać, szukam...</div></section></div></div><div class="a-750" style="padding: 10px!important;"><iframe data-src="/aserver/campaign/397?lo=1" class="frame_shadow iframe_async" id="doublebillboard-3" name="doublebillboard_doci_14179" scrolling="no" frameborder=0 width=0 height=0></iframe></div><div class="a-300" style="padding: 10px!important;"><iframe data-src="/aserver/campaign/398?lo=1" class="frame_shadow iframe_async" id="square-3" name="square_doci_4698" scrolling="no" frameborder=0 width=0 height=0></iframe></div></script><script id="search-files-content-template" type="x-handlebars-template">{{#each data_files_render}}<article class="elem"><header><img height="45" width="45" id="thumbnail-{{id}}" src="/static/img/loader/thumb-loader.gif" data-src="https://img.doci.pl/i/{{id_url}}/7/2/thumb.png"><p class="margin-0 padding-0" id="file_name_{{id}}" style="padding-bottom: 1px !important;"><span ><div class="text-ellipsis elipsis-file"><a href="/{{user_data.url}}/{{name_url}}+f{{id_url}}" title="{{name_display}}">{{name}}</a></div><span class="float-r size-11">• {{date_add_format}}</span></span></p><label class="muted"><span class="float-r size-11 padding-l-10">dodał: <a href="/{{user_data.url}}" title="{{user_data.display}}">{{user_data.display}}</a></span>{{#unless in_trash}}<span class="fileSystemMenu d-block float-r">{{#if is_admin}}<span class="{{#if abused}} red {{else}} green {{/if}} padding-l-10 pointer change-abused"> <i class="fa fa-ban"></i></span>{{/if}}</span>{{/unless}}</label></header><div class="margin-0 padding-0 size-11">Rozmiar: {{size_format}} - <span class="uppercase" style="color:#15935c">{{extension}}</span></div></article>{{/each}}</script><script id="search-users-content-template" type="x-handlebars-template">{{#each data_users_render}}<article class="comment"><header><p>{{#if user_data.avatar}}<img height="45" width="45" style="margin-left:10px;margin-right:15px;position:relative;float:left;" src="https://img.doci.pl/avatar/{{user_data.userID}}/2.png">{{else}}<img height="45" width="45" style="margin-left:10px;margin-right:15px;position:relative;float:left;" src="{{../../config.streaming_url}}static/img/avatar/avatar.png">{{/if}}<a class="portrait_wrapper" href="/{{user_data.url}}">{{user_data.display}}</a>• {{user_data.files_count_format}} plików<br/>{{user_data.register_date}}</p></header></article>{{/each}}</script><script id="search-files-empty-content-template" type="x-handlebars-template"><div class='extra w-100-p hover centered' >Brak wyników wyszukiwania dla frazy: "{{search_phrase}}"</div></script><script id="search-users-empty-content-template" type="x-handlebars-template"><div class='extra w-100-p hover centered'>Brak wyników</div></script><script id="search-pagination-template" type="x-handlebars-template">{{#if is_next_page}}<span class="link2 pointer search-next-page-click" data-href="{{next_page}}"><div class="float-r padding-5 padding-l-10 padding-r-10 hover" style="font-size:14px;"> Następna strona <i class="fa fa-chevron-right"></i></div></span>{{/if}} {{#if is_previous_page}}<span class="link2 pointer search-previous-page-click" data-href="{{previous_page}}"><div class="float-r padding-5 padding-l-10 padding-r-10 hover"style="font-size:14px;"><i class="fa fa-chevron-left"></i> Poprzednia strona </div></span>{{/if}}</script><script id="search-advanced-template" type="x-handlebars-template">{{#if show_search_saved_filter}}<div class="float-l centered pointer hover padding-5 {{#if search_saved}} modulo green {{/if}} action-search-saved" style="width: 200px; border-right: 1px solid #dfe0df;"><i class="icon-anchor"></i> Szukaj zachowane</div>{{/if}}<div class="float-l" style="border-right: 1px solid #dfe0df;"><div class="float-l padding-5 hover pointer padding-l-10 padding-r-10 {{#if search_all}} modulo green {{/if}} action-search-type" data-type="all"><i class="icon-copy"></i> Wszystkie</div><div class="float-l padding-5 hover pointer padding-l-10 padding-r-10 {{#if search_movie}} modulo green {{/if}} action-search-type" data-type="movies"><i class="icon-film"></i> Filmy</div><div class="float-l padding-5 hover pointer padding-l-10 padding-r-10 {{#if search_music}} modulo green {{/if}} action-search-type" data-type="music"><i class="icon-headphones"></i> Muzyka</div><div class="float-l padding-5 hover pointer padding-l-10 padding-r-10 {{#if search_photo}} modulo green {{/if}} action-search-type" data-type="photos"><i class="icon-picture"></i> Zdjęcia</div><div class="float-l padding-5 hover pointer padding-l-10 padding-r-10 {{#if search_other}} modulo green {{/if}} action-search-type" data-type="other"><i class="icon-paper-clip"></i> Inne</div>{{#if show_search_directory_filter}}<div class="float-l padding-5 hover pointer padding-l-10 padding-r-10 {{#if search_directory}} modulo green {{/if}} action-search-type" data-type="directory"><i class="icon-folder-open-alt"></i> Katalogi</div>{{/if}}</div></script><script id="search-directories-content-template" type="x-handlebars-template">{{#each data_directories_render}}<div id="d-{{id}}" class='search-element-container margin-0 w-100-p hover {{#if modulo}}modulo {{/if}} ' style="padding-top: 8px; padding-left: 15px; "><div class='search-icon'><img src="/img/icons/big_dir.png"></div><div class="search-name" style="margin-top: 7px;"><div style=" width: 515px ; height: 28px; "><div class="text-ellipsis" style="max-width: 515px;"><a title="{{name}}" href="/{{user_data.url}},d-{{id}},{{name_url}}">{{name}}</a></div><div class="search-desc" style="margin-top:5px;"><span>Katalogów:: {{dir_count}} / plików: {{file_count}}</span><span class="search-desc float-r size-11" style="min-width:100px;text-align:right;margin-top:-4px;">{{#if saved}}<i class="icon-anchor green" title="Plik zachowany" style="margin-left: 10px;"></i>{{/if}}<i class="{{icon}}" style="margin-left: 10px;"></i></span></div></div><span class="search-desc float-l text-ellipsis" style="max-width:400px;margin-top:7px;">Dodał: <a class="link search-link" href="/{{user_data.url}}">{{user_data.display}}</a><span> w katalogu: <a class="link search-link" href="/{{user_data.url}},d-{{dir_data.id}},{{dir_data.name_url}}">{{dir_data.name}}</a></span></span><span class="search-desc float-r" style="min-width:100px;text-align:right;margin-top:5px;">{{date_add_format}}</span></div></div>{{/each}}</script><script id="comments-comment-list-each-template" type="x-handlebars-template">{{#each file_comments}}<section class="comments padding-b-5" ><article class="comment"><header><p>{{#if user_data.avatar}}<img height="45" width="45" src="https://img.doci.pl/avatar/{{user_data.userID}}/2.png">{{else}}<img height="45" width="45" src="{{../../config.streaming_url}}static/img/avatar/avatar.png">{{/if}} {{#unless is_guest}}<a class="portrait_wrapper" href="/{{user_data.url}}">{{/unless}} {{user_data.display}} {{#unless is_guest}}</a>{{/unless}} • {{date_format}}</p><label class="muted">{{#if can_edit}}<span data-comment-id={{ID}} style="cursor:pointer;margin-right:8px; margin-left: 8px; margin-top: -4px;" type="button" class="close comment_remove_btn" data-dismiss="modal" aria-hidden="true" title="{{lang.file_comment_remove}}">×</span>{{/if}} {{#if show_file_data}}<a title="{{file_data.name}}" style="float:right; margin-left: 8px; margin-right:8px; font-size:11px;" href="/{{owner_data.url}}/{{file_data.name_url}}+f{{file_data.id_url}}"><i class="fa fa-link"></i></a>{{/if}}</label></header><p>{{{comment}}}</p></article></section>{{/each}}</script><div class="modal-container"></div><script src="//ovh.webshark.pl/adsrv/10/main.js" rel="javascript" type="text/javascript" ></script><script>var loadDeferredStyles = function() { var addStylesNode = document.getElementById("deferred-styles"); var replacement = document.createElement("div"); replacement.innerHTML = addStylesNode.textContent; document.body.appendChild(replacement); addStylesNode.parentElement.removeChild(addStylesNode); }; var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); }); else window.addEventListener('load', loadDeferredStyles);</script></body></html>

Rozmiar :	34.7 MB
Rozszerzenie:	pdf

dareks_