Использование bootstrap технологии для создания коммерческого сайта

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

Но существенную роль во всем этом играет то, на каком фреймворке написан сайт.

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

В настоящее время огромную популярность приобрели адаптивные фреймворки.

Адаптивный фреймворк делает web-сайт дружественным для пользователя какими бы устройствами он не пользовался. Они могут значительно ускорить процесс создания адаптивного веб-дизайна, а также добавить много других опций на сайт, например, модальные окна, off-canvas меню и многое другое.

Рассмотрим десять адаптивных фреймворков:

  1. Foundadtion – это самый богатый опциями фреймворк, разработанный Zurb. Развернуть фреймворк можно с поддержкой Saas, также доступна разнообразная библиотека самых разных опций, например, off-canvas меню, модальные окна, расширенная навигация canvas, ускорение графического процессора, fastclick.js и многие другие опции для разработчиков.
  2. Bootstrap – это самый популярный адаптивный фреймворк, который применяется на миллионах сайтов. Многие темы на Themeforest имеют встроенный фреймворк Bootstrap. Фреймворк отлично подходит для начинающих заниматься адаптивным веб-дизайном.
  3. Gumby – это гибкий адаптивный фреймворк со множеством уникальных UI компонентов, которых не найдете в Bootstrap или Foundation. Gumby фреймворк разработан Digital Surgeons. Сообщество у Bootstrap и Foundation намного шире, чем у Gumby. У фреймворка есть расширения, которые добавляют функциональность базовой установке.
  4. Skeleton – это простой, легкий в использовании адаптивный CSS-фреймворк. Он не привязан к конкретному стилю и дизайну. С этим фреймворком можно быстро начать разработку адаптивного сайта без дополнительных функций, с которыми пока не готовы работать. На сайте практически нет цветов. Это объясняется тем, что данный фреймворк задумывался как основа, некий каркас, который можно адаптировать под свой бренд и фирменные цвета/стили сайта.
  5. Фреймворк Pure – это набор небольших адаптивных CSS модулей, которые можно использовать для любого веб-проекта. Это отличный инструмент, так как можно применять модули для любого проекта, даже если уже используется другой фреймворк или просто нужен только один модуль, а не весь фреймворк Pure.
  6. The Responsive Grid System предлагает интересный подход к адаптивному дизайну, так как он может быть встроен в существующий HTML и CSS шаблон. Это очень простая адаптивная система в виде сетки, которую можно добавить к любому уже готовому сайту, который пока еще не имеет адаптивного дизайна.
  7. Amazium – менее известный адаптивный фреймворк, который представляет собой простую сетку с намного меньшим количеством кодов, чем у других фреймворков.
  8. Less Framework – очередная CSS система для создания адаптивного веб-сайта. Фреймворк содержит 4 верстки и три набора графики и все это основано на одной сетке. Преимущество Less Framework заключается в том, что его можно использовать для создания разных типов верстки и заменять элементы одной верстки на элементы другой верстки, меняя код.
  9. Фреймворк Responsive – это один из самых легких HTML, Sass, CSS, JavaScript фреймворков из всех представленных. Объединенные CSS и JavaScript файлы, если их уменьшить и сжать в gzip весят всего 25.5 кб. Это очень маленький размер, по сравнению с другими фреймворками.
  10. Barekit – это еще один минималистический адаптивный фреймворк. Это совершенно новый адаптивный фреймворк, который был выпущен AppendTo [1]. Для создания сайта был применен фреймворк Bootstrap разработанный компанией Twitter.

Продуманная структура кода HTML, JavaScript и CSS дает вам возможность создавать множество самых разнообразных элементов интерфейса и сетку сайта.

Давайте подробнее разберемся, что же представляет собой Bootstrap с точки зрения разработчика и какие возможности дает. Bootstrap использует новейшие возможности HTML и CSS.

Основным преимуществом использования Bootstrap является Less – динамический язык стилей, существенно расширяющий возможности CSS. С его помощью разработчики могут создавать переменные, вложенные колонки, управлять цветами и т.д. Так же Less очень легко пользоваться. Достаточно просто вставить код в страницы.

Основные инструменты Bootstrap:

·  Сетки — заранее заданные размеры колонок, которые можно сразу же использовать, например ширина колонки 90px относится к классу .span2, который мы можем использовать в CSS описании документа;

