Wykryto działanie AdBlocka!

Prawdopodobnie masz właczonego Adblocka. Korzystanie z bloga jest całkowicie darmowe. Jeśli jednak chcesz docenić prace autora, wyłacz blokowanie reklam dla tej witryny, aby jeszcze bardziej zmotywowac autora do dalszej pracy oraz częstszej publikacji artykułów.

Dziękuje :)

Treść główna bloga

Artykuły

Prosta strona internetowa w oparciu o Twitter Boostrap


Twitter BoostrapZ racji, że dość długo nie pisałem postanowiłem przedstawić gotowy i darmowy szablon strony internetowej w oparciu o Twitter Boostrap.
Wybrałem właśnie ten z wielu pomysłów na artykuł, ponieważ wiele osób nie potrzebuje złożonych klas w PHP czy też zaawansowanych skryptów w frameworku jQuery lecz gotowe rozwiązania, które można zastosować od zaraz.

Oto kod szablonu.

Na prośbę naszego czytelnika, Patryka, postanowiłem znacznie rozszerzyć ten wpis, ulepszyć kod oraz dodać opis tegoż kodu.

1. Alerty

W naszym kodzie mamy powyższy zapis. Klasa alert oznacza, że ma być stworzony div z jakąś informacją. W tym przypadku o używanych przez serwis cookie. Dzięki

Odwiedzający może zamknąć powiadomienie, jednak pojawi się ono podczas następnej wizyty.

2. Menu
Menu zostały wykorzystane elementy jQuery. Teraz można je zwijać i rozwijać. Menu zostało stworzone na liście typu „ul”.

3. Formularz
Bezpośrednio pod menu mamy przykładowy formularz wraz z dwoma buttonami. Wygląd formularzy tworzy się za pomocą takich klas jak:
– input-small: długość to 90px
– input-medium: długość to 150px
– input-large: długość to 210px
– input-xlarge: długość to 270px
– input-xxlarge: długość to 530px

Klas jest oczywiście o wiele więcej, ja przedstawiłem te najbardziej podstawowe.

4. Progessbar
Twitter Bootstrap umożliwia tworzenie tzw. progress bar’ów. Informują one, np o postępach w projekcie czy też szybkości kasowania plików. Istnieje kilka rodzajów progess bar’ów, na szablonie został przedstawiony tylko jeden.
Więcej można znaleźć na: http://twitter.github.io/bootstrap/components.html#progress

5. Slider
Jeśli chcemy stworzyć prosty slider możemy skorzystać z komponentu, który został udostępniony na oficjalnej stronie frameworka. Oczywiście można go nieco zmodyfikować, zmieniając domyślne ustawienia.
Więcej na http://twitter.github.io/bootstrap/javascript.html#carousel

6. Artykuły
Bootstrap udostępnia również klasy, które mogą być wykorzystane przy budowie systemu artykułów.
Są to między innymi etykietki.

Jej wygląd możemy dowolnie modyfikować.
Oto domyślne klasy Bootstrapa:
– label-success
– label-warning
– label-important
– label-info
– label-inverse

7. Buttony

W tym przykładzie zostały użyte trzy klasy:
a) btn -> definiuje, button
b) btn-small -> definiuje rozmiar buttona
c) btn-primary -> definiuje typ buttona

Inne rodzaje buttonów:
– btn: domyślny biały
– btn-info: informacja
– btn-success: powodzenie
– btn-warning: ostrzeżenie
– btn-danger: niebezpieczeństwo
– btn-inverse: odwrotność
– btn-link: zwykły link

8: Inne klasy
W Bootstrapie istnieje szereg funkcji, które nie są przypisane do konkretnych czynności, typu klasy dla buttonów, klasy dla slidera.

Oto kilka z nich:
– spanX: określa długość bloku, X to wartość od 1 do 12, gdzie 1 do najkrótszy a 12 to najdłuższy,
– pull-type: określa, w którym kierunku ma być przesunięty element. Wartości dla type to: left, right,
– well: tak zwana studnia, tworzy ładne obramowanie wokół elementu (posiada również podklasy,np: well-small),
– text-type: podobnie jak pull-type określa położenie tekstu, przyjmuje wartości: left, center, right,
– text-color: określa kolor tekstu,
– icon: w bootstrap’ie mamy mnóstwo ikon do wykorzystania, aby użyć którejś z nich stosujemy zapis <i class=”icon icon-ok”></i>

