Bootstrap Siatka Przykład: Skumulowany do poziomej
Będziemy tworzyć podstawową konstrukcję nośną, która zaczyna się ułożone w sieciach komórkowych / tabletek (małych urządzeń), zanim stał poziomo na komputerach (średnie / duże urządzenia).
Poniższy przykład pokazuje prosty "piętrowych do poziomej" dwukolumnowy układ, czyli będzie to skutkować 50% / 50% Podział na wszystkich ekranach, z wyjątkiem dodatkowych małych ekranów, które będą automatycznie stosie (100%):
Przykład: ułożone poziomo do
<div class="container">
<h1>Hello World!</h1>
<div
class="row">
<div class="col-sm-6" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-6" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div> Spróbuj sam " Wskazówka: Numery na .col-sm-* klasach wskazuje, ile kolumn div powinny obejmować (z 12). Więc .col-sm-1 przęsła 1 kolumna, .col-sm-4 łączy się 4 kolumny, .col-sm-6 przęseł 6 kolumn, itp
Uwaga: Upewnij się, że suma zawsze dodaje się do 12!
Wskazówka: można przekształcić dowolny układ o stałej szerokości do pełnej szerokości układ zmieniając .container klasę .container-fluid :
Przykład: Płynny kontenerów
<div class="container-fluid">
<h1>Hello
World!</h1>
<div class="row">
<div
class="col-sm-6" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-6" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div> Spróbuj sam "