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

  • Главная
  • Курсы
  • Основы 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

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

На самом деле подключение фреймворка к движкам осуществляется достаточно просто. А в ситуации с Joomla Бутстрап уже включен в сборку и подключается автоматически. Так, он используется в админпанелях движка.

Однако тут есть одно НО. Версия фреймворка, которая используется в этой CMS, устаревшая. Поэтому вам желательно подключить последнюю версию Bootstrap. И тут важно не заменить старую на новую, так как админка может полететь, а использовать их совместно (конфликта не будет).

Чтобы элементы фреймворка заработали, необходимо выполнить несколько действий:

  1. Скачать на официальном сайте последнюю доступную версию Bootstrap;
  2. Все файлы фреймворка с расширением css скопировать в каталог css выбранного макета CMS Joomla;
  3. Все файлы с расширением js скопировать в каталог js выбранного шаблона движка;
  4. Скопировать все файлы из каталога fonts скачанного фреймворка в папку fonts выбранного макета Joomla;
  5. В основном файле index.php вашего проекта в хедере добавить следующие строки:

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

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

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


Чтобы не дублировать прошлый вариант подключения Бутстрапа, я расскажу, как пользоваться онлайн-хранилищами. Как вы уже, наверное, знаете, не обязательно скачивать файлы описываемого инструмента. Иногда достаточно воспользоваться ссылками на CDN.

Для этого в хедере файла с названием index.php вам необходимо по таким же правилам, как и в предыдущем варианте (описание стилей, скрипты js и jQuery, скрыпты Bootstrap), вставить строки:

Для CMS WordPress существует и другой способ:

  1. Скачайте на официальном сайте http://getbootstrap.com/ последнюю доступную версию Bootstrap;
  2. Все файлы фреймворка с расширением css скопируйте в каталог css активного макета Вордпресс;
  3. Все файлы с расширением js скопируйте в каталог js активного шаблона движка;
  4. Скопируйте все файлы из каталога fonts в папку fonts активного WordPress-шаблона;
  5. В корневом каталоге этого макета найдите файл functions.php и откройте его;
  6. Вписывайте в текст открытого документа код:
  7. После функции добавьте строку add_action (‘wp_enqueue_scripts’, ‘add_bootstrap’); которая запустит обработку только что созданной функции.

romanchueshov.ru

Задачи

Задачи

Что нам понадобится:

  • jQuery
  • Bootstrap

Как и куда подключать Bootstrap и jQuery

Подключение

Подключаются библиотека в файле index.html. Для начала нужно скачать эти самые библиотеки. Сделать это можно вот по этим ссылкам:

  • jQuery

  • Bootstrap


Если при скачивании бибилотеки jQuery у вас открлась страница с исходным кодом, то просто кликните правой кнопкой мыши и сохраните файл в корень проекта. Обычно он автоматически сохраняется с расширение js.

Далее, скачайте библиотеку Bootstrap, разархивируйте, переименуйте папку в bootstrap и поместите её также в корень проекта.

kpower.info

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

Поддержка браузерами

В частности, мы поддерживаем последние версии из следующих браузеров и платформ. На платформе Windows, мы поддерживаем Internet Explorer 8-11. Более конкретная информация поддержки предоставлена ниже.

Bootstrap должен достаточно хорошо выглядеть и вести себя в Chromium и Chrome для Linux, Firefox для Linux, и Internet Explorer 7, хотя они официально не поддерживаются.

Internet Explorer 8 и 9

Internet Explorer 8 и 9 также поддерживается, однако помните, что некоторые свойства CSS3 и элементы HTML5 не в полной мере поддерживаются данным браузерами. Кроме того, Internet Explorer 8 требует использования Respond.js, чтобы разрешить поддержку медиа запросов.


Посетите Can I use… для более детального ознакомления, какие свойства CSS3 и HTML5 поддерживаются различными браузерами.

Internet Explorer 8 и Respond.js

Примите во внимание следующие оговорки, при использовании Respond.js в вашей среде разработки, в рабочей среде Internet Explorer 8.

Respond.js и кросс-доменный CSS

Если вы храните Respond.js и CSS на разных (суб)доменах (например, на CDN) — это требует некоторых дополнительных установок. Ознакомьтесь с документацией Respond.js для уточнений.

Respond.js и file://

Через правила безопасности браузера, Respond.js не работает при просмотре через протокол file:// (например, когда вы открываете HTML файл локально). Чтобы протестировать настройки чувствительности в IE8, просматривайте ваши страницы через HTTP(S). Ознакомьтесь с документацией Respond.js для уточнений.

Respond.js и @import

