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

Аннотация

В статье я попробую рассказать о том, как на базе 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="">Trendel.ru</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">


        
                Bootstrap
        

        
            
            
            
            
    
      24.02.2012 22:25+0400

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

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