Мобильное меню на bootstrap – пошаговая инструкция для новичков

Доброго времени суток, начинающие веб-разработчики и дорогие подписчики. Текущую статью я решил посвятить интересному и востребованному материалу, а именно я научу вас создавать мобильное меню на Bootstrap.

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

В одной из прошлых публикаций я показывал вам, как с помощью элемента Navs создаются вкладки. Сегодня же мы поговорим о том виде навигации, которая располагается в шапке веб-страницы. Для этого вам необходимо познакомиться с таким многофункциональным инструментом, как Navigation Bar .

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

Не забудьте в хедере документа прописать важные ссылки на стили и скрипты для подключения текущей версии Бутстрапа – Bootstrap 3.3.7.

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

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

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

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

Для этого нужно использовать полезный класс Navigation Bar navbar-collapse. С помощью navbar-collapse реализуется скрытие пунктов меню в кнопку.

Чтобы создать «Гамбургер меню», необходимо задать в теге <button> три span-а с указанием класса под названием icon-bar. При этом обязательным условием является объявление класса navbar-toggle для самого button-а, а также атрибута data-toggle с параметром collapse. В такой способ будет создана кнопка с тремя полосками.

После этого нужно прописать сами пункты навигационной панели, указав в этом блоке классы collapse и navbar-collapse .

А теперь важный момент! Чтобы связать работу кнопки с меню необходимо для блока навигации задать идентификатор (id) и после прописать его имя для button-а в атрибуте data-target .

Вот как это будет выглядеть в коде:

Надеюсь данная публикация научила вас чему-то новому и была интересной. А если это так, то подписывайтесь на мой блог и рассказывайте о нем друзьям. Я буду вам очень признателен. Пока-пока!

С уважением, Роман Чуешов

Прочитано: 14 раз

Уроки по Bootstrap

Быстрый способ бросить курить и начать верстать на Bootstrap. Про “курить” я, конечно, не знаю, но вот с бутстрапом помогу. Если вы ещё не знакомы с самым популярным css/html фреймворком, вот вам простая инструкция и описание, зачем вам это нужно.

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

В случае, когда над одним проектом работают несколько фронтенд-специалистов, подобные фреймворки должны быть стандартизированы. И предпочтение в таком случае отдаётся общепринятым фреймворкам. Тут мы оказываемся перед выбором: какой фреймворк использовать? Эта статья позволит будущим специалистам лучше понять преимущества и недостатки Bootstrap.

Мне приходилось сталкиваться с такими:

Если речь идёт только о вёрстке, то выбор фреймворка — это скорее дело вкуса, ведь в каждом из них есть минимальный набор для блочной вёрстки. Когда требуется иконочный шрифт. js-компоненты или другое, выбрать фреймворк становится проще.

Создан в застенках компании Twitter, сначала использовался для собственных продуктов и назывался “Twitter Bootstrap”, а позже был выпущен на волю. За это у него забрали слово Twitter из названия.

Bootstrap — это CSS/HTML фреймворк для создания сайтов. Другими словами, это набор инструментов для вёрстки. В нём есть ряд преимуществ, благодаря которым BS считается самым популярным из себе подобных. Преимущества бутстрапа:

1. Скорость работы — благодаря множеству готовых элементов вёрстка с бутстрапом занимает значительно меньше времени;
2. Масштабируемость — добавление новых элементов не нарушает общую структуру;
3. Лёгкая настраиваемость — редактирование стилей производится путём создания новых css-правил, которые исполняются вместо стандартных. При этом не требуется использовать атрибуты типа “!important”;
4. Большое количество шаблонов — о шаблонах Bootstrap я напишу далее;
5. Огромное сообщество разработчиков;
6. Широкая сфера применения — Bootstrap используется в создании тем для практически любой CMS (OpenCart, Prestashop, Magento, Joomla, Bitrix, WordPress и любые другие), в том числе для одностраничных приложений.

Особой популярностью пользуется Bootstrap для создания одностраничников или “лендингов” (landing page).

Шаблоны в бутстрапе позволяют менять уже изменённые элементы под свои потребности. Множество разработчиков предлагают свои шаблоны (как платно, так и бесплатно).

Подключить шаблон в Bootstrap очень легко: после подключения бутстрапа нужно только добавить вызов CSS вашего шаблона.

