Базовая сборка Bootstrap 3 Framework

Данный пост о том, как я настраиваю базовый шаблон Bootstrap 3 framework. Данную базовую настройку HTML шаблона Bootstrap 3 можно использовать в качестве рабочего примера.

Содержание статьи

Подключение файлов Bootstrap локально
Базовая сборка Bootstrap 3 с использованием внешних ресурсов — Bootstrap CDN

Базовая сборка Bootstrap 3 без настроек компонентов

Разработчики предлагают несколько вариантов для начала работы с данным фреймворком. Привожу парочку самых простых рабочих вариантов создания Bootstrap 3.

Подключение файлов Bootstrap локально

Заходим на русскоязычную версию официального сайта во вкладку Основы Bootstrap и скачиваем на компьютер архив bootstrap-3.3.2-dist.zip, содержащий минимизированный код CSS и JavaScript. Распаковываем архив, и в папке bootstrap-3.3.2-dist (ее можно переименовать), создаем пустой файл index.html

Далее на том же сайте переходим во вкладку Примеры и копируем базовый пример HTML документа. Естественно, переносим содержимое в созданный ранее файл index.html.

Ну и раз уж данная базовая сборка Bootstrap 3 является локальной, то скачиваем последнюю стабильную минимизированную версию (на момент написания статьи библиотеки jQuery 1.12.1) и подключаю локально из папки js, заменяя в коде

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

на

<script src="js/jquery-1.12.1.min.js"></script>

Удаляем из папки ненужные на данном этапе лишние файлы CSS и JS (дабы не путаться в них). Оставляем лишь 4 файла — bootstrap.css, bootstrap.min.css, bootstrap.js, bootstrap.min.js.

Все, на этом базовую сборка Bootstrap 3 можно считать завершенной.

<!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 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>Привет, мир!</h1>
<div class="alert alert-danger alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
<strong>Поздравляю!</strong> Вы подключили Bootstrap 3 правильно!!!
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.12.1.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Вот что в итоге у меня получилось:

Немного внимания! Единственное, в данном примере используется устаревшая версия библиотеки jQuery 1.11.0, поэтому в коде я заменил на jQuery 1.12.1 версию (подключенную локально) и добавил для отладки один из компонентов Bootstrap 3 — Замечания, которые можно закрыть.

Базовая сборка Bootstrap 3 с локальным подключением скриптов и стилей хороша тем, что позволяет заниматься разработкой проекта без подключения к интернету и вносить изменения непосредственно в рабочие файлы.

Скачать данный пример базовой сборки Bootstrap 3 с локальным подключением скриптов можно тут

Скачать

Базовая сборка Bootstrap 3 с использованием внешних ресурсов — Bootstrap CDN

Иногда не совсем удобно использовать локальное подключение Bootstrap. В таких случаях лучше пользоваться ресурсами сайта MaxCDN и подключать файлы SCC и JS удаленно.

Просто замените локальные подключения на ссылки на файлы.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

В итоге должен получиться такой HTML документ:

Файл index.html для базовой сборки Bootstrap 3 с использованием внешних ресурсов — Bootstrap CDN

<!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 101 Template</title>
<!-- Bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>Привет, мир!</h1>
<div class="alert alert-danger alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
<strong>Поздравляю!</strong> Вы подключили Bootstrap 3 правильно!!!.
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>

Естественно локальные скрипты и стили не используются для данного способа сборки и их можно удалить.

Скачать

Заключение
Некоторые считают фреймворк Bootstrap тяжелым и слишком нагруженным инструментом для создания веб страниц, но почему тогда с его помощью созданы миллионы сайтов по всему миру? Напротив, сейчас Bootstrap framework это очень удобный и гибкий инструмент веб разработчика.

В следующей статье я покажу как настроить и скачать собственную пользовательскую сборку Bootstrap 3. Например как исключить ненужные JS плагины или неиспользуемые CSS компоненты, дабы облегчить CSS и JS файлы на выходе и применить собственные стили для CSS компонентов не перебивая их в пользовательском файле main.css.

Содержание статьи

Подключение файлов Bootstrap локально

Базовая сборка Bootstrap 3 с использованием внешних ресурсов — Bootstrap CDN

Базовая сборка Bootstrap 3 без настроек компонентов

Подключение файлов Bootstrap локально

Базовая сборка Bootstrap 3 с использованием внешних ресурсов — Bootstrap CDN

Похожие по Тегам статьи