Подключение bootstrap js. Начало работы с Bootstrap. Шаблон Bootstrap с заблокированной адаптивностью

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

Текущая версия v3.3.2.

Bootstrap CDN

$ bower install bootstrap

Что включено

Bootstrap доступен в двух версиях. Одна из них содержит скомпилированный вариант, а другая минимизированный (уменьшенный по объему). В обоих случаях каталоги и файлы логически сгруппировны.

Файловая структура Bootstrap 3

После загрузки, разархивируйте файлы. Вы увидите нечто похожее на это:

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

Это основная форма Bootstrap : скомпилированные файлы готовы для быстрого использования в любом веб-проекте. Предоставлены сборки CSS и JS (bootstrap.*) и минимизированный вариант (bootstrap.min.*). В качестве дополнительной опции для Bootstrap включены шрифты Glyphicons.

Исходный код Bootstrap 3

Исходный код Bootstrap включает прекомпелированные CSS, JavaScript и шрифты, вместе с исходным Less, JavaScript и документацией. Для наглядности посмотрите приведенный пример ниже.

Bootstrap/ ├── less/ ├── js/ ├── fonts/ ├── dist/ │ ├── css/ │ ├── js/ │ └── fonts/ └── docs/ └── examples/

less/ , js/ , шрифты/ с иконками. Папка dist/ включает в себя все перечисленные скомпилированные файлы, указанные в разделе выше. Папка docs/ содержит документацию и примеры/ использования Bootstrap. Кроме того, находится информация о лицензиях и развитии предыдущих версий.

Сообщество

Оставайтесь в курсе развития Bootstrap. Обратитесь к сообществу за полезной информацией.

Поддержка Bootstrap на русском языке Шаги для блокировки адаптивного просмотра

Не создавайте с именем viewport как об этом сказано в описании CSS

Отмените width , .container для каждого уровня разметки определенной ширины, например так: width: 970px !important; Убедитесь, что этот код идет после включения основного кода Bootstrap CSS. При желании можно избежать!important с медиа-запросами или со специальным селектором.

Если вы используете навигационное меню, удалите все меню, которые могут сворачиваться/разворачиваться.

Для макета разметки используйте классы.col-xs-* как дополнение или вместо классов medium/large. Разметка с классом xs (extra small) масштабируется для всех размеров мониторов.

Вам понадобится Respond.js для IE8 (поскольку существуют медиа-запросы и они должны обрабатываться). Это заблокирует свойство "мобильность сайта" Bootstrap.

Шаблон Bootstrap с заблокированной адаптивностью

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

Переход с v2.x на v3.x

Посмотрите документацию о переходе со старой версии Bootstrap на v3.x? Ознакомьтесь с руководством по переходу .

Браузеры и поддержка устройств

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

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

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

Chrome Firefox Internet Explorer Opera Safari Android iOS Mac OS X Windows


Поддерживается	Не поддерживается	N/A	Не поддерживается	N/A
Поддерживается	N/A		Не поддерживается	Поддерживается
Поддерживается	Поддерживается		Поддерживается	Поддерживается
Поддерживается	Поддерживается	Поддерживается	Поддерживается	Не поддерживается

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

Internet Explorer 8 и 9

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

Свойство Internet Explorer 8 Internet Explorer 9 border-radius box-shadow transform transition placeholder

Не поддерживается	Поддерживается
Не поддерживается	Поддерживается
Не поддерживается	Поддерживается с префиксом -ms
Не поддерживается
Не поддерживается

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

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

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

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

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

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

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

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

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

Navbar Dropdowns

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

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

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

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

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

Примените 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 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 as an unstyled element on the Android stock browser. The user agent sniffing avoids interference with Chrome, Safari, and Mozilla browsers.

