Стартуем с 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>.
3Tiramisu sesame snaps croissant chupa chups chupa chups chocolate cake candy sugar plum
4jelly beans. Lollipop pudding jelly sweet jujubes cookie pudding. Oat cake topping gummi
5bears 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

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