Jak zaoszczędzić czas korzystając z Bootstrapa? Jak budować za pomocą gotowych elementów?

Co to jest Bootstrap?

Budowa stron internetowych przypomina budowę domu. Możesz każdy element zrobić sam lub korzystać z materiałów zrobionych przez innych, np.: kupić okno, drzwi, system alarmowy itd.

Z kupowanymi rzeczami bywają problemy:

  • nie zawsze jesteśmy w stanie określić ich jakość, np. wady okna wyjdą przy pierwszym ulewnym deszczu;
  • inni wiedzą o słabościach naszych materiałów (np. system alarmowy) i mogą to wykorzystać;
  • nie zawsze kupiony materiał dobrze pasuje akurat do naszego domu (np. drewniany dom z plastikowymi oknami).

Gotowe materiały pozwalają nam zaoszczędzić czas. Podobnie jest z kodem strony internetowej, która może się składać z gotowych materiałów.  Także tutaj występują te same problemy, np.:

  • nie zawsze jesteśmy w stanie określić ich jakość, np. czy kod jest napisany zgodnie z dobrymi praktykami. Długość kodu i ograniczony czas nie zawsze pozwala nam na dokładną analizę;
  • inni wiedzą o słabościach naszych materiałów, np. znając nasz kod mogą znaleźć błędy, które pozwalają włamać się na stronę internetową. Systemy zarządzania treścią (CMS) mają często dostępny publicznie kod źródłowy;
  • nie zawsze kupiony materiał dobrze pasuje do naszej strony. Bootstrap ma nam ułatwiać tworzenie strony, ale jeśli tego nie robi lub nie spełnia założeń projektu to nie powinniśmy z niego korzystać (niepotrzebny kod opóźnia wczytywanie strony). Jest teraz ogromna moda na korzystanie z wielu narzędzi wspierających. Narzędzia mają pomagać budować stronę internetową (dom), ale nie powinny utrudniać lub niepotrzebnie wydłużać zadania. Nie zawsze skomplikowane narzędzie jest odpowiednie do budowy prostej strony internetowej.

