Finar.ru
web.finar.ru
video.finar.ru
Темы для BootstrapNew!

Красивая верстка фотогалерей в стиле Bootstrap

простой, но стильный листинг фотопревью, сверстанный по принципам Bootstrap

Автор: Филипп Казаков, дата: 2013-02-02, просмотров 3952
Тэги

Вашему вниманию представляется пример верстки фотогалереи, выполненный в стилистике css-фреймоворка Bootstrap: с использованием современных возможностей CSS3, наследования классов, полностью адаптивный, готовый для автоматизации через LESS. Что это дает? Представим, что мы делаем верстку для информационного мегапортала...

Основной принцип такой верстки, без которого невозможен успешный результат - предельная простота основы, группировка стилей оформления в независимые группы. Основа - максимально логичная и масштабируемая, должна решать основную задачу верстки при любых граничных условиях. В нашем случае она должна одинаково хорошо справляться как с вертикальными, так и с горизонтальными фотографиями, не накладывая на них никаких ограничений и, разумеется, без использования скриптов. Сделав простую и надежную основу, начинаем навешивать на нее "рюшечки". С помощью дополнительных классов, просто добавляя их к блоку, меняем цвета, добавляем скругленные края, "воздух". Теперь, для разных разделов нашего мегапортала мы можем легко - очень легко! - использовать разное визуальное оформление одних и тех же элементов, никак не касаясь программирования. Дополнительные классы заводятся в отдельном файле (в variables.less в случае bootstrap) по мере необходимости, и они, в принципе, должны быть применимы и к любым другим частям верстки нашего мегапортала.

исходный код примера здесь  Смотрите как:


Оставить комментарий 


Ваше имя:
->