Bootstrap 2.0 от Twitter — CSS фреймворк и не только

Bootstrap от Twitter — это CSS фреймворк. Это не просто CSS фреймворк, это целый набор предопределённых стилей  и плагинов для jQuery, позволяющий быстро строить кроссбраузерные веб-интерфейсы разной направленности. Для использования данного фреймворка не нужно глубоких знаний html, css и javascript. Совсем недавно — 31 января 2012 года было объявлено о выпуске Bootstrap 2.0.  Подробнее обо всём смотрите под катом.

Если Вы ранее имели дело с каким либо CSS фреймворком, то вам по сути должно быть всё понятно. Лично я въехал с первого раза и читая документацию у меня всё сразу гладко и ровно получалось.

Если не имели дело и понятия не имеете что это такое, попробую объяснить.

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

Вы создаёте свою html страничку и подключаете к ней стили от Bootstrap — файл bootstrap.css(или bootstrap.min.css в сжатом виде), файл bootstrap-responsive.css(или bootstrap-responsive.min.css) и javascript файл от Bootstrap — файл bootstrap.js(или то же самое в сжатом виде bootstrap.min.js). Так же для некоторых видов разметки(выпадающие списки, модальные окна) надо будет подключить плагины для jQuery и собственно сам jQuery последней версии.

Все эти файлы, а так же .less файлы, спрайты, плагины для jQuery, примеры и документацию вы можете скачать здесь. Там можно скачать всё или выбрать только нужное. Правда когда скачал всё одним архивом не нашёл там css файла. Но его можно скомпилировать из .less файлов(об этом позже).

Так вот, страница создана, необходимые файлы подключены. Остаётся только в тело документа вставлять блоки, списки(и прочее) и применять к ним заранее определённые стили, указывать у них определённые атрибуты типа data-*.

Расставляя таким образом разметку получаем стилизованный кроссбраузерный веб-интерфейс — списки, формы, меню, выпадающие меню, «карусели» и многое другое. Всё можно посмотреть у них на сайте. Собственно интерфейс самого ихнего сайта сделан на основе ихнего CSS фреймворка.

Помимо кросс-браузерности важно отметить, что вёрстка будет подстраиваться под разные экраны разных устройств. Для этого то и подключается дополнительно файл bootstrap-responsive.css. В нём содержаться стили для разных разрешений экранов. Например для смартфона элементы будут меньше, главное меню вместо множества ссылок сложится в одну кнопку, которую при необходимости можно нажать для доступа к пунктам меню.

Конечно кто то скажет, что это однообразно и на все сайты с разными спецификами не сделаешь одинаковые интерфейсы. Конечно! Но можно же править CSS стили. Кастомизировать. Можно использовать только части стилей, например для построения каркаса страницы.

Даже без переделок созданная вёрстка пригодна для многого:

  1. можно использовать для административных панелей
  2. можно использовать для веб-приложений без претензий к оформлению, для которых всякие рюшечки не важны.
  3. можно по быстрому накидать прототип страницы во время разработки, а необходимый интерфейс применить после.

Что можно сделать с помощью Bootstrap, что он умеет:

  • разметить каркас страницы, верх, низ, сколько колонок, какой ширины будут, после в эти блоки размещаем другие компоненты интерфейса
  • стили для основных элементов страницы (ul, p, blockquote, small, abbr и прочее) уже прописаны
  • есть стили для оформления таблиц
  • есть стили для позиционирования элементов формы, стили для этих элементов, для кнопок заранее прописаны.
  • есть возможность делать кнопки с выпадающим списком
  • прописаны стили для каждой из иконок
  • можно делать группировку кнопок
  • навигация с табами
  • модальные окна
  • тултипы
  • блоки с разного рода сообщениями
  • «аккордионы»
  • «карусели»
  • ввод с подсказками

впрочем можно ещё долго перечислять что можно сделать.

