Как работать с 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».

Похожие записи: Bootstrap 4 Modal - модальное окно фреймворка Bootstrap 4 NavBar: адаптивное меню фреймворка Bootstrap 4 Grid: модульная сетка фреймворка Что нового в Bootstrap 4 и в чем отличие от Bootstrap 3?
Добавлено коментариев -  11
  • Сергей 26.09.2016 11:46

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

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

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

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

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

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

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

      Ответить
  • Владислав 31.12.2017 17:15

    Благодарен автору, для меня пост был очень полезным)

    Ответить
    • Евгений 31.12.2017 17:24

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

      Ответить
  • Ольга 22.02.2018 19:34

    Я не пойму что не так. Нет никаких блоков. Просто в левом углу написано 4 слова: Header Cjntent Sidebar Footer и всё. Ни на что не реагирует. Всё взято из вашего описания.

    <!doctype html>
    
    <html>
    
    <head>
    
        <title>Test</title>    
    
    
    <!-- Подключаем Bootstrap CSS -->
    
    
     <ink rel="stylesheet" href="css/bootstrap.min.css">
    
        <!-- Подключаем my css-->
    
     <link  rel="stylesheet" href="css/main.css" >
    
    
    </head>
    
    <body>
    
    <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>
    
    </head>
    
      <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>
    Ответить
    • Евгений 22.02.2018 19:44

      Здравствуйте. У вас ошибка при подключении стилей. Пропустили букву L в теге link, у вас так:

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

      а должно быть так:

      <link rel="stylesheet" href="css/bootstrap.min.css">
      Ответить
  • hello 11.03.2018 15:35

    Умело объяснил! Спасибо!

    Ответить
  • Aleksandr 30.04.2018 19:35

    Вот только есть один момент. Архив на оф.сайте bootstrap категорически не содержит папки 'fonts' если это не дистрибутив версии bootstrap-3.3.7-dist

    Ответить
    • Евгений 30.04.2018 20:46

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

      Ответить

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

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