Podsumowanie
Przedstawiony tutaj szablon został zbudowany tylko i wyłączenie z komponentów jakie dostarcza Twitter Boostrap. Jeśli chcemy nieco zmienić naszą stronę możemy zmienić kolor buttonów lub użyć gotowych navbar’ów.

  • Witaj, często tutaj wchodzę ale rzadko się udzielam. Bootstrap to zbawienie dla użytkowników poznałem go praktycznie w 80% wzdłuż i w szerz, ale Twój artykuł nie mówi nic. Uważam, że powinieneś rozwinąć temat, jak choćby co daje nam „class=”span2,4,6,8” za co odpowiadają klasy, choćby opisać to w skrócie a na pewno zaciekawi to mocno czytających. Uważam, że gdybyś nakierował czytelnika na dropdowny i pokazał je w swoim prostym projekcie zrobił ze 2-4 tooltipy w tekstach umieszczonych na swojej przykładowej stronie, walnął alert taki prosty o cookies dla zaciekawienia ten artykuł miałby swój smak. To takie moje skromne uwagi na ten temat. Pozdrawiam użytkownik

    • Na Twoją prośbę rozszerzę ten wpis. Mam nadzieję, że innym także się przyda.

  • Bardzo fajny szablon. Przymierzam się do narzędzia divshot, bo jak wiadomo można tam w prosty sposób stworzyć własny szablon. W sumie stworzenie szablonu to jedno, ale włączenie go do np. WordPressa nie jest już takie proste. Wydaje mi się, że trzeba by było pozmieniać nazwy klas, aby wszystko działało. Pętle wpleć gdzieś tam w kod itd… Jak sądzisz? Sam używasz WP, więc może jakieś podpowiedzi? 🙂

    • Szczerze mówiąc nigdy nie robiłem szablonu pod WP na bootstrapie ale z pewnością gdzieś w najgłębszym zakamarku internetu znajdziesz jakiś fajny tutorial 🙂

  • Witam ponownie, teraz jestem zadowolony z Twojego wpisu jest czytelny, rozszerzony czytając go nawet ja znalazłem małą rzecz która jest przydatna a pomijałem ją. Początkujący myślę, że z chęcią zagłębią się w dobrodziejstwo jakie za-uploadowali nam geniusze z Twittera 😀

    Trochę od siebie wtrące, sam zamierzam stworzyć własny blog i portfolio właśnie w oparciu o Bootstrap + Responsive + WordPress to ciężkie zadanie jakiś podstawowy szkielet już mam a projekt jest całkowicie autorski. WordPress już znam ale przypomnę go sobie porządnie i zobaczymy co z tego wyjdzie. Myślę, że to może być ciekawa opcja. Co Ty o tym sądzisz Dominik?? 🙂

    • Co do bloga to stworzenie go w oparciu o bootstrap’a i WP będzie dobrym pomysłem. Dodatkowo aby nieco urozmaicić wygląd polecam tą stronę Klik. Zawsze to jakaś odskocznia od pierwotnego wzoru 🙂
      A co do portfolio to jednak ja nie używał bym bootstrap’a tylko stworzył jakiś oryginalny layout 🙂

      • Dzięki za stronę bardzo się przyda 🙂
        Co do reszty i tak myślę iść w stronę całkowitego responsive. Uważam, że stworzenie portfolia, galerii w wariantach 1-2-4 kolumny odpowiednio dla rozdzielczosci jest czymś dobrym z zachowaniem animacji. Ostatnio nawet mało obeznany w temacie stron klient zadał mi pytanie czyt jego strone jak i galerie będzie mógł sobie obejrzeć z Samsunga S4, więc to mnie nakierowało na 100% responsive. Niedługo przedstawię gdzieś mój pierwszy większy projekt responsive, jak założę sobie domene na bloga 🙂