Предыдущий ролик Следующий ролик  

Видео урок: Размещение галереи миниатюр

Bootstrap 3: добавь интерактивность на свой сайт

Так, следующее, что мы собираемся сделать с этой страницей, - это преобразовать маркированный список миниатюр так, чтобы он стал похож на галерею миниатюр. Для этого мы перенесем его в таблицу, чтобы изображения располагались на странице горизонтально, а не вертикально. Итак, если у вас открыт Sublime Text, то сначала мы прокрутим страницу вниз до области, с которой будем работать. Она начинается на 42-й строке, где находится блок с классом row.

Как видите, сразу после него на 43-й строке начинается неупорядоченный список, в котором содержатся все наши миниатюры. Итак, чтобы превратить их в галерею миниатюр, мы будем использовать Bootstrap. Все необходимые стили уже есть в таблице bootstrap.min.css. Все, что вам нужно сделать, - это добавить к каждому тегу li класс thumbnail. Далее вы можете просто выделить и скопировать его, нажав Ctrl или Cmd + C, и добавить ко всем тегам, нажимая Ctrl или Cmd + V. Теперь, когда все классы thumbnail расставлены, мы можем сохранить эту страницу, вернуться в браузер и обновить ее. Как видите, здесь уже нет маркеров, но вокруг каждого из этих изображений появилась аккуратная рамка с закругленными углами. Они все еще расположены на странице вертикально. Таким образом, с помощью класса thumbnail мы только избавились от маркеров и добавили рамку вокруг картинок. ОК, далее нам нужно добавить еще несколько классов, чтобы расположить изображения горизонтально. И конечно же, первый вопрос, который мы должны себе задать, - сколько миниатюр мы хотим уместить в один ряд? Итак, предположим, что мы хотим, чтобы в ряду у нас было четыре миниатюры. В Bootstrap есть таблица с двенадцатью столбцами, поэтому сейчас нам нужно добавить к тегу li класс col-sm-3.

Он относится к табличной системе малого размера. Такая таблица будет использоваться при разрешении до 768 пикселей. В ней поместится примерно четыре таких картинки в ряд. Таким образом, скопируйте этот класс и добавьте его везде рядом с классом thumbnail, а затем сохраните страницу. Теперь давайте вернемся в браузер и посмотрим, что у нас получилось. Итак, как видите, по горизонтали у нас умещается четыре изображения. А так как всего их семь, в одном ряду есть только три картинки.

По мере того как я буду уменьшать окно браузера примерно до разрешения мобильного устройства, как видите, мы пройдем несколько точек перехода. И когда мы доберемся до самой малой точки перехода, около 768 пикселей, миниатюры снова будут расположены одна под одной. На моем экране это не особенно хорошо выглядит, даже если я сильно уменьшу экран. Вероятно, эта страница будет нормально выглядеть только на экране мобильного телефона. Очень маленьком. Скорее всего, она будет выглядеть лучше, если для самых маленьких экранов мы поместим две картинки в ряд.

Это тоже очень просто сделать. Мы можем просто добавить сюда еще один класс. В нашем случае это будет call-xs-6x. Это самая маленькая табличная система. Запомните, что в этой таблице Bootstrap всегда будут горизонтальные ряды, каким бы маленьким ни был экран. Шесть колонок займут половину страницы, так что по мере того, как мы будем уменьшать экран, у нас останется две картинки в ряду. Итак, скопируйте этот класс, и вставьте его рядом с каждым дополнительным классом.

ОК. Сохраните страницу еще раз и обновите ее в Chrome. Для начала я разверну окно. Как видите, при больших разрешениях ничего не меняется. У нас по-прежнему четыре картинки в ряду. И только если мы встретим точку перехода к очень маленьким разрешениям, у нас в ряду будут размещаться только две миниатюры. Это уже не изменится, независимо от того, насколько еще мы уменьшим экран. Дальше уже не имеет смысла. В какой-то момент сами картинки начнут уменьшаться.

Теперь, в этом коде одна вещь может остаться непонятной. Если вы смотрели "Bootstrap для начинающих", то я там говорила, что в каждом ряду таблицы должно быть 12 колонок. Очевидно, если у нас есть семь фотографий, каждая из которых будет занимать по 3 колонки, в итоге получится 21, но никак не 12 колонок. Дело в том, что если вы будете работать со списком вроде этого, вы можете использовать эти классы сколько угодно, а Bootstrap разместит элементы списка равномерно на странице.

Этот тип таблицы работает не с блоками div и обычными рядами, а таким образом. Мы можем использовать те же классы, что и в обычной таблице, и эта таблица будет работать, как нам нужно, и разместит наши фотографии так, чтобы при любом разрешении в каждом ряду было заданное число картинок.