Bootstrap установка – Bootstrap 3 · Основы Bootstrap, как загрузить Bootstrap, поддерживаемые браузеры и устройства

Как установить Bootstrap | Как создать сайт

Как установить Bootstrap

Стандартная установка фреймворка

О стандартной установке я уже достаточно много сказал в прошлых статьях. Тут все просто. Заходим на официальный сайт getbootstrap.com, кликаем по пункту Getting Started и выбираем самый первый вариант. Таким образом, мы скачиваем полную версию бутстрапа со всеми js и css-компонентами.

Bootstrap CDN – это возможность подключить фреймворк из CDN-хранилища, не скачивая его файлы к себе на компьютер. Естественно, в таком случае ни о какой кастомизации не может быть речи.

Кастомизация фреймворка

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

Или вы верстаете простой блог. Допустим, там вам вообще практически ничего не нужно, так что вы можете оставить только сетку и пару самых важных компонентов.

Выбирать только то, что нужно – это профессиональный подход к созданию сайтов и использованию Bootstrap. По умолчанию несжатая версия css-стилей фреймворка в самой последней версии весит 143 килобайта. А скрипты – более 60 килобайт. Да, если сжать код, то можно добиться уменьшения веса на 20-40%, но все равно файлы будут не самыми легкими.

Если же вы, например, отключаете все компоненты и оставляете только сетку (так очень часто делают), то вес css будет составлять всего 15-20 килобайт, а в сжатом виде еще на пару килобайт меньше. Так вы добьетесь максимальной скорости и оптимизации вашего проекта.

Хорошо, это была лишь теория. Для кастомизации фреймворка посетите все тот же официальный сайт и перейдите в пункт

Выбираем нужные компоненты

Первым делом тут можно настроить, какие компоненты вы хотите включить в свою версию Bootstrap. Начнем с CSS:

Print Media Styles – медиа-запросы для печати. Если вы не планируете печатать страницы сайта, можно отключить.

Типография, код, таблицы, формы и кнопки – это все то, что вы при большом желании можете стилизовать в css самостоятельно. Конечно, на это понадобится время, но если по дизайну ваши элементы сильно отличаются от того, что по умолчанию предлагает фреймворк, можно отключить все эти css-стили и написать их самому.

Grid System – собственно, это сетка. Не вижу смысла ее вообще когда-либо отключать, потому что это основная мощь фреймворка. Именно благодаря сетке вы сможете легко адаптировать шаблоны под любые устройства, а сегодня в век мобильного трафика это чрезвычайно важно. Ни в коем случае не отключаем.

Responsive utilities

Далее у нас компоненты. Подробнее со всеми компонентами вы можете ознакомиться в документации (раздел Components), чтобы вы хотя бы понимали, что вы отключаете (или наоборот, оставляете).

Это, например, такие вещи как группы списков, панели кнопок, значки, панели, оповещения, пагинация, хлебные крошки и т.д. Также можно отключить иконочный шрифт. Это стоит делать в том случае, когда вам вообще не нужно иконки на сайте, либо вы подключаете другой набор. Собственно, вы должны посидеть и подумать, что вам нужно из всех представленных компонентов, а что нет. Для каждого отдельного сайта будет свой набор, потому что везде разный дизайн и функционал.

Javascript-компоненты

Это выпадающие меню, всплывающие подсказки, модальные окна, слайдер. Если что-то из этого вам не нужно, отключаем. В некоторых случаях действительно могут пригодиться все компоненты, когда у вас на сайте и меню выпадающее, и слайдер на главной странице, и модальные окна. В некоторых же случаях может пригодиться от силы 1-2 компонента, тогда ни к чему удлинять код, отключайте ненужные компоненты.

Jquery плагины

Здесь вы можете отключить плагины библиотеки jquery, которые помогают javascript-компонентам правильно работать. Соответственно, если вы не используете на своем сайте слайдер, то вам не нужен плагин для создания каруселей, если вам не нужны всплывающие подсказки, то отключаем tooltips.js и т.д.

Плагин scrollspy следит за позицией текста и в зависимости от этого подсвечивает тот или иной пункт меню. Обычно такая фишка нужна на лендингах, на обычных сайтах я практически не видел. Ну и так далее. Хорошенько проанализируйте, что вам нужно, а что нет.

Переменные Less (Less variables)

Далее перед вами откроется огромный пункт, в котором будет масса подпунктов с настройками переменных Less. Здесь можно изменит практически все: цвета, размеры шрифтов, точки брекпоинтов, кол-во колонок в сетке, отступы и т.д.

Конечно, для этого вы должны знать хотя бы основы Less или хотя бы на интуитивном уровне ориентироваться в этих формах.

Например, если вы видите переменную @font-family-base, то нужно хотя бы на интуитивном уровне понимать, что она отвечает за название шрифта, который является базовым на сайте. Ну а переменная @font-size-base устанавливает базовый размер шрифта. По умолчанию в бутстрапе он равен 14 пикселям.

Все эти поля вы можете редактировать. Всего лишь поменяйте 14 на 20 и вот уже вы сможете скачать фреймворк, в котором по умолчанию размер шрифта – 20 пикселей. Соответственно, тут же можно настроить размеры заголовков и т.д.

Настройка сетки

Очень интересны для для нас также настройки сеточной системы, вот они:

Как видите, вы можете за несколько секунд поменять кол-во колонок и ширину отступов между ними. Переменная grid-float-breakpoint устанавливает точку, на которой мобильное меню сворачивается в иконку.

Если вы поменяете значение, например, на @screen-md-min, то уже на ширине 991 пиксель и менее будет происходить сворачивание. Также можно удалить эту переменную и написать значение в пикселях. Например, 520 пикселей. Тогда сворачивание меню будет происходить только на смартфонах и мобильных телефонах.

Собственно, страница кастомизации Bootstrap имеет очень много настроек, но в целом такой способ кастомизации (с помощью страницы Customize на официальном сайте) не самый быстрый и удобный. Далее я покажу вам самый быстрый способ.

Используйте страницу Customize, когда вам нужно внести 2-10 правок в фреймворк, либо просто отключить нужные компоненты. Если вы собираетесь менять гораздо больше значений, нужно использовать другой метод.

Собственно, когда вы настроите свою версию фреймворка, нажимайте на большую кнопку в самом низу страницы. Она скомпилирует версию Bootstrap-а под вас и скачает его на ваш компьютер. Далее вам остается только подключить и использовать. О подключении я уже рассказывал в прошлых статьях (в том числе о том, как сделать это на WordPress).

Скачивание Less-исходников и их правка

Как я уже говорил, если вам нужно делать много правок в исходный код фреймворка и вы хотите видеть изменения моментально, то вам понадобятся less-исходники. Скачать их можно там же, где и сполную версию фреймворка – в разделе Getting Started.

Чтобы работать с Less-исходниками и редактировать их вам нужны:

Хоть какие-то знания css и less или другого препроцессора

Less компилятор (можно скачать бесплатно)

Собственно, подробно я не буду останавливаться на кастомизации через less-исходники, но это самый лучший метод, потому что вам не нужно будет 100 раз заходить на страницу Customize и компилировать все новые и новые версии фреймворка.

Темизация Bootstrap или изменение внешнего вида элементов

По умолчанию в полной версии фреймворка в папке css также можно встретить файл bootstrap-theme.css. Подключать его к сайту необязательно. Какие же функции он выполняет? Файл нужен исключительно для того, чтобы при необходимости изменить стили для нужных вам элементов.

Эту же роль может выполнить ваш собственный style.css, в котором вы также можете переопределить стили. Bootstrap-theme не является обязательным файлом, его используют скорее для порядка. Например, у вас есть 3 файла:

bootstrap.css – понятно, это код самого фреймворка;

bootstrap-theme.css – тут вы переопределяете стили для элементов бутстрапа;

style.css – а в этом файле пишите стили для своих элементов.

Тогда у вас будет порядок в коде и в структуре проекта. Но никто не запрещает вам все операции производить в единственном файле – style.css и вообще не использовать файл темы.

Самое главное, подключать в html-разметке файл с темой и свой собственный css позже, чем файл с кодом фреймворка, чтобы стили успешно переопределялись.

Пример работы темизации

Как я уже и говорил, по умолчанию Bootstrap ложит в комплект файл bootstrap-theme. Попробуйте его подключить. Отмечу, подключить после основного файла.

По умолчанию кнопки в бутстрапе выглядят так:

А вот так меняется их внешний вид после подключения файла с темой:

Как видите, появляется небольшой градиент. Соответственно, вы можете переписывать код в файле bootstrap-theme и получать свои стили для кнопок. Но вы можете спросить, почему бы не производить эти изменения прямо в bootstrap.css? Ну дело в том, что постоянно выходят новые версии фреймворка и если вы решите обновиться, ваши правки трудно будет внедрить в новую версию. Хорошим тоном для разработчика считается не трогать исходный код, когда можно создать отдельный файл и описать изменения там. Это гораздо разумнее и удобней.

Как установить новые темы Bootstrap, скачанные из интернета?