Respond.js не работает с CSS, на которые ссылаются как @import. В частности, некоторые конфигурации Drupal, как известно, используют @import. Ознакомьтесь с документацией Respond.js для уточнений.

Internet Explorer 8 и box-sizing

IE8 не в полной мере поддерживает box-sizing: border-box;
при комбинировании с min-width, max-width, min-heightили max-height. По этой причине, начиная с v3.0.1, мы больше не поддерживаем max-width, .container.

Режим совместимости с IE

Bootstrap не поддерживает режим совместимости в старых версиях Internet Explorer. Чтобы быть уверенным, что вы используете последнюю версию такого режима для IE, просмотрите включен соответствующий тег <meta> на вашей странице:

Подтвердите режим документа, открыв средства отладки: нажмите F12 и проверьте «Document Mode».

Этот тег входит в состав всех Bootstrap документациий и примеров для обеспечения лучшей визуализации возможных в каждой поддерживаемой версии Internet Explorer.

Просмотрите эти вопросы на StackOverflow для уточнений.

Internet Explorer 10 на Windows 8 и Windows Phone 8

Internet Explorer 10 не отличает ширину устройства ширины окна просмотра, и таким образом не правильно применяет медіазапити в Bootstrap CSS. Как правило, это можно быстро починить добавив следующий код CSS:

Однако, это не работает для устройств, работающих под управлением Windows Phone 8 версий старше, чем Update 3 (a.k.a. GDR3), поскольку это вызывает такие устройства, чтобы главным образом показать основной рабочий стол вместо узкого «phone» view. Для решения этой проблемы вам необходимо включать следующие CSS и JavaScript, чтобы обойти ошибку.


Для получения дополнительной информации и руководства по использованию, просмотрите Windows Phone 8 и Device-Width.

Чтобы привлечь внимание, мы включили это в качестве примеров в документации Bootstrap.

Процентное округления в Safari

