Galerie obrazów w Bootstrap 3 – układ poziomy

Bootstrap 3 to jedna z najpopularniejszych bibliotek CSS, która ułatwia tworzenie responsywnych stron internetowych. Jednym z jej zastosowań jest tworzenie galerii obrazów, które mogą być wyświetlane w wierszach poziomych.

Struktura galerii W Bootstrap 3 najczęściej używa się siatki (grid system) do układania obrazów. Podstawowy układ poziomy można osiągnąć, dzieląc wiersz na kolumny:

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"> <!-- wskaźniki --> <ol class="carousel-indicators"> <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li> <li data-target="#carouselExampleIndicators" data-slide-to="1"></li> <li data-target="#carouselExampleIndicators" data-slide-to="2"></li> </ol> <!-- zawartość karuzeli --> <div class="carousel-inner"> <div class="item active"> <img src="http://www.bf2.pl/infusions/news/images/1[1].jpg" class="img-responsive" alt="Pierwszy slajd"> <div class="carousel-caption"> <h5>Pierwszy obrazek</h5> <p>Opis pierwszego slajdu</p> </div> </div> <div class="item"> <img src="http://www.bf2.pl/infusions/news/images/2[1].jpg" class="img-responsive" alt="Drugi slajd"> <div class="carousel-caption"> <h5>Drugi obrazek</h5> <p>Opis drugiego slajdu</p> </div> </div> <div class="item"> <img src="http://www.bf2.pl/infusions/news/images/4%5B1%5D.jpg?_t=1769025500" class="img-responsive" alt="Trzeci slajd"> <div class="carousel-caption"> <h5>Trzeci obrazek</h5> <p>Opis trzeciego slajdu</p> </div> </div> </div> <!-- kontrolki --> <a class="left carousel-control" href="#carouselExampleIndicators" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Poprzedni</span> </a> <a class="right carousel-control" href="#carouselExampleIndicators" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Następny</span> </a> </div>