Bootstrap tutorial logo

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!

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!

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!

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!