Как работать с Bootstrap?

Доброго времени суток. В прошлой статье «Что такое Bootstrap» мы познакомились с фреймворком, разобрали его преимущества, вкратце рассмотрели его так называемую сетку, теперь пришло время на практике разобрать, как пользоваться Bootstrap.

Скачать Bootstrap можно с официального сайта getbootstrap.com. На главной странице жмем на кнопку «Download Bootstrap».

Кликаем по кнопке на главной странице сайта

После клика нас переносит на страницу, на которой предлагается несколько видов скачивания. В рамках данной статьи мы рассмотрим обычное скачивание полной версии фреймворка.

Скачиваем полную версию Bootstrap

После скачивания и распаковки архива мы получаем три папки:

  • CSS – папка со стилями
  • JS – папка с js скриптами
  • FONTS – папка с иконочными шрифтами

Это и есть весь фреймворк. Для дальнейшей работы с Bootstrap я создам папку с одноименным названием bootstrap, в папке создам один пустой файл index.html и буду наполнять папку и файл попутно с разбором фреймворка в данной статье, а в конце поста дам ссылку, чтобы Вы могли посмотреть результат. Если будите повторять за мной, то поймете, что работать с фреймворком действительно легко.

Из скаченного фреймворка нам потребуется папка fonts полностью, один файл стилей из папки css с названием bootstrap.css или bootstrap.min.css и аналогично один скрипт из папки js с названием bootstrap.js или bootstrap.min.js.

Отличие файлов с «.min.» от обычных в том, что файлы с «.min.» оптимизированные, то есть код написан в одну строку без переносов строк и пробелов, поэтому они весят меньше обычных, а содержимое файлов абсолютно одинаковое.

Теперь я создам в своей папке bootstrap папку css, помещу в нее файл bootstrap.min.css и создам папку js, в которую положу bootstrap.min.js. Дополнительно в папке css создам пока пустой файл style.css для добавления собственных стилей.

Нужные файлы фреймворка перенесены, и теперь будем работать только с файлом index.html. Чтобы не писать код самостоятельно, обратимся к документации, на странице скачивания официального сайта ниже есть уже готовый HTML-скелет документа, копируем его и вставляем в наш индексный файл.

HTML-скелет документа

В скелете уже подключаются наш файл стилей, js скрипт и библиотека jQuery, но если вы делаете не на «бутстраповском» шаблоне, а на каком-то своем, то нужно между тегами <head> подключить файл стилей bootstrap.min.css, а после него созданный style.css.

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">

Затем перед закрывающим тегом <body> сначала подключаем библиотеку jQuery.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

А после библиотеки подключаем js скрипт.

<script src="js/bootstrap.min.js"></script>

В общем, HTML-скелет документа получается вот такой.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
</head>
<body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</body>
</html>

Подготовительный процесс закончен, Bootstrap подключен, можно идти дальше и заняться наполнением нашей WEB-страницы компонентами фреймворка.

Как пользоваться документацией

Документация у фреймворка очень хорошая, что делает его простым в использовании. В главном меню официального сайта несколько разделов: «Getting started», «CSS», «Components», «JavaScript» и «Custimize», на странице каждого раздела в правой колонке находятся названия разных компонентов, кликнув по которым показывается их описание и варианты использования в виде готового кода.

Использование документации Bootstrap

Если сложности с английским языком, то в сети есть несколько ресурсов с переведенной документацией, вот адрес одного из таких сайтов www.oneskyapp.com/ru/docs/bootstrap. Также можно воспользоваться каким-нибудь переводчиком для браузера, перевод будет, конечно, кривоватый, но суть написанного будет ясна. В общем, просто нужно читать документацию, брать примеры кода и практиковаться.

Работа с сеткой Bootstrap

Как я говорил в прошлой статье, сетка работает по принципу таблицы, включая в себя ряды .row и колонки .col, колонок может быть максимум двенадцать. К классу .col добавляются префиксы (lg, md, sm, xs), которые указывают ширину данного столбца на конкретном разрешении экрана.

Возможности сетки Bootstrap

Оборачиваются ряды со столбцами в блок с классом .container или классом .container-fluid. Различие между ними в том, что у класса  .container максимальная ширина 1170 пикселей, а у класса .container-fluid — ширина не ограничена, то есть на всю ширину экрана, даже если разрешение экрана очень большое. Полную информацию о сетке Bootstrap смотрите в документации раздела «CSS».

При помощи сетки фреймворка сделаем классическую разметку нашей страницы (шапка, контент, боковая колонка и подвал), для этого создадим три ряда и четыре колонки, получается вот такой код.

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <h1>HEADER</h1>
    </div>
  </div>
</div>
<div class="container"> 
  <div class="row">
    <div class="col-md-8 block">
      <h2>CONTENT</h2>
    </div>
    <div class="col-md-4 block">
      <h2>SIDEBAR</h2>
    </div>
  </div>
</div>
<div class="container"> 
  <div class="row">
    <div class="col-md-12 block2">
      <h1>FOOTER</h1>
    </div>
  </div>
</div>

Для разделения блоков я прописал два дополнительных класса: .block, .block2 и добавил в них по паре правил в созданном файле style.css.

block{
   background: #eee;
   border: 1px solid #000;
}
.block2{
   background: #ccc;
   border: 1px solid #000;
}

Добавим иконочный шрифт к нашим заголовкам. В разделе «Components» выбираем понравившиеся иконки, копируем текст под изображением, этот текст является классом. Создаем внутри тега заголовка тег <span> и вставляем скопированный класс.

<h1><span class="glyphicon glyphicon-bookmark"></span> HEADER</h1>

Теперь не мешало добавить какое-то меню. Для этого в разделе «Components» переходим в «Navbar», выбираем понравившееся меню, копируем код и после открывающего тега <body>, вставляем.

Осталось заполнить «content» и «sidebar». Все делаем по той же схеме: выбираем компонент в документации, читаем описание, копируем и вставляем в нужное место. Я добавлю форму и кнопку, кликнув по которой будет вызываться модальное окно с таблицей.

Вот так просто, всего за 5 минут, мы набросали простейший макет страницы, адаптивный под все устройства, при этом практически не писали код самостоятельно. Перейдите по ссылке и посмотрите полученный результат.

На этом я буду заканчивать статью. Мы рассмотрели лишь крохотную часть из функционала фреймворка, но как работать с Bootstrap, думаю, Вы поняли. Следующий шаг — это изменение стилей фреймворка под свои нужды и скачивание только тех компонентов, которые нужны. Все это разберем в статье «Кастомизация Bootstrap».

Похожие записи:
Добавлено коментариев - 4
  • Сергей 26.09.2016 11:46

    Спасибо, делал все параллельно с вами, действительно быстро получается сверстать страничку. Классная и удобная штука этот бутстрап буду дальше его изучать.

    Ответить
    • Евгений 26.09.2016 12:29

      Пожалуйста, удачи в изучении!

      Ответить
  • Виталий 07.11.2017 04:25

    Отличный пост! спасибо вам!

    Ответить
    • Евгений 07.11.2017 14:21

      Пожалуйста, спасибо Вам за отзыв!

      Ответить

Добавить комментарийОтменить ответ

Нажимая на кнопку «Добавить», я даю согласие на обработку своих персональных данных в соответствии с политикой конфиденциальности