- PVSM.RU - https://www.pvsm.ru -
В статье я попробую рассказать о том, как на базе Twitter Bootstrap можно очень легко реализовать приятный пользовательский интерфейс небольшого (одностраничного) web-приложения, владея лишь базовыми знаниями html. Сразу предупреждаю, специалистам будет не интересно, речь пойдет о базовом стандартном функционале.
В свободное время в качестве хобби разрабатываю одностраничный агрегатор интересных заголовков новостных лент. В какой-то момент базовый функционал прототипа оказался готов, не хватало отметки только напротив задачи «Дизайн».
Получить красивый пользовательский интерфейс, не владея магией дизайнера (есть только базовые знания paint) и программиста (есть только базовые знания html и css).
Страница состоит из следующих элементов
После нескольких дней расслабленного поиска готового шаблона (css template) пришел к выводу, что это не путь настоящего джедая, т.к. все что проходило эстетический фильтр, застревало в фильтре техническом (см. постановка задачи, сложный код я просто не мог адаптировать под свои нужны). И вот, почти случайно, я попал в рай [1]. Не буду подробно описывать Bootstrap, детали вы можете посмотреть перейдя по ссылке, перечислю основные элементы, для которых имеются готовые стили (иногда по несколько):
На мой взгляд, это очень круто. Все что нужно для оформления прототипа. Далее я расскажу, как использовал элементы 1,4,5 и 7 из списка.
Скачиваем и распаковываем архив с Bootstrap в корневую папку нашего сайта, подключаем css:
<head> ... <link href="/bootstrap/css/bootstrap.css" rel="stylesheet"> <link href="/bootstrap/css/bootstrap-responsive.css" rel="stylesheet"> ... </head>
Вторая стока нужна для автоматической адаптации интерфейса под поддерживаемые Bootstrap устройства
Под «мясом» я понимаю список новостей. Самым простым способом это можно сделать таблицей с отключенными рамками. Первая колонка — дата (только один раз для группы), вторая колонка — время, третья — заголовок и количество переходов. Все это, согласно правилам 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>
Тут опять все просто, 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.
Мои представления о том, как должен выглядеть удобный сайт предполагают минималистический стиль: все ненужное спрятано, все что не удалось спрятать — бледное. Формы прячем в выпадающее меню, ссылки на 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>
Дописываем основной контейнер:
<div class="container"> ... <hr> <p class="pull-right muted">релиз 2012/02/19 23:49 trendel.ru</p> </div>
Trendel.ru [2]
Twitter Bootstrap позволил без особых усилий и знаний, не написав ни строчки css и не сильно ломая html-код, получить очень симпатичный интерфейс прототипа, который не стыдно показать людям. Если интересно, в следующей статье я расскажу, как без глубоких знаний PHP+MySQL (имея только базовые навыки программирования) реализовать функционал, позволяющий показать вашу идею на миллион долларов не просто на бумаге, а в виде работающего прототипа.
Спасибо за внимание!
Автор: dmitriev_dmitry
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/news/2431
Ссылки в тексте:
[1] рай: http://twitter.github.com/bootstrap/
[2] Trendel.ru: http://trendel.ru/
Нажмите здесь для печати.