·  Шаблоны — фиксированный или резиновый шаблон документа;

·  Типографика — описания шрифтов, определение некоторых классов для шрифтов таких как код, цитаты и т.п.;

·  Медиа — представляет возможности управления изображениями и видео;

·  Таблицы — средства оформления таблиц, вплоть до добавления функциональности для обеспечения возможности сортировки;

·  Формы — классы для оформления не только форм, но и некоторых событий, происходящих с ними;

·  Навигация — классы оформления для вкладок, страниц, меню и панелей инструментов;

·  Алерты — оформление диалоговых окон, подсказок и всплывающих окон [2].

Программа Brackets («кавычки») была представлена компанией Adobe. Именно с их легкой подачи приступили к разработке сего софта. Однако сначала он был известен под названием Edge Code.

Мультиплатформенность, он работает на всех операционных системах, благодаря тому, что редактор разработан на HTML, CSS и JS.

Он полностью бесплатен, есть русская версия и свободно скачивается с официального сайта brackets.io.

Благодаря большому выбору плагинов и расширений можно настроить редактор под свои нужды.

Присутствует интерактивный просмотр и подсветка элементов, но он работает если есть Google Chrome. Быстрое редактирование, то есть можно редактировать файлы CSS и JavaScript прямо в файле HTML, что существенно экономит время. Быстрый просмотр, благодаря нему можно просматривать цвета, которые используются в коде и изображения. Быстрые подсказки, они показывают при подключении файла, стиля, скрипта или картинки не только путь, но и имя файла.

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

Для того чтобы сайт мог работать на различных устройствах необходимо добавить следующие мета теги и дополнительные таблицы стилей в <head> документа. Теги подключения:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

Используя фреймворк Bootstrap удалось создать следующий проект, который показан на рисунке 1.

Описание: сайт1

 

Рисунок 1 – Главная страница сайта

Источник: собственная разработка автора.

 

Если нажать на кнопку «Войти» появится страница авторизации, рисунок 2.

Описание: авторизация

Рисунок 2 – Окно авторизации сайта

Источник: собственная разработка

 

Карусель создается с помощью следующего кода:

<div id="myCarousel" class="carousel slide">

      <div class="carousel-inner">

        <div class="item active">

          <img src="image/slide-01.jpg" alt="">

          <div class="container">

            <div class="carousel-caption">

              <p class="lead">Новая коллекция джинсов</p>

            </div>

          </div>

        </div>

        <div class="item">

          <img src="image/slide-02.jpg" alt="">

          <div class="container">

            <div class="carousel-caption">

              <p class="lead">В продаже полное собрание сочинений Грибоедова</p>

            </div>

          </div>

        </div>

        <div class="item">

          <img src="image/slide-03.jpg" alt="">

          <div class="container">

            <div class="carousel-caption">

              <p class="lead">Стильные мужские костюмы</p>

            </div>

          </div>

        </div>

      </div>

      <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>

      <a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>

    </div>

В результате того, что с помощью фреймворка Bootstrap можно реализовать адаптивные сайты, снижаются расходы на создание дополнительных сайтов под другие мобильные технологии. Сайт с технологией Bootstrap легче создается благодаря тому, что он бесплатный в результате чего, он ещё и популярный. Снижается время на создание сайта, а как известно время – деньги.  Уменьшается количество людей, задействованных при создании сайта.

 

Список литературы

 

  1. 10 адаптивных фреймворков для веб-дизайна // rebill.me [Электронный ресурс] Режим доступа: http:/  /rebill  .me /showthread . php?t=3560&highlight=%E0%E4%E0%EF%F2%E8%E2%ED%FB%F5+%F4%F0%E5%E9%EC%E2%EE%F0%EA%EE%E2+%E2%E5%E1-%E4%E8%E7%E0%E9%ED%E0 – Дата доступа: 15.02.2016
  2. Что такое Bootstrap? // templatemonsterblog.ru [Электронный ресурс] - М, 2016 Режим доступа : http : // www. templatemonsterblog . ru /2012/10/25/ hello-bootstrap/ - Дата доступа: 20.02.2016.

 

In the modern world to create a commercial site need to use an adaptive framework, in this work uses Bootstrap framework version 3.3.6. He takes the first place in popularity among web designers since this framework free, which significantly affects the cost of the project. For this project used Brackets version 1.6 editor.

 

Зайчик Наталия Антоновна