Загрузите Bootstrap, чтобы получить скомпилированный CSS и JavaScript исходный код или включите его с вашими любимыми менеджерами пакетов, такими как npm, Bower, RubyGems и другие.

Компилированные CSS и JS

Загружайте компилированный, готовый к использованию код Bootstrap v4.0.0 (для легкого внедрения в ваш проект), включающие:

  • Компилированные и «облегченные» бандлы (Смотрите Сравнение файлов CSS)
  • Компилированные и «облегченные» плагины JS.

Сюда не входит документация, исходники или сторонние JS-«зависимости» Зависимости передаются (внедряются) сервису в момент его создания (jQuery или Popper.js). Зависимости передаются (внедряются) сервису в момент его создания.

Скачать

Исходные файлы

Компилируйте Bootstrap со своим «файлопроводом», загружая наши исходники Sass, JS и файлы документации. Это потребует некоторого дополнительного инструментария:

  • Компилятор Sass (поддерживаются: Libsass или Ruby Sass) для компиляции ваших CSS.
  • Постпроцессоры для создания своих нестандартных свойств CSS. (-webkit-, -moz-, -o-, и т.д.)

Инструменты сборки также могут понадобиться при работе с Bootstrap, но все-таки они не совсем подходят для ваших целей.

Скачать исходники

Bootstrap CDN

Пользуйтесь кэшированной версией Bootstrap для «облегчения» страницы и ускорения загрузки.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

Если вы пользуетесь нашим компилированным JS, не забудьте подключить наши CDN версии jQuery и Popper.js перед вашими JS-файлами.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

Системы управления пакетами (Хождение по сайтам библиотек, скачивание и распаковка архивов, копирование файлов в проект — всё это заменяется парой команд в терминале)

Используйте исходники Bootstrap в любом проекте с помощью популярных систем управления пакетами. С любой системой управления пакетами Bootstrap потребует компилятор Sass (препроцессор) и постпроцессор для правильной установки наших компилированных версий.

npm

Устанавливайте Bootstrap в вашем приложении на движке Node с помощью пакета npm:

npm install bootstrap

require('bootstrap') ) загрузит все плагины JS Bootstrap в объект jQuery. Модуль bootstrap сам не экспортирует ничего. Вы можете вручную загрузить плагины JS Bootstrap, загружая файлы /js/*.js в корневую папку пакета.

пакет.json Bootstrap содержит некоторые дополнительные метаданные со следующими ключами:

  • sass — путь к главным исходникам Sass Bootstrap
  • style — путь к полной версии CSS Bootstrap, которая предварительно откомпилирована с помощью установок по умолчанию (без настройки)

RubyGems

Устанавливайте Bootstrap в ваши приложения на Ruby с помощью Bundler (рекомендовано) и системы управления пакетами «RubyGems», просто добавив следующую строку в ваш Gemfile:

gem 'bootstrap', '~> 4.0.0'

Еще один способ – если вы не используете Bundler, вы можете установить gem-файл такой командой:

gem install bootstrap -v 4.0.0

Смотри gem’s README.

Composer

Вы также можете устанавливать и управлять Sass и JS в Bootstrap c помощью пакетного менеджера уровня приложений для языка программирования PHP:

composer require twbs/bootstrap:4.0.0

bootstrap-4.ru

Правильное подключение Twitter Bootstrap к WordPress (CDN integrity)

При подключении Фреймворка Twitter Bootstrap к движку WordPress можно использовать CDN. Это удобно тем, что кроме высокой скорости загрузки Bootstrap будет проще обновить, не заливая каждый раз файлы физически на свой хостинг. Используйте атрибут целостности «integrity», это позволит не беспокоиться о совместимости версий. Все изменения будут под контролем веб-мастера.

Пример подключения Bootstrap 4:

/**   * Enqueue scripts and styles.   */  function new_scripts() {  	// Styles  	wp_enqueue_style( 'bootstrap-style', 'https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css', array(), '4.1.3' );    	// Scripts  	wp_enqueue_script( 'popper-js', 'https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js', array( 'jquery' ), '1.14.3', true );  	wp_enqueue_script( 'bootstrap-js', 'https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js', array( 'jquery' ), '4.1.3', true );  }  add_action( 'wp_enqueue_scripts', 'new_scripts' );  

Интеграцию целостности можно добавить к уже зарегистрированным выше скриптам при помощи фильтров style_loader_tag для CSS стилей и script_loader_tag для JS для скриптов:

/**   * Add integrity/crossorigin for CDN styles.   */  function new_style_loader_tag( $html, $handle ) {  	$scripts_to_load = array(  		array(  			( 'name' ) => 'bootstrap-style',  			( 'integrity' ) => 'sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO',  		)  	);    	$key = array_search( $handle, array_column( $scripts_to_load, 'name' ) );    	if ( $key !== false ) {  		$html = str_replace( '/>', ' integrity='' . $scripts_to_load[$key]['integrity'] . '' crossorigin='anonymous' />', $html );  	}    	return $html;  }  add_filter( 'style_loader_tag', 'new_style_loader_tag', 10, 2 );    /**   * Add integrity/crossorigin for CDN scripts.   */  function new_script_loader_tag( $tag, $handle ) {  	$scripts_to_load = array(  		array(  			( 'name' ) => 'popper-js',  			( 'integrity' ) => 'sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49',  		),  		array(  			( 'name' ) => 'bootstrap-js',  			( 'integrity' ) => 'sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy',  		)  	);    	$key = array_search( $handle, array_column( $scripts_to_load, 'name' ) );    	if ( $key !== false ) {  		$tag = str_replace( '></script>', ' integrity='' . $scripts_to_load[$key]['integrity'] . '' crossorigin='anonymous'></script>', $tag );  	}    	return $tag;  }  add_filter( 'script_loader_tag', 'new_script_loader_tag', 10, 2 );  

В примере указаны следующие стили: bootstrap-style, popper-js, bootstrap-js.
Подключать скрипты по правилам CMS следует через хук wp_enqueue_scripts.

Теперь вы можете удобно редактировать как стили, так и JS скрипты, добавленные при помощи CDN.

Добавьте эти функции в файл functions.php текущей темы.

onstartup.ru

Как подключить бутстрап?

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

Итак, чтобы начать подключение, нужно перейти на официальный сайт. В нашем случае это getbootstrap.com, именно на нем содержится вся необходимая информация.

Скачиваем фреймворк

В главном меню кликните по пункту Getting Started. На русский язык он переводится: “C чего начать”. Действительно, на этой странице вы найдете все необходимое для работы. В первую очередь вы увидите вот что:

Как подключить bootstrap

Bootstrap предлагает нам скачать себя в нескольких вариантах. Первый – это просто стандартная последняя версия фреймворка, в которой есть все компоненты. Два следующих варианта – это less и sass исходники. Пока я не рекомендую вам их трогать, если вы не знаете, как работать с этими технологиями.

Это исходники, с их помощью вы можете переделать boostrap под себя. Опять же, если знаете, как работать с ними.

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

Содержимое фреймворка

Отлично, после скачивайте разархивируйте архив и перейдите в папку. В конечной папке вы увидите три каталога – css, js и fonts. Эти три директории и нужно будет скопировать в папку вашего проекта.

Перед этим вы можете просмотреть все эти папки. В первую очередь, папку css. В ней лежит 2 css-файла и их минифицированные версии. Это bootstrap.css и bootstrap-theme.css. Соответственно, первый с кодом самого фреймворка. А второй предназначен для темизации. У обоих файлов есть, как я уже сказал, минифицированные версии. Они весят на 10-15% меньше за счет того, что код в них размещен в одну строку.

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

Далее у нас папка fonts. В ней содержится иконочный шрифт bootstrap, благодаря которому вы абсолютно без проблем сможете вставлять на веб-странице более 200 иконок, менять их размеры и цвет. По сути, это картинки, которыми можно очень шибко управлять. При увеличении размеров качество иконок не становится хуже, так как они векторные, то есть svg-формата.

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

Подключение Bootstrap

Вообще я вам рекомендую сейчас просто потренироваться. То есть не подключать сразу фреймворк к своему реальному сайту, а создать на рабочем столе новую папку, скинуть туда эти три папки. Короче, создать новый проект с нуля. Это вам поможет понять, все работает.

Отлично, тем нужно создать файл index.html. Я сделаю это с помощью редактора Notepad++. Стоп-стоп, может вы уже по привычке начали писать начальную html-разметку, не нужно этого делать, сейчас мы вставим все готовое. Прокрутите страницу Getting Started ниже, там вы увидите Basic Template, то есть базовый шаблон html-страницы.

Как подключить bootstrap

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

Сразу видим, что используется доктайп, характерный для html5. В теге html видим параметр lang, можете сменить его с en на ru.

Далее начинается секция head, в ней задается кодировка страницы. Следующие строчки достаточно важны, ни в коем случае их не удаляйте. Там, где видите IE-edge – это строка кода, которая обеспечивает корректную работу фреймворка вместе с браузером IE.

Следующая строка – это всем известный мета тег viewport, который позволяет выставить базовые настройки для корректного отображения сайта на мобильных устройствах.

Ну а далее у нас начинается непосредственно подключение файлов фреймворка. К слову, все комментарии, которые есть на скриншоте выше (они выделены серым цветом), вы можете удалить, кроме четырех строчек, которые начинаются со слов if it IE 9 и заканчиваются endif. Эти строки нужны нам для того, чтобы для браузера IE подгружались дополнительные файлы из внешнего хранилища, которые обеспечат поддержку адаптивности и элементов html5.

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

Javascript-файлы же подключаются перед закрывающим тегом body. Как видите, тут подключается не только сам фреймворк bootstrap, но и библиотека jquery. Дело в том, что для корректной работы фреймворка эта библиотека нужна и подключается она из внешнего хранилища.

Как мне проверить, подключился ли фреймворк?

Все очень просто. Откройте наш index.html в любом браузере, если вы увидите там такое, то все работает:

Как подключить bootstrap

Если бы вы допустили какие-то ошибки при подключении фреймворка, то внешний вид заголовка был бы таким:

Как подключить bootstrap

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

Но для убедительности вы можете вывести с помощью фреймворка, например, кнопку.

Как подключить bootstrap

Это уже точно доказало, что фреймворк работает и использует свои стили. Как видите, даже по умолчанию у bootstrap достаточно хорошее оформление для элементов, хотя и очень простое.

Но давайте мы пока вернемся на страницу Getting Started, ведь это был не единственный способ подключения фреймворка. Еще один вариант – подключить с внешнего хранилища, то есть из cdn. Он годится тогда, когда вы не планируете ничего редактировать в коде фреймворка, а просто хотите максимально быстро подключить его. Тогда удобнее всего вам будет использовать его именно из cdn.

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

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

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

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

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

Как подключить bootstrap

webformyself.com

  • Главная
  • Курсы
  • Основы CSS
  • Подключение и использование Bootstrap урок — курс Основы CSS от Devionity

Bootstrap — это специальный фреймворк (т.е. набор инструментов), который включает в себя HTML, CSS и JavaScript решения. Основной идеей этого фреймворка является удобное создание веб-проектов, которые обладают адаптивным свойством. Адаптивность в данном случае означает, что макет веб-документа должен подстраиваться под устройство, которое его отображает — ПК, планшет, смартфон и т.п. Визуальное оформление отдельных элементов макета веб-страницы также включено в фреймворк.

Подключение. Для подключения фреймворка необходимо либо скачать пакет файлов и подключить их в теге <head>, либо подключить их удаленно — там же. Например,

<head> 
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>

Для отображения контента страницы в фреймворке разработана т.н. система сетки (grid system), которая позволяет создавать (по умолчанию) до 12 колонок (и соответствующих строк) на странице, причем эта конструкция может зависеть от устройства, на котором просматривается страница.

Например, для устройств среднего размера (medium devices), возможно определить столбцы следующим образом:

что будет означать два столбца, в первый из которых имеет условную длину 8, а второй — 4 из 12. В сумме эти значения, очевидно, дают также 12. Фактически ширина столбца задается пропорционально. Другой пример:

<div class="row"> 
  <div class="col-md-4" style='border:1px solid black'>.col-md-4</div>
  <div class="col-md-4" style='border:1px solid black'>.col-md-4</div>
  <div class="col-md-4" style='border:1px solid black'>.col-md-4</div>
</div>

означает, что будет 3 столбца одинаковой ширины. Или же

<div class="row"> 
  <div class="col-md-12">.col-md-12</div>
</div>

Означает 1 столбец растянутый по всей ширине экрана.

Очевидно, что на мобильном устройстве не вместится макет, предназначенный для ПК. Описанные выше макеты на мобильном устройстве будут отображены не в виде столбцов, а один под другим — поскольку им не хватит места по горизонтали. В фреймворке были разработаны специальные классы для работы с мобильными устройствами. Эти классы можно указывать для альтернативного макета в случае мобильного устройства (xs — mobile devices, sm — small devices). Например,

<div class="row"> 
  <div class="col-xs-2 col-md-8">1</div>
  <div class="col-xs-10 col-md-4">2</div>
</div>

означает, что в макете две ячейки, но пропорция их ширины будет разной при отображении на ПК или на мобильном устройстве: 8 и 4 на ПК в одну строку, или 2 и 10 на мобильном устройстве. В сумме обе пары значений дают 12, потому будут размещены в одной строке.

Создание меню. Для создания меню используют класс nav (в блок этого класса помещают кнопки или ссылки) и класс navbar в который помещают готовую навигацию. Например,

<ul class="nav nav-pills"> 
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

Navbar — адаптивный компонент, который используют в качестве блока с навигацией сайта.

Адаптивность в данном случае состоит в том, что эти компоненты «сворачиваются» при отображении с мобильных устройств, если пункты навигации не вмещаются по горизонтали.

devionity.com