Начало работы с Bootstrap. Как использовать бутстрап для блога на вордпресс

09.07.2019

На этом уроке узнаем, как скачать и подключить фреймворк 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.0 Скачать Bootstrap 4.2.1

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

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

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

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

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.0:

Скопировано

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

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

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

Скачать Bootstrap можно с официального сайта getbootstrap.com . На главной странице жмем на кнопку «Download Bootstrap ».

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

После скачивания и распаковки архива мы получаем три папки:

CSS - папка со стилями
JS - папка с js скриптами
FONTS - папка с иконочными шрифтами

Это и есть весь фреймворк. Для дальнейшей работы с Bootstrap я создам папку с одноименным названием bootstrap , в папке создам один пустой файл index.html и буду наполнять папку и файл попутно с разбором фреймворка в данной статье, а в конце поста дам ссылку, чтобы Вы могли посмотреть результат. Если будите повторять за мной, то поймете, что работать с фреймворком действительно легко.

Из скаченного фреймворка нам потребуется папка fonts полностью, один файл стилей из папки css с названием bootstrap.css или bootstrap.min.css и аналогично один скрипт из папки js с названием bootstrap.js или bootstrap.min.js .

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

Теперь я создам в своей папке bootstrap папку css , помещу в нее файл bootstrap.min.css и создам папку js , в которую положу bootstrap.min.js . Дополнительно в папке css создам пока пустой файл style.css для добавления собственных стилей.

Нужные файлы фреймворка перенесены, и теперь будем работать только с файлом index.html . Чтобы не писать код самостоятельно, обратимся к документации, на странице скачивания официального сайта ниже есть уже готовый HTML-скелет документа, копируем его и вставляем в наш индексный файл.

В скелете уже подключаются наш файл стилей, js скрипт и библиотека jQuery , но если вы делаете не на «бутстраповском » шаблоне, а на каком-то своем, то нужно между тегами подключить файл стилей bootstrap.min.css , а после него созданный style.css .

Затем перед закрывающим тегом сначала подключаем библиотеку jQuery .

А после библиотеки подключаем js скрипт.

В общем, HTML-скелет документа получается вот такой.

Bootstrap

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

Как пользоваться документацией

Документация у фреймворка очень хорошая, что делает его простым в использовании. В главном меню официального сайта несколько разделов: «Getting started », «CSS », «Components », «JavaScript » и «Custimize », на странице каждого раздела в правой колонке находятся названия разных компонентов, кликнув по которым показывается их описание и варианты использования в виде готового кода.

Если сложности с английским языком, то в сети есть несколько ресурсов с переведенной документацией, вот адрес одного из таких сайтов www.oneskyapp.com/ru/docs/bootstrap . Также можно воспользоваться каким-нибудь переводчиком для браузера, перевод будет, конечно, кривоватый, но суть написанного будет ясна. В общем, просто нужно читать документацию, брать примеры кода и практиковаться.

Работа с сеткой Bootstrap

Как я говорил в прошлой статье, сетка работает по принципу таблицы, включая в себя ряды .row и колонки .col , колонок может быть максимум двенадцать. К классу.col добавляются префиксы (lg , md , sm , xs), которые указывают ширину данного столбца на конкретном разрешении экрана.

Оборачиваются ряды со столбцами в блок с классом .container или классом.container-fluid . Различие между ними в том, что у класса.container максимальная ширина 1170 пикселей, а у класса.container-fluid — ширина не ограничена, то есть на всю ширину экрана, даже если разрешение экрана очень большое. Полную информацию о сетке Bootstrap смотрите в документации раздела «CSS ».

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

HEADER CONTENT SIDEBAR FOOTER

Для разделения блоков я прописал два дополнительных класса: .block , .block2 и добавил в них по паре правил в созданном файле style.css .

