Treść książki
Przejdź do opcji czytnikaPrzejdź do nawigacjiPrzejdź do informacjiPrzejdź do stopki
Systemsiatkowy
17
Rysunek9.Rozmieszczeniekolumnzapomocąklasyoffset
Wanalogicznysposóbprzesuwasiękolumnywpozostałychrozdzielczościach,
cozobaczymydokładniejprzyprojekciestrony,którybędziemywykonywalipóźniej.
Systemsiatkowyumożliwiarównieżzagnieżdżaniekolumn.Tobardzowygodne
rozwiązanie,jeżelichcemynp.podzielićwiersznadwiekolumny,kolejnynaczteryitp.
Zagnieżdżeniesprawi,żewłaściwościwyższegorzędu(rodzica)będądziedziczone.
Dodajmydoplikustyle.cssjeszczedwakolorytła:
.tlo3{
background:#E80C78;
}
.tlo4{
background:#F8FF19;
}
Następnieutworzymywplikuindex.htmlnowywierszzłożonyzdwóchkolumn,
którymnadamywcześniejwybranekolory:
<divclass=”row”>
<divclass=”col-lg-6tlo3”>Kolumna1
</div>
<divclass=”col-lg-6tlo4”>Kolumna2
</div>
</div>
Zwróćmyuwagę,cosięzmieniło–dotejporyznacznikzamykający</div>
odnoszącysiędoposzczególnychkolumnbyłbezpośredniozatreścią,którajestpre-
zentowanawkolumnach.Jednakzostałprzeniesionydokolejnegowiersza.Jeżeli
kolejnywierszikolumnymająbyćzagnieżdżone,musimyjeumieścićwłaśnieprzed
tymznacznikiem.Takżewtymwypadkupamiętajmy,żełącznaliczbakolumnma
wynosićdwanaścieiniemożemyjejprzekroczyć:
<divclass=”row”>
<divclass=”col-lg-6tlo3”>Kolumna1
<divclass=”row”>
<divclass=”col-lg-6”>Kolumna3</div>
<divclass=”col-lg-6”>Kolumna4</div>
</div>
</div>
