Grid jest to siatka, na bazie której w łatwy sposób może zbudować responsywną stronę internetową. Projektowanie zawartości strony na siatce jest bardzo wygodne, a nowoczesne Frameworki takie jak Bootstrap czy Foundation sprawiają, że budowanie strony od zera wyłącznie z wykorzystaniem HTML i CSS staje się dużo bardziej czasochłonne i mało wydajne. Frameworki to nie tylko wspomniana siatka, ale również masa dodatków m.in: MENU, przyciski, tabele, a nawet animacje.

W tym artykule skupię się jednak na podstawie czyli na budowie Grid’a dla dwóch bardzo popularnych Frameworków: Bootstrap i Foundation. W obu Frameworkach szerokość okna dzielona jest na 12 kolumn.

Klasy CSS dla Bootstrapa:

  • .col-xs-12 (szerokość auto)
  • .col-sm-12 (szerokość 750px)
  • .col-md-12 (szerokość 970px)
  • .col-lg-12 (szerokość 1170px)

w miejsce ledwo widocznego koloru żółtego należy wpisać cyfrę jak w poniższym przykładzie. Tyle będzie kolumn ile dla danej wielkości okna wpiszemy pamiętając, że suma szerokości wynosi 12. Przykładowo chcąc dwie kolumny dla największych ekranów wpiszemy klasę .col-lg-6 .col-lg-6 co znaczy, że będą to dwie kolumny o równej szerokości.


<div class="container">
    <div class="row">
        <div class="col-lg-3 text-center">.col-lg-3</div>
        <div class="col-lg-3 text-center">.col-lg-3</div>
        <div class="col-lg-3 text-center">.col-lg-3</div>
        <div class="col-lg-3 text-center">.col-lg-3</div>
    </div>
    <div class="row">
        <div class="col-md-4 text-center">.col-md-4</div>
        <div class="col-md-4 text-center">.col-md-4</div>
        <div class="col-md-4 text-center">.col-md-4</div>
    </div>
    <div class="row">
        <div class="col-sm-6 text-center">.col-sm-6</div>
        <div class="col-sm-6 text-center">.col-sm-6</div>
    </div>
    <div class="row">
        <div class="col-xs-12 text-center">.col-xs-12</div>
    </div>
</div>

Standardowo szerokość dla najszerszego okna to 1170px. Jeżeli chcemy, żeby okno zajęło 100% okna to dodajemy klasę: .container-fluid . Efekt całości kodu widać poniżej. Pierwsze 4 wiersze to powyższy kod, a ostatni rozciągnięty wiersz to kod poniżej. Dzięki takiemu zapisowi poszczególnych klas w zależności od wielkości okna liczba kolumn na stronie będzie się zmieniać.


<div class="container-fluid" style="margin-top:50px;">
    <div class="row">
        <div class="col-lg-6 text-center">.col-lg-6</div>
        <div class="col-lg-6 text-center">.col-lg-6</div>
    </div>
</div>

bootstrap - class
Warto również znać klasy Bootstrapa, które niektóre kolumny potrafią ukryć lub pokazać przy zmianie rozmiaru przeglądarki. Dzięki temu dla okna o dużej szerokości możemy dać więcej treści, którą oszczędzimy osobie, która weszła na stronę np. z komórki. Poniżej klasy ukrywające kolumny, a w nawiasach ich odpowiedniki, które pokazują zawartość:

  • .hidden-xs (.visible-xs-*)
  • .hidden-sm (.visible-sm-*)
  • .hidden-md (.visible-md-*)
  • .hidden-lg (.visible-lg-*)

Podobnie sytuacja wygląda z Foundation tutaj klasy, są zapisane inaczej ale zasada jest ta sama i suma kolumn również musi wynieść 12. Podobnie jak w Bootstrapie w celu uzyskania 100% szerokości okna należy użyć osobnej klasy. W Foundation jest to .expanded .

Klasy CSS dla Foundation:

  • .large-12 columns
  • .medium-12 columns
  • .small-12 columns

    <div class="row">
        <div class="large-3 columns text-center">.large-3 columns</div>
        <div class="large-3 columns text-center">.large-3 columns</div>
        <div class="large-3 columns text-center">.large-3 columns</div>
        <div class="large-3 columns text-center">.large-3 columns</div>
    </div>
    <div class="row">
        <div class="medium-4 columns text-center">.medium-4 columns</div>
        <div class="medium-4 columns text-center">.medium-4 columns</div>
        <div class="medium-4 columns text-center">.medium-4 columns</div>
    </div>
    <div class="row">
        <div class="small-6 columns text-center">.small-6 columns</div>
        <div class="small-6 columns text-center">.small-6 columns</div>
    </div>
<div class="expanded row" style="margin-top:50px;">
         <div class="large-6 columns text-center">.large-6 columns</div>
        <div class="large-6 columns text-center">.large-6 columns</div>
</div>

 

foundation - class

I jeszcze podobnie jak było w Bootstrapie pokazywanie oraz ukrywanie kolumn w zależności od zmiany szerokości okna przeglądarki w Foundation odbywa się poniższymi klasami:

  • .show-for-small-only (.hide-for-small-only)
  • .show-for-medium-up (.hide-for-medium-up)
  • .show-for-medium-only (.hide-for-medium-only)
  • .show-for-large-up (.hide-for-large-up)
  • .show-for-large-only (.hide-for-large-only)
  • .show-for-xlarge-up (.hide-for-xlarge-up)
  • .show-for-xlarge-only (.hide-for-xlarge-only)
  • .show-for-xxlarge-up (.hide-for-xxlarge-up)

Więcej o tych Frameworkach przeczytasz na poniższych stronach, gdzie znajduje się bardzo bogata dokumentacja:

Kontynuując przeglądanie strony, wyrażasz zgodę na używanie przez nas plików cookies. dowiedz się więcej

Aby zapewnić Tobie najwyższy poziom realizacji usługi, opcje ciasteczek na tej stronie są ustawione na "zezwalaj na pliki cookies". Kontynuując przeglądanie strony bez zmiany ustawień lub klikając przycisk "Akceptuję" zgadzasz się na ich wykorzystanie.

Zamknij