span

Использование Bootstrap для дизайна блога

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

В этом уроке мы постараемся наглядно объяснить вам процесс создания резинового шаблона блога для дисплеев различных устройств, в том числе для iPad и iPhone.

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

Скачать Пример

Скачайте Twitter Bootstrap с .

Bootstrap CSS

Для начала добавьте в свой документ два файла CSS: bootstrap.css и bootstrap-responsive.css. Вы также можете использовать url с сайта github: twitter.github.com

Bootstrap JavaScript

Подключите следующие файлы JavaScript и поместите их в конец документа. Это ускорит загрузку страницы.

Скачать готовый проект bootstrap (со всеми необходимыми файлами) можно здесь

Сетки

Это сетка, используемая Twitter Bootstrap, она имеет ширину 940px и поддерживает 12 колонок. Класс span1 имеет ширину 40px.

Разметка

Div «container» разделён на две части: на основную область span8 для статей и боковую панель span4 для другой информации. Здесь применен класс row-fluid для гибкого дизайна и правильного отображения на разных устройствах. Это позволяет автоматически изменять размеры div’ов и изображений.

Схема разметки приведенного кода.

Основная часть

Здесь расположен список статей, содержащий заголовок, описание и картинку. btn — это класс кнопки «read more» («читать далее»).

Для разных цветов кнопок, просто примените к ним следующие классы.

Боковая панель

Это блок для информации об авторе, виджетов, последних постов и других материалов.

Навигация

Панель навигации в фиксированном верхнем меню.

Нормальный вид для высокого разрешения.

Мобильный вид сворачивает меню в выпадающий список.


6 комментариев на “Использование Bootstrap для дизайна блога

  1. Мне кажется, что Twitter Bootstrap слишком сложен для блога. В плане того, что подтягиваются тяжелые css и js.

    Thumb up 0 Thumb down 0

    • Тяжеловат, но этот инструмент универсален. Поэтому, конечно, надо будет проводить дополнительную оптимизацию и отказываться от ненужных библиотек и стилей.

      Thumb up 0 Thumb down 0

  2. Привет, коллеги!

    Ну что же, полезный материал для тех, кто хочет попробовать и оценить возможности Twitter Bootstrap.

    В своем блоге подготовили материал, как создать шаблон Joomla на базе Twitter Bootstrap. Если кому-то будет интересно, вот ссылки на два урока:

    joomlablog.ru/uroki-jooml...witter-bootstrap

    joomlablog.ru/uroki-jooml...witter-bootstrap

    Thumb up 0 Thumb down 0

    • Sulpher, спасибо! Вдохновился вашими уроками и сел делать шаблон для joomla+joomshopping на bootstrap. Фрейворк в себя влюбляет почти мгновенно. Недостатков не заметил. Сочетание «вес и возможности» идеальное просто!

      Thumb up 0 Thumb down 0

  3. Спасибо за статью. Вы в примере навигации привели статичное меню. Не знаете как вывести на вордпрессе меню с разметкой бутстраповского меню?

    Thumb up 0 Thumb down 0

Оставить комментарий