var nua = navigator . userAgent var isAndroid = (nua . indexOf ("Mozilla/5.0" ) > - 1 && nua . indexOf ("Android " ) > - 1 && nua . indexOf ("AppleWebKit" ) > - 1 && nua . indexOf ("Chrome" ) === - 1 ) if (isAndroid ) { $ ("select.form-control" ). removeClass ("form-control" ). css ("width" , "100%" ) }

Поддержка третьих сторон

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

Размерность блоков

В зависимости от контекста, вы можете переопределить box-sizing только там, где это необходимо (Вариант 1), либо сбросить его для целых областей (Вариант 2).

/* Box-sizing resets * * Reset individual elements or override regions to avoid conflicts due to * global box model settings of Bootstrap. Two options, individual overrides and * region resets, are available as plain CSS and uncompiled Less formats. */ /* Option 1A: Override a single element"s box model via CSS */ .element { -webkit-box-sizing : content - box ; -moz-box-sizing : content - box ; box-sizing : content - box ; } /* Option 1B: Override a single element"s box model by using a Bootstrap Less mixin */ .element { .box-sizing (content-box ); } /* Option 2A: Reset an entire region via CSS */ .reset-box-sizing , .reset-box-sizing *, .reset-box-sizing * :before , .reset-box-sizing * :after { -webkit-box-sizing : content - box ; -moz-box-sizing : content - box ; box-sizing : content - box ; } /* Option 2B: Reset an entire region with a custom Less mixin */ .reset-box-sizing { & , *, * :before , * :after { .box-sizing (content-box ); } } .element { .reset-box-sizing (); }

Доступность

Bootstrap следует общим веб-стандартам, и—при минимальных дополнительных усилиях—может быть использован для создания сайтов, доступных через AT .

Пропуск навигации

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

Skip to main content The main page content.

Вложенные заголовки

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

Дополнительные ресурсы Она позволяет: Она не требует:

Включать исходный код Bootstrap itself, or of any modifications you may have made to it, in any redistribution you may assemble that includes it
Предоставлять изменения, которые вы внесли в Bootstrap для демонстрации в проекте Bootstrap (хотя обратная связь приветствуется)

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

Настройка Bootstrap

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

После того как вы скачали и подключили стили и скрипты Bootstrap, вы можете настроить их компоненты. Чтобы это сделать, просто создайте новую таблицу стилей (LESS, если желаете, или просто CSS).

Простую сборку или минимизированную?

И в дальнейшем, включайте любые компоненты Bootstrap и HTML, для создания шаблонов страниц вашего сайта.

Настройка составных

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

Мы определяем легкая настройка как поверхностные изменения, например, изменение цвета и шрифта для существующих компонентов Bootstrap. Примером легкой настройки является

Здравствуйте! В этой статье я расскажу как установить и подключить фреймворк Bootstrap. О том что такое Bootstrap можно посчиать .

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Responsive utilities – адаптивные утилиты, также рекомендую никогда не отключать их. Об адаптивных утилитах мы с вами поговорим в следующей статье, где как раз подробно рассмотрим систему сетки. Это такие классы, которые позволяют на определенной ширине экрана скрывать элемент или делать его видимым. Очень удобно и полезно.

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

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-исходниками.

19.05.2016

Всем привет!
Вот и пришло время продолжить изучать основы «bootstrap 3» .
Не пропустите новые уроки бесплатного курса по основам создания веб страницы на «bootstrap 3».
Пришло время рассказать, где скачать «bootstrap 3» и как им вообще пользоваться.
Думаю, для удобства стоит все разбить пошагово.
Список шагов:

Скачиваем «bootstrap 3»

Подготовка (распаковка, удаление лишнего)

Создание файла «index.html» и подключение файлов

Шаг 1. Скачиваем «bootstrap 3»

Фреймворк «bootstrap 3» можно бесплатно скачать с моего блога:

Либо скачать с официального сайта:

Если вы выбрали скачивание с официального сайта, то когда вы там окажетесь, жмите на ссылку «Download Bootstrap » и укажите место на компьютере, куда нужно закачать архив с «bootstrap 3»:

