Мой сайт

Всегда с вами

Главная » Статьи » Оформление bootstrap

Списки

Неупорядоченный

Список, в котором порядок явно не обозначен.

  1. <ul>
  2. <li>...</li>
  3. </ul>

Упорядоченный

Список, в котором порядок четко определен.

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem
  1. <ol>
  2. <li>...</li>
  3. </ol>

Не стилизованный

Список без стиля или без дополнительного левого поля.

  1. <ul class="unstyled">
  2. <li>...</li>
  3. </ul>

Описание

Список терминов с их сопутствующими описаниями.

Списки описаний
Список описания идеально подходит для определения терминов.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
  1. <dl>
  2. <dt>...</dt>
  3. <dd>...</dd>
  4. </dl>

Горизонтальный список описания

Выстраивает термины и описания <dl> в одну линию.

Списки описания
Список описания идеально подходит для обозначения терминов.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
  1. <dl class="dl-horizontal">
  2. <dt>...</dt>
  3. <dd>...</dd>
  4. </dl>

Внимание! В горизонтальных списках описания слишком длинные термины будут обрезаться с помощью text-overflow. На малых дисплеях размеры списков будут изменяться в соответствии с сеткой шаблона.

Строковое выделение кода

Поместите строковый код внутрь тега <code>.

Для примера, <section> следует поместить внутрь как строковый.
  1. Для примера,<code><section></код> следует поместить внутрь как строковый.

Блочное выделение

Используйте <pre> для выделения многих строк кода. Избегайте угловых скобок в коде для его корректного отображения.

<p>Sample text here...</p>
  1. <pre>
  2. &lt;p&gt;Sample text here...&lt;/p&gt;
  3. </pre>

Внимание! Всегда используйте теги <pre> как можно левее; это сохранит все отступы. Дополнительно вы можете использовать класс .pre-scrollable, который имеет максимальную высоту в 350px и добавляет вертикальную прокрутку.

Стили по умолчанию

Для основного форматирования и только горизонтальной разметки добавьте класс .table в любой тег <table>.

# Имя Фамилия Имя пользователя
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
  1. <table class="table">
  2. </table>

Дополнительные классы

Добавьте любой из следующих классов к основному классу .table.

.table-striped

Добавить светло-серый фон к нечетным строкам внутри <tbody> можно посредством CSS селектора :nth-child (в IE7-IE8 не поддерживается).

# Имя Фамилия Имя пользователя
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
  1. <table class="table table-striped">
  2. </table>

.table-bordered

Добавляет рамки и закругляет углы таблицы.

# Имя Фамилия Имя пользователя
1 Mark Otto @mdo
Mark Otto @TwBootstrap
2 Jacob Thornton @fat
3 Larry the Bird @twitter
  1. <table class="table table-bordered">
  2. </table>

.table-hover

Делает активным наведение курсора внутри.

# Имя Фамилия Имя пользователя
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
  1. <table class="table table-hover">
  2. </table>

.table-condensed

Делает таблицы более компактными, наполовину сокращая отступы.

# Имя Фамилия Имя пользователя
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
  1. <table class="table table-condensed">
  2. </table>

Дополнительные классы строк

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

Класс Описание
.success Указывает на успешно выполненное действие.
.error Указывает на опасное или негативное действие..
.warning Указывает на предупреждение, на которое следует обратить внимание.
.info Используется как альтернатива стилям по умолчанию.
# Продукт Платеж Статус
1 TB — Ежемесячно 01/04/2012 Подтвержден
2 TB — Ежемесячно 02/04/2012 Отклонен
3 TB — Ежемесячно 03/04/2012 Задержка
4 TB — Ежемесячно 04/04/2012 Позвонить для подтверждения
  1. ...
  2. <tr class="success">
  3. <td>1</td>
  4. <td>TB - Monthly</td>
  5. <td>01/04/2012</td>
  6. <td>Approved</td>
  7. </tr>
  8. ...

Поддерживаемая разметка таблиц

Список поддерживаемых элементов HTML и указания для их использования.

Тег Описание
<table> Вставляет элемент для отображения данных в табличной форме.
<thead> Элемент контейнера предназначен для хранения одной или нескольких строк таблицы. (<tr>) Озаглавливает колонки таблицы.
<tbody> Элемент контейнера для создания строк в теле таблицы (<tr>)
<tr> Элемент контейнера для настройки ячеек таблицы. (<td> or <th>) Создает отдельную строку.
<td> Ячейка таблицы по умолчанию
<th> Специальная ячейка для названий столбцов таблицы (или строк — зависит от расположения).
Следует использовать с кодом <thead>
<caption> Краткое описание в таблице, которое очень удобно для мобильных устройств.
  1. <table>
  2. <caption>...</caption>
  3. <thead>
  4. <tr>
  5. <th>...</th>
  6. <th>...</th>
  7. </tr>
  8. </thead>
  9. <tbody>
  10. <tr>
  11. <td>...</td>
  12. <td>...</td>
  13. </tr>
  14. </tbody>
  15. </table>

