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

Добавлено коментариев  -    2

  1. Сергей

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

    1. Евгений

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

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