2 590 Bootstrap — это набор инструментов от Twitter, который помогает вам разрабатывать свои веб-приложения намного быстрее. В Bootstrap входят CSS и Javascript файлы, позволяющие создавать страницы с использованием сеток, шаблонов, типографии, таблиц, форм, навигации, всплывающих окон и т.д. Кроме того, разработчики решили проблемы кроссбраузерной совместимости.
В этом уроке мы постараемся наглядно объяснить вам процесс создания резинового шаблона блога для дисплеев различных устройств, в том числе для iPad и iPhone.
Вы можете просмотреть демо на разных экранах или изменить размер окна своего браузера, чтобы проверить гибкость дизайна.
Скачайте Twitter Bootstrap с .
Bootstrap CSS
Для начала добавьте в свой документ два файла CSS: bootstrap.css и bootstrap-responsive.css. Вы также можете использовать url с сайта github: twitter.github.com
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Page Title</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="assets/css/bootstrap.css" rel="stylesheet"> <link href="assets/css/bootstrap-responsive.css" rel="stylesheet"> </head> <body> // Дизайн разметки страницы. </body> </html> |
Bootstrap JavaScript
Подключите следующие файлы JavaScript и поместите их в конец документа. Это ускорит загрузку страницы.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script src="assets/js/jquery.js"></script> <script src="assets/js/bootstrap-transition.js"></script> <script src="assets/js/bootstrap-alert.js"></script> <script src="assets/js/bootstrap-modal.js"></script> <script src="assets/js/bootstrap-dropdown.js"></script> <script src="assets/js/bootstrap-scrollspy.js"></script> <script src="assets/js/bootstrap-tab.js"></script> <script src="assets/js/bootstrap-tooltip.js"></script> <script src="assets/js/bootstrap-popover.js"></script> <script src="assets/js/bootstrap-button.js"></script> <script src="assets/js/bootstrap-collapse.js"></script> <script src="assets/js/bootstrap-carousel.js"></script> <script src="assets/js/bootstrap-typeahead.js"></script> |
Скачать готовый проект bootstrap (со всеми необходимыми файлами) можно здесь
Сетки
Это сетка, используемая Twitter Bootstrap, она имеет ширину 940px и поддерживает 12 колонок. Класс span1 имеет ширину 40px.
Разметка
Div «container» разделён на две части: на основную область span8 для статей и боковую панель span4 для другой информации. Здесь применен класс row-fluid для гибкого дизайна и правильного отображения на разных устройствах. Это позволяет автоматически изменять размеры div’ов и изображений.
|
1 2 3 4 5 6 7 8 9 10 |
<div class="container"> <div class="row-fluid"> <div class="span8"> // Основная часть </div> <div class="span4"> // Боковая панель </div> </div> </div> |
Схема разметки приведенного кода.
Основная часть
Здесь расположен список статей, содержащий заголовок, описание и картинку. btn — это класс кнопки «read more» («читать далее»).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div class="span8"> // Основная часть <div class="row"> // Список постов <div class="span7"> <h2>Article Title.</h2> <p>Article Description.</p> <p><img src='ArticleImage.png' class="row-fluid"></p> <p><a class="btn" href="#">Read More »</a></p> </div> </div> // Конец списка постов </div> </div> |
Для разных цветов кнопок, просто примените к ним следующие классы.
Боковая панель
Это блок для информации об авторе, виджетов, последних постов и других материалов.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<div class="span4 "> // Боковая панель <div class="well sidebar-nav"> <ul class="nav nav-list"> <li class="nav-header">About Me</li> <li>Author Data</li> <li class="nav-header">Recent Posts</li> <li>link1</li> <li>link1</li> <li>link1</li> <li class="nav-header">Advertisements</li> <li>ad1</li> <li>ad2</li> </ul> </div> </div> |
Навигация
Панель навигации в фиксированном верхнем меню.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<div class="navbar navbar-fixed-top"> <div class="navbar-inner"> // Кнопка меню для iPhone <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> <a class="brand" href="#">9LESSONS.info</a> <div class="nav-collapse"> <ul class="nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Tutorials</a></li> <li><a href="#">Demos</a></li> </ul> </div> </div> </div> |
Нормальный вид для высокого разрешения.
Мобильный вид сворачивает меню в выпадающий список.
Мне кажется, что Twitter Bootstrap слишком сложен для блога. В плане того, что подтягиваются тяжелые css и js.
Тяжеловат, но этот инструмент универсален. Поэтому, конечно, надо будет проводить дополнительную оптимизацию и отказываться от ненужных библиотек и стилей.
Привет, коллеги!
Ну что же, полезный материал для тех, кто хочет попробовать и оценить возможности Twitter Bootstrap.
В своем блоге подготовили материал, как создать шаблон Joomla на базе Twitter Bootstrap. Если кому-то будет интересно, вот ссылки на два урока:
Благодарю.
Sulpher, спасибо! Вдохновился вашими уроками и сел делать шаблон для joomla+joomshopping на bootstrap. Фрейворк в себя влюбляет почти мгновенно. Недостатков не заметил. Сочетание «вес и возможности» идеальное просто!
Спасибо за статью. Вы в примере навигации привели статичное меню. Не знаете как вывести на вордпрессе меню с разметкой бутстраповского меню?