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

в 17:25, , рубрики: Новости, метки:

Аннотация

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

Вводная

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

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

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

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

Процесс

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

  1. Стандартные элементы форматирования html
  2. Списки
  3. Фрагменты кода
  4. Таблицы
  5. Формы
  6. Кнопки
  7. Элементы навигации
  8. Табы
  9. Разбивка на страницы
  10. Миниатюры
  11. Информационные сообщения
  12. Прогресс-бары

На мой взгляд, это очень круто. Все что нужно для оформления прототипа. Далее я расскажу, как использовал элементы 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> 

Результат

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

Эпилог

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

Автор: dmitriev_dmitry

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js