Чуть не забыл написать про less. Это препроцессор для стилей. Можно создавать файлы стилей с расширением .less. Как обычно писать css правила. Но при этом можно дополнять переменными, применять операторы, группировать и многократно вставлять сгруппированные части css правил в нужные части других правил. Так же там, в less, есть ещё множество вкусностей, упрощающих жизнь. Далее созданный файл прогоняем через препроцессор и на выходе получаем css файл со вставленными в нужных местах значениями переменных, подсчитанными с помощью операторов значениями и прочее.

Можно подключать к странице less файл и файл less.js(скачать с вышеуказанного сайта), который будет на лету создавать css правила из less файла. Можно заранее скомпилировать css файлы из less файлов и после уже подключать к странице именно css файлы.

Пока изучал данный css framework, делал всё на одной странице. Пожалуй выложу её тут для просмотра. Или можно скачать одним архивом.

Когда писал статью, хотел вставить какую нибудь ассоциативную картинку, но не нашёл. Разве что можно ассоциировать иконку с Bootstrap, которая подозрительно похожа на иконку социальной сети «ВКонтакте» 🙂

Рубрики: HTML/CSS, Twitter
Понравилось? Поделись с другими плз












Комментарии ВКонтакте





Комментарии с сайта
  1. Fox:

    Огромное спасибо за статью и описание.
    И отдельное спасибо за страничку с примерами. Долгое время не мог понять как подключать файлы к сайту)

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

    Фреймворк действительно потрясающий. Минимализм не мешает сайтам быть очень привлекательными и вполне могут составить конкуренцию современным «разукрашенным» недосайтам.

    Вот только никак не могу разобраться с этой сеткой в 940px
    И нигде не могу найти описание как с ней работать. Может у вас есть ссылка на материал, рассказывающий о размещении элементов в этих блоках, или же просто о том как располагать элементы на странице?

    Ещё раз спасибо за статью.

    • admin:

      спасибо за отзыв

      насчёт сетки, попробую объяснить как смогу
      например в bootstrap разделение на 12 колонок, каждая из которых имеет ширину 60px и расстояние между ними 20px, написано здесь http://twitter.github.com/bootstrap/scaffolding.html
      Как видим в первой строке 12 ячеек шириной 60px и 11 промежутков между ними — пр 20px, в сумме 940px
      для разметки колонок есть предоределённые классы, которые можно использовать. К примеру у нас есть макет, в котором 3 столбца, левый 300px, средний 540px, правый 60px. Для этого нам надо будет сделать следующую разметку

      Таким образом получится 3 столбца. Как видите у правого столбца должна быть ширина 300px, в Bootstrap ширина одного столбца 60px — пишем span4(60 * 4, плюс 3 отступа по 20px). Для остальных столбцов аналогично рассчитывается. Всё в сумме будет шириной 940px. При сужении окна браузера менее 940px блоки «нырнут» друг под друга.
      В примере выше описан обычный нерастягивающийся блок. Если вместо container в блока прописать класс container-fluid и вместо row прописать row-fluid, то данные блоки будут растягиваться по всей ширине браузера, занимая пропорциональную область, левый будет уже, средний шире всех, правый самый узкий.

      Надеюсь ответ получился не сумбурным 🙂

  2. Fox:

    Огромное спасибо.

    Объяснили очень доступно и понятно.

    Побольше бы таких мастеров =)

  3. А если например, клиенту нужен сайт 960 или 980пикс?
    Хотя с сеткой довольно легко верстать мне не очень нравится эта идея.
    Излишнее нагромождение классов и к тому же не семантично.
    Лично мне в этом фреймворке нравится js-часть, думаю её стоит взять на вооружение.
    А по поводу макетов страницы мне нравится вот этот сервис — http://csstemplater.com/
    При разных вариациях позиционирования колонок последовательность html — кода всегда одна и та же: header \ content \ sidebar(s) \ footer.
    Я даже сделал на этой основе для себя что-то вроде микро-фреймворка.

    • admin:

      я думаю можно для нужных случаев перекомпилировать стили при помощи less, при этом указав в файле /less/variables.less нужные значения

  4. Прикольно! Надо попробовать приукрасить свой блог =) Спасибо автору!

  5. Здравствуй (имени твоего к сожалению найти не смог)! У меня проблемы с внедрением
    CSS фреймворка в шаблон своего WordPress блога.

    Пытаюсь интегрировать это в шаблон своего WordPress блога, но почему-то ничего не
    получается.

    Делал я так:

    1) Поместил в тег <head> вот этот код

    <link href="css/bootstrap.css" rel="stylesheet" type="text/css">
    <link href="css/bootstrap-responsive.css" rel="stylesheet" type="text/css">
    <link href="css/prettify.css" rel="stylesheet" type="text/css">
    <link href="css/my.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <script type="text/javascript" src="js/prettify.js"></script>

    2) перед закрывающим тегом <body> указал адреса на JS:

    <script src="js/jquery.js"></script>
    <script src="js/bootstrap-dropdown.js"></script>
    <script src="js/bootstrap-tab.js"></script>
    <script src="js/bootstrap-collapse.js"></script>
    <script src="js/bootstrap-alert.js"></script>
    <script src="js/bootstrap-transition.js"></script>
    <script src="js/bootstrap-modal.js"></script>
    <script src="js/bootstrap-scrollspy.js"></script>
    <script src="js/bootstrap-tooltip.js"></script>
    <script src="js/bootstrap-popover.js"></script>
    <script src="js/bootstrap-button.js"></script>
    <script src="js/bootstrap-carousel.js"></script>
    <script src="js/bootstrap-typeahead.js"></script>
    <script type="text/javascript" src="js/my.js"></script>

    Папки со всеми скриптами и стиля разместил где нужно. В общем сделал все так, как в
    твоем примере. Но ничего не работает ((
    Может я что-то неправильно делаю? Подскажи, пожалуйста.
    С уважением Альберт

    • admin:

      Здравствуйте!
      Видимо у вас проблема с путями.
      В моём примере указаны пути без начального слеша, к примеру js/bootstrap-carousel.js, что означает искать папки, файлы относительно файла, к которому обращаемся.
      То есть если мы просматриваем страницу /path/to/page, то файл будет искаться здесь /path/to/page/js/bootstrap-carousel.js и естественно там его не будет.
      Вы писали что все пути правильные? Вы закинули файлы в корень сайта? Тогда пути надо писать начиная со слеша, то есть /js/bootstrap-carousel.js.
      Но по сути все файлы надо пихать в папку с шаблонами, у WordPress она например находиться по такому пути /wp-content/themes/название шаблона/
      Тогда в файлах шаблона, например header.php или footer.php надо писать пути так
      <?php bloginfo('template_directory'); ?>/js/bootstrap-carousel.js
      где вместо <?php bloginfo('template_directory'); ?> при исполнении подставляется адрес путь к папке текущего шаблона.
      Надеюсь эта информация поможет решить ваши проблемы.
      А зовут меня просто admin 🙂

  6. Ура! Работает! Спасибо большое, Админ =) Когда будет возможность, я расскажу о твоем блоге своим читателям =)

  7. Здравствуй, Админ! Скажи, пожалуйста, могут ли конфликтовать стили от BootStrap с родительскими стилями темы? А то у меня на локальном хосте с одной темой все норм получилось, а с на реальном хосте с текущей темой что-то не прет, вернее прет, но стили как будто накладываются друг на друга и все наперекосяк..

    • admin:

      Да, могут. Видимо в стилях сайта и Bootstrap есть одноимённые стили.
      Наглядно посмотреть, где что перекрывается в стилях и в каких файлах эти стили прописаны можно с помощью плагина к Firefox — Firebug


Ответить Альберт Александров

*