Bootstrap to taki gotowy zbiór materiałów, który umożliwia szybsze budowanie strony. Jest to kod napisany przez programistów Twittera oraz udostępniony za darmo (licencja MIT https://pl.wikipedia.org/wiki/Licencja_MIT).  Jest narzędziem odpowiedzialnym za wygląd strony, dlatego jest nazywany frameworkiem front-endu lub frameworkiem CSS (strony dostępne 16 października 2016 r.).

Dzięki niemu możemy:

  • Dodawać elementy na stronie, np.: przyciski, tabele, menu itd. Nie potrzebujemy Bootstrapa, aby stworzyć przycisk, ale dzięki niemu możemy je uatrakcyjnić wizualnie. Poniżej dwa przyciski, pierwszy to standardowy przycisk stworzony w języku HTML, a drugi przy pomocy Bootstrapa:

    Dwa przyciski z napisem zapisz. Po lewej standardowy przycisk na stronie, a po prawo większy stworzony za pomocą Bootstrapa

    Bootstrap w szybki sposób umożliwia nam urozmaicenie wyglądu przycisku/elementy strony. Możliwość skorzystania z gotowych przycisków powoduje, że możemy się z nimi spotkać na innych stronach.  

  • Stworzyć szablon strony, który sam się dostosowuje do różnych urządzeń, np.: komputera, tabletu, telefonu.
  • Tworzyć kod, który prawidłowo wyświetla się we wszystkich nowych przeglądarkach internetowych (Firefox, Opera, Chrome, Internet Explorer). Dotychczas bardzo dużo czasu zajmowało dostosowywanie kodu do różnych przeglądarek internetowych.

Są również alternatywy dla Bootstrapa (strony dostępne 16 października 2016 r.), np.:

Jak zrobić coś prostego w Bootstrapie?

Do korzystania z Bootstrapa będzie niezbędna podstawowa wiedza z zakresu tworzenia stron internetowych. Bootstrap jest cały czas rozwijany, więc są różne wersje. My użyliśmy wersji 3.3.7 (najnowszej 16 października 2016 r.). Instrukcja ściągnięcia Bootstrapa:

  1. Ściagamy pliki Bootstrapa ze strony autorów (strona dostępna 16 października 2016 r.). Klikamy na „Download Bootstrap” i zapisujemy pliki na pulpicie. Rozpakowujemy pliki i zmieniamy nazwę folderu na „bootstrap”.
  2. Otwieramy „Notatnik” w systemie Windows i zapisujemy go na pulpicie jako „strona.html” (kliknij, aby powiększyć – zwróć uwagę na „Zapisz jako typ” – „Wszystkie pliki” oraz „Kodowanie” ustawione na „UTF-8”):
    Okno do zapisania zawartości notatnika
  3. Po zapisaniu do notatnika wklej gotowy szablon strony:
    <!DOCTYPE html>
    <html lang="pl">
      <head>
        <meta charset="utf-8">
        <title>Moja stroan w Bootstrapie</title>
        <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
       </head>
      <body>
        <h1>Witaj</h1>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script src="bootstrap/js/bootstrap.min.js"></script>
      </body>
    </html>

Nowe rzeczy to:

  • <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
  • <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  • <script src="bootstrap/js/bootstrap.min.js"></script>

Pierwszy odpowiada za dodanie pliku ze stylami, które poprawiają wygląd stron. Drugi i trzeci odpowiadają za odpowiednie zachowanie się elementów strony, np. po kliknięciu na strzałkę element na stronie się przesuwa. Zwróć uwagę na dwie rzeczy:

  • wszystkie pliki mają w nazwie „min”. Oznacza to specjalną wersję pliku, której celem jest szybkie ściągnięcie na komputer/telefon/tablet Internauty. Kod w tych plikach nie jest łatwy do zrozumienia dla programisty, bo są usunięte komentarze, spacje. Nazwy zmiennych są jednoliterowe i trudno się zorientować co przechowują. Mniej znaków to szybsze ściągnięcie plików i szybsze prawidłowe działanie strony. Proces odchudzania plików nazywa się minifikacją.
  • Drugi element to biblioteka (czyli kod napisany przez innych). Służy ona do animacji i interakcji z internautą. Nie jest on częścią Bootstrapa, a dodatkowo nie mamy go na pulpicie tylko zaciągamy go z Internetu od Google. Zalecam jednak trzymanie wszystkich plików u siebie, ponieważ wszelkie problemy z dostawcą takiego pliku (Google) będzie negatywnie wpływał na działanie naszej strony. Problemami takimi może być: włamanie i podmiana pliku, usunięcie pliku, awaria strony.

Chcemy dodać dwa przyciski:

  • standardowy przycisk w języku HTML;
  • przycisk Bootstrap.

Dwa przyciski z napisem zapisz. Po lewej standardowy przycisk na stronie, a po prawo większy stworzony za pomocą Bootstrapa

Oto kod odpowiedzialny za te przycisku (wklej za znacznikiem „ <h1>Witaj</h1>„):

<button type="button">Zapisz</button>
<button type="button" class="btn btn-lg btn-primary">Zapisz</button>

Pierwszy kod to pierwszy przycisk (tradycyjny wygląd):

<button type="button">Zapisz</button>

Drugi kod to przycisk Bootstrapa.

<button type="button" class="btn btn-lg btn-primary">Zapisz</button>

Oba przyciski składają się z:

  • kontenera zawierającego przycisk: <button> i </button>;
  • napisu na przycisku: „zapisz”;
  • rodzaj przycisku (zwykły): type="button".

Jeśli chcemy zmienić wygląd przycisku to musimy poinformować przeglądarkę internetową, który element ma zmienić. W tym celu oznaczamy takie przyciski atrybutem. Już wcześniej dodawaliśmy atrybut, np. type="button". Teraz dodamy atrybut, który pozwoli przeglądarce zidentyfikować elementy do zmiany, np. dodając class="przycisk_kupuj". Nadanie klasy („class”) pozwoli przeglądarce poszukać w pliku CSS co ma zrobić z przyciskiem.

My nadajemy szereg dziwnych nazw, które narzuca nam Bootstrap:  class="btn btn-lg btn-primary".

Skąd wiemy jaki kod musimy dodać?

Możemy znaleźć to w angielskiej dokumentacji Bootstrapa (strona dostępna 16 października 2016 r.) lub książkach (strona dostępna 16 października 2016 r.) oraz na polskich stronach (strona dostępna 16 października 2016 r.).

Nasz kod składa się z: btn btn-lg btn-primary. Co on oznacza? Są tam trzy informacje:

  • btn – wyświetl w formie przycisku (ang. button – btn);
  • btn-lg -wyświetl duży przycisk (ang. large -lg)
  • btn-primary – wyświetl przycisk primary (ang. primary czyli podstawowy – jest on w kolorze niebieskim).

Jak zrobić coś fajnieszego w Bootstrapie?

  1. Grupa przycisków (przycisk „warzywa” pokazuje jak wygląda przycisk po najechaniu myszką):
    Przycisk Owoce, Warzywa i Słodycze
    <div class="btn-group" role="group" aria-label="Działy w sklepie">
      <button type="button" class="btn btn-default">Owoce</button>
      <button type="button" class="btn btn-default">Warzywa</button>
      <button type="button" class="btn btn-default">Słodycze</button>
    </div>
    Wpierw tworzymy przyciski: <button type="button" class="btn btn-default">Owoce</button>. Jest to przycisk analogiczny jak ten w pierwszym przykładzie, ale ma inną klasę: „btn btn-default” („btn-default” oznacza „przycisk domyślny” Bootstrapa – jest on szary.). Trzy przyciski teraz nie są zgrupowane w jedną całość. Dopiero wrzucenie ich do kontenera (<div> przyciski </div>) pozwoli na zgrupowanie ich w jedną całość. Niezbędne będzie nadanie klasy  "btn-group" (odpowiada za połączenie przycisków w całość). Zwróć uwagę, że w kodzie jest także role="group" aria-label="Działy w sklepie". Jest to niezbędne dla osób niewidomych, które korzystają z czytników ekranu („role” mówi, że jest to grupa przycisków, a „aria-label” dodaje opis przycisków).
  2. Zakładki:
    Zakładki, zaznaczone Sklep, a niezaznaczone Działy i Dojazd
    <ul class="nav nav-tabs">
      <li role="presentation" class="active"><a href="#">Sklep</a></li>
      <li role="presentation"><a href="#">Działy</a></li>
      <li role="presentation"><a href="#">Dojazd</a></li>
    </ul>
    Umieszczamy wszystko w liście nieuporządkowanej (<ul><li><a href="#"> przycisk 1 </a></li><ul>). Następnie dodajemy klasę (class="nav nav-tabs"), która z linków tworzy zakładki (ang. navigation – nav, ang. tabs – zakładki). Jeszcze musimy oznaczyć, która zakładka jest w tym momencie kliknięta (class="active"). Atrybut role="presentation" jest niezbędny dla czytników ekranu. Więcej o tych znacznikach możesz przeczytać wpisując w Google hasło WAI-ARIA (Link prowadzi do Wikipedii, strona dostępna 16 października 2016 r.).
  3. Menu rozwijane:
    Menu rozwijane, po wciśnięciu Działy wyskakują owoce, warzywa i słodycze.
    <div class="btn-group">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Działy<span class="caret"></span>
       </button>
     <ul class="dropdown-menu">
        <li><a href="#">Owoce</a></li>
        <li><a href="#">Warzywa</a></li>
        <li><a href="#">Słodycze</a></li>
    </ul>
    </div>

    Po kliknięciu na przycisk „Działy” zobaczymy menu z linkami (Owoce, Warzywa, Słodycze). Linki są umieszczone w liście nieuporządkowanej (<ul><li><a href="#"> przycisk 1 </a></li><ul>). Z dokumentacji Bootstrapa wiemy, że oznaczenie menu wymaga nadanie klasy: <ul class="dropdown-menu">.

    Następnie musimy dodać przycisk „Działy”, który po kliknięciu będzie rozwijał menu (Owoce, Warzywa, Słodycze). Do kodu <button type="button">Działy</button> musimy dodać odpowiednią klasę class="btn btn-default dropdown-toggle". Nowe w tej klasie jest tylko dropdown-toggle, które odpowiada za oznaczenie elementu, który po kliknięciu ma rozwijać/zwijać menu.

    W dokumentacji Bootstrapa jest jeszcze atrybut data-toggle="dropdown". Jest to nowość z języka HTML 5, która pozwala tworzyć własne atrybuty (muszą się zaczynać od data-). Dzięki temu mechanizm Bootstrapa może przechowywać tam swoje dane i może mieć do nich dostęp za pomocą języka Javascript. Dla nas najważniejsze jest to, że musi to być dodane dla poprawnego działania menu. Na końcu dodajemy elementy niezbędne dla czytników ekranu (osoby niewidome): aria-haspopup="true" aria-expanded="false" (ten ostatni informuje czy menu jest rozwinięte).

    Kod <span class="caret"></span> odpowiada za dodanie strzałki w przycisku „Działy”. Na końcu wszystko łączymy w jedną grupę przez <div class="btn-group"> </div>.

  4. Odebrane wiadomości
    Odebrane i Wiadomości z liczbami
    <a href="#">Odebrane <span class="badge">42</span></a>

    <button class="btn btn-primary" type="button">
      Wiadomości <span class="badge">4</span>
    </button>
    Dodanie do linku „Odebrane” tła dla liczby wymaga dodania tylko kodu: <span class="badge">42</span> (ang. badge – oznaka). W przypadku przycisku dodajemy klasę btn btn-primary (opisana wcześniej – dodaje przycisk podstawowy). Dodanie identycznego kodu (<span class="badge">4</span>) jak dla linku da nam odmienny rezultat (tło dla liczby jest białe).

Więcej możliwości znajdziesz w przykładach Bootstrapa (strona w języku angielskim, dostępna 16 października 2016 r.).

Jak stworzyć stronę dostosowującą się do urządzenia (komputer/tablet/komórka)?

Strony internetowe przez lata były projektowane dla dużych ekranów komputerowych. Od kilku lat taka filozofia jest niedopuszczalna, bo ruch z urządzeń mobilnych (tablet, telefony komórkowe) jest już poważną konkurencją dla komputerów. We wrześniowym badaniu Gemiusa/PBI liczba na 25,3 mln internautów z Polski, aż 17,5 mln korzystała ze smartfonów i tabletów (strona dostępna 18 października 2016 r.). Spora część używa komputerów, ale i jednocześnie urządzeń mobilnych.

W dawnych czasach Internetu tworzyło się oddzielne wersje dla komputerów i oddzielne dla telefonów komórkowych. Internauta musiał kliknąć w link, aby przejść do wersji dla telefonów komórkowych lub musiał połączyć się ze specjalną stroną (technologia WAP). Utrzymywanie dwóch serwisów zwiększa koszty i utrudnia zachowanie spójności pomiędzy nimi. Obecnie projektuje się jeden serwis internetowy, który dostosowuje się sam do ekranu urządzenia. Ta technika projektowania nazywa się projektowaniem responsywnych stron, ale u polskich programistów bardzo popularna jest angielska nazwa Responsive Web Design (często używa się też skrótu: RWD). Będzie ona się rozpowszechniać, bo rośnie liczba urządzeń z dostępem do internetu (tv, lodówka, zegarek, czytnik e-booków itd.).

Oprócz projektowania RWD należy uwzględnić inne problemy związane z urządzeniami mobilnymi np.:

  • zbyt wolne łącza internetowe i limity pobierania danych. Duży plik video może zabić nie jeden telefon komórkowy;
  • ograniczenia urządzenia. Nie jedna strona potrafi zawiesić telefon ze względu na zbyt słabe podzespoły urządzenia;
  • błędne wyświetlanie strony internetowej spowodowanej złą interpretacją kodu strony (niespełnianie standardów W3C przez przeglądarkę internetową);
  • niskie bezpieczeństwo korzystania z rozwiązań mobilnych (bankowość, zakupy) itd. Użytkownicy mają niską świadomość na temat bezpieczeństwa podczas korzystania z tych urządzeń.

RWD opiera się na języku CSS (CSS – kaskadowy arkusz stylów), a to właśnie w arkuszu ustalamy wiele rzeczy związanych z wyglądem strony internetowej. Możemy w nim określić np., że przy rozdzielczości ekranu z przedziału od 400 px do 800 px czcionka ma mieć 18px (px – piksel). W CSS za odpowiednie zachowanie się strony w zależności od rozdzielczości ekranu odpowiada tzw. Media Queries. (zapytanie o media, ale w internecie jest prawie zawsze używana angielska nazwa). Warto zapamiętać tę nazwę, aby móc porozumiewać się z innymi programistkami/programistami oraz graficzkami/grafikami.

Bootstrap wykorzystuje technikę RWD i w tym celu  dzieli stronę internetową na kolumny i rzędy (tzw. Bootstrap grid-system – strona w języku angielskim, dostępna 18 października 2016 r.). Kolumny i rzędy tworzą siatkę, która dostosowuje się rozdzielczości ekranu. Przykład? Mamy sklep złożony z 2 rzędów. Pierwszy rząd rozciąga się na całą szerokość strony internetowej, a drugi składa się z trzech kolumn:

Makieta sklepu. Pierwszy rząd z napisem sklep, drugi z 3 kolumnami. Pierwsza zawiera przyciski, druga treść, a trzecia video.

Na czerwono zaznaczone kolumny i rzędy (2 rzędy, pierwszy ma kolumnę rozciągającą się na całą stronę, a drugi zawiera 3 kolumny):

Rząd pierwszy rozciąga się na całą długość, drugi składa się z trzech kolumn.

Chcemy stronę otworzyć na tablecie, który ma mniejszy ekran. Bootstrap przeniesie kolumnę video do następnego rzędu:

Kolumna video przeniesiona do następnego rzędu

Czas na przykład w praktyce. Otwórz stronę Bootstrapa (strona dostępna 18 października 2016 r.) w zaktualizowanej przeglądarce internetowej Chrome i wciśnij na klawiaturze przycisk F12. Pojawi się okno, które na górze będzie miało ikonkę telefonu i tabletu (kliknij, aby powiększyć):

Chrome i tryb programisty  

Po kliknięciu na ikonkę otworzy się nam okno, gdzie możemy wybrać telefon (wybierzmy Iphone 5):

Tryb w Chrome symulujący Iphone 5

Zwróć uwagę, że strona zmieniła wygląd. Dostosowała się do mniejszego ekranu (poprosiliśmy Chrome, aby udawał rozdzielczość Iphone 5). Powrót do normalnego widoku jest możliwy przy pomocy przycisku F12. W ten sposób możesz testować jak wygląda Twoja strona na telefonie, ale nie powinno to zastąpić testów na prawdziwym telefonie komórkowym.

Jak stworzyć responsywną stronę w Bootstrapie?

Chcemy stworzyć stronę z 12 kolumnami. Cyfra 12 jest bardzo ważna w tworzeniu siatki w Bootstrapie, wkrótce wyjaśnię więcej.  Nasz przykład będzie miał jeden rząd i 12 kolumn.

  <div class="container">
   <div class="row">
    <div class="col-xs-1" >1</div>
    <div class="col-xs-1">2 </div>
    <div class="col-xs-1">3</div>
    <div class="col-xs-1">4</div>
    <div class="col-xs-1">5</div>
    <div class="col-xs-1">6</div>
    <div class="col-xs-1">7</div>
    <div class="col-xs-1">8</div>
    <div class="col-xs-1">9</div>
    <div class="col-xs-1">10</div>
    <div class="col-xs-1">11</div>
    <div class="col-xs-1">12</div>
   </div>
  </div>

Cała strona musi być wrzucona do jednego kontenera „div” z klasą „container” (<div class="container">). Dzięki temu Bootstrap zawsze będzie go umieszczał równomiernie po środku strony. Teraz tworzymy rząd i znów używamy kontenera div, ale tym razem klasa będzie miała nazwę „row” (czyli tworzymy pierwszy rząd).

Czas na 12 kolumn czyli 12 div-ów (<div class="col-xs-1" >zawartość strony</div>). Zwróć uwagę na klasę: col-xs-1. Co to oznacza? W ten sposób mówisz Bootstrapowi, że kontener div zawiera:

  • col – kolumnę (col. to skrót od ang. column);
  • xs oznacza zachowanie strony w przypadku najmniejszych ekranów. W Boostrapie możemy określać zachowanie strony dla 4 rodzajów ekranu: xs (szerokość ekranu poniżej 768 pikseli), sm (szerokość ekranu powyżej 768 pikseli), md (szerokość ekranu powyżej 992 piksele), lg (szerokość ekranu powyżej 1200 pikseli).
  • cyfra 1. To liczba kolumn jakie ma zawierać kontener div. Jak już wspomniałem wcześniej w Bootstrapie ważna jest liczba 12 (siatka jest oparta na 12 kolumnach). Jeśli będziemy chcieli stronę tylko z 3 kolumnami to każdy kontener div powinien zawierać 4 kolumny, aby dawać sumę 12. Przykład:
    <div class="container">
      <div class="row">
         <div class="col-xs-4">1</div>
         <div class="col-xs-4">2</div>
         <div class="col-xs-4">3</div>
      </div>
    </div>

Stwórzmy teraz stronę dostosowującą się do rozdzielczości ekranu.

Mamy dwie kolumny, które zawierają sporo treści. Chcemy, aby na najmniejszym ekranie (poniżej 768 pikseli) wyświetlała się jedna kolumna pod drugą. Na większym ekranie (powyżej 992 pikseli) źle wyglądałaby jedna kolumna pod drugą, kiedy ekran ma więcej miejsca. Na tym ekranie wyświetlimy je obok siebie. A teraz kod:

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-md-6">
      <h2>Stolica Kujaw - Włocławek</h2>
    </div>
    <div class="col-xs-12 col-md-6">
      <h2>Stolica Belgii - Bruksela</h2>
    </div>
  </div>
</div>

To co jest nowe w kodzie to: <div class="col-xs-12 col-md-6">. Jest to kontener div przechowujący napis: „Stolica Kujaw – Włocławek”. Siatka Bootstrapa dla jednego rzędu ma 12 kolumn. A teraz przypomnijmy co oznaczają skróty:

  • xs to szerokość ekranu poniżej 768 pikseli,
  • md to szerokość ekranu powyżej 992 pikseli.

Czyli XS odnosi się ekranów poniżej 768 pikseli (głównie telefonów). Kontener ten ma zajmować dokładnie 12 kolumn czyli całą szerokość siatki (xs-12). W przypadku ekranów powyżej 992 pikseli może zajmować tylko połowę szerokości siatki Bootstrapa (md-6). Co za tym idzie drugi kontener z napisem Stolica Belgii - Bruksela zajmie miejsce obok, ponieważ dopiero łącznie będą tworzyć sumę 12 (md-6). Jak to będzie wyglądać? Ekran komórki (kliknij, aby powiększyć):

Ipad - jedna kolumna pod drugą

 

Ekran laptopa (kliknij, aby powiększyć):

Laptop i dwie kolumny obok siebie

 

 

To są podstawy Bootstrapa. Lista wspieranych przeglądarek jest dostępna pod tym adresem: wspierane przeglądarki (strona w języku angielskim, dostępna 18 października 2016 r.).

Po opanowaniu Bootstrapa warto zainteresować możliwością wygenerowania plików skrojonych na potrzeby naszego projektu (strona w języku angielskim, dostępna 18 października 2016 r.),  tj. bez zbędnych funkcjonalności i kodu.

Podsumowanie

  1. Co to jest Bootstrap?

    Bootstrap to narzędzie pomagające tworzenie strony, który umożliwia tworzenie responsywnych stron internetowych, dodawanie elementów graficznych np. przycisków. Jest on stworzony do przyśpieszenia pracy i powinien poprawnie działać w najnowszych przeglądarkach internetowych.

  2. Jak zrobić coś prostego w Bootstrapie?

    Podpinamy niezbędne pliki CSS i JS oraz nadajemy odpowiednią klasę dla przycisku:
    <!DOCTYPE html>
    <html lang=”pl”>
      <head>
        <meta charset=”utf-8″>
        <title>Moja stroan w Bootstrapie</title>
        <link href=”bootstrap/css/bootstrap.min.css” rel=”stylesheet”>
       </head>
      <body>
        <h1>Witaj</h1>

    <button type=”button” class=”btn btn-lg btn-primary”>Zapisz</button>
        <script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js”></script>
        <script src=”bootstrap/js/bootstrap.min.js”></script>
      </body>
    </html>

  3. Jak zrobić coś fajnieszego w Bootstrapie?

    Odebrane i Wiadomości z liczbami
    <a href="#">Odebrane <span class="badge">42</span></a>

    <button class="btn btn-primary" type="button">
      Wiadomości <span class="badge">4</span>
    </button>

    Więcej możemy znaleźć w angielskiej dokumentacji Bootstrapa (strona dostępna 16 października 2016 r.).

  4. Jak stworzyć stronę dostosowującą się do urządzenia (komputer/tablet/komórka)?

    Mamy dwie kolumny, które zawierają sporo treści. Chcemy, aby na najmniejszym ekranie (poniżej 768 pikseli) wyświetlała się jedna kolumna pod drugą. Na większym ekranie (powyżej 992 pikseli) źle wyglądałaby jedna kolumna pod drugą, kiedy ekran ma więcej miejsca. Na tym ekranie wyświetlimy je obok siebie. A teraz kod:

    <div class=”container”>
      <div class=”row”>
        <div class=”col-xs-12 col-md-6″>
          <h2>Stolica Kujaw – Włocławek</h2>
        </div>
        <div class=”col-xs-12 col-md-6″>
          <h2>Stolica Belgii – Bruksela</h2>
        </div>
      </div>
    </div>

  • Podziel się na:

Zobacz również:

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *