Bootstrap 3: как скачать, как подключить и как пользоваться

Опубликовано: 01.09.2018

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

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

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

Bootstrap - 1 Урок. Знакомство и установка

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

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

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

Уроки по Bootstrap 3 | #1 Установка фрэймворка

Из скаченного фреймворка нам потребуется папка 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-скелет документа, копируем его и вставляем в наш индексный файл.

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

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

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

В общем, 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», на странице каждого раздела в правой колонке находятся названия разных компонентов, кликнув по которым показывается их описание и варианты использования в виде готового кода.

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

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

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

Оборачиваются ряды со столбцами в блок с классом .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 ».