Слияние кода завершено, страница обновится автоматически
pfSense на Bootstrap
Мы переносим pfSense на Bootstrap. Вы можете помочь! Пожалуйста, соблюдайте следующие рекомендации по написанию кода:
\t<SP><SP><SP>); , нет таблиц для макета (замените их панелями, где это необходимо);Если вы чувствуете себя авантюристом, иногда вы можете переписать код PHP и JavaScript; но старайтесь свести это к минимуму.
Мы предлагаем вам настроить среду разработки для тестирования ваших изменений. Это можно сделать с помощью Virtualbox или Qemu.
Используйте libvirt для настройки машины FreeBSD-10 с двумя сетевыми адаптерами. Загрузите последний файл pfSense.iso и установите его. Я подключил оба сетевых адаптера к virbr0, который libvirt предлагает по умолчанию. Один интерфейс можно использовать в качестве WAN (где pfSense будет использовать dhcp и должен получить NATted IP-адрес в вашей локальной сети), другой — в качестве LAN-интерфейса с фиксированным IP-адресом.
Создайте новую виртуальную машину (FreeBSD 64 bit) и следуйте указаниям мастера, чтобы настроить объём оперативной памяти (512 МБ) и создать виртуальный жёсткий диск (8 ГБ подойдёт). Когда закончите, не запускайте машину, а откройте диалоговое окно настроек и настройте два сетевых адаптера. Оба должны быть настроены как «Bridged Adapter», подключённые к вашему активному сетевому соединению.
После сохранения вы можете запустить машину. Virtualbox попросит вас настроить загрузочный носитель. Используйте последнюю доступную версию .iso, следуйте стандартным шагам установки и настройте конфигурацию, как описано в инструкциях Qemu.
Когда закончите, не забудьте удалить установочный диск с вашего компьютера. В противном случае он будет продолжать загружать установщик вместо вашей установки.
Отключите DHCP-сервер (на интерфейсе LAN) вашей установки pfSense и всё готово. Запустите ssh-демон, войдите в систему и настройте аутентификацию с открытым ключом (для пользователя root). Выполните команду pkg install rsync и создайте скрипт для загрузки ваших изменений из среды разработки в установку pfSense:
#!/bin/sh
HOST=192.168.122.100
rsync -xav --delete `dirname $0`/usr/local/www/ root@$HOST:/usr/local/www/
rsync -xav --delete `dirname $0`/etc/inc/ root@$HOST:/etc/inc/
Прежде чем погрузиться в файл, очистите его с помощью прилагаемого очистителя (clean.sh). Этот скрипт пытается удалить большинство ненужных атрибутов элементов и выполняет множество других замен, которые необходимо выполнить в каждом файле.
Все перенесённые файлы (в usr/local/www) форматируются с использованием компонентов Bootstrap по умолчанию. Пользовательский CSS помещается в usr/www/bootstrap/css/pfSense.css, но постарайтесь свести это к минимуму.
Система сеток Bootstrap используется для определения столбцов. Мы выбрали «малую» точку останова в качестве точки останова по умолчанию для сворачивания из горизонтального в вертикальное расположение. Вы должны определить ширину своих столбцов с помощью .col-sm-*, если нет веской (и задокументированной ;) причины отклоняться от этого значения по умолчанию.
Мы следуем нескольким соглашениям для чистого и последовательного оформления форм:
каждая форма должна иметь... По крайней мере, одна «панель» должна содержать поля формы. Если некоторые поля можно сгруппировать вместе, вы можете добавить несколько панелей в форму.
Поле состоит из внешней оболочки .form-group, которая содержит label и input.
Кнопка отправки должна быть размещена вне панелей, чтобы избежать путаницы (например, кнопка сохранения сохраняет всю форму, а не только последнюю панель).
Флажки размещаются внутри метки (см. пример ниже). Обертывающий div нуждается в дополнительном классе .checkbox.
Дополнительные описания полей можно разместить в диапазоне .help-block.
После определения правильного макета для форм мы решили создать оболочки на PHP для создания всех форм. Это устраняет дублирование всего текущего HTML, делая эту миграцию немного сложнее, но любые будущие обновления бесконечно проще (поскольку все формы можно обновлять централизованно). Вот как должен выглядеть код формы:
require('classes/Form.class.php');
$form = new Form;
$section = new Form_Section('System');
$section->addInput(new Form_Input(
'hostname',
'Hostname',
'text',
$pconfig['hostname'],
['placeholder' => 'pfSense']
))->setHelp('Name of the firewall host, without domain part');
$section->addInput(new Form_Input(
'domain',
'Domain',
'text',
$pconfig['domain'],
['placeholder' => 'mycorp.com, home, office, private, etc.']
))->setHelp('Do not use \'local\' as a domain name. It will cause local '.
'hosts running mDNS (avahi, bonjour, etc.) to be unable to resolve '.
'local hosts not running mDNS.');
$form->add($section);
print $form;
Пожалуйста, убедитесь, что указанные выше поля $_POST в коде PHP также обновлены, поскольку они генерируются автоматически.
Код PHP будет выводить HTML примерно так (всё, кроме соответствующих классов Bootstrap, опущено для этого примера):
<form class="form-horizontal">
<div class="panel panel-default">
<div class="panel-heading">
<h2 class="panel-title">Форма или заголовок панели</h2>
</div>
<div class="panel-body">
<div class="form-group">
<label for="input" class="col-sm-2 control-label">Ввод</label>
<div class="col-sm-10">
<input class="form-control" id="input" />
</div>
</div>
<div class="form-group">
<label for="second-input" class="col-sm-2 control-label">Вторая метка</label>
<div class="col-sm-10">
<input class="form-control" id="second-input" />
<span class="help-block">Что это такое?</span>
</div>
</div>
<div class="form-group">
<label for="second-input" class="col-sm-2 control-label">Флажок</label>
<div class="col-sm-10 checkbox">
<label>
<input type="checkbox" id="checkbox" /> Описание флажка
</label>
</div>
</div>
<!-- И ещё группы форм -->
</div>
</div>
<!-- И ещё панели -->
<div class="col-sm-10 col-sm-offset-2">
<input type="submit" class="btn btn-primary" value="Сохранить" />
</div>
</form>
<div class="table-responsive">, чтобы они прокручивались горизонтально на небольших устройствах.table table-striped table-hover.thead (с соответствующими th) и tbody.Многие таблицы имеют кнопки «действия» в каждой строке, такие как «редактировать», «переместить» и «удалить». В старом шаблоне используются значки для этих действий, но в большинстве случаев существует недостаточно различных значков, и / или значки не очень понятны. Мы решили заменить эти значки (маленькими) кнопками:
<a class="btn btn-xs btn-primary">edit</a> <a class="btn btn-xs btn-danger">delete</a>
Цвета кнопок не установлены окончательно, но используемые варианты:
btn-primary;Icons в основном используются для обозначения статуса. Если значок не является на 100% понятным, попробуйте предоставить легенду. Хороший пример использования значков и легенды см. в файле usr/local/www/firewall_rules.php.
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Опубликовать ( 0 )