TemplateMonster запускает новые Bootstrap шаблоны

Всего каких-то 1,5 года назад никто даже представить себе не мог, что в скором времени сообщество веб-дизайнеров потрясет абсолютно новый Bootstrap фреймворк.

Совсем недавно с этим названием ассоциировалось только вот это:

Сегодня данная словоформа приобрела совершенно новый оттенок. Однако оставим в стороне лингвистический анализ и вернемся к сути.

Для начала не мешало бы вспомнить, что же такое Bootstrap. В широком смысле Bootstrap – это основа или набор инструментов для мгновенного создания любого сайта. Не удивительно, что в течение всего нескольких месяцев Bootstrap значительно укрепился в своих позициях, чтобы стать популярнейшим репозиторием всех времен на GitHub.

Наконец настал тот момент, когда лидер по производству макетов для сайтов, компания TemplateMonster, запускает собственные шаблоны Bootstrap. У вас есть возможность посетить презентационную страницу данного продукта. А дальше предлагаем поговорить о симбиозе Bootstrap и авторских дизайнов TemplateMonster. Такие шаблоны включают базовую функциональность Bootstrap и большое количество полностью оптимизированных уникальных дополнений, разработанных специально для данной линейки продуктов от разработчиков TemplateMonster. Бесплатный пример такого шаблона вы можете скачать тут.

Представляем вашему вниманию краткий список подразделов, о которых пойдет речь в статье:

• Страницы;
• Портфолио;
• Слайдер;
• Социальные кнопки;
• CSS3.

Шаблоны Bootstrap имеют одну отличительную сообенность — они строятся на фреймворке Bootstrap. Чтобы облегчить знакомство пользователей с новым продуктом, в пакет поставки такого шаблона входит вся необходимая документация. Каждая тема имеет верхнюю панель с закладками, в которых можно отыскать всю необходимую информацию по установке и управлению. Давайте посмотрит изнутри на шаблон #41035

Первые четыре закладки: Scaffolding (Структура), Base CSS (Стандартный CSS), Components (Компоненты) и Javascript. Они являются родными для структуры фреймворка. Нужно отметить, что благодаря функциям Bootstrap создать адаптивный дизайн — не проблема. Каждая тема базируется на резиновой сетке (fluid grid) и поддерживает media query.

Каждый подобный адаптивный шаблон может отображаться на четырех типах экранов, размеры которых соответствуют популярным портативным устройствам.

Дополнения от TemplateMonster

Наиболее важные дополнения от команды TemplateMonster собраны в последней вкладке верхней панели, о которой было упомянуто выше:

А теперь давайте пройдемся по каждому из этих пунктов.

Страницы

Ссылка «Pages» содержит целых три подстраницы: Under Construction (В разработке), Intro Page (Заставка) и 404 страница. Данная ссылка позволяет получить быстрый доступ к этим страницам.

Under Construction (В разработке)

***

Intro Page (Заставка)

***

404 страница

Портфолио

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

Просто нажав на иконки, вы получите доступ к коду выбранного шаблона: вставьте необходимый код в тело страницы и портфолио готово...

Слайдер

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

Основной слайдер

***

Слайдер с миниатюрами

Предлагаем ознакомиться со списком некоторых эффектов слайдеров:

‘simpleFade’, ‘curtainTopLeft’, ‘curtainTopRight’, ‘curtainBottomLeft’, ‘curtainBottomRight’, ‘curtainSliceLeft’, ‘curtainSliceRight’, ‘blindCurtainTopLeft’, ‘blindCurtainTopRight’, ‘blindCurtainBottomLeft’, ‘blindCurtainBottomRight’, ‘blindCurtainSliceBottom’, ‘blindCurtainSliceTop’, ‘stampede’, ‘mosaic’, ‘mosaicReverse’, ‘mosaicRandom’, ‘mosaicSpiral’, ‘mosaicSpiralReverse’, ‘topLeftBottomRight’, ‘bottomRightTopLeft’, ‘bottomLeftTopRight’, ‘bottomLeftTopRight’, ‘scrollLeft’, ‘scrollRight’, ‘scrollHorz’, ‘scrollBottom’, ‘scrollTop’

Принцип тот же, что и в портфолио: используя функции копировать+вставить, вы сможете настроить слайдер в два счета!

Социальные кнопки

Есть несколько советов по реализации и функционированию социальных кнопок на страницах вашего сайта:

Для реализации виджетов социальных кнопок на страницах вашего сайта достаточно лишь скопировать и вставить соответствующий код. Вы с легкостью сможете добавить кнопки Twitter, Flickr, Facebook, YouTube, Vimeo и огромное множество других кнопок, используя соответствующие иконки, разрешение на использование которых есть в документации.

CSS3 Tricks

Если вам нравится использование различных визуальных эффектов, этот раздел покажется вам настоящей Меккой. Здесь вы сможете отыскать ответы на все свои вопросы, найти множество эффектов для своего сайта, сгруппированных для удобства в три категории: Image Hovers (Анимация изображений при наведении), Animated Buttons (Анимированные кнопки) и стили CSS3. Как и было описано ранее, достаточно просто скопировать и вставить код для немедленной реализации любого эффекта.

Анимация при наведении
Здесь вы сможете подобрать анимацию для своих изображений на сайте. По умолчанию вам будет доступно 8 подобных эффектов. Наслаждайтесь!

***

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

Просто добавьте необходимый <a> тег, чтобы включить анимацию:

<a href="#" class="btn tm_style_1">Нажми меня</a>

***

Для настоящих ценителей именно здесь собраны все визуальные эффекты CSS3. Используйте их!

***

Это все, что мы хотели вам рассказать об особенностях шаблонов Bootstrap, а теперь пришло время представить вашему вниманию новую продукцию. Ниже вы найдете 5 удивительных шаблонов Bootstrap, созданные командой TemplateMonster. Обратите внимание на уникальную панель в шапке каждого макета.

Шаблон для бизнес сайта

***

Шаблон для сайта архитектурной тематики

***

Макет для сайта о моде

***

Тема для сайта о бизнесе

***

Макет для бизнес сайта

***

Бесплатный Bootstrap шаблон