Онлайн-курсы по Bootstrap 3
Выбрать другой урок из курса
Обсуждение
Теория урока

Знакомство с Bootstrap 3

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

В чем преимущества Bootstrap?

  • Легко устанавливается;
  • Много русскоязычной документации и форумов на русском языке;
  • Большое количество готовых шаблонов;
  • Много готовых элементов;
  • Можно легко изменять стандартные css-правила;

Как установить Bootstrap?

На сайте codebra вы будете использовать локальную версию фреймворка, то есть ту, которая находится на сайте codebra. Для этого нужны 4 строчки, первая – это библиотека jQuery, которая необходима для работы bootstrap, остальные три – это файлы библиотеки. Вам не нужно будет все время писать в практике эти четыре строки, они уже будут написаны за вас.

Пример 1
<script src = "/js/lib/jquery.min.js"></script>
<script src = "/lib/bootstrap/js/bootstrap.min.js"></script>
<link href = "/lib/bootstrap/css/bootstrap.min.css" rel = "stylesheet" type = "text/css">
<link href = "/lib/bootstrap/css/bootstrap-theme.min.css" rel = "stylesheet" type = "text/css">

Вместо этих длинных строк, будет отображаться только одна, которую редактировать нельзя!

Пример 2
<!-- подключение bs, НЕ ТРОГАТЬ! -->

О том, как подключить bootstrap к своему сайту, полно информации в интернете. Кстати, для обучения мы будем использовать Bootstrap v3.3.5.

<
×
>
Не публикуйте свой код прямо в комментариях. Во-первых, он плохо отображается. Во-вторых, он может содержать для кого-то «спойлеры», т.е. ответы на практику. Воспользуйтесь специальными сервисами: cssdeck.com или jsfiddle.net.
Комментарии, содержащие код (пару строк не считается), будут безжалостно удаляться.