Аннотация
В статье я попробую рассказать о том, как на базе 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">×</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 trendel.ru</p> </div>
Результат
Эпилог
Twitter Bootstrap позволил без особых усилий и знаний, не написав ни строчки css и не сильно ломая html-код, получить очень симпатичный интерфейс прототипа, который не стыдно показать людям. Если интересно, в следующей статье я расскажу, как без глубоких знаний PHP+MySQL (имея только базовые навыки программирования) реализовать функционал, позволяющий показать вашу идею на миллион долларов не просто на бумаге, а в виде работающего прототипа.
Спасибо за внимание!
Автор: dmitriev_dmitry