Стили по умолчанию

Отдельные элементы формы имеют свой стиль, но без обязательного класса <form> или каких-либо особых изменений в разметке. В результате получаются упорядоченный, выровненный по левому краю текст в элементах формы.

Условные обозначения



Это пример вспомогательного текста.


  1. <form>
  2. <legend>Условные обозначения</legend>
  3. <label>Название</label>
  4. <input type="text" placeholder="Type something…">
  5. <span class="help-block">Это пример вспомогательного текста.</span>
  6. <label class="checkbox">
  7. <input type="checkbox"> Проверить
  8. </label>
  9. <button type="submit" class="btn">Подтвердить</button>
  10. </form>

Дополнительные шаблоны

В Bootstrap есть три дополнительных шаблона форм для общего пользования.

Форма поиска

Добавьте .form-search в форму и .search-query в элемент <input> для построения закругленной рамки.

  1. <form class="form-search">
  2. <input type="text" class="input-medium search-query">
  3. <button type="submit" class="btn">Search</button>
  4. </form>

Линейная форма

Добавьте класс .form-inline для компактного расположения выровненного по левому краю текста и строк.


  1. <form class="form-inline">
  2. <input type="text" class="input-small" placeholder="Email">
  3. <input type="password" class="input-small" placeholder="Password">
  4. <label class="checkbox">
  5. <input type="checkbox"> Запомнить
  6. </label>
  7. <button type="submit" class="btn">Отправить</button>
  8. </form>

Горизонтальная форма

Выровняйте текст по правой стороне, ставя обтекание слева, чтобы он находился на одной линии с элементами формы:

Условные обозначения

  1. <form class="form-horizontal">
  2. <div class="control-group">
  3. <label class="control-label" for="inputEmail">Email</label>
  4. <div class="controls">
  5. <input type="text" id="inputEmail" placeholder="Email">
  6. </div>
  7. </div>
  8. <div class="control-group">
  9. <label class="control-label" for="inputPassword">Password</label>
  10. <div class="controls">
  11. <input type="password" id="inputPassword" placeholder="Password">
  12. </div>
  13. </div>
  14. <div class="control-group">
  15. <div class="controls">
  16. <label class="checkbox">
  17. <input type="checkbox"> Remember me
  18. </label>
  19. <button type="submit" class="btn">Sign in</button>
  20. </div>
  21. </div>
  22. </form>

Поддерживаемые элементы формы

Примеры стандартных поддерживаемых элементов формы.

Поле ввода

Самый простой элемент формы с текстовыми полями ввода. Поддерживает все типы HTML5: текст, пароль, text, password, время и дата, региональные настройки времени и даты, дата, месяц, время, неделя, номер, электронная почта, URL, поиск, номер телефона и цвет.

Всякий раз обязательно используйте нужный тип type.


  1. <input type="text" placeholder="Text input">

Многострочный текст

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


  1. <textarea rows="3"></textarea>

Флажки и радио-кнопки

Элементы «флажки» (чек-боксы) используются для выбора одной или нескольких опций в списке, а радио-кнопки предназначены только для выбора одной опции из нескольких.

По умолчанию (вертикально)




  1. <label class="checkbox">
  2. <input type="checkbox" value="">
  3. А вот вам опция номер один - очень крутая штука.
  4. </label>
  5.  
  6. <label class="radio">
  7. <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
  8. А вот вам опция номер один - очень крутая штука.
  9. </label>
  10. <label class="radio">
  11. <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
  12. Опция два - это нечто другое. Выбрав ее, отменяете первую.
  13. </label>

Флажки в одной строке

Добавьте класс .inline к нескольким флажкам или радио-кнопкам, чтобы разместить их на одной линии.




  1. <label class="checkbox inline">
  2. <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
  3. </label>
  4. <label class="checkbox inline">
  5. <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
  6. </label>
  7. <label class="checkbox inline">
  8. <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
  9. </label>

Список выбора

