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ę.
(11 głosów, średnia: 5,00 na 5)
Loading...Komentarze: 12 komentarzy
Kliknij tutaj, aby anulować odpowiadanie.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.
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.
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
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.
- Bootstrap 3 (47)
- Bootstrap 4 (3)
- Breadcrumbs (1)
- Buttony (5)
- CSS (15)
- Etykiety (2)
- Formularze (4)
- Ikony (1)
- JavaScript (5)
- Karuzela / Slider (1)
- Klasy pomocnicze (1)
- Komponenty (20)
- Lista rozwijana / dropdown (2)
- Listy (1)
- Media (1)
- Menu (2)
- Modal (1)
- Obrazy (2)
- Panele (2)
- Paski postępu (1)
- Powiadomienia (1)
- Rusztowanie szablonu (3)
- Studnia (1)
- Tabele (1)
- Tworzenie strony www (2)
- Typografia (2)
- Uncategorized (1)
- Wprowadzenie (9)
- Zakładki (1)
