Знакомство с Bootstrap
Привет, дорогие друзья! В сегодняшней статье, я хочу рассказать Вам об современном CSS Фреймворке – Bootstrap. Кто не в курсе, фреймворк – это каркас для работы над проектом, набор готовых функций и решений для быстрой и эффективной разработки.
Серия видеоуроков по работе с фреймворком
Данный CSS Фреймворк обладает большущим списком css свойств, для стилизации, положения, реализации необходимых элементов на странице тем или иным образом с минимум усилий. По сути, все что Вам будет нужно – это задать необходимые классы и атрибуты элементам страницы, которые вы хотите видоизменить при помощи данного инструмента Bootstrap. Но об этом позже..
Так же, в данный Фреймворк интегрирован Jquery UI (User Interface), который с легкость поможет в создании различных визуальных эффектов: модальные окна, всплывающие подсказки, слайдеры и тому подобное. И все это на основании свойств и шаблонов Bootstrap.
Подключение Bootstrap
Чтобы подключить Фреймворк в Ваш проект, необходимо скачать архив с таблицей стилей и Jquery библиотекой Bootstrap.
Скачать Bootstrap
Разархивируйте содержимое скачанного архива в Ваш проект. Архив содержит три папки js, css, img. Распределите их содержимое согласно структуре Вашего проекта, исключительно для удобства.
Подключение:
<head> <link href="styles/bootstrap.min.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/jquery1.9.1.min.js"></script> <script type="text/javascript" src="js/bootstrap.min.js"></script> </head>
Папку img, так же ,можете поместить в директорию styles/. В этой папке хранятся спрайты иконок в белых и черных цветах. Данные иконки используются определенными css свойствами для стилизации элементов форм, списков и т.д.
От теории к практике?
В полном объеме инструмент Bootstrap имеет очень большой и гибкий набор свойств для работы с элементами на веб-странице. Рассмотрим некоторые примеры, чтобы иметь общую картину его работы.
Создание структуры сайта
Возьмем для примера контейнер(обертку) сайта и внутри сделаем нужное количество плавающих колонок.
Что мы видим? У нас получился двух колоночный макет сайта, с плавающей структурой фиксированной ширины. В чем логика работы? По умолчанию макет делиться на 12 колонок (span*) c шириной по умолчанию 940px.
<div class="container"> <div class="row"> <div class="span4">SIDEBAR</div> <div class="span8">CONTENT</div> </div> </div>
Для начала мы задаем нашему блоку контейнера класс container - он говорит о том, что структура блока будет плавающей, но с фиксированной шириной в 940px. Дальше, внутри контейнера, мы задаем блок с классом row - он определяет уже родительский блок-строку для наших плавающих колонок с фиксированной шириной. Теперь внутри этого родительского элемента, под каждую колонку мы задаем свой div с классом span*, где * – это количество колонок макета (исходя от 12), которые будет занимать этот блок.
В моем примере, левый блок занимает 4 колонки, а правый 8, с таким соотношением и получаем стабильный двух-колоночный макет.
НЕ забывайте о том, что количество дочерних колонок не должно превышать значение родителя. То есть, в элемент с классом span4 нельзя вложить 5 блоков span1 или блок span5. Я думаю, логику вы уловили.
Резиновая структура
Если Вам необходимо создать резиновый макет, то используйте вместе класса .container класс .conteiner-fluid, и так же вместо .row .row-fluid. Это позволяет рассчитывать ширину блоков относительно ширины родительского элемента.
Адаптивная структура
Bootstrap так же предоставляет хороший функционал для создания динамического дизайна Вашего сайта, которой позволит оптимизировать его отображение под разные устройства: мониторы, планшеты, смартфоны.
Чтобы использовать данный функционал, необходимо подключить специальный meta-тег, а так же специальную таблицу стилей, которая так же входит в состав скачанного Ваши архива.
<head> <meta name="viewport" content="width=device-width, initial-scale = 1.0"> <link type="text/css" rel="stylesheet" href="styles/bootstrap-responsive.css"> </head>
Таким образом, если требуется отображать сайт на разных устройствах, с разным разрешением, то необходимо использовать таблицу стилей bootstrap-responsive.css и резиновую верстку (классы fluid).
Любые формы, таблицы – это просто
C помощью bootstrap, Вы с легкостью можете создавать любые формы, таблицы на сайт, в нужном Вам виде.
| # | Name | Age | |
|---|---|---|---|
| 1 | Sergey | sergey@mail.ru | 21 |
| 2 | Tom | tom@mail.ru | 33 |
| 3 | Jack | jack@mail.ru | 16 |
Мы создали обычную таблицу с закругленными углами, хорошо читабельную, при наведении строки выделяются цветом.
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Email</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td> Sergey</td>
<td>sergey@mail.ru</td>
<td>21</td>
</tr>
<tr>
<td>2</td>
<td>Tom</td>
<td>tom@mail.ru</td>
<td>33</td>
</tr>
<tr>
<td>3</td>
<td>Jack</td>
<td>jack@mail.ru</td>
<td>16</td>
</tr>
</tbody>
</table>
Всего этого мы достигли, за счет добавления в тег <table> нескольких специальных классов:
- table – базовый класс для таблицы, от которого исходят дополнительные (указанные ниже)
- table-bordered – задает скругленные углы таблице
- table-hover – выделяет строку цветом при наведении(кроме строки с именами ячеек)
Стилизуем элементы
На всех сайтах используются кнопки. В Bootstrap имеется список классов, добавление которых в кнопкам задает им красивый и стильный вид.
<button class="btn btn-large">Большая кнопка</button> <button class="btn btn-primary btn-success btn-primary">Средняя кнопка</button> <button class="btn btn-danger btn-small">Маленькая кнопка</button>
Класс .btn - базовый класс для стилизации кнопки.
Для установки размера, используются классы:
- btn-mini – очень маленькая
- btn-small – маленькая кнопка
- btn-medium – среднеяя (стандартная)
- btn-large – большая
Для окраски кнопки, можно применить классы:
- btn – задает обычный серый градиент
- btn-success – зеленый градиент (успех)
- btn-danger – красный градиент (ошибка или подобное действие)
- btn-warning – оранжевый градиент (предупреждение)
- btn-info – голубой градиент (кнопка с информацией)
- btn-link – преобразовать кнопку в стиль ссылки
- btn-inverse – черный градиент
Данные классы можно применять не только к тегу button, их можно применить к: submit, a.
Bootstrap UI
Bootstrap предоставляет большой функционал по использованию, уже всем известного, Jquery UI, который более просто и гибко реализован в данном Фреймворке – Javascript Bootstrap.
Документация по всем классам, шаблонам и js манипуляциям подробно описана на русскоязычном офф. ресурсе Фреймворка http://mybootstrap.ru/.
В заключении…
Надеюсь, статья была Вам полезна, и прочитав ее, Вы попробуйте данный CSS Фреймворк в своих проектах или просто на практике.
Спасибо за внимание.
Автор: Сергей Губарев
P.S. некоторые элементы bootstrap Вы можете увидеть на этом сайте (меню, в разделе “контакты”, перейдя в любую категорию и т.д.)
Серия видеоуроков по работе с фреймворком
Что то как то у меня проблемы с выпадающим списком меню, всё вроде копирую правильно, но меню не выпадает кнопка не активна, работает только как ссылка.
Посмотрите этот урок: http://2develop.ru/bootstrap-part2
Дмитрий, как раз его и смотрел и повторял, всё как там и вот такая ерунда, хоть код высылай))))
К такому подходу решения проблем не стоит привыкать.
Да я понимаю что самому надо решать проблему, если всё время помогать будут толку мало. Хотел ещё спросить каким образом вы прикручивали всё это на свой сайт он же на вордпрессе, а там основа это PHP, мне по крайней мере не понятно как это делать.
Здравствуйте Дмитрий Валак. Какой программой вы пользуетесь для правки кода? Просто я вижу что она некоторый код сама подставляет, вам только начало нужно написать, а там уже высвечиваются подбор.
Здравствуйте, Виталий. Я пользуюсь программой Aptana Studio 3
Это же просто css классы, которые можно использовать в принципе на любом сайте.
Делается это таким же образом как и на простом сайте.
Но в уроках не только CSS там используется и HTML я поэтому и спросил. Ведь и в HTML тоже прописываеться и не мало не только CSS.