Урок 6. Знакомство с Bootstrap. Часть 1



Один из самых популярных наборов инструментов для создания веб-страниц - Bootstrap. Это набор шаблонов HTML и CSS для оформления навигационной панели, кнопок, форм и других элементов.

Подключение Bootstrap

Для того, чтобы использовать наборы Bootstrap, необходимо их подключить. Это делается точно так же, как и обычные css- и js-файлы.

˂link rel="stylesheet" href=".../bootstrap.css"˃

˂script src=".../bootstrap.js"˃˂/script˃

Необязательно добавлять файлы bootstrap к себе в проект, достаточно указать ссылки. На самую последнюю версию всегда можно найти ссылку здесь.

Старайтесь подключать скрипты в конце вашего кода, потому что это влияет на скорость загрузки сайтов. То есть если подключать их в "голове" (˂head˃), то браузер должен будет сначала подгружать эти файлы. Гораздо быстрее сайт загрузиться, если подключать скрипты перед закрытием "тела" (˂body˃).



Основные инструменты Bootstrap

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



    Для того, чтобы задать ширину для элемента, используются классы. Например, я хочу чтобы у меня в строку были расположены три элемента. Причем, один занимал половину экрана, а другие два были одинаковой ширины и вместе занимали вторую часть экрана, когда я открываю сайт на компьютере, с большим разрешением экрана, и чтобы, когда я открывала на телефоне - каждый элемент был на всю ширину - один в ряду. Для этого я задаю следующие классы:


    ˂div class="row"˃
      ˂div id="element1" class="col-lg-6" ˃˂/div˃
      ˂div id="element2" class="col-lg-3"˃˂/div˃
      ˂div id="element3" class="col-lg-3"˃˂/div˃
    ˂/div˃

    С помощью тега ˂div˃ можно выделять раздел или секцию в документе. Таким образом, здесь мы выделили некую строку .row, в которой расположены три элемента: #element1, который в большом разрешении (.col-LG-6) займет 6 колонок из стандартных 12, т.е. половину, #element2 и #element3, которые в большом разрешении займут по 3 колонки (.col-LG-3).



    Устройства / признаки Очень маленькие
    Телефоны (

    Маленькие
    Планшеты (≥768px)

    Средние
    (≥992px)

    Большие
    (≥1200px)
    Максимальная ширина контейнера Нет (auto) 750px 970px 1170px
    Префикс класса .col-xs- .col-sm- .col-md- .col-lg-
    Максимальная ширина колонки Auto ~62px ~81px ~97px
  • Шаблоны. Есть два вида шаблонов документа: фиксированный и резиновый. Фиксированный (задается классом ˂div class="container"˃) - самый основной и простой макет с шириной в 940px и отцентрованным содержимым. А резиновый (˂div class="container-fluid"˃) - это шаблон с плавающей структурой документа, который будет занимать 100% ширины окна браузера и подстраиваться под его изменения.


  • Типографика. В описании стилей элементов Bootstrap уже заложены шрифты, цвета, размеры и т.д. для большинства случаев: цитат, заголовков, параграфов... Например, по умолчанию к элементу ˂body˃ применяются правила о том, что font-size равен 14px, а line-height составляет 20px.

Это была только первая часть. В следующий раз я расскажу о еще нескольких иструментах Bootstrap. Даю вам "домашнее задание": загляните на этот сайт, поизучайте, что там есть, подключите к своему сайту (или тому, что мы начали делать в первых занятиях) css- и js-файлы bootstrap и jquery последней версии. Добавьте все содержимое вашего сайта в контейнер: ˂div class="container"˃ (не забудьте в конце поставить закрывающий тег ˂/div˃). Посмотрите, как изменится ваш сайт. Ну и, конечно, поэкспериментируйте!

Если у вас после этого урока остались какие-то вопросы, смело задавайте их в комментариях или в личных сообщениях в Telegram, я обязательно на все отвечу!




















Comments 3


Bootstrap - вещь !!

30.12.2016 11:52
0

Ой, Даш, такие уроки под Новый Год:) Я только быстро пролистала, но обязательно позже вернусь... не гони коней:))))))

30.12.2016 12:02
0

???? ну этот точно последний урок в этом году...)))

30.12.2016 12:06
0

Спасибо!!! С Наступающим!

30.12.2016 12:18
0

Спасибо )) и тебя!! Желаю хорошо провести время в праздничные дни ????

30.12.2016 15:36
0

голова кругом... потом пересмотрю
скоро спецами станем))

30.12.2016 17:07
0