Obuwnicze zmagania z materią

Ciąg dalszy spotkania z bootstrap. W poprzednim artykule https://www.rafalrebacz.pl/2015/09/20/jak-obuwie-moze-ulatwic-zycie/ było kila słów o tym jak zacząć przygodę z frameworkiem bootstrap. Teraz ciąg dalszy, w którym pokażę jeszcze kilka ciekawych możliwości, które są oferowane przez bootstrap.

Tak jak było już wspominane grid składa się z 12 kolumn jednakowej szerokości, w oparciu o które budujemy szablon strony. Poprzednie przykłady pokazywały rozwiązania polegające na zapełnieniu okna kolumnami z treścią. Przykład poniżej pokaże, że nie zawsze musi być treść – czasem może jej nie być (bo będzie offset).

Offset

Jak działa offset? Bardzo prosto – przesuwa nam kolumnę z treścią o „n” pozycji.

Przykład: https://www.rafalrebacz.pl/examples/bootstrap/offset1.html

Dokonujemy tego kodem takim jak poniżej, gdzie szczególne znaczenie ma klasa „.col-md-offset-6”, bo o tyle (6) pozycji przesunęliśmy ostatnią kolumnę. W tej chwili mamy kolumnę o szerokości 25%, przerwę po szerokości 50% i znów kolumnę o szerokości 25%.

<div class="container">
    <div class="row">
        <div class="col-md-3">
        </div>
        <div class="col-md-3 col-md-offset-6">
        </div>
    </div>
</div>

Inny przykład: https://www.rafalrebacz.pl/examples/bootstrap/offset2.html

<div class="container">
    <div class="row">
        <div class="col-md-3 col-md-offset-3">
        </div>
        <div class="col-md-3 col-md-offset-3">
        </div>
    </div>
</div>

W wyniku tego przykładu mamy przerwę 25% szerokości, kolumnę 25% szerokości, znów przerwę 25% i znów kolumnę 25%.

Jak widać suma szerokości kolumn i offsetów kolumn (ich liczb w nazwie klasy) musi wynosić 12 co można było zaobserwować we wcześniejszych przykładach. Offsety są dostępne dla każdej z klas definiujących kolumny czyli:

  • col-xs-* ma offset col-xs-offset-*
  • col-sm-* ma offset col-sm-offset-*
  • col-md-* ma offset col-md-offset-*
  • col-lg-* ma offset col-lg-offset-*

Jak widać stosowanie offsetów nie jest czymkolwiek szczególnym jeśli zna się zasadę na jakiej działa grid i po co są szerokości kolumn.

Zagnieżdżanie

Oprócz poprzednio wymienionych możliwości bootstrap oferuje także zagnieżdżanie. Jak to rozumieć? Działa to tak, że chcąc zagnieździć kolumny to dodajemy dodatkowy wiersz, w którym znów definiujemy kolumny z odpowiednią (do szerokości kolumny, w której zagnieżdżamy) szerokością. Przykład poniżej powinien to wystarczająco jasno przedstawić:

<div class="container">
    <div class="row">
        <div class="col-md-9">
            <div class="row">
                <div class="col-md-6">
                </div>
                <div class="col-md-6">
                </div>
            </div>
        </div>
    </div>
</div>

Przykład: https://www.rafalrebacz.pl/examples/bootstrap/nesting1.html

Jak widać w przykładzie treść w pierwszym wierszu zajmuje 3/4 z domyślnej szerokości (9 kolumn z 12) a w drugim po połowie z szerokości pierwszego wiersza (po 6 kolumn z 12).

To na tyle w tym artykule, zapraszam do kolejnej jego części -> https://www.rafalrebacz.pl/2015/09/21/buty-na-polce/

Avatar

Autor: gervee

Pełnoetatowy ojciec małej gromadki, programista(?), "amator" fotograf, "dłubacz" lubiący DIY, miłośnik chmielonego napitku. "Żartowniś" bez poczucia humoru ;).

Dodaj komentarz