Используйте опцию по умолчанию или укажите multiple="multiple", чтобы отобразить сразу несколько опций.




  1. <select>
  2. <option>1</option>
  3. <option>2</option>
  4. <option>3</option>
  5. <option>4</option>
  6. <option>5</option>
  7. </select>
  8.  
  9. <select multiple="multiple">
  10. <option>1</option>
  11. <option>2</option>
  12. <option>3</option>
  13. <option>4</option>
  14. <option>5</option>
  15. </select>

Дополнения к формам

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

Пред-идущие и Пост-идущие элементы

Добавьте текст или кнопки до или после поля текстового ввода. Обратите внимание, что элементы select при этом не поддерживаются.

Настройки по умолчанию

Добавьте один или два класса внутрь тегов .add-on и input, чтобы отобразить текст до или после поля ввода.

@

.00

  1. <div class="input-prepend">
  2. <span class="add-on">@</span><input class="span2" id="prependedInput" size="16" type="text" placeholder="Username">
  3. </div>
  4. <div class="input-append">
  5. <input class="span2" id="appendedInput" size="16" type="text"><span class="add-on">.00</span>
  6. </div>

Комбинирование

Используйте оба класса и дважды — .add-on, чтобы отобразить текст впереди или позади.

$ .00

  1. <div class="input-prepend input-append">
  2. <span class="add-on">$</span><input class="span2" id="appendedPrependedInput" size="16" type="text"><span class="add-on">.00</span>
  3. </div>

Кнопки вместо текста

Используйте с текстом вместо <span> класс .btn, чтобы к вводу подключить кнопку.

  1. <div class="input-append">
  2. <input class="span2" id="appendedInputButton" size="16" type="text"><button class="btn" type="button">Go!</button>
  3. </div>
  4.  
  5. <div class="input-append">
  6. <input class="span2" id="appendedInputButtons" size="16" type="text"><button class="btn" type="button">Search</button><button class="btn" type="button">Options</button>
  7. </div>

Форма поиска

  1. <form class="form-search">
  2. <div class="input-append">
  3. <input type="text" class="span2 search-query">
  4. <button type="submit" class="btn">Search</button>
  5. </div>
  6. <div class="input-prepend">
  7. <button type="submit" class="btn">Search</button>
  8. <input type="text" class="span2 search-query">
  9. </div>
  10. </form>

Настройка размеров

Используйте соответствующие классы, такие как .input-large или согласуйте ваше поле ввода с сеткой размеров, используя классы .span*.

Взаимосвязанные размеры






  1. <input class="input-mini" type="text" placeholder=".input-mini">
  2. <input class="input-small" type="text" placeholder=".input-small">
  3. <input class="input-medium" type="text" placeholder=".input-medium">
  4. <input class="input-large" type="text" placeholder=".input-large">
  5. <input class="input-xlarge" type="text" placeholder=".input-xlarge">
  6. <input class="input-xxlarge" type="text" placeholder=".input-xxlarge">

Внимание! В дальнейших версиях мы изменим использование этих взаимосвязанных классов ввода, чтобы согласовать размер кнопок. Например, .input-large будет увеличивать отступ и размер шрифта в поле ввода.

Сетка размеров

Используйте от .span1 до .span12, чтобы задать одинаковые размеры в поле ввода и в сетке столбцов.






  1. <input class="span1" type="text" placeholder=".span1">
  2. <input class="span2" type="text" placeholder=".span2">
  3. <input class="span3" type="text" placeholder=".span3">
  4. <select class="span1">
  5. ...
  6. </select>
  7. <select class="span2">
  8. ...
  9. </select>
  10. <select class="span3">
  11. ...
  12. </select>

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

  1. <div class="controls">
  2. <input class="span5" type="text" placeholder=".span5">
  3. </div>
  4. <div class="controls controls-row">
  5. <input class="span4" type="text" placeholder=".span4">
  6. <input class="span1" type="text" placeholder=".span1">
  7. </div>
  8. ...

Неформатируемые поля

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

Some value here
  1. <span class="input-xlarge uneditable-input">Some value here</span>

Формы для действий

Добавьте в конец формы действие (кнопки). Расположенные внутри класса .form-horizontal, кнопки автоматически получат отступ, соответствующий форме.

  1. <div class="form-actions">
  2. <button type="submit" class="btn btn-primary">Сохранить изменения</button>
  3. <button type="button" class="btn">Отмена</button>
  4. </div>

Вспомогательный текст

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

Строчный вспомогательный текст

Строчный вспомогательный текст
  1. <input type="text"><span class="help-inline">Inline help text</span>

Блоковый вспомогательный текст


