Inne

Kurs Twitter Bootstrap – #1 teoria i pierwsze kroki

Równolegle z kursem jQuery, którego postanowił rozpocząć Mateusz, ruszam z nowym cyklem poradników na temat coraz bardziej popularnego framework’a, jakim jest Twitter Bootstrap. Jednym z kroków milowych dla Bootstrap’a było wykorzystanie go w nowej odsłonie CMS Joomla! 3 – dzięki temu posunięciu zdobył kolejnych zwolenników, pośród twórców stron internetowych (jak i autorów szablonów dla J!3). Właśnie ta rosnąca popularność i prośby kilku czytelników skłoniły mnie do przybliżenia dobrodziejstw tego rozbudowanego narzędzia. Jestem świadom tego, że materiału do przekazania jest naprawdę dużo, postaram się jednak bardzo dokładnie opisywać każdą czynność, wzbogacając kurs także w materiały wideo. Jak to zwykle bywa na początku, musimy razem przejść przez część teoretyczną. Postaram się przekazać najważniejsze informacje dość treściwie, tak aby każdy z Was miał solidne podstawy pod dalszą część praktyczną.

Jak zwykle proszę o wskazówki i komentarze, które zostawiać możecie na dole kazdego artykułu. Tym czasem zapraszam do lektury!

Słowem wstępu

Czym jest Twitter Bootstrap? Tego mówić chyba już nie powinienem. Dla tych jednak, którzy przybyli tu przez przypadek powiem w skrócie, że jest on frameworkiem HTML5, CSS3, JS (jQuery). Zawiera on w sobie mnóstwo sformatowanych, gotowych do wykorzystania elementów, takich jak: rozwijane menu, tabele, formularze, slidery, buttony, ikony i wszelkie inne składowe HTML’a. Dla mnie jednak największą zaletą jest Responsive Web Desgin, którego wspiera TB (Twitter Bootstrap). Za jego pomocą budowane przez nas witryny będą świetnie wyglądały na każdym rodzaju wyświetlacza.

Struktura plików Twitter Bootstrap

Jak zobaczycie poniżej, do naszej witryny wystarczy podłączyć 2 pliki – jeden jest arkuszem CSS, a drugi plikiem JavaScript. Do wyboru mamy oczywiście dwie ich wersje (zwykłą, oraz skompresowaną, która nie zawiera żadnych zbędnych spacji, znaków nowej lini, etc.). W taki oto sposób prezentuje się schemat pełnego framework’a TB:

Zawartość framework’a TB

Twitter Bootstrap jest posiada wszystkie (?) potrzebne elementy, które może wykorzystać twórca stron internetowych. Począwszy oczywiście od budowy w HTML5, po formatowanie w zintegorwanym języku CSS3, na dodatkowych komponentach wykorzystujących JavaScript (jQuery). Autorzy narzędzia podzielili jego wyposażenie na kilka głównych kategorii:

Scaffolding

Dosłownie „rusztowanie”, a w praktyce fundament, na którym opiera się framework. W tej części zdefiniowane są globalne style dla strony, zresetowane domyślne ustawienia CSS’owe przeglądarek oraz określone kolory tła i odnośników (linków). Dodatkowo znajdziemy tu ustawienia dotyczące systemu Grid Layout (odpowiada on za tworzenie kolumn na stronie), a także (w wersji pełnej) dwa proste, wbudowane layouty.

Base CSS

Tutaj znajdziemy opracowane style dla wszelkich elementów z języka HTML5, takich jak typografia, tabele, formularze czy buttony. Dodatkowo zdefiniowano też klasy, zawierające bardzo ciekawe ikony z paczki Glyphicons.

Components

W tej części zgromadzono podstawowe style dla elementów interfejsu, takich jak karty z treścią, panele nawigacyjne, okienka allert’ów (informacyjne, ostrzegawcze, błędu), nagłówki i wiele, wiele innych.

JavaScript Plugins

Jeżeli potrzebujemy interaktywnych elementów takich jak slidery, okienka akcji, tooltip’y, rozwijane menu, to właśnie te elementy zdefiniowano w tej kategorii.

Lista wszystkich komponentów

Jeżeli znamy już główne kategorie, to po połączeniu ich razem otrzymamy bardzo rozbudowaną listę komponentów i JavaScript’owych pluginów zamieszczonych w Twitter Bootstrap. Całe zestawienie przedstawiam poniżej.

