Стартуем с Twitter Bootstrap

Писать сайт с нуля очень сложно. Даже матёрые разработчики, хорошо знающие такие языки, как JavaScript, HTML и CSS, сталкиваются с различного рода проблемами во время рабочего процесса. К счастью, разработчики и дизайнеры Twitter решили внести свой вклад в решение данной проблемы и запустили фрэймворк под названием Bootstrap, который предназначен для упрощения жизни дизайнеров и веб-девелоперов.

В этой статье мы познакомимся с Bootstrap и попробуем на практике некоторые компоненты, для того чтобы убедиться, что данный фрэймворк действительно упрощает работу над созданием сайта.

Пробуем Bootstrap

Bootstrap — это очень мощный фрэймворк, оснащённый большим арсеналом готовых компонентов, которые нужны практически при разработке любого сайта:

• CSS сетка для построения адаптивного веб-дизайна
• CSS код оформления текста, кнопок, форм, таблиц и изображений
• Элементы пользовательского интерфейса: навигация, процент загрузки, всплывающие окна, постраничное разбиение контента, “хлебные крошки” и так далее. Все данные элементы также красиво оформлены CSS правилами
• jQuery плагины для использования интерактивных элементов сайта

Для дальнейшей работы вам необходимо скачать Bootstrap и подключить файлы библиотеки:

Теперь можно работать!

CSS: Кнопки

В Bootstrap-е заложены CSS правила для стилизации HTML элементов, включая <button>. Данный элемент используется очень часто, поэтому в Bootstrap-е для него создали специальный класс btn:

Результат отображения вы можете увидеть ниже:

Также мы можем воспользоваться и другими классами для кнопок, чтобы обозначить их роль:

В зависимости от роли кнопки, она будет окрашена в разные цвета:

К слову сказать, при разработке стилей Bootstrap использовали инструмент LESS. Мы уже рассматривали работу с LESS ранее. Если вы захотите каким-то образом изменить стандартный облик кнопок, то учитывайте это.

К примеру, если мы хотим изменить цвет кнопки с классом btn-success, то просто скорректируйте соответствующую переменную, затем пропустите код через LESS.

Такие элементы, как тень, градиент, будут автоматически конфигурироваться под новые условия:

Элементы пользовательского интерфейса

Bootstrap также содержит элементы пользовательского интерфейса: навигация, процент загрузки, всплывающие окна, постраничное разбиение контента, “хлебные крошки” и так далее. Добавить эти элементы также просто, как и оформить кнопку. Давайте возьмём предыдущий пример и поместим все кнопки в группу:

Теперь наши кнопки обёрнуты в div с классом btn-group:

Также мы можем воспользоваться и другими классами для изменения позиционирования группы кнопок. К примеру, выстроим их вертикально. Для этого добавим класс btn-group-vertical:

jQuery плагины

Я до сих пор помню то время, когда мои сайты были статичными, и я долго искал какие-то плагины для добавления интерактивных элементов. Теперь этого делать не надо, потому что в Bootstrap-е есть куча jQuery плагинов для создания аккордеонов, всплывающих подсказок, модальных и всплывающих окон, табов и прочего..

В следующем примере мы применим плагин Tooltip:

Прошу обратить внимание на то, что мы добавили ссылке атрибут rel и title. Таким образом, подсказка возникнет, когда мы подведём мышь к слову. Для активации плагина, напишем скрипт:

Данный скрипт будет преобразовывать все ссылки, у которых атрибут rel равен tooltip в элементе с id = container.

Вот так вот просто в наше время. 🙂 Раньше подключение разных плагинов могло вызвать ошибки, конфликты переменных. Теперь же, при использовании Bootstrap jQuery плагинов, такого не случится.

Настройка под себя

На самом деле Bootstrap — действительно гигантская библиотека, и возможно, для ваших нужд она не нужна в полном объёме. Именно поэтому создатели предоставляют специальную страницу, где мы можем выбрать только те компоненты, которые нам нужны.

Заключение

