Bootstrap tutorial logo

Tworzenie strony WWW / Przykład dla Bootstrap 2

autor: Robert

21 lipca 2013

Poznaliśmy już podstawowe funkcjonalności Bootstrapa więc nastała pora stworzenia prostej strony internetowej która będzie z nich korzystała oraz postaram się przybliżyć kilka dodatkowych funkcjonalności. Niektóre z nich pojawiły się w poprzednich wpisach ale nie były omówione a niektóre pojawią się pierwszy raz.
Omawiać będę między innymi:

  • Rozwijane menu
  • Grupy przycisków
  • Przyciski z rozwijanym menu
  • Różne rodzaje nawigacji
  • Menu główne
  • Nawigację okruszkową (breadcrumb)
  • Dzielenie dokumentu na strony
  • Etykiety
  • „Hero-unit”
  • Elementy z obrazami
  • Paski postępu
  • Listy z obrazami
  • Ostrzeżenia
  • Itd…

Warto stworzyć sobie właśnie taką stronę która zawiera wiele powszechnie stosowanych elementów. Dzięki temu nie będziemy musieli przeglądać dokumentacji bootstrapa w poszukiwaniu funkcji której potrzebujemy a tylko otwieramy nasz wcześniej stworzony plik, kopiujemy co jest nam potrzebne i wklejamy do nowego dokumentu.

Poniżej znajduje się strona z kilkoma elementami o których będę pisał:
Przykładowa strona


Post się przydał? Oceń go proszę.
1 Gwiazdka2 Gwiazdki3 Gwiazdki4 Gwiazdki5 Gwiazdek (8 głosów, średnia: 5,00 na 5)
Loading...

Komentarze: 12 komentarzy

Paweł 24 lipca 2013 o 13:53

Dziękuję panie Robercie za pomoc przy robieniu strony internetowej. Czekam na więcej i naprawdę jestem wdzięczny ,że robisz to dla nas ;)

Odpowiedz
    Robert 24 lipca 2013 o 20:19

    Dziękuję za uznanie:) Staram się dodawać nowe wpisy jak tylko mam chwilę wolnego a z tym raz łatwo a raz ciężko. Kursu na pewno nie porzucę:) Mam także w planach dodanie poradnika jak stworzyć własny szablon WordPressa. Ale na wszystko przyjdzie czas:)

    Odpowiedz
Jarek 26 lipca 2013 o 16:36

Trafiłem tu przypadkiem, ale dowiedziałem się sporo nowych rzeczy :)
Mam jednak pytanie. Zauważyłem że w przykładowej stronie skrypt carousel zaczyna się przewijać automatycznie po kliknięciu w strzałkę do przewijania obrazków. Na oryginalnej stronie bootstrap jest tak ze obrazki przewijają się automatycznie zaraz po wczytaniu się strony. Próbuje zrobić pieerwszą stronę na tym freamworku i nie wiem właśnie jak uzyskać taki efekt.

Odpowiedz
    Robert 29 lipca 2013 o 08:08

    Co prawda jeszcze nie doszedłem w kursie do opisu karuzeli ale skoro jest potrzeba to już odpowiadam:)
    Aby karuzela obracała się automatycznie po wczytaniu strony należy użyć małego javascriptu:

          $('.carousel').carousel({
            interval: 5000
        })
    

    Gdzie interval: wartosc to czas w milisekundach po jakim ma nastąpić zmiana slajdu. Mam nadzieję, że o to chodziło.

    Odpowiedz
Karol 12 grudnia 2013 o 18:16

Dziękuje za to co pan dla nas robi!!
Czekam na więcej i jeśli można bo wiem że czasu jest coraz mniej prosiłbym o kontynuowanie tego poradnika co do tworzenia strony www

Odpowiedz
    Robert 13 grudnia 2013 o 10:15

    No właśnie ciągle problem z czasem. Ale pamiętam o tym kursie i jak tylko będzie chwila wolnego to pojawią się nowe wpisy:)

    Odpowiedz
Artur 4 marca 2014 o 12:51

Dobrze i przejrzyście opisane, oszczędziło mi sporo czasu. Z chęcią będę wracał :)

Odpowiedz
Maciek 29 marca 2014 o 01:17

Świetna robota.

Choć obecnie naukę zacząłem od obecnej wersii: 3.1.1, gdzie nazewnictwo zmieniono, to Pana materiał był bardzo pomocny.

Odpowiedz
Marek 21 listopada 2014 o 17:14

Super strona. Właśnie takiego tutoriala szukałem. Dużo ciekawych rzeczy. Już poleciłem kilku znajomym.

Odpowiedz
bartek 27 października 2015 o 23:44

ŚWIETNY KURS – DZIĘKI TAKIM LUDZIOM POLSKI INTERNET MOŻE SIĘ ROZWIJAĆ :)
WIELKIE DZIĘKI !

Odpowiedz
Kasia 14 kwietnia 2016 o 10:45

Witam Panie Robercie,
Zainteresowalam sie od niedawna Bootsrap freamwork i musze przyznac ze Pana strona jest bardzo pomocna, niestety jak dopiero pocztkujacy mam problem z dodawaniem zdjec. Wyglada to nastepujaco jak dodaje mojego autorstwa zdjecia (nie sciagniete z internetu) to wyswietla mi sie maly kwadrat z niebieskim polem w srodku. I teraz pytanie jest gdzie popelnilam blad? mam dokument z bootsrap i tam umiescila dokument-images ze zdjeciam zgodnie z powszechna teoria :) powinno pojawic sie automatyczne odczytywanie zdjec. Nie mam pojecia co zrobic a chciala bym stworzyc galerie zdjec…Bede wdzieczna za kazda wskazowke.
Pozdrawiam

Odpowiedz
    Robert 14 kwietnia 2016 o 11:04

    Zdjęcia nie pojawią się same na stronie. Trzeba w kodzie podać ścieżkę do nich. Jeśli w twojej strukturze masz folder /images to spróbuj wpisać <img src="/images/nazwa-zdjecia.jpg"> gdzie „nazwa-zdjecia.jpg” to oczywiście nazwa twojego obrazu. Pamiętaj, że nazwy plików są wrażliwe na małe/wielkie litery. Najwygodniej zmienić nazwę pliku na taką, która składa się tylko z małych liter i ewentualne spacje zamienić na myślniki.

    Odpowiedz