Введение в Twitter Bootstrap
Twitter Bootstrap является невероятно популярным front-end framework-ом, который используют многие дизайнеры, разработчики и компании. Он с открытым исходным кодом, прост в использовании, адаптивный, кросс-браузерный (по утверждению разработчиков он совместим даже с IE7). Как и для всех популярных фреймворков существует множество готовых тем, но это не то, что мы будем рассматривать в данной статье. Пожалуйста, обратите внимание, что это руководство написано для Bootstrap 2.3.2 и многое из затронутого в статье может измениться в будущем.
Для чего это нужно?
Bootstrap предоставляет большие возможности для быстрого создания макетов или веб-сайтов. Он сделан разработчиками для разработчиков.
С чего начать?
Вы можете скачать Twitter Bootstrap с официального веб-сайта или с Github. Я предлагаю вам скачивать его с сайта, потому что сайт также предоставляет вам множество информации о фреймворке.
Изучите возможности
Как я уже упоминал во введении, Twitter Bootstrap является полноценным фреймворком. Он дает вам массу возможностей, поэтому изучение его может занять некоторое время.
Приступая к работе
Пакет по умолчанию не что иное, как структура папок с файлами CSS, JS и изображениями. Создайте простой файл index.html и подключите к странице эти файлы, как показано ниже:
< !DOCTYPE html> <html> <head> <title>Bootstrap 101 Template</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"/> <link href="css/style.css" rel="stylesheet" media="screen"/> </head> <body> <h1>Привет, мир!</h1> <script src="http://code.jquery.com/jquery.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
Приведенный выше код не очень отличается от кода, который вы обычно пишете для стандартных веб-проектов. Единственное различие в том, что мы подлючаем файлы Bootstrap, чтобы использовать возможности фреймворка на нашем сайте. (Вы , возможно, захотите изменить некоторые стили по умолчанию, поэтому мы добавили style.css к разметке.)
Если вы хотите иметь представление о том, как выглядят сайты, которые используют Twitter Bootstrap, то вы можете посмотреть их примеры.
В этом уроке мы собираемся сделать страницу профиля пользователя, например, в блоге. Веб-страница, которую мы собираемся создавать будет иметь следующую структуру: навигационная панель с некоторыми элементами управления, меню “хлебные крошки”, боковая панель, основное содержание и небольшой нижний колонтитул.
Пример ниже:
Макет
Давайте начнем с чего-нибудь простого и очевидного, например, с макета. Bootstrap предоставляет готовую 12-колоночную сетку, которую можно довольно легко создать путем добавления класса “spanX”. Чтобы разместить содержание по центру мы добавим контейнер для нашей HTML-разметки.
<div class="container"> <div class="row page-header"> <!-- Заголовок страницы и форма поиска --> </div> <!-- breadcrumb --> <div class="row"> <div class="span4"> <!-- Боковая колонка --> </div> <div class="span8"> <!-- content --> <div class="page-header"> <h2>Посты в блоге</h2> </div> <article class="clearfix"> <!-- post introduction --> </article> <article class="clearfix"> <!-- post introduction --> </article> <article class="clearfix"> <!-- post introduction --> </article> <div class="pagination"> <!-- Pagination --> </div> </div> </div> <div class="row"> <!-- Footer --> </div> </div>
Как вы можете видеть, я применил пару классов для элементов, которые имеют нужные стили и поведение. Каждая строка сетки обернута в элемент с классом “rows”. Я также применил классы, такие как page-header & pagination, потому что они задают специальный стиль Bootstrap.
Заголовок
Заголовок содержит логотип и простую форма поиска. Я уже создал некоторое пространство для заголовка в нашем макете разметки, куда мы должны вставить следующий код:
<h1 class="pull-left">Заголовок</h1> <form class="form-search pull-right span4"> <input type="text" name="search" class="input-large search-query" placeholder="Поиск на сайте..." /> <button type="submit" class="btn pull-right">Поиск</button> </form>
Я использовал классы, которые я не упоминал раньше, это form-search, pull-right, input-medium, search-query и btn. Названия некоторых классом вполне определенно говорит о их свойствах, но некоторые не настолько очевидны. Например класс search-query задает круглые границы для поле ввода. Более подробную информацию об этих классах можно найти здесь и здесь.
“Хлебные крошки”
<ul class="breadcrumb span12"> <li><a href="#">Главная</a> <span class="divider">/</span></li> <li class="active">Блог</li> </ul>
Breadcrumb – это неупорядоченный список стилизованный при помощи класса breadcrumb, для того, чтобы задать стили для активной страницы в меню, вы можете добавить класс “active”.
Боковая панель
<img src="img/me.jpg" class="img-polaroid"/> <h2>Имя пользователя</h2> <span class="label marginbottom">UX designer и блоггер</span> <p> <strong>Место жительства</strong><br /> San Francisco </p> <p> <strong>Дополнительная информация</strong><br /> Lorem ipsum dolor sit amet. </p>
Чтобы добавить привлекательную рамку для аватара, я добавил класс “img-polaroid” для тега изображения. Я также добавил класс label, так чтобы подзаголовок выглядел немного красивее.
Содержание
Это немного сложнее, чем остальное, потому что оно требует обертку, чтобы предотвратить не красивый вид содержания, когда контента больше, чем в боковой панели.
Заголовок
<div class="page-header notop"> <h2>Записи в вашем блоге</h2> </div>
Статьи
<article class="clearfix"> <a class="thumbnail pull-left"> <img src="#"/> </a> <header> <h3>Интервью с Daryl Ginn</h3> </header> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut libero tortor, adipiscing non magna sed, sollicitudin laoreet quam. Sed a turpis in nisl gravida luctus. Quisque felis sem, auctor non dictum et [...] </p> <a class="btn">Читать далее &raquo;</a> </article>
Класс thumbnail задает изображению такой же внешний вид, как класс img-polaroid, который я использовал в боковой панели, однако этот класс также добавляет в стили состояния при наведении курсора.
Нумерация страниц
<ul> <li class="disabled"><a href="#">&laquo;</a></li> <li class="active"><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">&raquo;</a></li> </ul>
Примечание: убедитесь, что нумерация страниц обернута в тег, который имеет класс “pagination“. (Класс disable создает вид некликабельной кнопки.)
Нижний колонтитул
<p class="text-center">Copyright &copy; 2013</p>
Класс text-center центрирует текст по горизонтали. Вы также можете использовать классы text-left и text-right для выравнивания текста по нужной вам стороне.
Текущее состояние:
Если вы использовали ту же разметку что и я, то у вас должно получиться что-то подобное:
Как вы можете заметить, вид пока не идеальный. Отсутствует отступ между статьями и изображениями. Теперь самое время задать ряд пользовательских стилей.
Дополнительные стили
/*
LEGEND
article = Blog posts
.form-search = search form
a.thumbnail.pull-left = the post thumbnail
.notop and .notop h2 = self added classes to improve vertical alignment
.margin-bottom = self added class to improve vertical alignment
.breadcrumb = the website's breadcrumb
*/
article {
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 1px solid #eee;
}
article header h3 {
margin-top: 0;
}
.form-search {
margin-top: 20px;
}
.form-search input[type=text] {
width: 195px;
}
a.thumbnail.pull-left {
margin-right: 20px;
}
.notop, .notop h2 {
margin-top: 0;
}
.marginbottom {
margin-bottom: 20px;
}
.breadcrumb {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Я добавил класс .notop к элементам, которым не нужен верхний отступ. Также добавил отступ справа для превью изображений и еще ряд стилей, которые делать итоговый результат привлекательнее.
Заключение
Проверьте прикрепленный файл, чтобы убедиться, что вы получили те же результаты, что и мы.
Все это требует очень мало усилий и конечный результат выглядит довольно профессионально. Минимум усилий является одной из причин, почему множество людей и компаний по всему миру работают с Twitter Bootstrap или аналогичными фреймворками.
Источник