Шаг 2. Подготовка (распаковка, удаление лишнего)

Теперь создайте на вашем ПК папку, где будете проводить различные опыты с файлами «bootstrap 3», это будет ваш личный полигон для испытаний и прохождения изучения основ «bootstrap 3».
Я назову папку «Полигон для bootstrap 3». Рекомендую назвать также. Чтобы у нас не было расхождений в названиях, и вы со мной шли шаг в шаг.
Итак, в папку «Полигон для bootstrap 3» распакуйте архив с файлами «bootstrap 3».
В результате в папке «Полигон для bootstrap 3» должны быть только три папки «CSS », «js » и «fonts »:

Рассмотрим теперь каждую папку от «bootstrap 3» и выясним, какие файлы там присутствуют, для чего они нужны.

Стандартная файловая структура «Bootstrap»:

│ ├── bootstrap.css

│ ├── bootstrap.min.css

│ ├── bootstrap-theme.css

│ └── bootstrap-theme.min.css

│ ├── bootstrap.js

│ └── bootstrap.min.js

└── fonts/

Внимание: если вы качали «Bootstrap 3» с официального сайта, возможно, что файлов уже будет больше.

«Папка CSS»

bootstrap.css - в этом css-файле находятся все готовые стили. Этот файл мы и будем подключать к веб-странице. Все остальные файлы я удаляю:

bootstrap.min.css - точно такой же файл, что «bootstrap.css», только сжатая версия. Удалите файл «bootstrap.min.css » .

bootstrap-theme.css - это css-файл для готовой темы Bootstrap. Удалите файл «bootstrap-theme.css» .

bootstrap-theme.min.css - точно такой же файл, что «bootstrap-theme.css », только сжатая версия. Удалите файл «bootstrap-theme.min.css » .

«Папка fonts»

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

«Папка js»

В папке js находится 2 файла: «bootstrap.js » и «bootstrap.min.js ». Это два одинаковых файла с набором готовых js-сценариев. Разница лишь в том, что «bootstrap.js» – это полная версия, «bootstrap.min.js» – это сжатая версия. Удалите файл «bootstrap.min.js» .

После проделанной операции по удалению ненужных файлов у вас будет уже вот такая файловая структура «Bootstrap»:

│ └── bootstrap.css

│ └── bootstrap.js

└── fonts/

├── glyphicons-halflings-regular.eot

├── glyphicons-halflings-regular.svg

├── glyphicons-halflings-regular.ttf

└── glyphicons-halflings-regular.woff

То есть, в папках:

CSS – находится файл «bootstrap.css »
js - находится файл «bootstrap.js »
fonts - находятся файлы «glyphicons-halflings-regular.eot », «glyphicons-halflings-regular.svg », «glyphicons-halflings-regular.ttf », «glyphicons-halflings-regular.woff ».

Шаг 3. Создание файла «index.html» и подключение файлов

В корне папки «Полигон для bootstrap 3» создайте файл «index.html» с таким кодом и с :

Bootstrap 3 на сайт Hello, world!

В строке №10 – я подключаю файл «bootstrap.css»:

В строке №25 – я подключаю файл «bootstrap.js»:

Вот такая вот общая картина должна быть у вас в папке «Полигон для bootstrap 3»:

Вот и вся подготовка и подключения «bootstrap 3» к файлу «index.html ». Если вы откроете файл «index.html » через любой браузер (например, OPERA, EI, Mozilla Firefox, Google Chrome, Yandex браузер и т.д.), то вы увидите на экране вот такую страничку:

Вроде как ничего особенного, можно и не использовать «bootstrap 3», но ведь это только подключение и всего лишь второй урок. Вы еще увидите, какие есть преимущества у Фреймворка «bootstrap 3» .
Убедитесь, насколько быстро и качественно можно создавать адаптивные сайты.
Итак, подписывайтесь на обновления моего блога! Вы же не хотите пропустить новых уроков по «bootstrap 3»?

