Bootstrap 3 установка. Установка bootstrap. Без использования LESS

В этом уроке мы скачаем Bootstrap 3.0 с официального сайта и подключим файлы к главной странице.
Итак, приступим.

Шаг 1. Чтобы начать работать с фреймворком Bootstrap 3.0 , нам нужно его скачать. Это можно сделать на официальном сайте.

Шаг 2. Создайте папку, например, «Мой сайт на Bootstrap 3.0 » и перенесите все файлы из архива в нее. У вас должно появиться три папки «css » , «js » , «fonts »:

Шаг 3. Удаление ненужных файлов из Bootstrap 3.
Давайте просмотрим стандартную файловую структуру Bootstrap и удалим оттуда все ненужные файлы:

bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.min.css
│ ├── bootstrap-theme.css
│ └── bootstrap-theme.min.css
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/

Папка CSS

В папке CSS находится 6 файлов, но нам, по сути, нужен только один J.

bootstrap.css - этот css-файл содержит все готовые стили в удобной и читаемой форме. Вот этот файл нам и нужен. Его мы и будем подключать к нашему html-файлу.

bootstrap.css.map , bootstrap-theme.css.map - я эти файлы не использую, так как не знаю, для чего они нужны. Вы можете их удалить .

bootstrap-theme.css - это css-файл для готовой темы Bootstrap. Его можете тоже смело удалить .

bootstrap.min.css и bootstrap-theme.min.css - это точно такие же файлы как bootstrap.css (пункт №1) и bootstrap-theme.css (пункт №2), только в более неудобной и тяжело читаемой форме. Весят примерно на 30% меньше, чем bootstrap.css или bootstrap-theme.css . Лично я их не подключаю. Значит, я и их удаляю .

В итоге в папке CSS оставляете только файл bootstrap.css , все остальные удаляйте.

Папка fonts

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

Папка js

В папке js хранятся 2 файла, это bootstrap.js и bootstrap.min.js .
Как вы уже поняли, это два одинаковых файла, только bootstrap.js – полная версия, а bootstrap.min.js – сжатая. Удаляем файл bootstrap.min.js .

Итак, файл bootstrap.js – это набор готовых js-сценариев.

○ Давайте подведем итог по всем папкам .
В папке CSS один файл - bootstrap.css
В папке fonts четыре файла - glyphicons-halflings-regular.eot , glyphicons-halflings-regular.ttf , glyphicons-halflings-regular.svg и glyphicons-halflings-regular.woff .
В папке js один файл - bootstrap.js .

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

Шаг 4. Теперь в папке «Мой сайт на Bootstrap 3.0 » создайте файл «index.html » с .

Шаг 5. Откройте файл «index.html» текстовым и вставьте вот такой стандартный код, который предлагается на самом сайте Bootstrap:

Bootstrap 101 Template Hello, world!

В этом коде нужно сделать некоторые поправки для подключения bootstrap. Нам нужно в коде прописать правильный путь к файлам bootstrap.js и bootstrap.css .

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

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

В строке №10 мы подключили таблицу стилей «bootstrap.css»:

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

В строке №23 мы подключили библиотеку jquery:

Сохраните файл.

В результате в браузере вы увидите вот такой результат:

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

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

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

Об использовании Bootstrap В настоящее время есть несколько способов работы со стилями Bootstrap.Без использования LESS Для новичков сам Bootstrap рекомендует следующий подход: нужно скачать с сайта скомпилированный Bootstrap и положить его в свой проект, ничего не изменяя. Затем нужно создать свой пустой CSS файл и подключить его после bootstrap.css.

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