Слишком большой блок вспомогательного текста переносится на новую строку и может продолжиться более, чем на одну строку.
  1. <input type="text"><span class="help-block">Слишком большой блок вспомогательного текста переносится на новую строку и может продолжиться более, чем на одну строку.</span>

Настройки состояния элементов формы

Обеспечивают обратную связь с пользователями или посетителями.

Фокус ввода

Мы удалили стили по умолчанию outline в настройках некоторых форм и поставили на их место box-shadow для фокуса :focus.


  1. <input class="input-xlarge" id="focusedInput" type="text" value="This is focused...">

Отключенное состояние

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


  1. <input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

Состояния валидации

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


Что-то идет не так


Пожалуйста, исправьте ошибку


Имя пользователя


Урааа!

  1. <div class="control-group warning">
  2. <label class="control-label" for="inputWarning">Предупреждение</label>
  3. <div class="controls">
  4. <input type="text" id="inputWarning">
  5. <span class="help-inline">Что-то идет не так</span>
  6. </div>
  7. </div>
  8. <div class="control-group error">
  9. <label class="control-label" for="inputError">Ошибка</label>
  10. <div class="controls">
  11. <input type="text" id="inputError">
  12. <span class="help-inline">Пожалуйста, исправьте ошибку</span>
  13. </div>
  14. </div>
  15. <div class="control-group success">
  16. <label class="control-label" for="inputSuccess">Выполнено успешно</label>
  17. <div class="controls">
  18. <input type="text" id="inputSuccess">
  19. <span class="help-inline">Урааа!</span>
  20. </div>
  21. </div>

Кнопки по умолчанию

Стили кнопок могут применяться к любым элементам посредством класса .btn. Однако, обычно применяйте их только к элементам <a> and <button> для лучшего отображения.

Кнопка class=»» Описание
btn Стандартная серая кнопка с градиентом
btn btn-primary Обеспечивает дополнительную визуальную ширину и указывает на первичное действие в наборе кнопок
btn btn-info Используется как альтернатива стилям по умолчанию
btn btn-success Указывает на успешное или положительное действие
btn btn-warning Указывает на то, что действие должно совершаться с предусмотрительностью
btn btn-danger Указывает на опасное или потенциально негативное действие
btn btn-inverse Чередующиеся темно-серые кнопки, не связанные с определенным действием
btn btn-link Отмена выделения кнопки. Кнопка получает вид ссылки, сохраняя при этом свои функции

Кросс-браузерная совместимость

Поскольку IE9 не подгоняет градиент заднего плана к закругленным углам, мы его удалили. Кроме того, IE9 искажает элементы кнопки отключения button отображая текст в сером цвете с ужасной тенью, которую мы не можем исправить.

Размеры кнопок

Желаете кнопки побольше или поменьше? Добавьте класс .btn-large, .btn-small, или .btn-mini для установки дополнительных размеров.

  1. <p>
  2. <button class="btn btn-large btn-primary" type="button">Большая кнопка</button>
  3. <button class="btn btn-large" type="button">Большая кнопка</button>
  4. </p>
  5. <p>
  6. <button class="btn btn-primary" type="button">Кнопка по умолчанию</button>
  7. <button class="btn" type="button">Кнопка по умолчанию</button>
  8. </p>
  9. <p>
  10. <button class="btn btn-small btn-primary" type="button">Маленькая кнопка</button>
  11. <button class="btn btn-small" type="button">Маленькая кнопка</button>
  12. </p>
  13. <p>
  14. <button class="btn btn-mini btn-primary" type="button">Мини-кнопка</button>
  15. <button class="btn btn-mini" type="button">Мини-кнопка</button>
  16. </p>

Создайте вложенный блок кнопок, который размещается по всей ширине родительских кнопок. Для этого добавьте класс .btn-block.


  1. <button class="btn btn-large btn-block btn-primary" type="button">Вложенная кнопка</button>
  2. <button class="btn btn-large btn-block" type="button">Вложенная кнопка</button>

Отключенное состояние

Отмените нажатие кнопок, уменьшив их четкость на 50%.

Анкерный элемент

Добавьте класс .disabled к кнопкам <a>.

Исходная ссылка Ссылка

  1. <a href="#" class="btn btn-large btn-primary disabled">Исходная ссылка</a>
  2. <a href="#" class="btn btn-large disabled">Ссылка</a>

Внимание!
Мы используем класс .disabled как дополнение к классу, подобно общему классу .active, так что никакой префикс не требуется. Также этот класс по сути только для внешнего вида — для того, чтобы сделать ссылку неактивной, используйте JavaScript.

Элемент кнопки