Предыдущая запись
Следующая запись

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

Установка базового шаблона Bootstrap 3

Для использования средств и методов Bootstrap 3 необходимо перейти по адресу http://getbootstrap.com и скачать архив с папаками css, fonts, js и с соответствующими файлами внутри них.

Если вы не знаете как подключить стили CSS и js скрипты, рекомендую посмотреть эту и эту статью, а в нашем случае стили CSS подключаются в секции

а скрипты перед закрывающим тегом

в низу страницы.

Также хочется отметить, что использование файлов bootstrap.min.css и bootstrap.min.js принесет пользу вашему сайту, так как эти файлы имеют меньший размер и положительно скажется на скорости загрузки.

Подключение fonts шрифтов можно выполнить двумя способами:

Напрямую в секции HEAD перед закрывающим тегом

В отдельном CSS файле, находящемся в папке css

Второй вариант предпочтительней, но какой бы способ вы не выбрали, подключение будет происходить так

@font-face{ font-family: glyphicons-halflings-regular; src: url(/fonts/glyphicons-halflings-regular.eot); src: local(glyphicons-halflings-regular), url(fonts/glyphicons-halflings-regular.ttf); } h2{ font-family: glyphicons-halflings-regular,sans-serif; }

вернее в теге style для первого способа, а весь текст внутри него вставляем в файл css - для второго.

Установка jquery

Для номальной работы Bootstrap 3 понадобится дополнительно скачать с официального сайта jquery.com файл библиотеки jquery по ссылке и поместить в папку js вашего сайта.

Подключение jquery происходит перед закрывающим тегом

Cookies make it easier for us to provide you with our services. With the usage of our services you permit us to use cookies.

, но перед файлом bootstrap.js

так как jquery должен загружаться раньше, чем bootstrap.

Сетка Bootstrap 3 и размеры экранов

Основой Bootstrap является набор классов, на которых строится 12-ти колоночная сетка (col-) . В переделах сетки поддерживаются 5 типов экранов -xs- -sm- -md- -lg- -xl-.

-xs- размер экрана менее 575px;
-sm- размер экрана более 576px и не более 767 px;
-md- размер экрана более 768px и не более 991 px;
-lg- размер экрана более 992px и не более 1199 px;
-xl- размер экрана более 1200px;

Таким образом, div с классом col-lg-12 означает, что на экране с большим размером div колонка будет занимать 12 столбцов или 100% по ширине, аналогично div col-sm-6 на экране смартфона займет 6 столбцов или 50% по ширине.

Типы контейнеров для сетки. Резиновый макет верстки

Основными типами контейнеров для сетки являются классы container и container-fluid.

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

Поместив сетку в класс container-fluid все элементы верстки будут расположены по всему экрану, как резиновый и при уменьшении по ширине будут сдвигаться друг к другу.

Какой то конкретной рекомендации по использованию container и container-fluid нет, так как все зависит от макета дизийна и назначения верстки, впрочем, для админ панели сайта уместно применять container-fluid, а для сайта container.

Кроме того, класс -fluid можно применить не только к классу container, но и к строке row, для расположения элементов в ряд. Однако если вы поместите row-fluid в обычный container, то разницы не заметите. Подобную комбинацию лучше всего использовать вне div.container, например так:

Привет, я шаблон Bootstrap 3

Мой контейнер не fluid!

А я row-fluid!

Строки для помещения элементов

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

Заголовок 1 Заголовок 2 Заголовок 3

Если уменьшать размер страницы браузера, заголовки выстроятся в вертикальный список из горизонтальной строки.

Классы видимости элементов

В системе верстки Bootstrap 3 предусмотрены дополнительные классы для отображения или скрытия элементов на различных устройствах и экранах. Обозначаются они как visible-*-* и hidden-*.

