Загрузка

RUS | ANG | |

StepkinBlog.ru

Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, Wordpress, Bootstrap

Главная » Основы Bootstrap 3 » Миниатюры. Основы bootstrap 3 для начинающих. Урок №25

01.11.2016


10:00


2937


2


Миниатюры. Основы bootstrap 3 для начинающих. Урок №25

Миниатюры. Основы bootstrap 3 для начинающих. Урок №25

Всем привет!
В сегодняшнем уроке, я расскажу,  как создать миниатюры, используя компонент Thumbnails.
В миниатюре могут использоваться изображения, видео, текстовые блоки или др.
Итак, вначале попробуем создать обычную галерею картинок, где для каждой картинки можно подвязать ссылку для перехода на другую страницу.

Как создать простые миниатюры.

К тегу DIV добавляем класс «thumbnail». Благодаря сетке, мы выстраиваем миниатюры красиво по горизонтали:

<div class="row">
<!-- 1 Изображение -->
<div class="col-sm-6 col-md-4 col-lg-3">
	<div class="thumbnail">
<img src="..." alt="...">
        </div>
</div>

<!-- 2 Изображение -->
<div class="col-sm-6 col-md-4 col-lg-3">
	<div class="thumbnail">
<img src="..." alt="...">
        </div>
</div>

<!-- 3 Изображение -->
<div class="col-sm-6 col-md-4 col-lg-3">
	<div class="thumbnail">
<img src="..." alt="...">
        </div>
</div>

<!-- 4 Изображение -->
<div class="col-sm-6 col-md-4 col-lg-3">
	<div class="thumbnail">
<img src="..." alt="...">
        </div>
</div>

</div>

Результат:

посмотреть пример

Миниатюра как ссылка

Миниатюра может быть как ссылка на другую страницу.

Для этого замените тег DIV на тег «A», вот так:

<a href="#" class="thumbnail">
<img src="..." alt="...">
</a>

Полный пример:

<div class="row">
<!-- 1 Изображение -->
<div class="col-sm-6 col-md-4 col-lg-3">
<a href="#" class="thumbnail">
<img src="..." alt="...">
</a>
</div>

<!-- 2 Изображение -->
<div class="col-sm-6 col-md-4 col-lg-3">
<a href="#" class="thumbnail">
<img src="..." alt="...">
</a>
</div>

<!-- 3 Изображение -->
<div class="col-sm-6 col-md-4 col-lg-3">
<a href="#" class="thumbnail">
<img src="..." alt="...">
</a>
</div>

<!-- 4 Изображение -->
<div class="col-sm-6 col-md-4 col-lg-3">
<a href="#" class="thumbnail">
<img src="..." alt="...">
</a>
</div>

</div>

Результат:

посмотреть пример

Миниатюра с дополнительным контентом

К миниатюре можно добавить дополнительно заголовок, текст и кнопку.

<div class="thumbnail">
<img src="..." alt="...">

<div class="caption">
<h3>Заголовок...</h3>
<p>Контент...</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
</div>
</div>

Полный пример:

<div class="row">
<!-- 1 Изображение -->
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="thumbnail">
<img src="..." alt="...">

<div class="caption">
<h3>Заголовок...</h3>
<p>Контент...</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
</div>
</div>
</div>

<!-- 2 Изображение -->
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="thumbnail">
<img src="..." alt="...">

<div class="caption">
<h3>Заголовок...</h3>
<p>Контент...</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
</div>
</div>
</div>

<!-- 3 Изображение -->
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="thumbnail">
<img src="..." alt="...">

<div class="caption">
<h3>Заголовок...</h3>
<p>Контент...</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
</div>
</div>
</div>

<!-- 4 Изображение -->
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="thumbnail">
<img src="..." alt="...">

<div class="caption">
<h3>Заголовок...</h3>
<p>Контент...</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
</div>
</div>
</div>

</div>

Результат:

посмотреть пример



Случайные записи:

  1. Слои в CSS. Основы CSS для начинающих. Урок №16
  2. Как вставить ссылку в HTML. Основы HTML для начинающих. Урок №6
  3. Изображение. Основы bootstrap 3 для начинающих. Урок №15
  4. Учимся создавать пагинацию, хлебные крошки и метки (теги). Основы bootstrap 3 для начинающих. Урок №12
  5. Создание простого мини сайта. Практика по пройдённому материалу

Последние записи рубрики:

  1. Бесплатный курс по основам Bootstrap3
  2. Создание простого сайта на Bootstrap 3. Практика по пройденному материалу
  3. Тесты Bootstrap 3 онлайн. Основы Bootstrap 3 для начинающих
  4. Создание галереи изображений. Основы bootstrap3 для начинающих. Урок №26

2 ответа(ов) на статью: “Миниатюры. Основы bootstrap 3 для начинающих. Урок №25”

  1. Иван says:

    У меня почему-то когда их свертываешь до мобильной версии,слипаются,а у вас в примере нет.

    Ответить

    Степка
    Степка ответил(а) на комментарий:

    Вы покажите мне Ваш код. А также, Вы используете Bootstrap3 или Bootstrap4 ?

    Ответить

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Подписаться на обновления:

Подпишись на обновления моего блога через e-m@il:

@

Реклама на блоге:

Мои цели на
2017 год:

Довести количество статей до 150

Доделать этот блог

Закончить тему «Основы CSS»

Закончить тему «Основы PHP»

Начать тему «Основы JavaScript»

Добиться посещаемости 500 чел/сутки

Статистика:

Записей: 104
Страниц: 3
Рубрик: 9
Меток: 11
Комментариев: 245