Подробно о шаблонах написано в уроке о вёрстке шаблонов в Bootstrap .

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

Нужно заметить, что бутстрап — это скорее набор из трёх фреймворков: css/html, js-компонентов и иконочного шрифта .

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

Например, класс .col-xs- будет использован для телефонов с шириной экрана менее 768 пикселей, а .col-lg- — для любых устройств с экраном шире 1170 px. BS разбивает ширину родительского блока на 12 равных частей, которые мы можем использовать как угодно. Части можно объединять, получая, например, три колонки: две по 25% .col-lg-3 и одну на 50% .col-lg-6 .

Визуально страница может быть представлена как угодно:

Если вы выйдете за пределы 12 частей, блоки будут отображаться друг под другом, поэтому следите за ними. Вот пример блоков, которые будут отображаться одинаково на всех устройствах. Мы разделим экран на три равные части:

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

Немало внимания уделено и семантике: основной заголовок можно оформить тегом <h1>Заголовок</h1>. а можно и <div class="h1">Заголовок</div> — выглядеть оба варианта будут одинаково, зато второй можно использовать сколько угодно раз на странице.

Стандартное оформление для заголовков в бутстрапе выглядит так:

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

Любое сообщение можно оформить в 4-х стандартных форматах: успех (success), подсказка (info), предупреждение (warning), ошибка (danger). Так они выглядят в жизни:

Для оформления такого сообщения достаточно добавить два атрибута класса к нужному объекту:

Также бутстрап позволяет оформлять диалоговые окна, поп-апы и подсказки.

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

Главное меню легко оформляется в такой вид:

Чтобы зафиксировать главное меню, достаточно будет добавить класс navbar-fixed .

Постраничная навигация выглядит так:

Код для неё потребуется такой:

Как видите, ничего сложного.

Кстати, подписывайтесь на мой твиттер. чтобы первыми читать свежие уроки по Bootstrap.

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

Можно оформить горизонтальное расположение блоков, все поля в одну строку и…

Подробная инструкция по оформлению форм есть в уроке о создании форм в Bootstrap .

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

Код для них такой:

Отдельно о создании кнопок в Bootstrap читайте в уроке о кнопках .

Старые добрые таблицы оформляются путём добавления класса class="table". Получим красиво оформленную таблицу:

Подробное описание таблиц есть в отдельном уроке “создание таблиц в Bootstrap ” и также смотрите видеоверсию урока .

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

Для работы этих компонентов требуется jquery, не забудьте убедиться, что она подключена до bootstrap.js .

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

Подробнее читайте в уроке об иконках в Bootstrap

Заходите на офсайт и отмечаете те элементы, которые вам потребуются в работе. Лишнее можно убрать и добавлять по мере необходимости. После выбора жмём “Compile and Download”, получаем архив, который распаковываем.

Для базовой работы потребуется только один файл, он отмечен красным. Переносите его в папку с вашими css и подключаете в <head> страниц.

Иконочный шрифт находится в папке fonts и если он требуется, следите за тем, чтобы он в ней и оставался. Соблюдайте структуру папок, чтобы все работало как задумано.

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

Успехов вам в этом. Переходите к следующему уроку.

Уроки адаптивной верстки Twitter Bootstrap 3

Система сеток в Twitter Bootstrap 3 – это быстрый путь для создания html макета сайта. Как раз это самая основная часть в bootstrap, т.к. благодаря сетки с можно создать адаптивную версию сайта, обеспечивает правильное расположение всех элементов. И начинает разработка макета с css класса container.

Из названия очевидно, что container содержит заданную width, изменения которой происходят в следствии изменении рабочего окна браузера.

Выравнивание происходит по центру с помощью css свойств: Container имеет внутренние отступы:

В таблице ниже представлена ширина container, которая зависит от ширины окна веб-клиента пользователя:

Width контейнера (.container)

Ширина окна веб-клиента

Свыше или равна 1200px

Свыше или равна 992px и меньше 1200px

Свыше или равна 768px и меньше 992px

Динамическая ширина (ширина равна ширине рабочей области окна веб-клиента)

Рис 1. Container с фиксированной шириной

В отличии от фиксированного container, container-fluid не имеет ширины, и единственное, что у него есть из css классов:

Рис 2. Container-fluid

После того, как вы определились с контейнером нужно переходить к рядам. Ряд принимает такую же ширину, как и контейнер. Имеет отрицательный margin:

В итоге наша конструкция уже получает вид (для примера возьму фиксированную ширину):

Как до этого писал css-класс row служит для создания рядов. А внутри этих самых рядов необходимо размещать блоки:

Внутри блока размещается контент сайта. Также можно размещать еще одни ряды. Один ряд содержит 12 блоков.

Рис 4. Блоки в одном ряду

Ширина блока указывается в относительном формате посредством необходимого количества колонок. Стартовая ширина – 1 – соответствует одной колонке Bootstrap, наибольшая ширина – 12 – максимальное количество колонок в одном ряду.

Например: если нам необходимо в одном ряду иметь 4 блока с идентичной шириной, то нам нужно задать width равную 3 (. ). В сумме выходит 12 (3+3+3+3).

Рис 5. Пример четырех блоков в одном ряду

Я до этого писал, что Twitter Bootstrap 3 знаменит своими сетками, которые подходят под различные пользовательские устройства, будь то телефон, планшет, монитор вашего домашнего/рабочего компьютера). И как раз пришло время до конца разобраться с этим.

• – col-xs-* – применяется для создание сетки с маленькими экранами. Под это определение подходят телефоны;
• – col-sm-* – для устройств чуть большей ширины экрана, чем у телефона, например планшет;
• – col-md-* – средних размеры экранов, т.е. нетбуки;
• – col-lg-* – для больших экранов. Если верить яндекс.метрике. то на данный момент количество пользователей именно сидят на сайтах под этими экранами. Но этот показатель очень сильно зависит от тематики сайта.

Вид системы сеток Twitter Bootstrap 3