Класс для отображения visible-*-* после первого тире обычно идет идентификатор типа экрана (xs,sm,md,lg,xl), а после второго тире размер столбца(1-12). Например, visible-lg-6 - элемент виден на большом экране, ширина 6 столбцов.

Класс для скрытия hidden-* после тире идет идентификатор типа экрана (xs,sm,md,lg,xl), например, элемент разметки с классом hidden-xs не будет виден на маленьких устройствах(размер экрана менее 575px).

Комбинирование этих элементов позволит отображать или скрывать div контейнеры:

Заголовок 1 Заголовок 2

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

Так же в div контейнере в class указать show или hidden, но в этом случае свойства отображения не будут меняться при смене экрана: если виден, то виден, если скрыть, то только удаление слова hidden из класс позволит увидеть нужный элемент.

Медиа запросы в Bootstrap 3

Для того, чтобы использовать CSS медиа запросы, в css файле нужно указать специальных символ @media и в скобочках минимальную или/и максимальную ширину экрана. Если в обычной css разметке необходимо писать размеры экрана в пикселях, в bootstrap 3 можно писать такую конструкцию:

@media(min-width: @screen-sm-min){ ... } @media(min-width: @screen-md-min){ ... } @media(min-width: @screen-lg-min){ ... }

Смещение порядка положения элементов

Еще один интересные классы, позволяющие выполнять смещение блоков внутри контейнера, класс push сдвинет элемент вправо, а класс pull влево.

При комбинации из в соседних контейнерах, можно менять порядок последних при изменении размеров экрана. В данном примере на большом экране(-lg-) Заголовок 2 расположен слева, а Заголовок 1 справа, при уменьшении ширины экрана до средних размеров(-md-) произойдет смещение элементов и порядок станет последовательным.

Заголовок 1 Заголовок 2

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

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

Способы установки платформы Twitter Bootstrap 3

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

вручную, посредством самостоятельного скачивания этой платформы (архива) с сайта http://getbootstrap.com и библиотеки jQuery. Данный способ является наиболее трудоёмким, так как Вам придётся выполнять все действия связанные с установкой и последующим обновлением платформы вручную.
с помощью указания файлов, находящихся на серверах CDN. Данный способ имеет некоторые преимущества, перед предыдущим способом, а именно:

уменьшает нагрузку на Ваш сервер, т.к. загрузка файлов происходит с CDN;
увеличивает скорость загрузки веб-страницы, т.к. необходимые файлы берутся из кэша браузера. Это происходит только в том случае, если до этого (т.е. на других сайтах) эти файлы загружались аналогичным образом, т.е. из этого же CDN.

с помощью Bower (http://bower.io);

с помощью npm (http://www.npmjs.com).

Установка платформы с помощью Bower

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

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

Npm install -g bower

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

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

Bower install bootstrap

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

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

Bower update

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

Bower list

Установка пакета с помощью npm

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

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

Npm install bootstrap

Сборка платформы Twitter Bootstrap 3 с помощью Grunt

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

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

Установка Grunt

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

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

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

Grunt команды

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

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

grunt test (тестирования платформы). Запускает инструмент JSHint (http://jshint.com) и unit-тесты, написанные с помощью библиотеки QUnit (http://qunitjs.com), для проверки кода JavaScript платформы Twitter Bootstrap 3 в PhantomJS (http://phantomjs.org), который представляет собой веб-браузер без графического пользовательского интерфейса.

grunt docs (сборка и тестирование документации). Команда grunt docs выполняет сборку документации, а также выполняет тестирование CSS, JavaScript и других файлов этой документации, которые используются для её локального запуска через Jekyll serve.

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

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

Задание

Установите платформу Twitter Bootstrap различными способами.

Какой из способов установки платформы Twitter Bootstrap Вам понравился больше и почему?

Установите Grunt и соберите с его помощью платформу Twitter Bootstrap.