Есть достаточно много сайтов, в основном зарубежных, на которых бесплатно можно скачать кучу тем и шаблонов. Чтобы не было путаницы, давайте считать шаблоном сайт, сверстанный с помощью Bootstrap, а темой – набор css-правил, переопределяющих стандартный вид элементов.

Такие темы можно скачать, например, на bootswatch.com/, а используя поисковик вы можете найти десятки других.

Общий принцип установки таких тем зависит от самого сайта, на котором вы их скачиваете. Если можно скачать в формате bootstrap-theme – отлично, скачиваем и подключаем. На bootswatch, например, нужно скачать bootstrap.css и заменить им ваш стандартный файл стилей фреймворка. Также есть вариант с less-исходниками.

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Поделиться

Твитнуть

Поделиться

Также читайте

Инструменты сборки. Начало работы · Bootstrap. Версия v4.0.0

Узнайте, как использовать запущенные скрипты npm для загрузки нашей документации, компиляции исходного кода, запуска тестов и т.п.

Bootstrap в своей автоматической системе сборки использует скрипты NPM. package.json содержит удобные методы для работы с NPM, включая компиляцию, тесты и прочее.

Для запуска автоматической системы сборки и запуска нашей документации локально, вам понадобится копия исходников Bootstrap и Node:

1. Установите Node, для управления зависимостями BS.
2. Перейдите в директорию /bootstrap и запустите команду npm install для установки локальных зависимостей, перечисленных в package.json.
3. Установите Ruby, Bundler (gem install bundler) и запустите bundle install. Это установит зависимости Ruby, такие как Jekyll, и плагины.
   • В Windows: читайте гайд для установки и запуска Jekyll.

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

Использование скриптов NPM

Вот команды CMD для пакета package.json:

Афтопрефиксер

Bootstrap использует Афтопрефиксер (который участвует в процессе автоматической сборки) для автоматического добавления «вендорных префиксов» в некоторые свойства CSS во время процесса сборки. Это сберегает наше время, позволяя писать ключевые куски кода CSS один раз, и отменяя нужду в вендорных миксинах, в отличие от BS3.

Список браузеров, в которых есть поддержка автопрефиксера, здесь: /package.json.

Локальная документация

Для запуска нашей документации локально вам потребуется Jekyll, генератор гибких статических сайтов, обеспечивающий: базовые включения, файлы markdown, шаблоны и нечто еще. Вот как запустить Jekyll:

1. Смотрите «Установку инструментария» (выше) для инструкций по установке Jekyll («строитель» сайтов) и других зависимостей Ruby командой bundle install.
2. Запустите команду npm run docs-serve в CMD из корневой директории /bootstrap.
3. Откройте http://localhost:9001 в вашем браузере.

Узнайте больше про Jekyll здесь.

Отслеживание багов

Если возникнут проблемы с установкой зависимостей, удалите все предыдущие версии зависимостей (глобальные и локальные). Тогда попробуйте снова npm install.

Установка Bootstrap — htmllab

Установка Bootstrap — фундамента для работы

Bootstrap — фреймворк для разработки страниц, учитывающих мобильные устройства. Когда HTML-страницы разрабатываются начинающими разработчиками, со временем всплывает проблема создания мобильной версии сайта. С установкой Bootstrap и его использованием в проектах, проблема мобильной версии снимается — разработчик изначально указывает CSS-классы, предусматривающие различное отображение сайта на разных устройствах — десктопах, планшетах, смартфонах. Загрузить архив можно со страницы загрузки Bootstrap. Подключение производиться обычным способ — прописываются ссылки на CSS (<link … >) и JavaScript (<script …>). Подключить Bootstrap можно и размещением ссылок на CDN или ниже в этой заметке. Структура базового документа для работы достаточна проста.

Установка Bootstrap

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!— Optional theme —>
<link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css» integrity=»sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r» crossorigin=»anonymous»>

<!— Latest compiled and minified JavaScript —>
<script src=»https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js» integrity=»sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS» crossorigin=»anonymous»></script>

Базовый шаблон Bootstrap

<!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">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for 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/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h2>Hello, world!</h2>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://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="js/bootstrap.min.js"></script>
  </body>
</html>

Обратите внимание на описание типа документа, оно должно всегда быть <!doctype html>

Блоку, вмещающему всё содержимое страницы присваивается класс .container или .container-fluid, если нужно содержимое Bootstrap-страницы отобразить на всю ширину.

Для корректного кросс-браузерного отображения используется проект Normalize.css. Он помогает отображать HTML-элементы в соответствии с современными стандартами.