Стартуем с Twitter Bootstrap

Оглавление:

Частная коллекция качественных материалов для тех, кто делает сайты

Стартуем с Twitter Bootstrap

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

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

Пробуем Bootstrap

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

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

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

1 <link rel="stylesheet" href="css/bootstrap.css">
2 <script src="js/bootstrap.min.js" type="text/javascript"></script>

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

CSS: Кнопки

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

1 <button type="button" class="btn">Default Button</button>

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

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

1 <button type="button" class="btn btn-success">Button</button>
2 <button type="button" class="btn btn-warning">Button</button>
3 <button type="button" class="btn btn-danger">Button</button>

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

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

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

1 @btnSuccessBackground:              #bce895; //#62c462;
2 @btnSuccessBackgroundHighlight:     #a0cd78; //#51a351;

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

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

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

1 <div class="btn-group">
2 <button type="button" class="btn btn-success">Button</button>
3 <button type="button" class="btn btn-warning">Button</button>
4 <button type="button" class="btn btn-danger">Button</button>
5 </div>

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

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

1 <div class="btn-group btn-group-vertical">
2 <button type="button" class="btn btn-success">Button</button>
3 <button type="button" class="btn btn-warning">Button</button>
4 <button type="button" class="btn btn-danger">Button</button>
5 </div>

jQuery плагины

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

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

1 <p id="container">Jujubes icing oat cake
2 <a href="#" rel="tooltip" title="a Lolipop Tiramissu?">lollipop tiramisu</a>.
3 Tiramisu sesame snaps croissant chupa chups chupa chups chocolate cake candy sugar plum
4 jelly beans. Lollipop pudding jelly sweet jujubes cookie pudding. Oat cake topping gummi
5 bears oat cake. Muffin jelly-o cake sesame snaps ice cream cotton candy.</p>

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

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

Данный скрипт будет преобразовывать все ссылки, у которых атрибут 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

Данный урок подготовлен для вас командой сайта ruseller.com

Источник урока: http://www.hongkiat.com/blog/twitter-bootstrap/

Перевел: Станислав Протасевич

Урок создан: 14 Марта 2013

Просмотров: 24624

Правила перепечатки


5 последних уроков рубрики «CSS»

  • Анимированные чекбоксы и радиокнопки

    Сегодня мы хотим показать вам демо примеры с анимацией чекбоксов и радиокнопок. Идея состоит в том, чтобы использовать SVG изображения для достижения эффекта анимации.

  • Коллекция различных стилей

    Сегодня мы хотим вам представить несколько интересных стилей, которые могут оказаться полезными. Если у вас на странице есть несколько секций, то неплохо было бы их выделить различным фоном. Различных вариаций можно придумать очень много, и мы хотим показать вам парочку. В примерах мы использовали псевдо-элементы, градиенты и SVG графику.

  • Адаптивное многоколоночная форма

    Данный черновик посвящён созданию многоколоночной формы. Будем использовать медиа запросы и прочие фишки для обеспечения адаптивности формы. Все элементы будут растянуты на 100% ширины колонки.

  • Анимированное меню на границах страницы

    Недавно мы натолкнулись на интересное меню на сайте UI8. Поэтому сегодня рассмотрим как можно реализовать подобные примеры для своих сайтов.

  • Анимация шапки при прокрутке страницы

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

Комментарии (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 намного круче смотрится, и меньше весит

ТОП-10 Хостеров:

Шпаргалки:

Хотите быстро изучить JavaScript и jQuery?

Предлагаю использовать самый эффективный и современный метод обучения — видеокурс.

За счет получения информации сразу по двум каналам (зрение и слух) эффективность обучения значительно превосходит обучение по книгам. А домашние задания и онлайн-тесты позволят вам постоянно думать на изучаемом языке и сразу проверять свои знания!

Более 100 видеоуроков на одном DVD.

Автор: Евгений Попов.

Смотреть видеопрезентацию

Видеокурс «HTML с нуля»

Если вы давно хотите как следует изучить HTML, то у меня для Вас есть отличная новость!

Вы можете совершенно бесплатно получить полноценный курс по HTML из моего платного сборника. 33 видеоурока от Евгения Попова!

Бесплатно!

Список уроков и подробности получения курса здесь

Видеокурс «CSS с нуля»

Если вы уже изучили HTML и хотите двигаться дальше, то следующим шагом будет изучение технологии CSS.

Так же, как и в случае с HTML, вы можете совершенно бесплатно получить полноценный курс по СSS из моего платного сборника. Вас ждет 45 подробных видеоуроков от Евгения Попова!

Бесплатно!

Список уроков и подробности получения курса здесь

Видеокурс «Домен и хостинг»

Если вы хотите разобраться с понятиями домена и хостинга, научиться создавать базы данных, закачивать файлы сайта на сервер по FTP, создавать поддомены, настраивать почтовые ящики для своего сайта и следить за его посещаемостью, то этот курс создан специально для вас!

Бесплатно!

Список уроков и подробности получения курса здесь

Получать новые уроки на E-mail:

Ваш email:

RSS подписка


Подписаться

Рекомендуем

Реклама от Google

Бесплатная подписка на видеоуроки:

Ваше имя на русском:

Ваш Email адрес:

Сделано с помощью сервиса smartresponder

.

© 2013 Евгений Попов. Все права защищены. Служба поддержки

Сайт мониторится с помощью сервиса ping-admin
🙂

http://ruseller.com/lessons.php?rub=2&id=1662

Губарь Маргарита Александровна