Если данный туториал не то, что Вы искали, у Вас все еще остались вопросы или предложения - дайте нам знать. Пожалуйста, помогите нам обслуживать Вас лучше!

Ваше имя

Ваш e-mail

Ваше сообщение (обязательно)

captcha

Шаблоны Bootstrap

Описание Шаблона

Сегодня отличный день! TemplateMonster запускает шаблоны Bootstrap. Посетите страницу презентации этого продукта. Дальше мы поговорим об этом симбиозе — технологии Bootstrap и дизайнов от TemplateMonster. Эти шаблоны включают функционал Bootstrap и большое количество полностью оптимизированных дополнений, разработанных, специально для линии данных продуктов, командой разработчиков TemplateMonster.

Шаблон Bootstrap — это готовый дизайн, созданный на основе фреймоврка Bootstrap — технологии для создания дизайнов, совместимых с разными браузерами, эффективно визуализированных. Эти функциональные возможности сделают темы Bootstrap интересными для Вас с сочетании с уникальными дополнениями, созданными разработчиками TemplateMonster.

Позвольте напомнить, что собой представляет Bootstrap. Фактически это фреймворк для быстрой разработки веб-интерфейсов, который коренным способ меняет способ создания веб-дизайнов. Неудивительно, что за считанные месяцы существования Bootstrap, эта технология стала одной из самых популярных в GitHub.

Free Bootstrap 3.0 Template

Template number: 46543

Доступные исходные материалы

.HTML
.PSD
.PHP
.CSS
.JS

Необходимое программное обеспечение

Чтобы использовать данный продукт, Вам необходимо иметь такие программы, установленные на Вашем компьютере.

Adobe Dreamweaver 8+;
Adobe Photoshop CS+;

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

Функциональные возможности шаблона:

Вот краткий список уникальных дополнений, предоставляемых с шаблоном Bootstrap:

  • Pages (страницы)
  • Portfolio (портфолио)
  • Slider (слайдер)
  • Social Media (социальные сети)
  • CSS3 Tricks (CSS3 стили)

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

Первые четыре ссылки: Scaffolding, Base CSS, Components и Javascript — являются родным функционалом фреймфорка. Кроме того, мы должны заметить, что данные шаблоны также дополняют линейку популярных адаптивных шаблонов. Каждая тема основана на гибкой сетке и поддерживает многие девайсы:

НазваниеШиринаШирина колонкиШирина между столбцами
Широкий монитор1200px и выше70px30px
По умолчанию980px и выше60px20px
Планшеты768px и выше42px20px
От телефонов до планшетов767px и вышеГибкие колонки без фиксированной ширины
Телефоны480px и вышеГибкие колонки без фиксированной ширины

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

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

Самая важная часть — это дополнения, созданные командой TemplateMonster. Они собраны в панели, показанной выше. Вот, что она включает:

Давайте рассмотрим каждую ссылку.

Pages (Страницы)

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

Under Construction (На реконструкции)

Intro Page (Страница Интро)

404 Page (Страница 404)

Portfolio (Портфолио)

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

Просто нажмите на иконку с разметкой и Вы получите доступ к коду этой разметки: скопируйте код, вставьте его в новую страницу и Ваше портфолио готово!

Slider (Слайдер)

Страница слайдера позволяет редактировать эффект перехода между слайдами. По умолчанию доступны два варианта для Camera Slideshow Slider:

Basic Slider (Основной слайдер)

Slider with thumbnails (Слайдер с миниатюрами)

Вот список возможных эффектов:

‘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’

Принцип такой же, как и для Портфолио, просто скопируйте код и Ваш слайдер готов!

Social Media (Социальные сети)

Социальные и медиа страницы показывают как добавить ссылки на социальные сети на Ваш вебсайт:

Чтобы добавить эти виджеты на Ваш сайт, нужно просто скопировать код, вот и все. Вы можете добавить Twitter, Flickr, Facebook’s likebox, YouTube видео, Vimeo видео и много злругих, используя иконки в документации.

CSS3 Стили

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

Анимированный эффект при наведении

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

Выберите анимация для кнопок на Вашем сайте.

Эта часть будет особенно приятна для ценителей CSS3 эффектов. Ознакомьтесь в ними!

Структура шаблона

Вы получили шаблон, скачали и распаковали его. Давайте заглянем, что в нем.

  • «documentation» – содержит документацию по редактированию и установке шаблона.
  • «screenshots» – cскриншоты шаблона.
  • «site» – содержит .html файлы шаблона.
  • — «assets» – содержит другие дополнения.
  • — «bat» – скрипт для выполнения контакт-формы (.php).
  • — «css» – .css файлы, использованные в дизайне.
  • — «img» – все изображения, используемые в .html файлах.
  • — «js» – содержит JavaScript библиотеки и jQuery плагины.
  • — «search» – содержит файлы для работы поиска по сайту.
  • «sources» – исходные материалы.
  • — «less» — содержит .css LESS файлы, использованные в шаблоне.
  • — «psd» – содержит .psd файлы для Adobe Photoshop.
  • — «fonts_info.txt» – список шрифтов, использованных в шаблоне.
  • — «info.txt» – информация о защищенной паролем папке sources.

Замечание: По соображениям безопасности папка Sources (Исходные материалы) заархивирована и защищена паролем. Чтобы разархивировать защищенный паролем архив, Вам необходимо иметь программу-архиватор и правильный пароль. Когда Вы начнете распаковывать файл, появится уведомление о необходимости ввести пароль. Паролем является номер Вашего заказа. Вы можете найти этот норме на странице заказа, ссылка на которую высылается Вам на электронную почту.

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

 
Live Chat
Consultant
We help you to choose the right product.