Bootstrap tutorial logo

Naszą przygodę zaczynamy od pobrania plików niezbędnych do korzystania z Bootstrapa. Przechodzimy na stronę Klik i pobieramy paczkę z ostatnią wersją Bootstrap: Po ściągnięciu, wypakowujemy w wybranym przez siebie miejscu. Struktura wewnątrz folderu powinna wyglądać tak: Kolejnym etapem jest otworzenie naszego edytora tekstu i stworzenie nowego pliku oraz wklejenie do niego podstawowego szablonu Bootstrapa: Tak […]

Czytaj!

W tym poście opiszę budowę rusztowania szablonu czyli elementów, które tworzą szkielet strony i wewnątrz których będziemy zamieszczać inne elementy. Kontener Jak pewnie zauważyliście, większość stron w Internecie nie jest całej szerokości okna przeglądarki a posiada puste miejsca po bokach. Rozwiązanie takie zwiększa czytelność strony i jest standardową praktyką przy tworzeniu stron. Bootstrap oferuje klasę […]

Czytaj!

Gdy chcemy stworzyć tylko jedną kolumnę o szerokości 4 i na dodatek wyśrodkowaną nie musimy tworzyć pustej kolumny z klasą .col-md-4 a następnie kolejnej kolumny albo tworzyć dodatkowych klas CSS. Służy do tego klasa .col-md-offset-*, która tworzy nam margines po lewej o wybranej szerokości. Oczywiście klasa .col-md-offset-* może przyjmować wartości od 1 do 11 i […]

Czytaj!

Podczas zagnieżdżania kolumn należy zapamiętać, że każdy „poziom” niżej znów może zmieścić 12 kolumn. Na przykład tworzymy 2 kolumny o szerokości 6, w każdej z nich możemy zmieścić po 2 kolumny o szerokości 6 a w nich kolejne. Myślę, że przykład doskonale pokazuje o co mi chodzi. Strona z przykładami

Czytaj!

Nagłówki Możemy korzystać ze wszystkich nagłówków HTML od <h1> do <h6> h1, Nagłówek H1 h2, Nagłówek H2 h3, Nagłówek H3 h4, Nagłówek H4 h5, Nagłówek H5 h6, Nagłówek H6 Nagłówki z małym tekstem Jeśli wewnątrz dowolnego nagłówka od <h1> do <h6> umieścimy znacznik <small>…</small> otrzymamy „dopisek” do tytułu h1, Nagłówek H1 Dopisek h2, Nagłówek H2 […]

Czytaj!

W poprzednim wpisie znalazło się prawie wszystko co można powiedzieć o typografii w bootstrapie. Do omówienia zostały jeszcze listy które postaram się przybliżyć poniżej. Lista nieuporządkowana Lorem ipsum dolor sit amet Ut enim ad minim veniam Duis aute irure dolor in reprehenderit Excepteur sint occaecat cupidatat Donec molestie elementum purus Lista uporządkowana Lorem ipsum dolor […]

Czytaj!

Czasami zdarza się tak, że chcemy wstawić opis jakiegoś znacznika HTML na naszej stronie. Niestety nie możemy tego zrobić zapisanie go w ostrych nawiasach gdyż wtedy jest to sygnał dla przeglądarki aby go interpretować a nam zależy jedynie na wyświetleniu. Tutaj z pomocą przychodzą tagi <code> oraz <pre>. Pamiętajmy, że aby wyświetlić ostre nawiasy wewnątrz […]

Czytaj!

Jak wiemy tabele znajdują swoje zastosowanie bardzo często. Bootstrap posiada kilka klas które umożliwiają ich dostosowywanie a także zapewniają estetyczny wygląd. Podstawowa tabela Tabele tworzymy poprzez HTMLowy znacznik <table>…</table> ale wystarczy dodać do niego klasę .table by uzyskać w niej dopełnienie oraz poziome linie oddzielające poszczególne wiersze. # Imię Nazwisko 1 Jan Kowalski 2 Jakub […]

Czytaj!

Na naszych stronach internetowych bardzo często korzystamy z formularzy. Służą one do wysłania wiadomości, zostawienia komentarza, wyszukiwania czy zapisywania się do newslettera. Skoro ten tutorial posiada taki wpis to znaczy, że bootstrap posiada jakieś ułatwienia w ich stosowaniu. Podstawowy formularz Wstępnie pokażę jak zrobić prosty formularz z polem do podania adresu email, „zakropkowanym” hasłem, polem […]