Nazwa Podgląd
Button groups
Button dropdowns
Navigational tabs
Navbar
Labels
Page headers
Thumbnails
Alerts
Progress bars
Modals
Dropdowns
Tooltips
Popovers
Accordion
Carousel
Typeahead

Pobieranie paczki Twitter Bootstrap

Nie jest to żadna filozofia, jednak multum mozliwości może przyprawić nas o zawrót głowy. Mamy dwie możliwości – albo pobieramy wersję pełną framework’a, albo „tworzymy” wersję spersonalizowaną. W tej drugiej możliwości możemy ustalić co dokładnie będziemu używać, a także zdefiniować podstawowe parametry naszego przyszłego szablonu. W kursie skorzystamy z pierwszej mozliwości, dlatego też przejdźmy na stronę http://twitter.github.com/bootstrap/ i pobierzmy paczkę kliknięciem w przycisk „Download Bootstrap”. Jeżeli już mamy ją u siebie na dysku, rozpakujmy pliki do katalogu, na którym będziemy pracować podczas kursu Twitter Bootstrap.

Postawowy szkielet szablonu

Jak już wspomniałem wcześniej, wystarczy podpiąć dwa pliki. Arkusz CSS i Pluginy JS. W dużym skrócie wygląda to mniej więcej w ten sposób:

<!DOCTYPE html>
<html>
    <head>
    <title>Bootstrap 101 Template</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
    </head>
    <body>
    <h1>Hello, world!</h1>
    <script src="https://code.jquery.com/jquery-latest.js"></script>
    <script src="js/bootstrap.min.js"></script>
    </body>
</html>

Powyższy kod wklejmy do pliku tekstowego, zapisując go jako index.html, a następnie zapiszmy go w katalogu, do którego wrzuciliśmy TB.

Zakończenie

W tej części przybliżyłem Wam wszelkie składowe framework’a Twitter Bootstrap. Dzieki zdobytej dziś wiedzy możemy bez przeszkód przejść do kolejnych części, w których w praktyce nauczymy się tworzyć ładne, responsywne witryny internetowe. Kiedy zaczynałem swoją przygodę z TB sądziłem, że jest to skomplikowana „zabawa” z webmasterką. Wszystko okazało się jednak bardzo intuicyjne i bajecznie proste.

Jeżeli macie jakieś propozycje dot. dalszych części kursu, zachęcam Was do komentowania. Już dzisiaj zapraszam do kolejnej części.

