Treść książki
Przejdź do opcji czytnikaPrzejdź do nawigacjiPrzejdź do informacjiPrzejdź do stopki
14
Bootstrap
<divclass=”row”>
<divclass=”col-lg-1col-md-2”>Kolumna1</div>
<divclass=”col-lg-1col-md-2”>Kolumna2</div>
<divclass=”col-lg-1col-md-2”>Kolumna3</div>
<divclass=”col-lg-1col-md-2”>Kolumna4</div>
<divclass=”col-lg-1col-md-2”>Kolumna5</div>
<divclass=”col-lg-1col-md-2”>Kolumna6</div>
<divclass=”col-lg-1col-md-2”>Kolumna7</div>
<divclass=”col-lg-1col-md-2”>Kolumna8</div>
<divclass=”col-lg-1col-md-2”>Kolumna9</div>
<divclass=”col-lg-1col-md-2”>Kolumna10</div>
<divclass=”col-lg-1col-md-2”>Kolumna11</div>
<divclass=”col-lg-1col-md-2”>Kolumna12</div>
</div>
Kolejnyrządbyłpodzielonynadwiekolumny–powtarzamyzapis,zmieniając
jedynieprefkslgnamd.
<divclass=”row”>
<divclass=”col-lg-6col-md-6”>Kolumna1</div>
<divclass=”col-lg-6col-md-6”>Kolumna2</div>
</div>
Podobniepostępujemyzostatnimrzędem(rys.6).
<divclass=”row”>
<divclass=”col-lg-3col-md-3”>Kolumna1</div>
<divclass=”col-lg-9col-md-9”>Kolumna2</div>
</div>
Rysunek6.Dostosowaniesiatkidorozdzielczościtabletowej
WprzedstawionysposóbdziałasiatkaBootstrapa.Oczywiście,przygotowując
projekt,wartonarysowaćwcześniejmakietę,któraumożliwidokładneustalenie,czy
elementy,któreumieścimywkolumnach,zmieszcząsięwnich,czynależyjerozlo-
kowaćzupełnieinaczej.
Podziałnakolumnycoprawdajestjużgotowy,jednak,żebydokładniebyłowi-
dać,jakprzebiega,wartonadaćkolumnomróżnekolorytła.Dziękitemuzobaczymy,
czyfaktyczniedanekolumnymająokreślonąszerokośćczynie.Tworzymynowyplik