В версиях Safari v6.1 для OS X и Safari для iOS v7.0.1, при использовании класса разметки .col-*-1, движок Safari имеет некоторые проблемы с количеством десятичных знаков. То есть если вы имеете 12 отдельных колонок разметки, вы заметите, что они будут более короткими по сравнению с другими рядами колонок. Здесь можно немного изменить (просмотрите #9282), но у вас есть несколько вариантов:

  • Добавить .pull-right в вашей последней колонки в разметке, чтобы получить жесткое выравнивание по правому краю.
  • Изменить проценты вручную, чтобы получить идеальное округления для Safari (более сложно, чем в первом варианте)

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

Модаль, navbars, и виртуальные клавиатуры

Переполнение и прокрутка

Поддержка overflow: hidden для элемента <body> достаточно ограничена в iOS и Android. В браузере этих устройств, при прокруткі за пределы верхней или нижней модальной части, начинает прокручиваться содержание в <body>.

Виртуальная клавиатура

Обратите внимание — если вы используете форму ввода в модальном окне или навигации, iOS имеет ошибку отображения, через которую не обновляется позиция фиксированных элементов при вызова виртуальной клавиатуры. Существуют некоторые обходные пути для этого, в том числе — трансформирующие элементы position: absolute, или при выявлении фокуса на элементе вызывают таймер и пробуют исправить это вручную. Bootstrap не обрабатывает такие ошибки, так что вам нужно самим это решить.

Navbar Dropdowns

Элемент .dropdown-backdrop не используется на iOS в навигации из-за сложности с z-index. Таким образом, чтобы закрыть выпадающие меню, необходимо просто нажать элемент выпадающего (или любой другой элемент, который будет генерировать событие нажатия в iOS).

Браузерное масштабирование

При изменении размера страницы, неизбежно оказывается некорректное отображение некоторых элементов: это касается и Bootstrap, и остальных веб-документа. В зависимости от конкретного случая, мы можем исправить это (при необходимости вы можете открыть соответствующий запрос, но сначала необходимо поискать или нет аналогичных запросов). Тем не менее, но как правило мы игнорируем их, поскольку они часто не имеют прямого решения, кроме создания обходных путей в виде хаков (hacky).

Выводы на принтер

Даже в некоторых современных браузерах, печать может быть изворотливой. В частности, по состоянию на Chrome v32 и независимо от настройки полей, Chrome значительно использует ширину окна просмотра уже, чем физический размер бумаги при разрешении запросов СМИ во время печати веб-страницы. Это может привести к неожиданно активирующейся при печати экстра-малых разметки Bootstrap. Смотрите #12078. Предлагаемые методы обхода:

  • Примените extra-small разметку и убедитесь, что ваша страница выглядит приемлемо.
  • Настройка значения @screen-* Less переменных, чтобы ваш бумага для принтера рассматривалась больше, чем extra-small.
  • Добавте пользовательские запросы, чтобы изменить размер разметки точек останова только для печатных СМИ.

Android stock браузер

Out of the box, Android 4.1 (and even some newer releases apparently) ship with the Browser app as the default web browser of choice (as opposed to Chrome). Unfortunately, the Browser app has lots of bugs and inconsistencies with CSS in general.

Select меню

On <select> elements, the Android stock browser will not display the side controls if there is a border-radius and/or border applied. Use the snippet of code below to remove the offending CSS and render the <select> as an unstyled element on the Android stock browser. The user agent sniffing avoids interference with Chrome, Safari, and Mozilla browsers.

Хотите увидеть пример? Проверьте это JS Bin demo.

bootstrap-3.ru

Как же установить bootstrap? Для начало нам нужно заполучить дистрибутив на официальном сайте бутсрап. На странице руководства будет предложено несколько вариантов установки:

Скачать версию production (конечный продукт который можно использовать) и версию development (содержит все исходники)

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

Добавлю, что версию для разработки можно установить с помощью пакетных менеджеров, таких как: bower или composer, а версию для production при помощи CDN.

После того, как мы скачали нужный нам дистрибутив и распаковали его, в нашем случае это production версия, рассмотрим структуру приложения. И так у нас есть три каталога: css, js, и fonts.

 bootstrap/   ├── css/   │ ├── bootstrap.css    │ ├── bootstrap.css.map   │ ├── bootstrap.min.css   │ ├── bootstrap.min.css.map   │ ├── bootstrap-theme.css   │ ├── bootstrap-theme.css.map   │ ├── bootstrap-theme.min.css   │ └── bootstrap-theme.min.css.map   ├── js/   │ ├── bootstrap.js   │ └── bootstrap.min.js   └── fonts/   ├── glyphicons-halflings-regular.eot   ├── glyphicons-halflings-regular.svg   ├── glyphicons-halflings-regular.ttf   ├── glyphicons-halflings-regular.woff   └── glyphicons-halflings-regular.woff2  

В каталоге css лежат минифицированные версии css (обычно несут в себе префикс min) и не минифицированные, которые удобно читать и можно использовать в качестве исходного кода. Также к каждому файлу прилагается карта источника (кода) *.map (требуются для отладки в браузере).

bootstrap.css — это основной файл, в нем можно найти всё что делает bootstrap таким крутым и популярным css фреймвороком.

bootstrap-theme.css — это небольшая тема, которая переопределяет стили основного файла и добавляет новое отображение для некоторых компонентов (хорошей практикой считается не затрагивать исходный код библиотек и фреймворков, это позволит избежать массы проблем, если вдруг мы решим обновиться) так что bootstrap-theme.css можно использовать как хорошую базу.

JS включает также две версии файлов (минифицированная и нет) и содержит в себе стандартные плагины (карусель, модальные окна и т.д.), а также небольшой набор инструментов, более подробную информацию можно узнать на официальном сайте бутстрапа в разделе javascript.

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

<!DOCTYPE html>  <html lang="ru">   <head>   <meta charset="utf-8">   <meta name="viewport" content="width=device-width, initial-scale=1">   <title>Bootstrap 101 Template</title>   <!-- Bootstrap -->   <link href="/css/bootstrap.min.css" rel="stylesheet">   <link href="/css/bootstrap-theme.min.css" rel="stylesheet">   </head>   <body>   <h1>Hello, world!</h1>     <!-- 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>  

Перед закрывающимся тегом </head> добавим стили: bootstrap.min.css и bootstrap-theme.min.css (важно! файл со стилями, который будет переопределять стили другого файла, нужно размещать последним, поэтому файл bootstrap-theme.min.css расположен именно в конце).

Что касается скриптов: если вы заметили, добавлена библиотека jQuery, так как у bootstrap есть жесткая зависимость, и плагины просто не смогут функционировать. Порядок подключения будет следующим: jquery.min.js, bootstrap.min.js Почему именно в таком порядке? Все просто: плагины нуждаются в jquery, как машины в топливе, поэтому сначала нужно заправить авто. Последний нюанс, подключать скрипты лучше всего в конце документа, перед закрывающим тегом </body>, чтобы браузер не тратил время на загрузку и выполнение, а быстро отрисовывал документ.

Вот собственно и все, осталось лишь наполнить сайт и добавить необходимые компоненты, для это используйте руководство bootstrap по css.

You May Also Like

About the Author: admind

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

Adblock
detector