Конечно же, в Bootstrap-е намного больше компонентов. В следующих уроках мы будем постепенно их изучать. Ниже вы сможете найти небольшой список сайтов, который используют Bootstrap. Надеюсь, кто-то будет впечатлён!

The Studio Dreams

Madeira Cloud

Open Cooks

Leanix

BreweryDB

Kippt

8020 Select

Appster

WS Interactive

Percentage Calculator

Комментарии (18):

• 14 Марта 2013 16:10

  target_blank

  Действительно крутой фрэймворк! На его основе создаются многие другие типа bootmetro
• 14 Марта 2013 18:04

  teha

  Фреймворк отличный, но писать 100500 уроков по нему не стоит. На оф. сайте все уже и так написано. Лучше что-нибудь еще интересное выложите.За урок спасибо!
  • 17 Марта 2013 00:37

    timondrik1991

    Кому то удобнее увидеть всё тут и не стоит решать за всех.
• 14 Марта 2013 23:38

  TARAKANhoy

  Какихто вводных моментов будет вполне достаточно для использования этого фреймворка. Вот русская документация не помешала бы)
  • 16 Марта 2013 00:05

    Electrica

    http://mybootstrap.ru/ вот тут русская документация
• 16 Марта 2013 22:02

  maratio23

  А этот код куда ставить?

  $('#container').tooltip({ selector: "a[rel=tooltip]"});

  ,чето я не разобрался(
  • 16 Марта 2013 22:14

    stas.protasevich

    Во-первых, поскольку все плагины Bootstrap это jQuery плагины, вам необходимо перед подключением bootstrap.min.js подключить сам jQuery:

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

    Далее код подключения Tooltip поместите в обычный блок инициализации jQuery:

    <script type="text/javascript"> $("document").ready(function(){ // код tooltip });</script>

    Перед выводом параграфа сделайте пару переносов на новую строку br, чтобы увидеть tooltip.
    • 17 Марта 2013 10:42

      maratio23

      Спасибо, все получилось.Ждем новых подробностей про bootstrap.
      • 21 Марта 2013 19:22

        ghbrjkbcn

        А у меня не получилось может скинешь на почту fantom-315@yandex.ru пример как ты выводил а то плагин вроде хороший
    • 30 Сентября 2013 23:39

      xoxa99

      // код tooltip

      а что является кодом тултип? напишите полностью, вместе с script
• 17 Марта 2013 04:56

  north_leshiy

  Полезно!!! Ждем продолжения!
• 14 Апреля 2013 18:04

  ikeacatalogue

  Подскажите, на страничке bootstrap js http://twitter.github.io/bootstrap/javascript.html есть пример Example alerts, не могу разобраться каким образом они добавляют крест выхода в alert поле?Они пишут UsageEnable dismissal of an alert via JavaScript:$(«.alert»).alert()Но при этом на самой странице с примером в коде я этой строки не нашел?
  • 14 Апреля 2013 18:32

    stas.protasevich

    не понял вопрос. как они добавляют значок закрытия или что?
    • 14 Апреля 2013 20:16

      ikeacatalogue

      да, все верно- как они добавляют значок закрытия?
      • 15 Апреля 2013 09:10

        stas.protasevich

        Вот пример с кнопкой закрытия:

        <div id="qwe" class="red alert alert-block alert-error fade in"><a class="close" data-dismiss="alert" href="#">&times;</a>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, provident, quae minima non maiores earum ea deserunt cupiditate asperiores sunt praesentium maxime corrupti debitis quod laudantium temporibus voluptates laborum itaque.</div>
        • 15 Апреля 2013 21:38

          ikeacatalogue

          Спасибо.
• 20 Июня 2013 18:31

  sergejweb

  Вот еще ресурс на русском языке про Twitter Bootstrap www.bootstrap-ninja.ru
• Комментарий удален
  • 17 Марта 2013 15:23

    malina95

    Согласен, bootstrap хоть и мощный и большой, но он уже немного устарел… Мне кажется что дизайн windows 8 намного круче смотрится, и меньше весит