Czytaj!

W poprzednim wpisie pokazałem jak tworzyć podstawowe formularze ale nie opisałem jakie rodzaje pól można w nich stosować. W tym poście znajdziecie na to odpowiedź. Podstawowe pole formularza Jest to pole które w którym zwykle wpisujemy swoje imię, login, hasło, adres email itp. Tworzymy je poprzez znacznik <input> Pola formularza są zgodne ze wszystkimi znacznikami <type> […]

Czytaj!

Formularze to dosyć rozbudowany temat w bootstrapie, pokazałem już jak je tworzyć oraz jakie pola mogą zawierać. Teraz postaram się przybliżyć opcje które zmieniają ich wygląd czy dodają nowe funkcjonalności. Statyczne pole formularza Czasami w naszym formularzu chcemy podać stałą wartość np. Mail na jaki będzie wysłana wiadomość. Można to uzyskać w formularzu z opisami […]

Czytaj!

Do określania wysokości pól formularza korzystamy z dwóch klas .input-lg, która jak można się domyślać powiększa. Oraz .input-sm, która zmniejsza wielkośc pola w formularzu. W celu zmiany szerokości pól formularza będziemy korzystać z dobrze nam znanych klas jak .col-lg-* Zmiana wysokości pól formularza input-lg Standardowa wielkość input-sm Zmiana szerokości pól formularza Standardowo wszystkie pola formularzy […]

Czytaj!

Gdy omówiliśmy już formularze to dobrze było by jakoś dane które do nich wprowadzamy wysłać do serwera. Bootstrap pozwala nam skorzystać z kilku gotowych i estetycznych przycisków, których listę znajdziecie poniżej. Aby wyświetlić button używamy znaczników <a class=”btn” href=”…”>…</a> lub <button class=”btn”>…</button> Klasy przycisków Button Klasa (class=” „) Standardowy przycisk class=”btn btn-default” Primary class=”btn btn-primary” […]

Czytaj!

Twitter Bootstrap udostępnia 3 klasy które pozwalają zaokrąglić rogi obrazka, wyświetlić go w kółku oraz dołożyć ramkę by wyglądał on jak polaroid. Normalny obrazek Zaokrąglenie rogów Wykonujemy poprzez dodanie klasy .img-rounded Obraz w kółku Wykonujemy poprzez dodanie klasy .img-circle Polaroid Wykonujemy poprzez dodanie klasy .img-thumbnail

Czytaj!

Większość stron internetowych posiada na górze menu. Jest to pewien standard i internauci są do niego przyzwyczajeni. W tym artykule pokażę jak wykonać menu z linkami, formularzem, i listą rozwijaną. Całość menu Najpierw pokażę cały kod menu stron, następnie będę opisywał jego elementy. Po pierwsze jeśli chcemy by nasze menu nie było na całą szerokość […]

Czytaj!

Nasze menu może trzymać się góry lub dołu strony mimo jej przewijania, może też mieć szerokość całej strony niezależnie od wymiarów okna. Dodatkowo pokażę jak zrobić menu które zmienia swój wygląd i „upakowuje” swoje opcje w widoku mobilnym. Przyklejone górne menu Aby górne menu było zawsze widoczne na górze strony pomimo jej przewijania, do diva […]

Czytaj!

Pojawiła się kolejna wersja Bootstrapa, co prawda na razie tylko RC (Release Candidate) czyli wersja która jeszcze nie finalna ale spokojnie można z niej korzystać. Jeśli korzystamy z wersji ściągniętej na dysk, możemy pobrać nowe wydanie. W przypadku korzystania z serwerów CDN można skorzystać z następujących adresów: W nowej wersji istnieje inny zapis kolumn w […]

Czytaj!

To jest opis pierwszego slajdu To jest opis drugiego slajdu To jest opis trzeciego slajdu Karuzela czy też slider służy do tworzenia galerii obrazów które przewijamy za pomocą strzałek, bądź robi się to automatycznie. Zwykle wykorzystywana jest ona w głównej części strony gdy chcemy na przykład pochwalić się swoim portfolio bądź przekazać informacji o kilku […]

Czytaj!

