Szkielet ogólny Bootstrap – wprowadzenie

Ogólna budowa layoutu strony www opartej na Bootstrap składa się z kontenerów( container), wierszy(row) oraz ( kolumn). Wygląd poszczególnych elementów jest kształtowany poprzez wbudowane klasy css oraz identyfikatory( te z kolei często korelują z js).
Nasz przykład będzie sie składał z czterech responsywnych kolumn.
Pierwsza bedzie zawierała obrazek,druga tablice, trzecia paragraf tekstu, czwarta tekstw nagłówku oraz eleemnt etykiety bootstrapa osadzony w tagu span. Kolumny posiadają swoje określone szerokości. Maksymalna to 12 i oznacza że zajmuje szerokość całego pojemnika( wiersza w jakiej się znajduje).Cala szerokość kontenera jest dzielona przez 12 np. 4 oznacza szerokość 4/12 kontenera czyli 1/3. Aby zachować ładnie do siebie przylegające kolumny należy ustawiać ich szerokość tak aby iloraz liczby kolumn przez szerokość lub suma szerkości kolumn zawsze wynosiła 12.
Sposób responsywnego ułożenia kolumn w naszym przykładzie:
laptopy i duże monitory- wszytskie cztery kolumny są ułożone obok siebie, szerokość w px zmienia się wraz ze zmiana szerokości ekranu urządzenia.
małe laptopy, netbooki- kolumny układają sie parami: po dwie jedne po drugimi:)
smartfony, telefony komórkowe- kolumny układją się w słup jedna pod drugą.
Objaśnienie rozdzielczości kolumn i przykładowe szerokości:
col-md-3 kolumna która poniżej rozdzielczości 992px (mały netbook) schowa się pod sąsiednia kolumnę, jej szerokość 3 jednostki (szerokość 3 kolumn)
col-sm-6 kolumna która poniżej rozdzielczości 768px (tablet) schowa się pod sąsiednia kolumnę, jej szerokość 6
col-xs-12 kolumna będzie płynnie zmieniała swoją szerokość przy rozdzileczościach mniejszych niż 768px (smartfon , telefon komórkowy), jej szerokość 12 jednostek (cała szerokość wiersza). Jest jeszcze lg ale może byc zastąpiony md.

<div class="container">
  <div class="row">
    <div class="col-md-3 col-sm-6 col-xs-12">
        <a href="#" class="thumbnail">
           <img src="http://placehold.it/200x200" alt="...">
        </a>
    </div>
    <div class="col-md-3 col-sm-6 col-xs-12">
         <table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>Imię</th>
      <th>Nazwisko</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Jan</td>
      <td>Kowalski</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jakub</td>
      <td>Nowak</td>
    </tr>
  </tbody>
</table>
    </div>
    <div class="col-md-3 col-sm-6 col-xs-12">
      <p class="text-left">Tekst wyrównany do lewej.</p>
    </div>
    <div class="col-md-3 col-sm-6 col-xs-12">
      <h2>Przykładowy tekst <span class="label label-default">Etykieta</span></h2>
    </div>
  </div>
</div>

1.Kontener- główny pojemnik na nasz kontent
2.Wiersz- to w nim przechowywane są kolumny
3.Definicja pierwszej z czterech kolumn. Zachowanie kolumny zostało określone dla trzech typów urządzeń o różnej rozdzielczości
9.Tabela
32. Wyrównanie tekstu do prawej.
35. Domyślna etykieta Bootstrapa.

Share This

Dodaj komentarz

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