Установка bootstrap. Подключение и использование Bootstrap онлайн урок Подключение bootstrap js

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»?

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

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

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

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

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

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

.col-md-4
.col-md-4
.col-md-4

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

.col-md-12

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

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

1
2

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

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

• Home


• Profile


• Messages

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

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

На этом уроке узнаем, как скачать и подключить фреймворк Bootstrap (версию 3 или 4) к сайту.

Набор инструментов для изучения Bootstrap

Минимальный набор инструментов (программ) для создания веб-проектов на фреймворке Bootstrap:

• текстовый редактор для работы с кодом ("Блокнот", "Brackets", "Notepad++" или др.);
• браузер (Google Chrome, Mozilla Firefox, Opera, Safari, Internet Explorer или др.).

Загрузка фреймворка Bootstrap

Создание веб-проекта, в основу дизайна которого положен фреймворк Bootstrap всегда начинают с его загрузки. Загрузить фреймворк Bootstrap можно различными способами . Например, посредством ссылки, расположенной на сайте getbootstrap.com или с помощью пакетного менеджера npm, Composer, Bower или др. Способ как это осуществить зависит от вашего опыта или конкретной ситуации .

Как установить фреймворк Bootstrap с помощью пакетных менеджеров, а также как осуществить его сборку посредством Grunt, можно почитать в этой статье .

Наиболее просто выполнить загрузку – это воспользоваться ссылкой . На сайте Bootstrap присутствуют 2 ссылки.

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

Скачать Bootstrap 3.4.1 Скачать Bootstrap 4.3.1

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

Исходные коды Bootstrap 3.4.1 Исходные коды Bootstrap 4.3.1 Распаковка архива Bootstrap

После скачивания архива (с готовыми к применению CSS и JavaScript файлами), его необходимо распаковать в каталог вашего веб-проекта.

Если рассмотреть архив, то можно заметить, что он имеет следующее содержимое (на примере Bootstrap 3.4.1):

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

В каталоге css находятся стили фреймворка Bootstrap, а в js - плагины для обеспечения работы некоторых компонентов. Плагины написаны с использованием функций библиотеки jQuery. Поэтому перед Bootstrap JS необходимо подключить библиотеку jQuery.

Как вы можете заметить, в архиве есть 2 версии CSS и JavaScript файлов, т.е. с суффиксом min и без него. Версия файла с min ничем ни отличается от без min , она просто минимизирована (сжата).

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

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

Кроме этих файлов, в данный архив ещё входит иконочный шрифт "Glyphicons" . Шрифт "Glyphicons" насчитывает более 250 иконок из набора "Glyphicon Halflings". Шрифт представлен с помощью 4 файлов: glyphicons-halflings-regular.eot , glyphicons-halflings-regular.svg , glyphicons-halflings-regular.ttf , glyphicons-halflings-regular.woff).

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

Про иконки в формате шрифта, а также, про то какие они имеют достоинства и недостатки, можно почитать в этой статье .

Архив фреймворка Bootstrap 4 практически ничем ни отличается от Bootstrap 3 . Основное его отличие в том, что он не содержит шрифт "Glyphicons" . Если вам нужны шрифтовые иконки, то их необходимо будет подключить самостоятельно. Например, воспользовавшись одним из следующих наборов: FontAwesome , Octicons, Glyphicons, IcoMoon или др. Если же вы не хотите использовать готовый шрифт, а создать свой, который будет состоять только из нужных значков, то воспользуйтесь этой информацией .

Кроме этого архив Bootstrap 4 содержит ещё файлы bootstrap-grid.css и bootstrap-reboot.css . Данные файлы необходимы только тем, кому нужен не целый фреймворк, а только его часть .

Первый файл (bootstrap-grid.css) содержит сетку Bootstrap , а второй (bootstrap-reboot.css) - нормализатор, который устанавливает базовые стили, для того чтобы они у всех HTML-элементов во всех браузерах были одинаковыми.

Подключение Bootstrap к HTML странице

Процесс установки фреймворка Bootstrap 3 состоит из подключения следующих файлов к HTML 5 странице:

Bootstrap CSS (bootstrap.min.css);

Последней версии библиотеки jQuery (необходима для работы JS плагинов Bootstrap);

Bootstrap JavaScript (bootstrap.min.js).

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

...

Подключение фреймворка Bootstrap 4 осуществляется так:

...

Подключить Bootstrap 4 можно также с помощью CDN (при этом скачивать Bootstrap в проект не нужно):

Скопировано

...

CDN Bootstrap 3.4.1:

Скопировано

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

Поднеси ко мне курсор $(function () { $("").popover({trigger:"hover"}); });

Здравствуйте! В этой статье я расскажу как установить и подключить фреймворк 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-исходниками.

Начиная с этой статьи, мы начнем изучение фреймворка 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 позвольте завершить, вы узнали как установить стили и скрипты шаблона, основные элементы сетки, медиа запросов, типы контейнеров, и т.д. В следующих статьях рассмотрим вспомогательные и дополнительные элементы: меню, кнопки, слайдеры, иконки и многое другое.