Przy tworzeniu menu strony pokazałem już jak zrobić rozwijane listy. Oczywiście można je stosować także do buttonów oraz pól formularzy. W tym wpisie pokażę podstawowy kod który można później implementować w dowolnych elementach. Lista rozwijana Lista musi być zamknięta w jakimś divie który określa czy ma być dołączona do buttonów, menu czy pól formularzy <div […]

Czytaj!

Pojawiła się stabilna wersja Bootstrap3 więc teraz wszystkie wpisy już na pewno będą się na niej opierały. Postaram się też jak najszybciej opisać wszystkie różnice pomiędzy wersją 2.3.2 a 3.0.0. Jeśli korzystacie w swoich stronach z serwerów CDN oto ich adresy z najnowszą wersją:

Czytaj!

Jak już wiecie nowa wersja wprowadziła szereg zmian i udogodnień, część klas przestała mieć zastosowanie, część zmieniła swoje nazwy ale pojawiło się też szereg nowych. Poniższe tabele pokazują różnice pomiędzy Bootstrap 2.x a Bootstrap 3.0 Najważniejsze zmiany klas Tabela pokazuje jak nazywały się klasy w 2.3.2 a jak nazywają się w 3.0 Bootstrap 2.x Bootstrap […]

Czytaj!

Przyciski o których pisałem tutaj nie muszą być pojedyncze, możemy tworzyć z nich grupy, grupy grup, ustawiać je w pionie i zmieniać ich rozmiary. I właśnie o tym będzie ten wpis. Grupowanie przycisków Grupę przycisków tworzymy poprzez zamknięcie ich w divie z klasą .btn-group. Bootstrap sam zadba by pierwszy i ostatni z nich miały zaokrąglone rogi […]

Czytaj!

Dłuższy czas nie pojawiało się nic nowego. Niestety ale praca, szkolenia itp itd nie pozwoliły mi się skupić na blogu. Mam nadzieję, że teraz nadrobię te kilka straconych miesięcy. Myślę też nad stworzeniem portalu typu Q&A albo forum gdzie będziecie mogli wrzucać swoje pomysły na wykorzystanie bootstrapa oraz pytać w razie niejasności. Z racji tego, […]

Czytaj!

Gdy strona zawiera podstrony doskonałym rozwiązaniem są tzw. „okruszki chleba” czyli komponent pokazujący w którym miejscu aktualnie się znajdujemy. Oczywiście trzeba do nich podpiąć na przykład odpowiedni kod w javascripcie by przeglądarka wiedziała który „okruszek” podświetlić ale po te informacje odsyłam na przykład na stackoverflow Nasza nawigacja jest oczywiście gotowym komponentem w bootsrtrapie i wystarczy […]

Czytaj!

Nie raz zauważyliście, że na stronie znajduje się pasek z numerami kolejnych podstron (np. kwejk) albo w przypadku blogów można znaleźć linki prowadzące do poprzedniego / następnego wpisu. Oczywiście tutaj również bootstrap posiada gotowe komponenty które pomagają nam stworzyć właśnie takie paginacje. Standardowa paginacja « 1 2 3 4 5 » Paginację tworzymy poprzez dodanie […]

Czytaj!

Nie raz zdarza się, że chcemy przypiąć do jakiegoś pola etykietkę która będzie nam podpowiadać, informować o czymś czy na przykład wskazywać do jakiej kategorii należy wpis czy link. W bootstrapie mamy gotowy komponent który tworzy etykiety w różnych kolorach i wielkościach. Wielkość etykiety definiujemy poprzez zamknięcie jej w znacznikach h1..h6 a sama składnia etykiety […]

Czytaj!

Temat właściwie bardzo krótki. Czasami chcemy by obok jakiegoś pola pojawiała się wartość np. nie przeczytanych wiadomości, zgłoszeń, uwag, problemów itp. Tutaj z pomocą przychodzi mała „odznaka” którą umieszczamy tuż obok tekstu. Jej kod także nie jest trudny, wszystko czego trzeba użyć to: Co da nam: Nowe wiadomości: 42 Aby zmienić sobie kolor plakietki na […]

Czytaj!

Zastosowaniem jumbotrona jest skupienie uwagi potencjalnego gościa twojej strony na danej akcji. Podobnie jak na mojej stronie głównej jest właśnie jumbotron z czerwonym przyciskiem zachęcającym do wejścia dalej (Może nie do końca bardzo zachęca bo zbyt słabo wyróżnia się na stronie;)y ale nie będziemy tu dyskutować o tzw. „call to action”). Jumbotron tworzy szary prostokąt […]