Block{ background: #eee; border: 1px solid #000; } .block2{ background: #ccc; border: 1px solid #000; }

Добавим иконочный шрифт к нашим заголовкам. В разделе «Components » выбираем понравившиеся иконки, копируем текст под изображением, этот текст является классом. Создаем внутри тега заголовка тег и вставляем скопированный класс.

HEADER

Теперь не мешало добавить какое-то меню. Для этого в разделе «Components » переходим в «Navbar », выбираем понравившееся меню, копируем код и после открывающего тега , вставляем.

Осталось заполнить «conten t» и «sidebar ». Все делаем по той же схеме: выбираем компонент в документации, читаем описание, копируем и вставляем в нужное место. Я добавлю форму и кнопку, кликнув по которой будет вызываться модальное окно с таблицей.

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

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

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

Что такое Bootstrap?

Бутстрап – это бесплатный фреймворк на базе css и JavaScript, предоставляющий целый ряд встроенных инструментов для создания адаптивных веб-сайтов, а точнее их front-end разработки. Изначально был создан для внутреннего использования компанией Twitter и носил название «Twitter Bootstrap», но в дальнейшем вырос в самостоятельный проект. Данная библиотека может быть использована в работе как со статическими html-файлами, так и с различными системами управления контентом, в которых поддерживаются внешние стили.

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

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

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

открытый исходный код, то есть весь функционал предоставляется совершенно бесплатно;
встроенная 12-колоночная сетка. Достаточно просто добавить нужный класс html-элементу, чтобы задать ему необходимо позиционирование относительно других объектов и каркаса страницы;
адаптивность. Ранее я писала о том, и почему это однозначно необходимо делать. В Бутстрапе же данная опция включена по умолчанию и предполагает оптимизацию сайта под десктопные девайсы, планшеты и смартфоны. Помимо этого, вы можете сами установить любые варианты расширений вручную;
вариативность в оформлении самых часто используемых на веб-страницах элементов. С помощью специальных классов легко можно управлять отображением и поведением событий, вкладок, кнопок и прочего. Предусмотрены и готовые решения для динамических элементов. Так, к примеру, чтобы создать слайдер, достаточно найти необходимый код в документации, скопировать его и разместить в своем блоге, заменив картинки из примера своими собственными. Как это работает на практике, я покажу вам дальше на примере установки в WordPress меню Bootstrap;
иконочный шрифт. Приятный бонус в виде нескольких сотен иконок Glythicons в формате векторной графики;
кастомизация, т.е. возможность выборочного использования тех или иных возможностей фреймворка, например: подключение к проекту только сетки и шрифтов, или только медиа, или комбинации из нескольких опций;
легкость настройки – стандартные стили переопределяются простым созданием новых правил css, без применения «! important »;
отличная документация с примерами. Несмотря на то, что официальный сайт англоязычный, не составит труда найти в интернете его русскоязычный аналог.

Основным минусом в работе с библиотекой может стать только то, что при редактировании или создании адаптивной темы Вордпресс Бутстрап-компоненты не могут быть просто добавлены из консоли CMS. Их использование потребует вставки дополнительного кода или установки вспомогательных плагинов.

Подключение фреймворка к Вордпрессу

Для начала скачиваем библиотеку с официального сайта — https://getbootstrap.com: жмем «Download Bootstrap» и в открывшейся вкладке «Getting started» выбираем вариант «Download Bootstrap». На текущий момент стабильной версией остается Bootstrap 3, но уже выпущена в режиме тестирования четвертая версия. Она имеет некоторые отличия от нынешней, но если вы изучите Бутстрап 3, то обновленный вариант фреймворка не вызовет никаких вопросов.

Распаковываем архив и видим 3 основных папки: css, js , fonts . Файлы, содержащие в своем названии «min» ничем не отличаются от одноименных без этой частицы. Она обозначает, что код записан без пробелов, в одну строку, для уменьшения веса файла без потерь в функционале. Такой формат нечитабелен, но как раз он зачастую и подключается к проекту. Это позитивно влияет на . В папках css и js лежат соответственно файлы стилей и скриптов, а в папке fonts – те самые векторные иконки, которые упоминались выше. По сути, мы видим здесь один шрифт, представленный в нескольких форматах.

Один из удобных способов размещение файлов фреймворка в проекте – создание отдельной папки. Для этого в корне сайта в каталоге wp-content – themes – название_вашей_темы формируется папка libs , где в дальнейшем могут находиться другие библиотеки, используемые в проекте. И уже в ней – папка bootstrap , куда мы и копируем все содержимое, извлеченное из архива.

Как мы уже отмечали ранее, существует возможность выкачать только отдельный функционал Бутстрапа, например сетку или иконки. Это реализовывается на странице официального сайта «Customize».

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

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

Чтобы подключить Bootstrap к WordPress, открываем в текстовом редакторе файл functions. php , который лежит в каталоге вашего активного шаблона. Находим функцию подключения скриптов (она может называться, например, funct ion twentysixteen_ scripts (){} , по названию темы) и вставляем следующий код:

1 2 3

// Bootstrap stylesheet. wp_enqueue_style( "bootstrap-style" , get_template_directory_uri() . , array () , " " ) ;

// Bootstrap stylesheet. wp_enqueue_style("bootstrap-style", get_template_directory_uri() . "/libs/bootstrap/css/bootstrap.min.css", array(), " ");

— данная строка подключает минимизированный файл стилей фреймворка. Первый параметр функции (" bootstrap — style ") – произвольное название подключаемого объекта.

Следующий параметр (get _ template _ directory _ uri () . "/ libs / bootstrap / css / bootstrap . min . css " ) – путь к файлу. Здесь с помощью функции get _ template _ directory _ uri () мы получаем путь к папке с активным шаблоном, а затем «пристыковываем» непосредственно путь к файлу в этом шаблоне — . "/ libs / bootstrap / css / bootstrap . min . css " .

Продолжаем вставлять код:

1 2 3 4

//Mytheme stylesheet. wp_enqueue_style( "mytheme-style" , get_template_directory_uri() . "/css/style.css" , array () , " " ) ;

//Mytheme stylesheet. wp_enqueue_style("mytheme-style", get_template_directory_uri() . "/css/style.css", array(), " ");

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

И последняя строка, которая нам понадобится для подключения Bootstrap к WordPress:

1 2 3 4

//Bootstrap js wp_enqueue_script( "bootstrap-js" , get_template_directory_uri() . , array ("jquery" ) , " " ) ;

//Bootstrap js wp_enqueue_script("bootstrap-js", get_template_directory_uri() . "/libs/bootstrap/js/bootstrap.min.js", array("jquery"), " ");

— в конце мы подключаем минимизированный файл скриптов. Здесь нам понадобится третий параметр функции – array () , который отвечает за очередность подключения скриптов. Дело в том, что Бутстрап зависит от библиотеки jQuery. Если на момент, когда сервер будет подгружать наш фреймворк, jQuery еще не будет подключено к проекту, скрипты Бутстрапа не сработают. Саму библиотеку jQuery нам загружать не надо, поскольку Вордпресс делает это автоматически. Но чтобы подключение происходило в необходимой нам последовательности, мы определим, что js-скрипты Bootstrap должны всегда идти после jQuery. Именно это и делает строка array ("jquery") .

Если же вы создаете Бутстрап-тему для WordPress с нуля или просто не хотите смешивать все скрипты в одном месте, предлагаю вам создать отдельную функцию для подключения Bootstrap 3 к WordPress. В конце файла functions.php расположите следующий код:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

function load_bootstrap() { function load_bootstrap() { // Bootstrap stylesheet. wp_enqueue_style( "bootstrap-style" , get_template_directory_uri() . "/libs/bootstrap/css/bootstrap.min.css" , array () , " " ) ; //Mytheme stylesheet. wp_enqueue_style( "mytheme-style" , get_template_directory_uri() . "/css/style.css" , array () , " " ) ; //Bootstrap js wp_enqueue_script( "bootstrap-js" , get_template_directory_uri() . "/libs/bootstrap/js/bootstrap.min.js" , array ("jquery" ) , " " ) ; } add_action("wp_enqueue_scripts" , "load_bootstrap" ) ;

function load_bootstrap() { function load_bootstrap() { // Bootstrap stylesheet. wp_enqueue_style("bootstrap-style", get_template_directory_uri() . "/libs/bootstrap/css/bootstrap.min.css", array(), " "); //Mytheme stylesheet. wp_enqueue_style("mytheme-style", get_template_directory_uri() . "/css/style.css", array(), " "); //Bootstrap js wp_enqueue_script("bootstrap-js", get_template_directory_uri() . "/libs/bootstrap/js/bootstrap.min.js", array("jquery"), " "); } add_action("wp_enqueue_scripts", "load_bootstrap");

— где load _ bootstrap () – произвольное название созданной нами функции, а последняя строка дает ее движку на выполнение.

Основные возможности Бутстрапа и как это работает

Чтобы понять, каким образом возможно взаимодействие WordPress и Bootstrap, давайте разберем сам принцип работы фреймворка.

Итак, в файле стилей Бутстрапа прописаны специальные классы, которые добавляются в html-разметку, определяя тем самым отображение или поведение элементов.

Разметка: контейнеры и ячейки . Структура разметки Bootstrap основывается на блочной системе вложенных элементов. Контейнеры наивысшего порядка, выступающие оберткой, формируются методом добавления к ним классов .container или .container-fluid , в зависимости от того, хотим мы получить блок с адаптивной фиксированной шириной или «резиновый».

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

Контент размещается в ячейках. Каждая строка разбита на 12 ячеек – html-элементов с классами .col – lg-*, col- md-*, col- sm-*, col- xs-* . Эти классы определяют ширину ячеек для телефонов (xs ), планшетов (sm ), десктопных девайсов с небольшим монитором (md ), для экраном с большим расширением (lg ). А вот какая цифра в пикселях подразумевается под каждым из этих расширений:

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

А вот так он будет выглядеть в браузере:

Подробно и с примерами, как работать с сеткой Бутстрап, описано в документации фреймворка на официальном сайте в разделе «CSS» — «Grid system».

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

. table – базовый стиль, только горизонтальные границы;
. table- striped – чередование серых и белых строк в таблице;
.table-bordered – формирование всех границ строк и столбцов;
. table- hover – подсветка строки таблицы при наведении;
. table- responsive – этот класс делает таблицу адаптивной ко всем устройствам.

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

Вот так, например, необходимо прописать ваш элемент «button», чтобы получить зеленую кнопку в стиле Bootstrap 3: Success

Изображения . Для элементов «img» тоже есть интересные решения:

Это всего лишь малая часть возможностей Бутстрапа. Фреймворком предусмотрены классы для работы с типографикой, иконками, формами, всплывающими подсказками, навигацией и многим другим. Если вы оценили, какие преимущества может дать функционал Bootstrap для WordPress-блога, обязательно изучите документацию по данной библиотеке.

Как сформировать меню Bootstrap на Вордпресс

Мы с вами уже знаем, как подключить Bootstrap к WordPress , и теперь можем рассмотреть пример практического применения фреймворка для блога. Для этого мы заменим существующее меню активной темы адаптивной навигацией Бутстрап. Я буду использовать в примере тестовый шаблон на базе темы Вордпресс «Twenty Siхteen», где у меня уже создано двухуровневое меню.

Находим код меню «Default navbar», предлагаемый на официальном сайте фреймворка в разделе «Components» — «Navbar»:

Редактируем по необходимости. Я уберу, например, ссылку на логотип (Brand), форму и список с классом . navbar- right . А эту часть:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

— заменяем следующим кодом:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

Конечный результат навигации размещаем в соответствующем файле вместо существующей. У меня это файл header.php :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62

Toggle navigation

В строке " menu " => " top _ menu " указывается меню, которое вы назначили основным в админпанели. " depth " => 2 – уровень вложенности для тех случаев, если есть выпадающие пункты. " menu _ class " => " nav navbar — nav " – здесь указываются классы меню из Бутстрапа, которые мы использовали.

Но для интеграции навигации Bootstrap в WordPress нам потребуется еще один файл со специальным классом – wp _ bootstrap _ navwalker . php . Его можно скачать с GitHub по ссылке — . Здесь нажимаем кнопку «Clone or Download» и выбираем «Download ZIP».

Извлекаем файлы из архива и в папке «wp-bootstrap-navwalker-master» копируем необходимый файл.

wp _ bootstrap _ navwalker . php размещаем в папке нашей темы. Возвращаемся к файлу functions.php и в начале подключаем скачанный класс:

//Register custom navigation walker

require_once ("wp_bootstrap_navwalker.php");

Наша адаптивная навигация Бутстрап для Вордпресс-шаблона готова. Дальше дело остается за стилями. Вот такое меню получилось у меня:

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

Все детали подключения Bootstrap к WordPress и создания меню на основе фреймворка можно узнать из видео:

Если же вам некогда изучать все нюансы работы с библиотекой на WordPress, воспользуйтесь плагинами Bootstrap, самые популярные из которых – WordPress Twitter Bootstrap CSS и Easy Bootstrap Shortcode .

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

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

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

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

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

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

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

Скачать Bootstrap 3.4.0 Скачать Bootstrap 4.2.1

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

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

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

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

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

Bootstrap CSS (bootstrap.min.css);

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

Bootstrap JavaScript (bootstrap.min.js).

...

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

...

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

Скопировано

...

CDN Bootstrap 3.4.0:

Скопировано

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

Используя возможности фреймворка Bootstrap, Вы сможете самостоятельно и быстро верстать современный сайт.

Вёрстка сайта - дело не сказать чтобы очень сложное, но довольно муторное. Помимо того, что нужно оснастить сайт требуемым функционалом, нужно ещё чтобы он был красивым! Такую красоту, обычно, делает дизайнер в Фотошопе. А задача верстальщика при этом сделать так же как на картинке. И вот для этого уже приходится попотеть...

Где-то с год назад я работал в команде с одним дизайнером над созданием сайта. И он после просмотра готового макета задал мне вопрос: "А ты что, не используешь сетку?". В Фотошопе он, оказывается, всё рисовал по направляющим, чтобы было ровно, однако в обычном HTML подобных средств выравнивания нет.

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

Зачем нужен Bootstrap

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

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

Сразу стоит сказать, что, несмотря на довольно хороший функционал, в Bootstrap часто не хватает некоторых популярных средств. Например, в нём нет:

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

Справедливости ради следует сказать, что недавно вышел Bootstrap 4, который довольно сильно отличается по реализации и функционалу от более распространённой версии Bootstrap 3. Однако, в рамках данной статьи мы рассмотрим именно проверенную временем и стабильную 3-ю версию (последняя на данный момент - 3.3.7).

Установка Bootstrap

Чтобы начать работу с Bootstrap его нужно правильно подключить в Ваш HTML-документ. Сделать это можно несколькими способами.

Внешнее подключение через Bootstrap CDN

Как в своё время было с популярной библиотекой jQuery (кстати, её наличие тоже обязательно), Bootstrap на сегодняшний день тоже обзавёлся собственной системой доставки контента (CDN). Это означает, что Вам можно ничего не качать для его установки - достаточно просто прописать ссылки на нужные Вам компоненты в Вашем HTML-документе.

Минимально необходимым набором компонентов для работы Bootstrap является его таблица стилей и файл скриптов (bootstrap.css и bootstrap.js, соответственно). Стили Бутстрапа нужно подключить в секции перед объявлением своих стилей (style.css), а скрипты можно отправить в "подвал" сайта для ускорения загрузки страницы. Кстати, для этой же цели лучше использовать минифицированные версии файлов, ссылки на которые выглядят так:

Рекомендуется также подключать CSS-файл темы , в котором содержатся уникальные стили оформления Вашей версии Bootstrap (о том, как её сделать речь пойдёт немного ниже). Его следует также поместить перед объявлением Вашей основной таблицы стилей, но после общих стилей Бутстрапа. Ссылка на подключение темы выглядит так:

В итоге Ваш файл index.html с подключённым Bootstrap 3 может выглядеть примерно следующим образом (можете скопировать его и сразу начать работать):

Bootstrap-шаблон

Привет, Мир! Я - заголовок на Bootstrap!

Установка при помощи менеджеров пакетов

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

Менеджер пакетов Команда

Bower	$ bower install bootstrap
npm	$ npm install bootstrap@3
Composer	$ composer require twbs/bootstrap

Установка классическим скачиванием файлов

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

Способ первый - самый очевидный. Заходим на официальную страницу загрузки и жмём кнопку "Download Bootstrap" :

У Вас скачается архив, который будет содержать три папки (css, fonts и js) с файлами. Распакуйте их в отдельную директорию и создайте в ней же свой index.html, к которому можно будет подключить все стили, скрипты и шрифты. В качестве основы для содержимого HTML-документа можете взять вышеприведённый код с заменой ссылок на компоненты Bootstrap с внешних на локальные:

Кстати, в папках Bootstrap по умолчанию имеется несколько лишних файлов, которые можно убрать для экономии места. Например, в папке css можно удалить все файлы с расширением.map, а также неминифицированные (без приписки.min) файлы темы и стилей (останется только два файла: bootstrap.min.css и bootstrap-theme.min.css). Из папки js удаляем всё, кроме файла bootstrap.min.js. Шрифты (если они нужны) не трогаем. В итоге у Вас должна получиться такая структура файлов:

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

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

Занятие это довольно небыстрое, но значительно быстрее, нежели ручная правка готового кода стилей и скриптов. На мой взгляд, стоит потратить лишние минут 20-40, чтобы впоследствии сэкономить себе пару часов поисков параметров, которые нужно будет изменить.

Когда все правки внесены, жмите кнопку "Compile and Download" в самом низу и Ваша кастомная сборка Бутстрапа скачается в виде архива. Кстати, помимо уже знакомых нам папок, данная версия архива будет содержать ещё и файл config.json . Он содержит в себе список всех переменных, которые мы правим на странице настроек. Поэтому в будущем Вы можете загрузить этот файл и сразу скачать настроенный Bootstrap без необходимости вводить все параметры вручную!

Как работать с документацией

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

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

Основными разделами справки по Bootstrap являются:

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

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

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

Структурно описание происходит в том же порядке, в котором обычно происходит вёрстка. То есть, в начале описываются общие сущности, затем конкретизируются элементы по принципу сверху вниз. Например, в разделе CSS всё начинается с описания доктайпа, МЕТА-тегов и заканчивается частными случаями использования препроцессоров Less и Sass.

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

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

Информацию о сетке мы можем найти в разделе справки CSS - Grid system :

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

), который будет разделяться на строки (аналогично строке таблицы - ), содержащие до 12 колонок (аналог ячеек таблицы -

Общий алгоритм работы с сеткой Bootstrap можно свести к следующим шагам:

Создаём блок () с классами .container (фиксированная ширина) или .container-fluid (на всю ширину экрана).

Внутри блока-контейнера создаём блок-строку, который будет содержать нужную структуру колонок. Для этого применим к нему класс .row .

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

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

.col-xs- (extra small) - разметка для мобильных телефонов с шириной экрана менее 768px;
.col-sm- (small) - разметка для мобильных устройств с шириной экрана от 768px до 992px;
.col-md- (medium) - базовый класс разметки колонок для устройств с шириной экрана от 992px до 1200px;
.col-lg- (large) - класс разметки колонок для устройств с большим экраном шириной от 1200px и выше.

На практике чаще всего применяют класс.col-md- с цифрой, указывающей на 1/12 часть от общей ширины экрана. Например, чтобы сверстать одну колонку на весь экран, мы применим класс.col-md-12. Для двух колонок по пол-экрана - два блока с классами.col-md-6. Для трёх колонок, соответственно, три с.col-md-4 и т.д.

Кстати, необязательно чтобы колонки были равными между собой по размерам. Вполне можно комбинировать (в пределах 12 штук, конечно) ширину, например, .col-md-4 и.col-md-8 или.col-md-2, .col-md-3 и.col-md-7. Можно даже не использовать всю ширину, сделав, к примеру, в ряде лишь одну колонку, допустим, .col-md-5:

Колонки можно сдвигать по отношению к начальной сетке координат по горизонтали или отображать не по порядку. Например, чтобы разместить две колонки.col-md-4 по центру страницы мы можем применить сдвиг, добавив к нашей первой блоку-колонке ещё один класс .col-md-offset- 2 ((12-(4+4))/2=2). А, чтобы изменить порядок, добавляют классы.col-md-push- (для сдвига колонки на нужный интервал) и.col-md-pull- (для перетаскивания колонки к началу строки):

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

Как видим, позиционировать блоки-колонки в Bootstrap не так уж и сложно. Сетка - весьма удобное изобретение, которое "убивает" сразу двух "зайцев": делает Вашу вёрстку аккуратнее с точки зрения дизайнеров и автоматически добавляет адаптивности Вашей веб-страничке. Единственное, что следует помнить, нельзя нарушать структуру вложений, например, напрямую добавлять колонку в контейнер или внутрь другой колонки без объявления новой строки.

Дополнительно прочесть о работе со стилями в Bootstrap Вы сможете в разделе документации CSS . А по сетке, по сути и всё. Движемся дальше.

Компоненты Bootstrap

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

И, что характерно, всё это добро создаётся, как и сетка, простым добавлением к нужному DIV-у требуемых классов! Правда, кое-где, нужно также соблюдать структуру вложенности блоков (например, для создания меню), но особой сложности, я думаю, это не составит. Тем более, что на странице с описанием компонентов имеется достаточно примеров. Здесь же мы рассмотрим только некоторые частные случаи.

Работа с иконочным шрифтом

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

В новом Bootstrap 4 иконочного шрифта пока нет (возможно его заменят более популярным FontAwesome), но в нашей 3-ей версии шрифт есть и его можно использовать. Главным же требованием к такому использованию является вставка нужного символа посредством отдельно выделенного под него HTML-элемента .

К примеру, нам нужно вставить рядом с некой цифрой символ русского рубля. В таблице со списком иконок шрифта Glyphicons под его изображением копируем название класса (а точнее сразу двух) "glyphicon glyphicon-ruble" и применяем его к тегу , который вставляем после нашей цифры:

Стоимость - 999

Однако, часто требуется не просто вставить ту или иную иконку, но и изменить, например, её размер и цвет. Для этого в Bootstrap рекомендуется не переназначать стандартные стили для нужного класса с символом, а дописать к списку классов SPAN, который его вставляет, ещё один дополнительный класс с нужными параметрами оформления или дописать стили через атрибут style . Например, так:

Myrub{font-size:10px; color:green;}

Стоимость - 999

Различные типы блоков

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

Заголовок

Кнопка

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

Внутри джамботрона (класс - jumbotron) весь текст выглядит немного больше от стандартного размера. Данный тип блока иногда называют баннером и часто используют в качестве заголовочного экрана-слайда в лэндингах (популярные одностраничные сайты). Он позволяет выделить основную информацию, сфокусировав на ней внимание пользователя как раз за счёт небольшого увеличения шрифтов. Наилучшего же эффекта можно достичь, если дополнить класс джамботрона классом.text-center, который выровняет содержимое баннера по центру страницы!

Заголовок

Кнопка

Кстати, особенностью джамботрона является то, что его можно растянуть во весь экран без отступов и рамки. Для этого нужно немного нарушить правила вёрстки Bootstrap и вынести блок с классом.jumbotron за пределы всех строк и контейнеров. Вместо этого контейнер со строками и ячейками нужно будет разместить внутри полученного полноэкранного баннера!

Заголовок

Кнопка

Жалко только, что в Bootstrap нету классов для вертикального выравнивания содержимого того же джамботрона и увеличения блока на весь экран по высоте. Цены бы ему не было тогда:) Но, всё это можно доделать своими руками при необходимости.

Своим не совсем стандартным оформлением интерес также представляют замечания (alerts) и панели (panels). Замечания добавляются стандартно классом.alert, однако, для уточнения типа уведомления добавляется ещё один из четырёх возможных классов:

Уведомление типа "Успех" (зелёный фон)

Уведомление типа "Информация" (голубой фон)

Уведомление типа "Предупреждение" (жёлтый фон)

Уведомление типа "Опасность" (красный фон)

Что касается панелей , то здесь разнообразие ещё больше! Стандартно панель добавляется классом .panel , однако, как и замечание, требует после себя класса, который уточнит тип панели (как правило, .panel-default ). Но и это ещё не всё! Как минимум, наша панель должна иметь вложенный блок с классом.panel-body для размещения основного контента, а, как максимум, может иметь собственный заголовок (.panel-heading с опциональным классом.panel-title внутри) и футер (.panel-footer ):

Заголовок со специальным классом.panel-title

Основной контент панели

Футер панели

Кроме того, панели в Bootstrap могут быть нестандартными и различаться визуальным оформлением в соответствии с контекстом их использования. Контексты, в основном, совпадают с контекстами алертов, но имеют ещё и пятый вариант в ярко-синих тонах- .panel-primary . Кроме того, аналогично замечаниям, существуют классы.panel-success, .panel-info, .panel-warning и.panel-danger:

Карусель

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

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

СЛАЙД 1

СЛАЙД 2

СЛАЙД 3

Вперёд

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

Управлять поведением карусели можно при помощи jQuery (если Вы знакомы с его синтаксисом) или посредством data-атрибутов , которые применяются к блоку, где инициируется наша карусель. В примере выше у нас есть атрибут, задающий скорость смены слайдов в 5000 миллисекунд (5 сек.) - data-interval . Кроме него Вы можете менять и другие опции:

Атрибут Тип По умолчанию Описание

data-pause	string \| null	"hover"	По умолчанию активна опция "hover" , которая останавливает прокрутку слайдов при наведении курсора мыши на карусель и восстанавливает листание после его убирания. Если задать значение null , наведение не будет останавливать карусель.
data-wrap	boolean	true	Определяет, будет ли карусель вращаться постоянно или остановится при достижении последнего слайда.
data-keyboard	boolean	true	Определяет, будет ли карусель реагировать на нажатие стрелок на клавиатуре.
data-slide	string	-	Позволяет задать перемещение между соседними слайдами. Может использоваться со значениями "prev" или "next" для перехода к предыдущему/следующему слайду. Применяется в основном для стрелок листания.
data-slide-to	number	-	Позволяет переключиться на любой из слайдов карусели. В качестве значения принимает число-номер нужного слайда. Применяется в основном для кнопок-индикаторов слайдов.

Модальные окна

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

Показать окно

Заголовок модального окна

Какой-то текст:)

Закрыть

Сохранить

Для вызова модального окна нужна кнопка, ссылка или другой кликабельный элемент, который должен иметь два обязательных data-атрибута: data-toggle со значением "modal " (обозначает поведение кнопки вызова модали) и data-target , значением которого должен быть идентификатор блока, содержащего разметку модального окна (для ссылки можно использовать в этой роли стандартный href ).

Сам блок модального окна должен обязательно иметь:

уникальный идентификатор ;
класс .modal ;
атрибут role="dialog" со вложенным блоком с классом .modal-dialog и атрибутом role="document" ;
атрибут aria-labelledby="..." со значением, которое соответствует идентификатору вложенного заголовка модального окна;
вложенный блок .modal-content , содержащий блоки .modal-header (с обязательным заголовком .modal-title , имеющим уникальный идентификатор), .modal-body (содержит тело модального окна с произвольной разметкой и контентом) и.modal-footer (содержит опциональные кнопки закрытия и сохранения результатов работы модального окна).

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

Выводы

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

Когда я писал эту статью, в первую очередь я хотел показать основные принципы работы с Бутстрапом и более понятным языком объяснить наиболее часто используемые в нём сущности. Однако, если Вы что-то не поняли, рекомендую Вам попробовать воспользоваться одним из визуальных редакторов Bootstrap . Они наглядно продемонстрируют Вам все возможные элементы и позволят быстро получить собственную настроенную его сборку.

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

P.S. Разрешается свободно копировать и цитировать данную статью при условии указания открытой активной ссылки на источник и сохранения авторства Руслана Тертышного.

Последние статьи

2024-04-21 01:43:53
Почему Водафон идет по стопам МТС и вводит региональность?
2024-04-19 01:45:08
Антивирус Bitdefender: эффективный защитник Без вопросов
2024-04-18 01:41:53
Значение слова неудачный