A { color: #beceda; }
Очевидным минусом данного подхода является то, что вам придется вручную искать нужные стили, которые требуется перебить и не всегда это будет тривиально, т.к. некоторые параметры Bootstrap применяются ко многим селекторам в изменённом виде, например через формулы. Небольшую помощь здесь может оказать инструмент Customize , он поможет скомпилировать правильно ваши изменения, но только один раз. Если в будущем вы захотите изменить какой-то параметр, то придется заново вбивать изменненные значения для всех полей, чтобы скомпилировать свои стили.

С использованием LESS Данный способ подразумевает, что все переменные Bootstrap хранятся в.less файлах. Разработчик работает с этими переменными и по необходимости вручную или автоматически компилирует их в CSS файлы, а сам HTML подключает только скомпилированные CSS файлы. Именно этот вариант и будет рассматриваться в статье, как самый гибкий.

Существует большое количество способов скомпилировать LESS файлы и Bootstrap оставляет это на усмотрение разработчика. Сам Bootstrap использует для компиляции Grunt , вы можете предпочесть плагин для продуктов JetBrains, а мы, поскольку статья ориентирована на новичков, посмотрим в сторону более простых решений. Такими решениями являются программы WinLess для Windows, SimpLESS для Mac или Koala для Linux. Все эти программы делают примерно одно и то же: получают на вход папку с LESS файлами и слушают изменения в них. Как только вы вносите изменения в любой файл – тут же он компилируется в указанный CSS файл. Таким образом вам нет необходимости запускать компиляцию руками после каждого изменения. Вы изменяете LESS файл, сохраняете его и тут же видите изменения на сайте в уже скомпилированном, сжатом виде.

Создание проекта Первым шагом давайте создадим простую структуру файлов для нашего проекта.

Предварительный осмотр После создания структуры файлов открываем psd файл в Photoshop. Важно внимательно осмотреть шаблон и оценить его. Нам нужно понять следующие вещи:

Как будут нарезаться изображения?
Какие будут использоваться компоненты?
Какими будут основные стили?
Какой макет страницы у нас получится?

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

Сохраняем изображение карты:

Сохраним логотипы следующим образом:

Images/logo.png
images/footer-logo.png

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

/images/bg.png
/images/h1-bg.png

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

/images/social.png
/images/social-small.png

Компоненты Основное отличие вёрстки с помощью Bootstrap от вёрстки нативными средствами заключается в том, что Bootstrap вводит такое понятие, как компоненты. Компоненты представляют из себя часто используемые готовые HTML блоки с предопределенными стилями. Иногда компоненты используют JavaScript. Верстальщик может использовать как готовый компонент, так и определить свой внешний вид для него. Для этого часто нужно лишь поменять значение переменных в Bootstrap. Если нужны более гибкие изменения, верстальщик всегда может изменить HTML и CSS по своему усмотрению.

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

Для верстки колонками - сеточная система (row, col)

Для поиска – инлайновая форма (form-inline), сгруппированные контролы (input-group), кнопка (btn)

Для навигации - навигационная панель (navbar) и сама навигация (nav)

Для отображения подменю – группированный список (list-group)

Для блока карты – визуальная панель (panel)

Для отображения большого центрального блока – jumbotron

Для отображения рамок фотографий – миниатюры (thumbnail)

Более подробно на каждом компоненте мы остановимся, когда он нам встретится в вёрстке.Основные стили В Bootstrap все стили по умолчанию уже заданы, нам нужно только их перебить, если они отличаются от нашего дизайна. Сделаем это в файле src/less/variables.css.

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

@brand-font: "Oswald",sans-serif;
Если вы хотите использовать шаблон для русских сайтов, то шрифт Oswald можно попробовать заменить на наиболее близкий Cuprum, который поддерживает кириллицу.

А теперь заменим настройки Bootstrap на свои:

После того, как мы закончили с переменными, давайте начнем прописывать стили нашего дизайна в файле styles.less. Сначала подключим сам Bootstrap и наши переменные:

@import "bootstrap/bootstrap.less"; @import "variables.less";
Не все стили, заданные Bootstrap по умолчанию можно изменить переменными, давайте сделаем это вручную:

P { margin: 20px 0; } .form-control { box-shadow: none; } .btn { font-family: @brand-font; }
Здесь мы убрали тень у элементов формы, а текстам в кнопках указали специфический шрифт страницы.

Затем опишем фон страницы и верхнюю полоску:

Body { border-top: 5px solid #7e7e7e; background-image: url(../images/bg.png); }
Далее в тексте не будет указываться в какой файл пишутся стили. Просто запомните, что все переменные мы сохраняем в файл variables.less, а CSS стили будем хранить в styles.less.

Каркас HTML Вёрстку сайта начинаем традиционно с каркаса HTML. Вставляем в файл index.html код простейшего шаблона со страницы Getting started , предварительно убрав всё лишнее:

Whitesquare
В этом блоке создается HTML5 структура документа. В title указываем название нашей страницы – Whitesquare. Метатегом viewport указываем, что ширина страницы на мобильных устройствах будет равна ширине экрана и начальный масштаб будет 100%. Затем подключается файл стилей. И для версий Internet Explorer меньше девятой подключаем скрипты, позволяющие правильно отображать нашу верстку.

Макет В данном случае, мы видим, что сайт состоит из двух частей: основного контейнера с содержимым, который центрируется на экране и тянущегося футера. Основной контейнер состоит из двух колонок: основного контента и сайдбара. Над ними находится шапка (header), навигация (nav) и название страницы (.heading).

Давайте добавим в body следующий код:

Здесь нам встречается первый компонент Bootstrap – колонки . Родительскому элементу колонок задается класс «row», а классы колонок начинаются с префикса «col-», затем идет размер экрана (xs, sm, md, lg), а заканчиваются относительной шириной колонки.

Колонке можно задавать одновременно различные классы со значениями для экранов, например class=«col-xs-12 col-md-8». Эти классы просто задают ширину колонке в процентах для определенного размера экрана. Если колонке не задан класс определенного экрана, то применится класс для минимально определенного экрана, а если и он не указан – то никакая ширина не применится и блок займет максимально возможную ширину.

У нас классы «col-md-7» и «col-md-17» указывают, что блоки представляют из себя колонки шириной 7 и 17 относительно родительского контейнера. По умолчанию сумма ширин колонок в Bootstrap равняется 12, однако мы увеличили это число вдвое для достижения нужной нам гибкости.

Body { … .wrapper { padding: 0 0 50px 0; } header { padding: 20px 0; } }
Данную конструкцию мы поместили внутрь body. Синтаксис LESS позволяет вкладывать правила друг в друга, которые потом скомпилируются в такие конструкции:

Body .wrapper {…} body header {…}
Такой подход позволяет видеть структуру HTML прямо внутри CSS и дает некую «область видимости» правилам.

Логотип

Вставляем логотип в тег header:

Дополнительных стилей не требуется.

Поиск

Для того чтобы создать поиск, нам понадобятся следующие компоненты Bootstrap: инлайновая форма , сгруппированные контролы и кнопка .
В теге header создаем инлайновую форму, выровненную по правому краю. Поля такой формы обязательно должны иметь класс «form-control» и label.

В форму мы помещаем компонент «сгруппированные контролы». Группировка контролов позволяет убрать отступ между вводом текста и кнопкой и как бы слить их в единый элемент.
Он представляет из себя div с классом «input-group» и полями, а кнопка такого компонента помещается в блок с классом «input-group-btn».

Поскольку нам не нужно показывать label для поля поиска - скроем его классом «sr-only». Это нужно для специальных устройств чтения с экрана.

Кнопке добавляется класс «btn-primary», означающий, что это первичная кнопка данной формы.

… Search GO
Всё, что нам осталось - это задать в стилях ширину форме поиска.

Body { … .wrapper { … header { … .form-search { width: 200px; } } } }

Меню

Для отображения меню возьмем компонент «навигационная панель » и поместим в него компонент «навигация », которая представляет из себя список со ссылками. Для навигации добавляется класс «navbar-nav», который применяет специальные стили навигации внутри навигационной панели.

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

/*высота навигационного меню*/ @navbar-height: 37px; /*задаем побольше горизонтальный отступ*/ @nav-link-padding: 10px 30px; /*фон для пунктов меню*/ @navbar-default-bg: @panel-bg; /*цвет текста в пунктах меню*/ @navbar-default-link-color: #b2b2b2; /*и при наведении мышки – такой же*/ @navbar-default-link-hover-color: @navbar-default-link-color; /*фон активного пункта меню – наш специфический голубой цвет*/ @navbar-default-link-active-bg: @brand-primary; /*цвет текста активного пункта меню*/ @navbar-default-link-active-color: #fff;
Помимо настраиваемых параметров, опишем дополнительные в стилях – это текст в верхнем регистре и наш специфический шрифт:

Body { … .wrapper { … .navbar a { text-transform: uppercase; font: 14px @brand-font; } } }

Заголовок страницы

Заголовок страницы помещается в div с классом «heading».

About us
И имеет следующие стили:

Body { … .wrapper { … .heading { height: 40px; background: transparent url(../images/h1-bg.png); margin: 30px 0; padding-left: 20px; h1 { display: inline-block; color: #7e7e7e; font: normal 40px/40px "Oswald", sans-serif; background: url(../images/bg.png); margin: 0; padding: 0 10px; text-transform: uppercase; } } } }
Здесь мы рисуем серую полоску фоном на div’e, и в нее вкладываем инлайновый h1 с нужным шрифтом и фоном цвета страницы, чтобы создалось впечатление прозрачного фона для h1.

Подменю

При создании подменю, мы не будем использовать компонент «навигация», так как по стилям он нам не очень подходит, гораздо больше нам подойдет компонент «группированный список ». Каждый элемент такого компонента имеет класс «list-group-item».

Подменю нужно разместить в теге aside. Список ссылок создаем аналогично главному меню.

В настройках компонента укажем, что все группированные списки нужно показывать с фоном и рамкой компонента «панель»:

@list-group-bg: @panel-bg; @list-group-border: @panel-inner-border;
И применяем к подменю следующие стили:

Body { … .wrapper { … .submenu { margin-bottom: 30px; li { display: list-item; font: 300 14px @brand-font; list-style-position: inside; list-style-type: square; padding: 10px; text-transform: uppercase; &.active { color: @brand-primary; } a { color: @text-color; text-decoration: none; &:hover { color: @text-color; } } } } } }
Сначала возвращаем элементам списка стандартные стили, так как Bootstrap их перебил на свои. Добавляем отступ снизу. Для подменю применяется более тонкий шрифт и квадратные маркеры. А для ссылок задаем цвета, верхний регистр и убираем подчеркивание. Амперсанд в коде «&.active» по синтаксису LESS во время компиляции заменится на родительский селектор: «.submenu li.active».

Контент сайдбара В контенте сайдбара помимо подменю располагается также изображение с расположением офисов.

Для его отображения нам подойдет компонент «панель », а точнее его вариация «основная панель» (panel-primary) для раскраски заголовка. Этот компонент содержит блок заголовка (panel-heading) и блок содержания панели (panel-body). Изображению карты добавляем класс «img-responsive», который позволит картинке уменьшаться при маленькой ширине экрана.

… Our offices
В переменных Bootstrap мы уже задали цвет для фона панели (panel-bg), а теперь укажем, что «primary» панель будет иметь серую рамку дефолтной панели, а не голубую, как задано по умолчанию:

@panel-primary-border: @panel-inner-border;
Теперь в стилях сайта нужно изменить стандартные настройки панелей, которые не изменяются через переменные:

Panel { box-shadow: none; .panel-heading { font: 14px @brand-font; text-transform: uppercase; padding: 10px; } .panel-body { padding: 10px; } }
Здесь мы убрали тень у панелей, поставили свои отступы и задали свой шрифт заголовка.

Цитата Вёрстку контента начнём с добавления цитаты.

Этот элемент страницы больше всего похож на компонент Jumbotron . Добавим его в колонку контента:

“Quisque in enim velit, at dignissim est. nulla ul corper, dolor ac pellentesque placerat, justo tellus gravida erat, vel porttitor libero erat.”

John Doe, Lorem Ipsum
Через переменные для компонента jumbotron зададим белый цвет текста и брэндовый голубой фон:

@jumbotron-bg: @brand-primary; @jumbotron-color: #fff;
И опишем наши стили:

Body { … .wrapper { … .jumbotron { border-radius: 0; padding: 0; margin: 0; blockquote { border-left: none; p { font: 300 italic 33px @brand-font; text-transform: uppercase; margin-bottom: 0; } small { text-align: right; color: #1D8EA6; font: 300 20px @brand-font; &:before { content: ""; } } } } } }
В них мы убираем скругление углов, отступы компонента и декорации цитаты, заданные Bootstrap по умолчанию. Также добавим стили наших шрифтов.

Контент

Lorem ipsum dolor sit amet…

Donec vel nisl nibh…

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

Класс «thumbnail» превращает изображения в компонент «миниатюра ». Он сделает за нас всю работу по стилизации изображений. Единственное, что нам осталось - это установить свой отступ и цвет рамки в переменных для этого компонента:

@thumbnail-padding: 1px; @thumbnail-border: #c9c9c9;

Блок «Our team»

При верстке этого блока добавим сначала заголовок:

Our team
со стилем:

Body { … .wrapper { … h2 { background: none repeat scroll 0 0 #29C5E6; color: #fff; font: 300 30px @brand-font; padding: 0 10px; text-transform: uppercase; } } }
А затем добавим блок с классом «team», который состоит из двух строк, содержащих карточки сотрудников. Каждая карточка – это колонка. Карточка имеет ширину равную четырем колонкам нашей сетки. Все карточки кроме первой в строке имеют отступ слева, который создается классом «col-md-offset-1». Содержимое карточки состоит из изображения и описания (.caption)

John Doe Saundra Pittsley

team leader

…

Ericka Nobriga

art director

Cody Rousselle

senior ui designer

…
После создания разметки зададим этим элементам следующие стили:

Body { … .wrapper { … .team { .row { margin-top: 20px; .col { white-space: nowrap; .thumbnail { margin-bottom: 5px; } } .col-md-offset-1 { margin-left: 3.7%; } .caption { h3 { font: 300 16px @brand-font; margin: 0; } p { font: 300 14px @brand-font; color: @brand-primary; margin: 0; } } } } } }
Помимо отступов и стилей шрифтов, которые тут задаются, мы изменили класс «col-md-offset-1». Ему пришлось задать отступ 3.7%, т.к. стандартный отступ был слишком большой.

Футер Футер состоит из четырёх больших блоков: ленты Твиттера, карты сайта, социальных ссылок и логотипа с копирайтом.

Для начала создадим контейнер футера с этим блоками:

И применим к нему оформление:

Footer { background: #7e7e7e; color: #dbdbdb; font-size: 11px; .container { height: 110px; padding: 10px 0; } }
Тег footer задает серую область по всей ширине экрана, а контейнер внутри него отображает область по центру на больших экранах и задает высоту и отступ футера. Для выравнивания блоков внутри футера мы используем колонки.

Лента Твиттера Верстаем содержимое ленты Твиттера:

Twitter feed 23 oct

In ultricies pellentesque massa a porta. Aliquam ipsum enim, hendrerit ut porta nec, ullamcorper et nulla. In eget mi dui, sit amet scelerisque nunc. Aenean aug

Стили:

Body { … footer { … .container { … h3 { border-bottom: 1px solid #919191; color: #ffffff; font-size: 14px; line-height: 21px; font-family: @brand-font; margin: 0 0 10px; text-transform: uppercase; } p { margin: 5px 0; } .twitter { p { padding-right: 15px; } time a { color: #b4aeae; text-decoration: underline; } } } } }
Для всех заголовков футера задаем шрифты и отступы, а также делаем подчеркивание через нижнюю рамку. Для параграфов указываем отступ. Ссылке, отображающую дату, задаем цвет и подчеркивание.

Карта сайта Карта сайта представляет собой две равные колонки со ссылками:

Sitemap Home About Services Partners Support Contact
Ссылкам задаем цвет, шрифт и отступ между ними.

Body { … footer { … .container { … a { color: #dbdbdb; } .sitemap a { display: block; font-size: 12px; margin-bottom: 5px; } } } }

Социальные ссылки

Вставляем набор ссылок в блок с классом «social».

Social networks
И стилизуем их:

Body { … footer { … .container { … .social { .social-icon { width: 30px; height: 30px; background: url(../images/social.png) no-repeat; display: inline-block; margin-right: 10px; } .social-icon-small { width: 16px; height: 16px; background: url(../images/social-small.png) no-repeat; display: inline-block; margin: 5px 6px 0 0; } .twitter { background-position: 0 0; } .facebook { background-position: -30px 0; } .google-plus { background-position: -60px 0; } .vimeo { background-position: 0 0; } .youtube { background-position: -16px 0; } .flickr { background-position: -32px 0; } .instagram { background-position: -48px 0; } .rss { background-position: -64px 0; } } } } }
Здесь мы применили технику спрайтов – когда один файл с изображением применяется для разных картинок. Все ссылки разделились на большие иконки (.social-icon) и маленькие (.social-icon-small). Мы задали этим классам отображение в виде инлайнового блока с фиксированными размерами и одинаковым фоном. А затем с помощью CSS сдвинули этот фон так, чтобы на каждой ссылке отобразилось соответствующее изображение.

Копирайт Блок с копирайтом и логотипом – это картинка со ссылкой и параграф с текстом под ней.

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

Body { … .footer { … .container { … .footer-logo { float: right; margin-top: 20px; font-size: 10px; text-align: right; a { text-decoration: underline; } } } } }

На этом вёрстка закончена. Готовый проект можно скачать

Приветствую всех читателей текущей публикации. Очень часто у начинающих веб-разработчиков возникает вопрос: «Как осуществляется Bootstrap подключение к CMS?». Поэтому чтобы дать ответы на подобные вопросы, я решил написать данную статью.

Я подробно расскажу, как подключить фреймворк к WordPress и Joomla!, объясню, что такое кастомизация и для чего она нужна. Ну что ж, приступим!

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

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

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

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

Скачать на официальном сайте

Все файлы фреймворка с расширением css скопировать в каталог css выбранного макета CMS Joomla;

Все файлы с расширением js скопировать в каталог js выбранного шаблона движка;

Скопировать все файлы из каталога fonts скачанного фреймворка в папку fonts выбранного макета Joomla;

В основном файле index.php вашего проекта в хедере добавить следующие строки:

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

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

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

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

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

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

Скачайте на официальном сайте http://getbootstrap.com/ последнюю доступную версию Bootstrap;

Все файлы фреймворка с расширением css скопируйте в каталог css активного макета Вордпресс;

Все файлы с расширением js скопируйте в каталог js активного шаблона движка;

Скопируйте все файлы из каталога fonts в папку fonts активного WordPress-шаблона;

В корневом каталоге этого макета найдите файл functions.php и откройте его;

Вписывайте в текст открытого документа код:

1 2 3 4

function add_bootstrap(){ wp_enqueue_script(‘my_bootstrap_js’, get_template_directory_uri().’/js/bootstrap.js’); wp_enqueue_style(‘my_bootstrap_css’, get_template_directory_uri().’/css/bootstrap.css’); }

После функции добавьте строку add_action (‘wp_enqueue_scripts’, ‘add_bootstrap’); которая запустит обработку только что созданной функции.

Несколько слов о Customize

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

С ее помощью можно выбрать перечень компонентов, утилит, плагинов, настроек css и другие элементы из файлов Less. К примеру, можно отключить иконки и символы, известные под названием Glyphicons (если не знаете, как они выглядят, то посмотрите в Google или по этой ссылке).

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

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

Решил увеличить свою скорость вёрстки сайтов. Погуглив я понял что скорость разработки можно повысить используя html, css фреймворк. Мой выбор пал на Bootstrap. В этой заметке я опишу как подключить Bootstrap 3 к сайту.

Для начала я хотел бы сказать что такое фреймворк и какие есть преимущества его использования. Фреймворк - это каркас или можно сказать основа какой либо программной системы. По отношению к html, css фреймворку это базовый набор каких то html элементов и css правил (например уже готовые кнопки, поля, формы и тд). Ещё один плюсом использования twitter bootstrap является адаптивная модульная сетка, что упростит разработку вёрстки под мобильные устройства. А сейчас вёрстку под экраны с малым разрешением требуют повсеместно. Так же используя это фреймворк мы получим кроссбраузерный сайт настроенный под все современные браузеры. Используя Bootstrap мы получим уже готовые:

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

И так преимущества использования фреймворка очевидны

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

Перед установкой bootstrap 3 нужно скачать. Идём на официальный сайт twitter bootstrap по этой ссылке и качаем исходник нажав на левую кнопку под которой написано "Compiled and minified CSS, JavaScript, and fonts". Так же исходник можно скачать по этой ссылке с гитхаба. Из полученного архива извлекаем папки css, js, fonts и переносим их например в C:\bootstrap\public_html. В этой же папке создаём файл index.html.

My bootstrap Бутстрап подключён

Запускаем index.php в браузере, и если мы видим большую синюю кнопку с надписью Бутстрап подключён, то наше подключение удалось

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

Подключение Bootstrap к joomla происходит по аналогии как я подключал к joomla syntaxhighlighter, это описано . Идём в файл шаблона, который мы используем на нашем сайте. Напоминаю он находится в корне нашего сайта в папке template, представим на минуту что мы используем шаблон beez_20. Поэтому мы заходим в папку beez_20 и открываем файл index.php в любом текстовом редакторе. Но перед этим скопируем в папку шаблона нужные нам файлы bootstrap. В папку css соответственно папки beez_20 копируем файл bootstrap.min.css или bootstrap.css, просто файл min это сжатая версия. В папку fonts копируем все шрифты glyphicons-halflings-regular. Это шрифты для иконок. В папку js копируем bootstrap.min.js. Всё, все нужные нам файлы перенесены. Переходим к файлу index.php. Для начала подключим css стили. Находим в фале такой вот тег и после него вставляем ниже указанный код.