Czytaj!

Tutaj również krótki tekst. Tym razem o tworzeniu estetycznego nagłówka strony Przykładowy nagłówek Krótki opis nagłówka Jak widzicie można otrzymać estetyczny nagłówek strony z poziomą linią oddzielającą go od reszty tekstu. Ja zastosowanie dla tego rozwiązania znalazłem w menu po prawej. Całość kodu wygląda następująco: I to by było na tyle w tym temacie:) Na […]

Czytaj!

Jeśli korzystacie z CDNów (czyli ściągacie Bootstrapa z zewnętrznych serwerów a nie z waszego), na tej stronie znajdziecie zawsze aktualne wersje. Bootstrap CDN

Czytaj!

Przykładowo gdy tworzymy galerię zdjęć to dobrze było by dodac do nich jakieś ramki by całość wyglądała estetycznie. Oczywiście jak już się domyślacie i tu mamy gotowe rozwiązanie. Odpowiednią ilość zdjęć zamykamy w rzędzie <row> a następnie każde zdjęcie zamykamy w odpowiadającej nam szerokością kolumnie. Ja w przykładzie zamknąłem 4 zdjęcia w widoku dla komputera […]

Czytaj!

Odkąd Internet nie tylko serwuje treści ale umożliwia „interakcję” z użytkownikiem, nieodzownym elementem są wszelkiej maści powiadomienia. Dostajemy informację o wysłaniu maila, o dodaniu produktu do koszyka, o poprawnie wykonanym przelewie bankowym itp. Bootstrap udostępnia 3 rodzaje powiadomień, które można wykorzystać na swojej stronie. Zwykłe powiadomienie Jest to zwykły div z zadanym przez nas kolorem […]

Czytaj!

Niejednokrotnie przesyłając coś na serwer bądź wypełniając kolejne etapy formularzy można zobaczyć paski postępu. Kolejnym przykładem jest chwalenie się na swoim potrfolio w jakiej ilości zna się jakąś technologię. Na upartego możecie nawet zastosować te paski jako alternatywę dla <hr> :). Paski mają „standardowe kolory” bootstrapa nadawane poprzez klasy (info, warning, success itd.), mogą być […]

Czytaj!

Właściwie to nie wiem jak dokładnie nazwać ten element, więc opiszę do czego można go zastosować Element "media" można wykorzystać jako szablon komentarzy, listę z miniaturką np. artykułów czy galerii zdjęć, czytnik RSS czy tweetów Obrazki po lewej Nagłówek Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras […]

Czytaj!

Zawsze na naszej stronie korzystamy z jakiś list, czy są to listy wpisów na blogu, oferta naszej firmy, lista użytkowników portalu, lista opcji itp itd. Bootstrap posiada kilka gotowych styli dla list, które możemy zastosować wg swego uznania do stworzenia różnych list. Podstawowy przykład: Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta […]

Czytaj!

Panele są elementami wewnątrz których możemy zamieszczać teksty, listy, tabele itp. Ciężko mi opisać ogrom zastosowań tego elementu. Ja używam go na blogu jako listę wpisów. Na innych moich stronach znajduję dla niego zastosowanie jako elementy sidebaru, „pojemnik” na aktualności bądź promocje na stronie głównej. Na pewno jak tylko zobaczycie jak on wygląda, każdy znajdzie […]

Czytaj!

Według oficjalnej dokumentacji „studnia” ma sprawiać wrażenie, że element jest w dołku. Ja jakoś tego nie widzę, dla mnie studnia jest po prostu szarą ramką. Co do zastosowania, hmm na przykład można w niej zakmnąć formularz kontaktowy albo zastosować ją na dole artykułu i wpisać w niej podsumowanie lub zachęcić użytkownika do wykonania jakiejś czynności. […]

Czytaj!

Niejednokrotnie zamieszczamy na naszych stronach filmy np. z YouTube. Wklejenie kodu skopiowanego prosto ze strony powoduje, że film wyświetla się w ramce o sztywno określonej wielkości, co oczywiście jest efektem niepożądanym na responsywnych stronach www. Oczywiście można zastosować sztuczki w arkuszu stylów i wymusić na ramce responsywność, ale po co, skoro twórcy Bootstrapa zrobili to […]

Czytaj!