Крошка-экран
Смартфоны
(. а не.

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

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

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

Рис 6. Схематическое расположение блоков на разных экранах

Стили, применяемые к макету, будут подключаться, когда активная область окна браузера (ширина) больше и равна 1200px. Из картинки видно, что контейнеры занимают все пространство ряда и делят его на три равные части. Выходит, 12 блоков нужно разделить на 3 контейнера (т.к. они все одинаковые), получаем, что в одном таком контейнере 4 блока.

Итог для большой ширины экрана:

Стили, применяемые к макету, будут подключаться, когда активная область окна браузера (ширина) больше или равна 992px и меньше 1200px. Два контейнера расположены горизонтально и занимают ширину в 100% (каждый контейнер занимает 6 блоков), и один расположен с новой строки и также занимает 100% ширины (контейнер №12 занимает 12 блоков). Чтобы четко объяснить браузеру, что контейнер нужно разместить без обтекания к других контейнерам в twitter bootstrap предусмотрен css-класс class = "clearfix". Но, еще один момент, т.к. этот класс должен распространяться на этот вид экранов нужно добавить еще один класс - class = "visible-md-block" (md – это название экрана, аналогично с классами для блока).

Итог для средней ширины экрана (будьте внимательны. я буду добавлять в уже написанный код новые классы и элементы):

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

Для «крошка-экран» можно опустить css-класс class = "col-xs-12". т.к. он занимает 100% ширины экрана автоматически и чтобы не загромождать код лишними символами можно их удалить.

Конечный код для этого шаблона будет выглядеть:

До этого я использовал класс class = "visible-md-block" – который отображается на средний экранах. Более подробно о класс "visible".

Bootstrap 3 - Установка и сборка платформы

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

Устанавливать и управлять платформой Twitter Bootstrap 3 можно различными способами:

• вручную, посредством самостоятельного скачивания этой платформы (архива) с сайта http://getbootstrap.com и библиотеки jQuery. Данный способ является наиболее трудоёмким, так как Вам придётся выполнять все действия связанные с установкой и последующим обновлением платформы вручную.
• с помощью указания файлов, находящихся на серверах CDN. Данный способ имеет некоторые преимущества, перед предыдущим способом, а именно:
  • уменьшает нагрузку на Ваш сервер, т.к. загрузка файлов происходит с CDN;
  • увеличивает скорость загрузки веб-страницы, т.к. необходимые файлы берутся из кэша браузера. Это происходит только в том случае, если до этого (т.е. на других сайтах) эти файлы загружались аналогичным образом, т.е. из этого же CDN.
• с помощью Bower (http://bower.io );
• с помощью npm (http://www.npmjs.com ).

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

Для установки bower необходимо ввести в "node.js" следующую команду:

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

Внимание: для работы Bower необходим Git, который можно скачать с сайта https://git-scm.com/ .

Для установки Twitter Bootstrap 3 Необходимо ввести следующую команду:

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

Для обновления библиотек достаточно просто ввести команду:

Для вывода списка всех установленных пакетов можно воспользоваться командой:

Менеджер пакетов npm. также как и Bower, может использоваться для установки платформы Twitter Bootstrap 3 и библиотек, которые требуются для работы данной платформы. Отличается npm от Bower подходом к установке необходимых библиотек. Если Bower загружает всё в одну специальную директорию, то npm раскладывает всё по отдельным директориям в зависимости от зависимостей пакетов (библиотек) между собой.

Для установки Twitter Bootstrap 3 с помощью npm необходимо ввести следующую команду:

Grunt (http://gruntjs.com ) используется для процесса сборки платформы Twitter Bootstrap 3, который включает: компиляцию файлов LESS в CSS, минимизацию (сжатие) файлов CSS и JavaScript, запуск различных тестов (JSHint, QUnit) и многое другое.

Представляет собой Grunt npm-модуль в "node.js". Задачи, которые он выполняет, также осуществляются с помощью npm модулей.

Перед установкой Grunt Вам сначала необходимо скачать и установить "node.js" (http://nodejs.org/download/ ), который включает в себя менеджер пакетов npm (node package modules). Данный менеджер будет использоваться как для установки самого Grunt, так и для установки и управления различными модулями, с помощью которых он выполняет свои задачи через "node.js".

Порядок действий при установке Grunt в командной строке:

1. Установить grunt-cli с помощью команды: npm install -g grunt-cli.
2. Перейти в корневую директорию /bootstrap/ выбранного проекта и выполнить: npm install. В результате выполнения этой команды менеджер пакетов npm прочитает файл "package.json" (https://github.com/twbs/bootstrap/blob/master/package.json ), который содержит список зависимостей и автоматически установит их.

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

grunt dist (компилирует и минимизирует файлы CSS и JavaScript). Эта команда выполняет создание готовых файлов платформы, которые после этого располагаются в папке dist. Т.е. данная команда заново создаёт директорию dist. выполняет склеивание, компилирование и минимизирование файлов CSS и JavaScript, которые затем помещаются в эту директорию. Эта команда используется пользователями Twitter Bootstrap 3 наиболее часто.

grunt watch (наблюдает за изменениями в less файлах). Данная команда используется для наблюдения за исходными файлами less и запускает задачу на автоматическую компиляцию их в CSS всякий раз, когда Вы сохраняете изменения в этих файлах.

Если у Вас возникли проблемы с установкой зависимостей или запуском команд Grunt, то первым делом удалите директорию /node_modules/. созданную менеджером пакетов npm. После этого повторно запустить команду: npm install .

1. Установите платформу Twitter Bootstrap различными способами.
2. Какой из способов установки платформы Twitter Bootstrap Вам понравился больше и почему?
3. Установите Grunt и соберите с его помощью платформу Twitter Bootstrap.

А еще помимо node.js нужно обязательно:
1) установить Git для Windows (если у вас Windows, git-for-windows.github.io/ ), при установке выбрать — «Run Git from the Windows Command Prompt»
2) прописать/добавить пути в к нему в «системной переменной» Path — (;C:\Users\UserName\AppData\Local\Programs\Git\bin;C:\Users\UserName\AppData\Local\Programs\Git\cmd) у вас путь до установки может выглядеть иначе.

И без этого всё что написано выше работать не будет или будет но с ошибками. Примем это нужно не только для Bower, для установки с помощью npm install bootstrap это тоже обязательно.

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

Здравствуйте, то-есть если я установлю версию, к примеру
maxcdn.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js
С CDN будет подгружаться 3.4.4 (на данный момент актуальная версия)?

Привет, Егор.
Данную возможность лучше не использовать, тем более что она актуальна только для jQeury.
В maxcdn получить, таким образом, последнюю версию Bootstrap не получиться.
Смысл бы такой, убрав последнюю цифру из пути (вместо 1.8.2 -> 1.8), вы получите последнюю версию jQuery в ветке 1.8.
Убрав последние цифры из пути (вместо 1.8.2 -> 1), вы получите последнюю версию jQuery в ветке 1.

Приветствую.
Спасибо за толкОвый цикл статей про bootstrap .
Вопрос по grunt docs. Команда выполняется, но доки локально нечитаемы.
Вроде бы нужно ещё шаманство… Проясните плиз (под Windows).

Привет, Виктор.
Пошаговая инструкция:
1. Скачать PortableJekyll со страницы https://github.com/madhur/PortableJekyll
2. Распаковать скаченный архив PortableJekyll-master.zip в любой каталог
3. Открыть файл setpath.cmd. Заменить "%

dp0" на путь к PortableJekyll
4. Запустить файл setpath.cmd
5. Открыть командную строку и перейти в каталог Bootstrap
6. Выполнить команду jekyll serve

7. Запуститься сервер
8. Открыть документацию в браузере

Добрый день!
Интересует такой вопрос. Какую версию jquery следует подключать для bootstap 3?
Вроде как, по логике получается, что последнюю версию jquery 1.11.3
Но в одном из уроков по bootstap (на просторе интернета) автор этого урока подключает версию 1.9.1, сказав при этом только: «Так bootstap поддерживается с версии 1.9.0 и выше я подключу 1.9.1».
Дальше никаких объяснений не последовало почему именно эта версия 1.9.1 а не последняя.

Хотелось бы услышать мнение разбирающегося человека в данном вопросе. Плюсы и минусы использования последней версии jquery или 1.9.1?

Доброго времени, Владимир!
Bootstrap 3 требует для своей работы, а точнее файл bootstrap.js версию jquery не ниже 1.9.1 или 2.
Лучше конечно всего использовать последнюю версию jQuery. На текущий момент их две: 1.11.3 (если Вам нужна поддержка IE 8) и 2.1.4 (если Вам не нужна поддержка IE8).
Минусы это навряд ли, а вот плюсы есть. Это более высокое быстродействие и отсутствие огромного багажа ошибок по сравнению с версией 1.9.1. Ведь разработчики не даром трудятся и стараются сделать свой продукт лучше. На своём сайте (http://jquery.com/) они всегда публикуют в момент выхода релиза какие ошибки они исправили, какие методы получили более высокое быстродействие и т.д. Если Вам интересно, то перейдите на сайт разработчиков jQuery и почитайте об этом в разделе Blog.

Спасибо за ответ!

Т.е. получается, что в том уроке, о котором я написал в первом сообщении автору следовало просто уточнить что версия 1.9.1 подключается для того чтобы обеспечить поддержку старых IE. А версию 1.9.1 а не последнюю он выбрал потому (я предполагаю), что она для него проверена(железно будет работать) и у него не было времени(или просто лень) разузнать о свойствах последней версии.

И выходит, что лучше все же на данный момент использовать версию jquery 1.11.3 для bootstap 3 (и при этом поддержка старых IE сохраниться).

Ну, вроде немного стало яснее с версиями jquery для bootstrap. Но вот я наткнулся еще на одну статью, где рассказывается, как подключить только jquery к сайту (уже вне контекста jquery+bootstap).
И чтобы вы думали я увидел уже в этом примере, «та-да» опять jquery 1.9.1!

В статье рекомендуют подключить последнюю версию jquery и тут же прописывают 1.9.1. Загадка да и только:)

Думаю, что там опечатка. Потому что пишут про одно версию, а подключают другую.

А сам сайт делан на CMS WordPress и использует Bootstrap 2.3.2 и jQuery 1.11.3.

Не думаю что поддержка старых версий IE в настоящий момент столь актуальна. Если брать статистику, то версией IE8 и ниже пользуются меньше 1,3% пользователей во Всём мире (http://caniuse.com/usage-table). А если брать статистику сайтов, то эта цифра достигает лишь 0,14% от всех пользователей. Тем более что на подходе уже jQuery 3.
Да и Bootstrap 4 уже не будет поддерживать старые версии IE <= 8.