komentarzy 26

  • Awatar
    Mr.Mr

    19 stycznia 2013 17:36

    Widzę, że teraz na webroad same tutoriale :) Oby nam czasu i sił starczyło na to wszystko :)

    Odpowiedz
    • Awatar
      zxcasd

      9 października 2014 10:55

      i oby jak najwięcej takich tutków

      Odpowiedz
  • Awatar
    DMati

    19 stycznia 2013 20:38

    Ja tam wolę Foundation :)

    PS będzie o narzędziach do Bootstrap jak przykładowo Bootstrap Magic?

    Odpowiedz
    • Awatar
      Michał Kortas

      20 stycznia 2013 16:21

      Nie wiem jeszcze dokładnie co będę poruszał w kursie, ale postaram się omawiać jak najszerzej tematy związane z Bootstrap’em.

      Odpowiedz
  • Awatar
    hub33k

    20 stycznia 2013 15:55

    W zakończeniu chyba powinno być „responSywne” a nie „responywne” :)

    Odpowiedz
  • Awatar
    Dominik Kucharski

    21 stycznia 2013 10:56

    Właściwie to szkoda, że kurs opiera się na spersonalizowanej paczce. Najlepsza zabawa jest przy wykorzystaniu LESS :-)

    Odpowiedz
  • Awatar
    Łukasz

    26 stycznia 2013 15:07

    Widzę, że i szablonik zmienił się na Bootstrapowy :)
    Czekam na kolejne odcinki kursu.

    Odpowiedz
    • Awatar
      Michał Kortas

      26 stycznia 2013 21:36

      Dokładnie :)
      Kolejną część kursu zaplanowałem jakoś zaraz po niedzieli, jak tylko będę po egzaminach na sesji.
      Pozdrawiam!

      Odpowiedz
      • Awatar
        Mariusz Kozłowski

        19 lutego 2013 21:10

        Pojawią się następne części? :)

        Pozdrawiam

        Odpowiedz
      • Awatar
        Michał Kortas

        19 lutego 2013 21:19

        Witam, tak – będą. Muszę wszystkich przeprosić za zwłokę, ale nawał pracy nie pozwala mi w 100% skupiać się nad wortalem. Mam jednak nadzieję, że za kilka dni wypuszczę kolejne części. Pozdrawiam serdecznie!

        Odpowiedz
      • Awatar
        Łukasz

        14 marca 2013 22:24

        Dziękujemy za informację. Powiem szczerze, że osobiście Cię rozumiem :)

        Odpowiedz
      • Awatar
        Michał Kortas

        14 marca 2013 22:30

        Mam dla Was dobrą informację, że kolejna część jest już gotowa. Prowadzenie kursu przejął mój kolega Marcin i od razu są tego efekty. Jutro/pojutrze najpóźniej ją opublikuję, bo mam ją na skrzynce, ale jestem daleko od komputera ;-)

        Odpowiedz
  • Awatar
    Mariusz Kozłowski

    8 lutego 2013 01:03

    Ciekawe, czekam na więcej ;)
    Pozdrawiam

    Odpowiedz
  • Awatar
    feamoignargfaionakfj9ajfopamjv

    8 lutego 2013 20:37

    Kiedy można liczyć na kolejne części?

    Czym się różni wersja podstawowa od spersonalizowanej skoro w tej drugiej i tak zaznaczasz wszystkie opcje?

    Odpowiedz
    • Awatar
      Michał Kortas

      11 lutego 2013 21:11

      Akurat w przypadku zaznaczania wszystkiego niewiele się różnią od siebie. Tyle, że w wersji spersonalizowanej generowany jest automatycznie nasz arkusz stylów (z podstawowymi własnościami, które wpisujemy w generatorze). Skorzystałem z tej wersji, aby pokazać multum opcji, na jakie mamy wpływ już od samego początku.

      Ciężko u mnie z czasem, ale druga część jest już na ukończeniu.

      Odpowiedz
      • Awatar
        ja

        21 lutego 2013 15:14

        Czekamy ziomek i czekamy ;-)))

        Odpowiedz
  • Awatar
    wódz :)

    27 lutego 2013 22:55

    Nie doczekamy się chyba kolejnej wersji tutka :/ a szkoda, bo temat ciekawy i mógłby osoby nie znające specjalnie języka obcego (tak jak mnie) poratować :)

    Odpowiedz
    • Awatar
      Mr.Mr

      27 lutego 2013 23:33

      nie trać nadziei :D

      Odpowiedz
  • Awatar
    Dariusz

    5 czerwca 2013 22:50

    Witam, wszystkich potrzebuje pomocy w związku z framework Twitter Bootstra. Mam dwa zadania do zrobienia a ja kompletnie sie na tym nie znam. BARDZO PROSZE O POMOC.. Moj e-mail Darioo292@wp.pl. Oczywiście za tą przysługe zapłace.

    Odpowiedz
    • Awatar
      Mr.Mr

      6 czerwca 2013 14:15

      Wejdź na nasze forum i napisz o co chodzi. Może uda się pomóc za darmo ;)

      Odpowiedz
  • Awatar
    Mike

    2 sierpnia 2013 13:43

    Witam, mam problem z motywem wykorzystującym framework Bootstrap. Na jednej ze stron używam Collapse. Ale nie wydaje mi się, że dziwnie działa:
    1) domyślnie 1. box jest otwarty (reszta zamknięte)
    2) klikam np 2. lub 3.,4. i otwiera się, ale jednocześnie 1. się zamyka…!! Dlaczego zawsze 1. się zamyka? Muszę spowodować żeby ten pierwszy się nie zamykał. Pomożecie? Kontakt: michalmałpapiekne-strony.pl

    Pozdrawiam bootstrapowców:)

    Odpowiedz
  • Awatar
    bjui

    14 listopada 2013 12:13

    jak zrobic zeby dialaly wyskakujace okienka?

    Odpowiedz
  • Awatar
    damper20

    16 czerwca 2014 01:13

    żywiołowa dyskusja o niczym jak to zwykle na forach

    Odpowiedz
  • Awatar
    asde

    9 października 2014 11:01

    Chętnie skorzystam z podpowiedzi, tyle że na worpdressie robię to troszke inaczej. Mianowicie pasowałoby zdefiniować odrębny style.css w którym należy umieszczać poszczególne klasy.

    W dalszej części, jako iż przedstawiasz to w htmlu należałoby wybrać jakiś konkretny styl który chcemy opracować. Wybrałbym coś a’la WEBroad, statyczny navbar z trzema kolumnami, jedna jako treść postów.

    Odpowiedz

Zostaw odpowiedź