dmitriev_dmitry Feb 24 2012 at 21:25

Пользовательский интерфейс на базе Twitter Bootstrap для начинающих

6 min

61K

Аннотация

В статье я попробую рассказать о том, как на базе Twitter Bootstrap можно очень легко реализовать приятный пользовательский интерфейс небольшого (одностраничного) web-приложения, владея лишь базовыми знаниями html. Сразу предупреждаю, специалистам будет не интересно, речь пойдет о базовом стандартном функционале.

Вводная

В свободное время в качестве хобби разрабатываю одностраничный агрегатор интересных заголовков новостных лент. В какой-то момент базовый функционал прототипа оказался готов, не хватало отметки только напротив задачи «Дизайн».

Постановка задачи

Получить красивый пользовательский интерфейс, не владея магией дизайнера (есть только базовые знания paint) и программиста (есть только базовые знания html и css).

Страница состоит из следующих элементов

Название
Форма отправки ссылки на новость
Форма отправки уникального кода читателя на e-mail
Форма ввода уникального кода читателя
Список новостей с группировкой по дате (дата, время, заголовок-ссылка, количество переходов, новость может быть прочитанной или новой)
Ссылка на rss
Ссылка на chrome extension
идентификатор релиза
e-mail обратной связи

Процесс

После нескольких дней расслабленного поиска готового шаблона (css template) пришел к выводу, что это не путь настоящего джедая, т.к. все что проходило эстетический фильтр, застревало в фильтре техническом (см. постановка задачи, сложный код я просто не мог адаптировать под свои нужны). И вот, почти случайно, я попал в рай. Не буду подробно описывать Bootstrap, детали вы можете посмотреть перейдя по ссылке, перечислю основные элементы, для которых имеются готовые стили (иногда по несколько):

Стандартные элементы форматирования html
Списки
Фрагменты кода
Таблицы
Формы
Кнопки
Элементы навигации
Табы
Разбивка на страницы
Миниатюры
Информационные сообщения
Прогресс-бары

На мой взгляд, это очень круто. Все что нужно для оформления прототипа. Далее я расскажу, как использовал элементы 1,4,5 и 7 из списка.

Итак, шаг 1. Подключаем Bootstrap

Скачиваем и распаковываем архив с Bootstrap в корневую папку нашего сайта, подключаем css:

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

Вторая стока нужна для автоматической адаптации интерфейса под поддерживаемые Bootstrap устройства

Шаг 2. Оформляем «мясо».

Под «мясом» я понимаю список новостей. Самым простым способом это можно сделать таблицей с отключенными рамками. Первая колонка — дата (только один раз для группы), вторая колонка — время, третья — заголовок и количество переходов. Все это, согласно правилам Bootstrap нужно упаковать в контейнер:

<body>
  <div class="container">
    <table class="table">
      <tbody>
        <tr>
      	  <td>{Дата}</td>
      	  <td>{Время}</td>
      	  <td><a href="{Ссылка}">{Заголовок}</a> ({Количество переходов})</td>
      	</tr>
      </tbody>
    </table>
  </div>
</body>

Для прочитанных новостей указываем особый класс:

<a href="{Ссылка}" class="muted">{Заголовок}</a>

Шаг 3. Форма отправки ссылки на новость.

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

  <div class="container">
    <form class="well form-inline" method="post">
      <input type="text" class="span10" placeholder="Ссылка на новость" name="new_link">
      <button type="submit" class="btn">Добавить</button>
    </form>
    ...
  </div>

class=«span10» — Bootstrap предполагает построение интерфейса на базе сетки из 12 колонок, наши элементы можно выравнивать по ней. Научным методом проб и ошибок я пришел к ширине поля для ввода равного 10.

Шаг 4,5,6. Шапка.

Мои представления о том, как должен выглядеть удобный сайт предполагают минималистический стиль: все ненужное спрятано, все что не удалось спрятать — бледное. Формы прячем в выпадающее меню, ссылки на rss и chrome extension делаем бледными. Все это упаковываем в заголовок, который приклеиваем к верхней части сайта (class=«navbar navbar-fixed-top»):

<body>
  <div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
      <div class="container">
        <a class="brand" href="">***</a>
        <ul class="nav">
          <li><a href="{Ссылка}">rss</a></li>
          <li><a href="{Ссылка}">chrome extension</a></li>
        </ul>
        <ul class="nav pull-right">
          <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Ваш уникальный код читателя <strong>{Код}</strong><b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a data-toggle="modal" href="#email">Отправить на e-mail</a></li>
            <li><a data-toggle="modal" href="#new_uid">Ввести другой код</a></li>
          </ul>
          </li>
        </ul>
      </div>
    </div>
  </div>
  ...
</body>

Сами формы:

  ...
  <form method="post">
    <div class="modal hide fade" id="email">
      <div class="modal-header">
        <a class="close" data-dismiss="modal">×</a>
        <h3>Отправить уникальный код на e-mail</h3>
      </div>
      <div class="modal-body">
        <input type="text" class="span5" placeholder="e-mail" name="email">
          <p class="help-block">Позволяет синхронизировать прочитанные на разных компьютерах новости.</p>
      </div>
      <div class="modal-footer">
          <button type="submit" class="btn" data-dismiss="modal">Отменить</button>
          <button type="submit" class="btn btn-primary">Отправить</button>
      </div>
    </div>
  </form>

  <form method="post">
    <div class="modal hide fade" id="new_uid">
      <div class="modal-header">
        <a class="close" data-dismiss="modal">×</a>
        <h3>Ввести уникальный код читателя</h3>
      </div>
      <div class="modal-body">
      <input type="text" class="span5" placeholder="Уникальный код" name="new_uid">
          <p class="help-block">Позволяет синхронизировать прочитанные на разных компьютерах новости.</p>
      </div>
      <div class="modal-footer">
          <button type="submit" class="btn" data-dismiss="modal">Отменить</button>
          <button type="submit" class="btn btn-primary">Отправить</button>
      </div>
    </div>
  </form>

Важный момент. Что бы это заработало, нужно подключить пару скриптов:

<head>
  ...
  <script src="/bootstrap/js/jquery-1.7.1.js"></script>
  <script src="/bootstrap/js/bootstrap-dropdown.js"></script>
  <script src="/bootstrap/js/bootstrap-modal.js"></script>
</head>

Шаг 7. Футер.

Дописываем основной контейнер:

  <div class="container">
    ...
    <hr>
    <p class="pull-right muted">релиз 2012/02/19 23:49 *****</p>
  </div>

Результат

Эпилог

Twitter Bootstrap позволил без особых усилий и знаний, не написав ни строчки css и не сильно ломая html-код, получить очень симпатичный интерфейс прототипа, который не стыдно показать людям. Если интересно, в следующей статье я расскажу, как без глубоких знаний PHP+MySQL (имея только базовые навыки программирования) реализовать функционал, позволяющий показать вашу идею на миллион долларов не просто на бумаге, а в виде работающего прототипа.

Спасибо за внимание!

UPD: Не хочется топик в «Я пиарюсь» убирать, убрал все лишние ссылки

Tags:

Bootstrap

Hubs:

Web design