Bootstrap 3 - Компонент Thumbnails (Мініатюри), ІТ Шеф

Стаття, де описується компонент Thumbnails платформи Twitter Bootstrap 3.

Thumbnails - призначення та принципи створення

Створення галереї Thumbnails завжди починається з каркасу, який розробляється за допомогою блоків div та класів системи сіток платформи Twitter Bootstrap 3. Після цього переходять до розміщення необхідних блоків інформації в осередках цієї сітки та додавання класу thumbnail.

Створення галереї Thumbnails із зображень

Наприклад, створимо галерею Thumbnails, що складається з 12 зображень (на lg-пристроях – 4x3, на md-пристроях – 3x4, на sm-пристроях – 2x6, на xs-пристроях – 1x12).

Доопрацюємо вищенаведений приклад таким чином, щоб картинка в ньому виводилася в модальному вікні при натисканні на неї.

Галерея Thumbnails, мініатюри якої містять додатковий контент

У мініатюри Thumbnails, використовуючи додаткову розмітку, можна додавати різні види HTML-контенту, такого як заголовки (елементи h1 - h6), параграфи (елементи p) та кнопки.

---