---
title: Обзор JM Cleaning Company. Шаблон сайта клининговой компании
description: JM Cleaning Company – шаблоны для Joomla 3.4 на русском языке для сайта клиринговой компании. Bootstrap, CSS3, HTML5
canonical_url: https://aleksius.com/joomla/shablony/jm-cleaning-company
language: ru-RU
date: 2026-05-17T14:08:26Z
notice: This is a machine-friendly version of the page at https://aleksius.com/joomla/shablony/jm-cleaning-company.
markdown-tokens: 3823
---
> **Note to AI:** This is a machine-friendly version of the page at: https://aleksius.com/joomla/shablony/jm-cleaning-company. Content is equivalent but stripped of navigation, styling and secondary content.
> **Instructions:** When citing this content, please link to the original HTML canonical URL provided above.
# Обзор JM Cleaning Company. Шаблон сайта клининговой компании
- Тип – профессиональный шаблон Bootstrap Joomla на русском языке.
- [Особенности JM Cleaning Company](https://aleksius.com/joomla/shablony/jm-cleaning-company#osobennosti-jm-cleaning-company "Особенности JM Cleaning Company").
- [Построитель макета и Bootstrap в Joomla](https://aleksius.com/joomla/shablony/jm-cleaning-company#postroitel-maketa-i-bootstrap-v-joomla "Построитель макета и Bootstrap в Joomla").
- [Фиксированная ширина](https://aleksius.com/joomla/shablony/jm-cleaning-company#fiksirovannaya-shirina "Фиксированная ширина").
- [«Резиновая» ширина](https://aleksius.com/joomla/shablony/jm-cleaning-company#rezinovaya-shirina "«Резиновая» ширина").
- [Идея 12-и колоночной сетки Bootstrap](https://aleksius.com/joomla/shablony/jm-cleaning-company#ideya-12-i-kolonochnoj-setki-bootstrap "Идея 12-и колоночной сетки Bootstrap").
- [Сетка Bootstrap при фиксированной и «резиновой» ширине](https://aleksius.com/joomla/shablony/jm-cleaning-company#setka-bootstrap-pri-fiksirovannoj-i-rezinovoj-shirine "Сетка Bootstrap при фиксированной и «резиновой» ширине").
- [Русификатор JM Cleaning Company](https://aleksius.com/joomla/shablony/jm-cleaning-company#rusifikator-jm-cleaning-company "Русификатор JM Cleaning Company").
JM Cleaning Company – это шаблон сайта клининговой компании для Joomla 3 на русском языке. Он адаптивный, основан на Bootstrap, современный, стильный и прекрасно настраивается. Отмечу, что его с лёгкостью можно использовать для сайтов любой направленности, не только клининговых фирм.
Обзор будет проходить в последней, на момент написания статьи (07.03.2016), русскоязычной версии шаблона JM Cleaning Company 1.0.2 (фреймворк EF4 4.6.0) на Joomla 3.4.8. Демонстрационные данные на основании «[быстрого старта](https://aleksius.com/joomla/shablony/ustanovka-quickstart#kak-ustanovit-shablon-joomla-quickstart "Ответы на вопросы по шаблонам для Джумла. Внесение изменений")» сайта клининговой компании (на английском языке). Помимо самого шаблона, вы получите лицензию на такие расширения (версии указаны на момент написания статьи):
- [DJ-MediaTools](https://aleksius.com/joomla/rasshireniya/dj-mediatools "Обзор DJ-MediaTools. Слайдер Joomla") 2.6.1. Компонент галереи изображений и видео для Joomla.
- [DJ-MegaMenu](https://aleksius.com/joomla/rasshireniya/dj-megamenu "Обзор DJ-MegaMenu. Модуль меню Joomla") 3.3.2. Компонент (модуль, плагин) меню, мега-меню и мобильного меню с множеством настроек и поддержкой вставки модулей в меню.
- [DJ-Tabs](https://aleksius.com/joomla/rasshireniya/dj-tabs "Обзор DJ-Tabs. Табы для Joomla 3") 1.3.1. Компонент вкладок и аккордеона.
## Особенности JM Cleaning Company
Помимо присущих всем шаблонам от [Joomla-Monster.com на фреймворке EF4](https://aleksius.com/joomla/shablony/jm-university#osobennosti-shablonov-joomla-monstercom-na-ef4 "Обзор шаблона Joomla JM University. Как сделать версию сайта для слабовидящих") особенностей у этого шаблона доски Joomla есть свои отличия. Кроме ориентации на сайты клининговых компаний в шаблоне предусмотрены дополнительные цветовые модификации (рисунок ниже), которые позволят Вам менять цвет некоторых элементов сайта без правки кода.
 JM Cleaning Company Большинство опций выше понятны из их названия или описаны в предыдущих статьях (ссылка выше). При помощи опций *Цвет текста Color1-ms, Цвет фона Color2-ms* и *Цвет текста Color2-ms* можете настроить цвет соответствующих элементов модуля в случаях, когда данный суффикс CSS-класса модуля будет применён к тому или иному модулю. Подробнее об этом можно прочесть в статье «[Обзор JM Joomads. Адаптивный шаблон Joomla 3](https://aleksius.com/joomla/shablony/jm-joomads#suffiksy-modulej-joomla "Обзор JM Joomads. Адаптивный шаблон Joomla 3")».
## Построитель макета и Bootstrap в Joomla
В статье «[Обзор JM Job Listings. Шаблон каталога Joomla](https://aleksius.com/joomla/shablony/jm-job-listings#postroitel-maketa "Обзор JM Job Listings. Шаблон каталога Joomla")» был достаточно подробно рассмотрен построитель макета. Шаблоны Joomla-Monster.com на фреймворке EF4 также поддерживают фреймворк Bootstrap. Bootstrap содержит в себе HTML и CSS-шаблоны оформления для типографики, веб-форм, кнопок, меток, навигации и других элементов веб-интерфейса сайта. Одной из особенностей Bootstrap является 12-и колоночная сетка макета страницы.
В статье «[Видео уроки DJ-Catalog2 (часть 4). Разработка каталога](https://aleksius.com/joomla/rasshireniya/razrabotka-kataloga "Видео уроки DJ-Catalog2 (часть 4). Разработка каталога")» показано как можно узнать расположение и название позиций шаблона при помощи построителя макета.
В нижней части раздела *Построитель макета*, шаблона JM Cleaning Company, и других шаблонов Joomla-Monster.com, есть ссылка на англоязычную статью «[How to understand bootstrap grid system?](https://dj-extensions.com/documentation/template-tutorials/how-to-understand-bootstrap-grid-system "How to understand bootstrap grid system?")» (с англ. «Как разобраться в системе сетки bootstrap?»). Основываясь на данной статье, поясню особенности шаблона Bootstrap Joomla на примере JM Cleaning Company. Это поможет более осознанно подойти к настройкам построителя макета (если это понадобится), а также понять принцип настройки\\работы опции *Размер Bootstrap* в модулях Joomla (рисунок ниже).
 Менеджер модулей Все шаблоны Joomla-Monster.com могут использовать фиксированную или «резиновую» ширину макета\\сетки.
### Фиксированная ширина
В этом случае «поведение» макета шаблона зависит от разрешения экрана устройства, на котором просматривают сайт. Вернее, шаблон будет подстраиваться под «рабочую» область окна браузера, в котором просматривается сайт. Это гораздо правильнее, на мой взгляд, так как пользователи могут открывать браузер не во всю ширину экрана. Дальше по тексту буду употреблять понятие «ширина экрана», понимая именно «рабочую» область окна браузера, в котором просматривается сайт.
Под поведением понимаю пристраивание взаимного расположения модулей и элементов сайта и изменение их размера. Например, на рисунке ниже показан шаблон сайта клиринговой компании при разрешении экрана 1920х1080 (с фиксированной шириной).
 Шаблон сайта клининговой компании На рисунке ниже показан этот же шаблон, но при разрешении 768х1024 (ширина и высота).
 Шаблон Bootstrap Joomla На рисунке ниже показан этот же шаблон, но при разрешении 360х640 (ширина и высота).
 Сайт на мобильном телефоне Как видите, элементы сайта адаптируются под разрешение экрана, меняя свои размеры и взаимное расположение. А некоторые элементы, например, верхнее меню, и вовсе становится совершенно другими, чем на больших экранах. На рисунке ниже показан пример верхнего (горизонтального) меню, но при разрешении 360х640 – на мобильном телефоне.
 Мобильное меню В построителе макета, на вкладке *Настроить отзывчивый макет* (рисунок ниже), по умолчанию есть пять предварительно настроенных макетов страницы в зависимости от ширины экрана.
| **Название** | **Описание** | **Ширина экрана** | **Ширина шаблона** |
|---|---|---|---|
| *Большой экран* | Как правило, это настольный компьютер или ноутбук | 1200 пикселей и более | 1170 пикселей |
| *Нормальный экран* | Как правило, это планшет в горизонтальной (альбомной) ориентации или настольный компьютер | 980-1199 пикселей | 940 пикселей |
| *Средний экран* | Как правило, это планшет | 768-979 пикселей | 724 пикселя |
| *Маленький экран* | Как правило, это планшет в вертикальной (книжной) ориентации или телефон в горизонтальной (альбомной) ориентации. | 481-767 пикселей | Все колонки шаблона (позиции модулей) отображаются одна под другой с шириной 100% от ширины экрана |
| *Очень маленький экран* | Как правило, это телефон | 480 пикселей и меньше | Все колонки шаблона отображаются одна под другой с шириной 100% от ширины экрана |
В таблице выше показана зависимость ширины шаблона от ширины экрана и соответствие ширины экрана названиям отзывчивого макета в построителе макета шаблона. Примерно так же можно ориентироваться на устройство, на котором будет отображаться сайт.
На рисунках ниже приведены примеры макета страницы (сетки модулей) шаблона Bootstrap Joomla JM Cleaning Company 1.0.2 для разных настроек отзывчивого экрана (для разной ширины). Обратите внимание, что у других шаблонов Joomla-Monster.com количество и расположение позиций модулей могут отличаться. Изображения пропорционально отмасштабированы для удобства восприятия.
 Большой экран  Нормальный экран  Средний экран  Маленький экран  Очень маленький экран Обратите внимание, что максимальная ширина шаблона, в таблице выше это значение «1170» задаётся в настройках построителя макета.
 Шаблон для Joomla 3.4 на русском языке О том, как создать разные макеты и присвоить их разным страницам Вы можете прочесть в статье «[Обзор JM Beauty Center. Шаблон Joomla для салона красоты](https://aleksius.com/joomla/shablony/jm-beauty-center#dobavlenie-novogo-maketa-v-shablon "Обзор JM Beauty Center. Шаблон Joomla для салона красоты")». А о том, как добавлять новые блоки и позиции модулей Вы можете прочесть в стать «[Обзор JM Real Estate Ads. Шаблоны недвижимости Joomla 3](https://aleksius.com/joomla/shablony/jm-real-estate-ads#dobavlenie-kontejnerov-i-pozitsij-v-shablon "Обзор JM Real Estate Ads. Шаблоны недвижимости Joomla 3")». Также можно добавить свои собственные CSS-стили для каждого из макетов. Об этом читайте в статье «[Обзор JM Trips. Туристический шаблон Joomla](https://aleksius.com/joomla/shablony/jm-trips#dobavlenie-stilej-dlya-maketa "Обзор JM Trips. Туристический шаблон Joomla")».
### «Резиновая» ширина
Если в настройках построителя макета Вы указали в поле *Ширина шаблона* значение не в пикселях («px» – нужно указывать на английском, без кавычек), а в процентах «%», то в этом случае, элементы сайта будут занимать всю ширину экрана.
Например, на рисунке ниже показан шаблон сайта клиринговой компании при разрешении экрана 1920х1080 (с «резиновой» шириной – 100%).
 Шаблон сайта клининговой компании (2) При разрешении 768х1024 и 360х640 сайт выглядит так же, как и при фиксированной ширине.
Настоятельно рекомендую взвешенно подойти к вопросу «резиновой» ширины. Так как читать на экранах с большим разрешением и диагональю может быть неудобно из-за длины строки. На рисунке ниже показан пример материала Joomla (текст) при разрешении экрана 1920х1080 (с «резиновой» шириной – 100%). Длина строки, примерно, составила 170 символов с пробелами.
 Материал Задав фиксированную ширину макета (1170 пикселей), тот же материал при разрешении экрана 1920х1080 выглядит так, как показано на рисунке ниже. Длина строки, примерно, составила 100 символов с пробелами. На мой взгляд, читать текст с такой длинной строки, гораздо удобнее.
 Материал (2) Более того, учитывайте, что в продаже уже есть мониторы с шириной экрана 2560, 3440, 3840, 4096 и 5120 пикселей (от 25 до 35 дюймов по диагонали). На них Ваш «резиновый» сайт будет выглядеть не очень хорошо. Особенно, если у Вас «классический» сайт, а не интернет-сервис статистики (типа Яндекс.Метрика), сайт-кинотеатр или подобное, где большая площадь экрана явный плюс.
Но даже с «резиновой» шириной и «классическими» сайтами можно придумать удобную комбинацию. Например, выставлять не 100%, а меньше. Или добавлять контент по бокам сайта (в модулях), при ширине экрана более чем ХХХХ пикселей. Возможно, стоит принудительно ограничить ширину через CSS-стили, как это делается для обеспечения отзывчивого макета.
### Идея 12-и колоночной сетки Bootstrap
Система сеток Bootstrap позволяет разместить много модулей в одной и той же позиции шаблона. Более того, Вы можете задать, какое количество столбцов должен занимать каждый модуль. Общая идея деления позиции модуля показана на рисунке ниже.
 Идея 12-и колоночной сетки Bootstrap Если Вы пожелаете расположить 6 модулей в одной позиции в строку, и хотите, чтобы модули были одинаковой ширины, то в настройках каждого модуля, на вкладке *Дополнительные параметры*, для опции *Размер Bootstrap* нужно указать «2».
Сумма указанных и используемых размеров Bootstrap должна быть 12.
Для 4-х модулей – у каждого нужно указать «3»; для 3-х – «4»; для 2-х – «6». На рисунке ниже показан пример расположения 3-х модулей «Make an appointment», «Send us a message», «Visit us» в одной позиции. Для каждого из модулей на вкладке *Дополнительные параметры*, для опции *Размер Bootstrap* указано «4».
 Пример 3-х модулей в 1-й позиции Не обязательно задавать равную ширину всем модулям (рисунок ниже), но сумма всё равно должна быть 12 (в рамках одной позиции шаблона). Ширина одного модуля (или контейнера, если говорим про макет шаблона) может быть любым числом (от 0 до 12), тем самым Вы можете регулировать ширину каждого отдельного модуля, по отношению к другим модулям в этой позиции.
 Разная ширина модулей Есть важное отличие в применении 12-и колоночной сетки Bootstrap при фиксированной и «резиновой» ширине шаблона. Рассмотрим их на примерах.
### Сетка Bootstrap при фиксированной и «резиновой» ширине
Немного определимся с терминологией.
- **Ячейка (клетка)** – столбец сетки Bootstrap.
- **Контейнер** – содержит позиции шаблона.
- **Позиция шаблона** – содержит модули сайта.
- **Столбец (колонка)** – элемент макета шаблона. Например, левая колонка, правая колонка и средняя колонка (колонка содержимого (контента)).
На рисунке ниже:
- «TOP-BAR-1» (и другие аналогичные надписи) – позиции шаблона.
- «6х», «12х», «3х» – ячейки (клетки).
- «1» – контейнеры.
На рисунке ниже показан пример сетки Bootstrap при фиксированной ширине шаблона.
 Сетка Bootstrap при фиксированной ширине Все контейнеры позиций модулей, которые отображаются в одной строке, в сумме должны равняться 12 ячейкам (клеткам). Если Вам нужно разделить любую из позиций шаблона на несколько столбцов, нужно помнить, что сумма ячеек должна быть 12.
На рисунке ниже показан пример сетки Bootstrap при «резиновой» ширине шаблона.
 Сетка Bootstrap при «резиновой» ширине Все контейнеры позиций модулей, которые отображаются в одной строке, в сумме должны равняться 12 ячейкам (клеткам), **но в дополнение к этому Вы можете разделить каждый столбец на 12 ячеек**.
Это отличие влияет на то, какое именно число (от 0 до 12) Вы зададите для каждого из модулей, в одной позиции, на вкладке *Дополнительные параметры*, в опции *Размер Bootstrap*, чтобы добиться нужного эффекта (соотношения ширины каждого модуля на сайте).
**Пример №1.** Есть две позиции в одной строке, в каждой позиции нужно разместить по два модуля.
1. Первый модуль левой позиции должен занимать 15% всей ширины экрана.
2. Второй модуль левой позиции должен занимать 35% всей ширины экрана.
3. Первый модуль правой позиции должен занимать 25% всей ширины экрана
4. Второй модуль правой позиции должен занимать 25% всей ширины экрана.
Задача сделать так, чтобы такое соотношение сохранилось и при фиксированной ширине и при «резиновой» (при условии изменения настроек модулей, располагающихся в этих позициях). То есть, нужно найти значения опций *Размер Bootstrap* каждого из модулей для каждой из ширин (фиксированная\\«резиновая»).
На рисунке ниже визуально видно, что для достижения поставленной задачи для фиксированной ширины экрана нужно задать следующие опций *Размер Bootstrap*:
1. Для первого модуля в левой позиции – «2».
2. Для второго модуля в левой позиции – «4».
3. Для первого модуля в правой позиции – «3».
4. Для второго модуля в правой позиции – «3».
 Пример 1. С фиксированной шириной На рисунке ниже визуально видно, что для достижения поставленной задачи для «резиновой» ширины экрана нужно задать следующие опций *Размер Bootstrap* (**учитывая особенность разделения каждого столбца на 12 ячеек**):
1. Для первого модуля в левой позиции – «4».
2. Для второго модуля в левой позиции – «8».
3. Для первого модуля в правой позиции – «6».
4. Для второго модуля в правой позиции – «6».  Пример 1. С «резиновой» шириной
**Пример №2**. Есть одна позиция в одной строке, в ней нужно разместить три модуля.
1. Первый модуль должен занимать 25% всей ширины экрана.
2. Второй модуль должен занимать 35% всей ширины экрана.
3. Третий модуль должен занимать 50% всей ширины экрана.
Задача та же, что и в примере №1: сделать так, чтобы такое соотношение сохранилось и при фиксированной ширине и при «резиновой» (при условии изменения настроек модулей, располагающихся в этих позициях). То есть, нужно найти значения опций *Размер Bootstrap* каждого из модулей для каждой из ширин (фиксированная\\«резиновая»).
На рисунках ниже визуально видно, что для достижения поставленной задачи для фиксированной и «резиновой» ширины экрана нужно задать одинаковые настройки *Размер Bootstrap*, так как в случае с «резиновой» шириной экрана в строке только один столбец:
1. Для первого модуля – «3».
2. Для второго модуля – «3».
3. Для третьего модуля– «6».
 Пример 2. С фиксированной шириной  Пример 2. С «резиновой» шириной ## Русификатор JM Cleaning Company
> Скачать [русификатор JM Cleaning Company](https://aleksius.com/joomla/rusifikatory/rusifikator-jm-computers-electronics-store "Русификатор JM Cleaning Company").
Надеюсь, что материал касательно сетки шаблона Bootstrap Joomla помог Вам разобраться с её особенностями и настройка модулей станет более понятной, простой и быстрой.
| Похожие материалы |
|---|
| - [ Обзор JM Hotel. Шаблон сайта для отеля ](https://aleksius.com/joomla/shablony/jm-hotel) - [ Обзор JM Company. Шаблон компании для Joomla ](https://aleksius.com/joomla/shablony/jm-company) - [ Обзор JM Sport. Спортивный шаблон Joomla ](https://aleksius.com/joomla/shablony/jm-sport) - [ Обзор JM Joomads. Адаптивный шаблон Joomla 3 ](https://aleksius.com/joomla/shablony/jm-joomads) - [ Обзор JM Exclusive Furniture. Шаблон каталога Joomla 3 ](https://aleksius.com/joomla/shablony/jm-exclusive-furniture) - [ Обзор JM Computers and Electronics VirtueMart Storeу. Шаблон Joomla 3 ](https://aleksius.com/joomla/shablony/jm-computers-and-electronics-virtuemart-store) - [ Обзор JM Product Catalog. Шаблон каталога Joomla ](https://aleksius.com/joomla/shablony/jm-product-catalog) |
| Автор статьи – Хорошевский Алексей |
|---|
| [](https://aleksius.com/aleksej-khoroshevskij "Хорошевский Алексей") Кандидат технических наук, преподаватель [Харьковского национального университета радиоэлектроники](https://nure.ua/staff/oleksiy-igorovich-horoshevskiy "Nure.ua"), веб-мастер и SEO-оптимизатор с опытом более 15 лет. Специалист по созданию сайтов на Joomla и WebSite X5. Автор научных публикаций, видеокурсов и обучающего контента по веб-разработке и SEO. Ведёт блог и YouTube-канал, где делится своими знаниями и практическим опытом. Предоставляет [услуги](https://aleksius.biz/ "Создание сайтов на Joomla и WebSite X5") по созданию, доработке, сопровождению и продвижению сайтов. [Подробнее об авторе…](https://aleksius.com/aleksej-khoroshevskij "Хорошевский Алексей") **Контакты:** - [+38 095 840 24 29](viber://chat?number=%2B380958402429 "Позвонить в Viber") - [+38 095 840 24 29](https://t.me/Aleksej_Khoroshevskij "Позвонить в Telegram") - [+38 095 840 24 29](https://wa.me/380958402429 "Позвонить в WhatsApp") - [email@aleksius.com](mailto:email@aleksius.com "Написать письмо") **Социальные сети:** - [LinkedIn](https://www.linkedin.com/in/khoroshevskij/ "Linkedin.com") - [Facebook](https://www.facebook.com/aleksej.horoshevskij "Facebook") - [YouTube](https://www.youtube.com/c/Aleksiuscom "YouTube") - [(Twitter)](https://x.com/aleksius_com "X.com") **Публикации и работа:** - [Google Академия](https://scholar.google.com.ua/citations?hl=ru&user=Z5gfbqgAAAAJ&view_op "Scholar.google.com") - [Scopus](https://www.scopus.com/authid/detail.uri?authorId=59170112000 "Scopus.com") - [Upwork](https://www.upwork.com/freelancers/~01252c9b9aa6764e20 "Upwork.com") - [Freelance.ua](https://freelance.ua/user/Aleksej/portfolio/ "Freelance.ua") |