Добавьте атрибут disabled к кнопкам <button>.

  1. <button type="button" class="btn btn-large btn-primary disabled" disabled="disabled">Главная кнопка</button>
  2. <button type="button" class="btn btn-large" disabled>Кнопка</button>

Один класс, множественные теги

Используйте класс .btn в элементах <a>, <button> или <input>.

Ссылка
  1. <a class="btn" href="">Ссылка</a>
  2. <button class="btn" type="submit">Кнопка</button>
  3. <input class="btn" type="button" value="Input">
  4. <input class="btn" type="submit" value="Submit">

Для наилучшей совместимости с браузерами, используйте элементы, подходящие для всех браузеров. Используйте input как кнопку <input type="submit">.

Добавьте классы к элементу <img>, чтобы легко настроить стили изображений.

  1. <img src="..." class="img-rounded">
  2. <img src="..." class="img-circle">
  3. <img src="..." class="img-polaroid">

Внимание! .img-rounded и .img-circle не работают в IE7-8 из-за недостаточной поддержки border-radius.

Иконки glyphs

140 иконок в едином файле, по умолчанию в темно-сером и белом цвете. Предоставлены Glyphicons.

Авторство Glyphicons

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


Как использовать

Все иконки требуют использования тега <i> с уникальным классом и префиксом icon-. Для использования поместите код с примера ниже в нужное место:

  1. <i class="icon-search"></i>

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

  1. <i class="icon-search icon-white"></i>

Внимание! При использовании с текстом, кнопками, ссылками или навигацией не забудьте оставить пробел после тега <i> для корректного расположения элемента.


Примеры иконок

Используйте иконки для кнопок, пунктов меню, навигации или присоедините к формам ввода.

Кнопки

Группа кнопок в меню

  1. <div class="btn-toolbar">
  2. <div class="btn-group">
  3.  
  4. <a class="btn" href="#"><i class="icon-align-left"></i></a>
  5. <a class="btn" href="#"><i class="icon-align-center"></i></a>
  6. <a class="btn" href="#"><i class="icon-align-right"></i></a>
  7. <a class="btn" href="#"><i class="icon-align-justify"></i></a>
  8. </div>
  9. </div>
Кнопки с выпадающим списком
  1. <div class="btn-group">
  2. <a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> Пользователь</a>
  3. <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
  4. <ul class="dropdown-menu">
  5. <li><a href="#"><i class="icon-pencil"></i> Редактировать</a></li>
  6. <li><a href="#"><i class="icon-trash"></i> Удалить</a></li>
  7. <li><a href="#"><i class="icon-ban-circle"></i> Запретить</a></li>
  8. <li class="divider"></li>
  9. <li><a href="#"><i class="i"></i> Назначить администратором</a></li>
  10. </ul>
  11. </div>
Маленькая кнопка
  1. <a class="btn btn-small" href="#"><i class="icon-star"></i></a>

Навигация

  1. <ul class="nav nav-list">
  2. <li class="active"><a href="#"><i class="icon-home icon-white"></i> Домой</a></li>
  3. <li><a href="#"><i class="icon-book"></i> Библиотека</a></li>
  4. <li><a href="#"><i class="icon-pencil"></i> Приложения</a></li>
  5. <li><a href="#"><i class="i"></i> Дополнительно</a></li>
  6. </ul>

Поля формы

  1. <div class="control-group">
  2. <label class="control-label" for="inputIcon">Адрес электронной почты</label>
  3. <div class="controls">
  4. <div class="input-prepend">
  5. <span class="add-on"><i class="icon-envelope"></i></span>
  6. <input class="span2" id="inputIcon" type="text">
  7. </div>
  8. </div>
  9. </div>

14.10.2019

Вернуться назад

Случайное фото

Афоризм

Не пойман, не кайф

Спонсоры

  • LinkFeed - биржа ссылок
  • Kwork - любой заказ работ 500 руб.
  • Cервис партнерских программ и приема моментальных платежей
  • Fresh Forex
  • Форекс мини
  • Kandidat CMS

    Версия 2.0.1 LiveEditor UTF в кодировке UTF-8 c поддержкой bootstrap и JavaScript для адаптивного дизайна ...
    Описание Скачать

    Kandidat-news CMS

    Версия 1.6 LiveEditor UTF без поддержки bootstrap, но с JavaScript, без адаптивного дизайна ...
    Описание Скачать

    Шаблон modern

    Для Kandidat CMS 2.0.1 LiveEditor UTF в кодировке UTF-8 c поддержкой bootstrap, с адаптивным дизайном ...
    Описание Скачать