W tym wpisie pokażę jak stworzyć „zakładki/karty” czyli element w którym widzimy jeden tekst/obrazek/cokolwiek i możemy przełączać się pomiędzy innymi bez przeładowywania strony. Najlepiej pokaże to przykład. Podstawowy przykład 1 zakładka 2 zakładka 3 zakładka 4 zakładka Zawartość pierwszej zakładki Zawartość drugiej zakładki Zawartość trzeciej zakładki Zawartość czwartej zakładki Zakładki składają się z dwóch elementów, […]

Czytaj!

Zaczniemy od kolorowania tekstu i nadawania mu „ramki” w standardowych bootstrapowych kolorach o których pisałem już wielokrotnie. Kolorowanie tekstu Nadanie kolorów polega na dodaniu wymienionych poniżej klas do paragrafów, spanów, emfaz lub hiperłącz. class=”text-muted” class=”text-primary” class=”text-success” class=”text-info” class=”text-warning” class=”text-danger” Nadawanie tła dla tekstu Podobnie jak powyżej dodajemy odpowiednią klasę, przykłady podane poniżej   Lorem ipsum […]

Czytaj!

Ten wpis powinien pojawić się na początku kursu ale jakoś mi umknął więc będzie teraz:) Gdy tworzymy responsywną stronę internetową to normalne jest, że ukrywamy niektóre elementy na różnych urządzeniach, przykładowo slider jest praktycznie nieczytelny na smartfonach więc nie musimy go wyświetlać. Albo w drugą stronę, przykładowo robimy stronę dla pomocy drogowej, fajnie by było […]

Czytaj!

Ten wpis będzie instrukcją jak stworzyć wyskakujące okienko (pop-up) wewnątrz którego możemy umieścić formularz kontaktowy, filmik, zdjęcie lub zachęcić kogoś do zapisania się do newslettera lub polubienia strony na Facebooku. Sami musicie przyznać, że wyskakujące okienka są jednym z najbardziej denerwujących elementów w Internecie więc nie ładujcie ich zaraz po wejściu na stronę:) Pop-up / […]

Czytaj!

Jak to zwykle bywa po urlopie okazuje się, że nazbierało się tyle zaległości, że nie sposób sobie z nimi szybko poradzić. Ale znalazłem chwilę czasu by przygotować dla Was opis kolejnego elementu jaki oferuje Bootstrap. Polska nazwa to chyba akordeon, działanie polega na pokazywaniu jedynie klikniętej części z jednoczesnym ukrywaniem tej poprzednio wyświetlonej. Doskonale sprawuje […]

Czytaj!

Nieraz spotykamy się z sytuacją gdy w tekście zamieszczamy linki ale użytkownikowi nie do końca mówią one do czego służą. Fajnym rozwiązaniem jest wyświetlenie małego dymka, który podpowie co dokładnie kryje się pod odnośnikiem aby osoba przeglądająca naszą stronę dokładnie wiedziała w co klika. Aby wyświetlić owe dymki musimy, prócz dopisania klasy do elementu, użyć […]

Czytaj!

Podobnie jak w przypadku podpowiedzi do linków, czasami chcemy pod jakimś linkiem wyświetlić użytkownikowi informację. Tym razem dłuższa, którą na przykład może być wyjaśnienie jakiegoś pojęcia bez konieczności przechodzenia na inną podstronę. Dzięki czemu nasz czytelnik nie musi się odrywać od całego tekstu tylko dostanie wyjaśnienie w postaci chmurki. Tutaj również musimy skorzystać z odrobiny […]

Czytaj!

Kilka dni temu miała premierę czwarta wersja Twitter Bootstrap. Twórcy pokazali dopiero wersję alpha, więc przed nami jest jeszcze minimum kilka tygodni czekania na pełną wersję. Pojawiła się natomiast już częściowa dokumentacja. Docelowo tak jak stworzyłem dla Was opis Bootstrapa w wersji 2 oraz 3 tak też oczywiście przygotuję opis wersji czwartej. Ale póki nie […]

Czytaj!

Pewnie wielu z Was tak ma, że kojarzy jakąś klasę w Bootstrapie lub zna jakiś element ale nie pamięta jego struktury HTML. W sumie od tego jest dokumentacja by nie musieć tego pamiętać:) Samo wyszukiwanie w dokumentacji czy na blogu zajmuje trochę czasu. Zainspirowany komentarzem jednego z czytelników stworzyłem dla Was coś w rodzaju cheatsheet czy […]

Czytaj!