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

    Аннотация


    В статье я попробую рассказать о том, как на базе 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="">***</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: Не хочется топик в «Я пиарюсь» убирать, убрал все лишние ссылки
    Поделиться публикацией

    Комментарии 38

      +1
      Немного не по теме статьи, но всё же: при попытке открыть ссылку на вашем сервисе вываливается такое окно: image
        +2
        Это все описано на http://twitter.github.com/bootstrap/, только что на английском.

        Было бы круто, если бы вы сразу писали как реализовать функционал для идеи на миллион:)
          +2
          Честно признаюсь, что статья мне не понравилась. «Описан» базовый функционал, про который можно почитать в документации к bootstrap. И да, статья в основном состоит из простого кода, что тоже не хорошо.
            +9
            Ребята, перечитайте первый абзац пожалуйста! Статья для неспециалистов в дизайне и программировании, таких, как я.
              0
              Что ж вы статью на эту тему пишите, раз не специалист?:) [шутка конечно]
              Просто правда, все что тут описано описано на пяти страницах документации.
                +6
                Мне очень не хватало такой статьи что бы быстрее разобраться, с английским у меня тоже не очень… Но я в таком восторге от Bootstrap, что очень хочется со всем поделиться! )))
                  +2
                  В любом случае, старались вы не зря:)
                  22 человека забрало в избранное.
                    0
                    Перенесите из песочницы, карма ж вроде есть
                  0
                  В Q&A Вам уже намекнули, что низкокачественные «статьи для новичков» не особо интересны аудитории, здесь обитающей. Описали бы что-нибудь необычное.
                    +3
                    Значит я старался для оставшееся меньшинства. Почему его все время игнорируют? :)
                      +1
                      Потому что под пользователем Хабра подразумевается человек, как минимум умеющий читать маны и владеющий английским хотя бы со словарем.
                      Раньше так было точно…
                      Это все за исключением НЛО конечно :]
                      +5
                      Из этот статьи я, например, узнал что есть такая штука как Twitter Bootstrap, за что признателен автору. Инициативу писать полезные статьи для сообщества надо поощрять, а не критиковать.
                    –2
                    Нехорошо детей учить табличной верстке.
                      +11
                      Нехорошо учить несемантической вёрстке. Тут таблица, по-моему, довольно семантично вписывается.
                        0
                        Хех, как-будто div или что-то другое там не вписывается семантически)
                      +2
                      Статьи разные нужны, статьи разные важны. Счётчик избранного показывает, что статья вполне себе востребована. Каждому нужно с чего-то начать и этой статьи вполне достаточно, чтоб разобраться в основных принципах.
                        +2
                        А еще Хабр надо закрыть от поисковиков, чтение контента тоже только авторизованным и можно упиваться своей элитарностью!!!
                          0
                          Кажется топик должен быть в блоге «Я пиарюсь» :)
                            0
                            Точно, спасибо!
                              +1
                              см. UPD. Надеюсь я правильно расставил приоритеты :)
                              +1
                              Bootstrap это здорово, особенно с выходом второй версии. Программисты «недизайнеры» теперь могут делать свои проекты достаточно красивыми и не париться что-либо рисовать или верстать. Вот к примеру то, что мне удалось сделать за день с WordPress + Bootstrap + Twitter API: Foller.me :) да, я тоже пиарюсь :D
                                +2
                                Здорово:) У меня такая идея появилась недавно, а вот она уже и воплощена!
                                  0
                                  Решил сделать немного другое:)
                                  http://masterrr.name/vk/
                                    +1
                                    Вау клёво! Я тоже злоупотребил немного лейблами =)
                                      0
                                      Да, хороший элемент:)
                                    0
                                    Выглядит великолепно.
                                      0
                                      Спасибо =)
                                  • НЛО прилетело и опубликовало эту надпись здесь
                                      0
                                      Нужных файлов js нет в архиве, который скачал, перейдя по ссылке.
                                        0
                                        Они все встроены в единственный файл bootstrap.js
                                        0
                                        > Если интересно, в следующей статье я расскажу, как без глубоких знаний PHP+MySQL (имея только базовые навыки программирования) реализовать функционал, позволяющий показать вашу идею на миллион долларов не просто на бумаге, а в виде работающего прототипа.

                                        Вы открыли для себя такую вещь, как фрэймворки?
                                          0
                                          Нет. К сожалению, не смог осилить ни одного PHP-фрэймворка.
                                          0
                                          А можно ссылку на вашу систему сюда в комент скинуть — интересно посмотреть
                                            0
                                            Ответил вам личным сообщением
                                              0
                                              А можно ссылку на вашу систему личным сообщением скинуть — интересно посмотреть
                                            0
                                            Где идея на миллион?
                                              0
                                              Спасибо, материал помог хоть немного разобратся!
                                                0
                                                Проснулся жуткий интерес к bootstrap'у. Simpliste, да простят меня поклонники, по сравнению с ним ребенок :)

                                                Подскажите пожалуйста, я так понимаю, что boоtstrap это только оформление. А сам каркас можно делсть на чем угодно, php, html, aspx, cshtml? Если это так, то что выбрать для хостинга на .Net — простой html или cshtml, а может aspx??? Я не могу найти готовый вариант, чтобы подсмотреть, везде лишь стили и скрипты…

                                                Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                                Самое читаемое