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ść […]
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 […]
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 […]
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 […]
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 […]
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 […]
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 […]
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 […]
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 […]
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. […]
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 […]
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, […]