10.2 Расширение возможностей изменения интерфейса с помощью модуля Bootstrap

Далее мы будем рассматривать изменение интерфейса с использованием gem–файла bootstrap–sass.

1. Первым делом, проходим по ссылке: https://github.com/twbs/bootstrap-sass, и скачиваем архив с gem–файлом (рисунок 10.4)

Рисунок 10.4 – Необходимый архив Bootstsrap Sass

2. Проходим в папку gems по пути Butnami/ruby/lib/ruby/gems/2.0.0/gems и копируем сюда содержание скаченного архива (рисунок 10.5).

Рисунок 10.5 – Копирование необходимого gem–файла

3. Следующим шагом является запуск ruby, где мы прописываем команду: bundle install. Таким образом, мы инсталлируем наш gem–файл в базу данных gems ruby.

4. Перейдём по указанному пути Bitnami/ruby/lib/ruby/gems/2.0.0/gems/bootstrap-sass-3.3.7/assets/stylesheets/bootstrap/ , в данной папке хранится вся база данных стилей bootstrap для различных элементов.

Рисунок 10.6 – Перечень файлов, хранящих стили для разных элементов.

5. Установка необходимых компонентов для дальнейшей работы завершена.

В качестве примера реализации изменения интерфейса разрабатываемой информационной системы рассмотрим такой элемент как таблица.

Для этого необходимо открыть файл .tables.scss расположенный по указанному на рисунке 10.7 пути.

Рисунок 10.7 – Файл .tables.scss

Открыв данный файл с помощью текстового редактора, например Notepad++, мы можем увидеть перечень различных стилей для элемента таблица. Данные стили автоматически прописаны в gem–файле, для дальнейшего использования выберем любой стиль, в нашем случае мы выбрали стиль .table

Рисунок 10.8 – Перечень стилей для элемента таблица

Для использования выбранного стиля в нашей информационной системе, необходимо открыть проект в редакторе Sublime Text 2. Выбираем необходимую страницу, расположенную во вкладке app/views, например, dlzhs. В ней открываем файл index.html.erb, и в блоке таблицы укажем выбранный ранее стиль (рисунок 10.9)

Рисунок 10.9 – Указание выбранного стиля

Сохраним произведенные изменения (Ctrl+S). Если сервер запущен, то просто обновляем нужную страницу. Если сервер не запущен, то запускаем его и переходим на обновленную страницу.

переходим на обновленную страницу.

В результате интерфейс отображения таблицы был изменен. На рисунках 10.10–10.13 представлено наглядное отображение произведенных изменений.

Рисунок 10.10 – Изначальный вид Стартовой страницы

Рисунок 10.11 – Измененный вид Стартовой страницы

Рисунок 10.12 – Изначальный вид Страницы Должности с добавленной кнопкой

Рисунок 10.13 – Измененный вид Страницы Должности

На ряду с этим, возможен и другой способ изменения разрабатываемых форм. Для этого необходимо интерфейс каждой страницы прописывать отдельно. К примеру, в результате замены исходного текста, на данный:

<link href="Style.css" rel="stylesheet">

<h1></h1>

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">

<div class="container-fluid">

<a class="navbar-brand " href="http://localhost:3000/#">Домашняя страница</a>

<div class="btn-group">

<button type="button" class="btn btn-default btn-lg dropdown-toggle">Справочник</button>

<button type="button" class="btn btn-default btn-lg dropdown-toggle" data-toggle="dropdown">

<span class="caret"></span>

</button>

<ul class="dropdown-menu ">

<li><a href="http://localhost:3000/dlzhs">Должности</a></li>

<li><a href="http://localhost:3000/hobbies">Хобби</a></li>

<li><a href="http://localhost:3000/sotrs">Сотрудники</a></li>

<li><a href="http://localhost:3000/hobby_sotrs">Хобби сотрудников</a></li>

</ul>

</div>

<div class="btn-group">

<button type="button" class="btn btn-default btn-lg dropdown-toggle">Отчёт</button>

<button type="button" class="btn btn-default btn-lg dropdown-toggle" data-toggle="dropdown">

<span class="caret"></span>

</button>

<ul class="dropdown-menu">

<li><a href="http://localhost:3000/pop_hobby/index">Популярность хобби</a></li>

<li><a href="http://localhost:3000/uvl_hobby/index">Увлеченность хобби сотрудников</a></li>

</ul>

</div>

</nav>

Мы получаем, полностью измененную главную страницу. Результаты представлены на рисунках 10.14–10.15.

Рисунок 10.14 – Изначальный вид Стартовой страницы

Рисунок 10.15 – Измененный вид Стартовой страницы