Онлайн-редактор

Описание онлайн-редактора.

На этой странице

На этой странице описано, как использовать наш онлайн-редактор.

Онлайн-редактор подходит для обработки каждого Issue и Pull Request!

Как войти

Войти очень просто, просто нажмите кнопку Sign in with GitHub в правом верхнем углу и войдите через свой аккаунт GitHub.

Основные функции и структура страницы

Наш онлайн-редактор используется для создания простых примеров и демонстраций для Bootstrap Table.

Структура страницы следующая:

Верхняя панель навигации

Верхняя панель навигации содержит 5 кнопок:

Run: кнопка запуска покажет эффект примера, который вы сейчас пишете.
Save: кнопка сохранения сохранит текущий пример. После сохранения URL примет форму, подобную https://live.bootstrap-table.com/code/<username>/<ID>.
Libraries: открывает страницу конфигурации, где вы можете настроить среду выполнения примера:
- Bootstrap Table source: выберите источник версии для примера (CDN или исходный код GitHub). При выборе From GitHub src можно указать ветку, используемую для примера; при обработке Issue обычно используется From Released CDN.
- Release CDN version: выберите версию Bootstrap Table для создания примеров для старых версий.
- Theme: можно переключаться между поддерживаемыми темами, например, для демонстрации проблемы в определённой теме.
- Extensions: если пример должен демонстрировать функцию какого-либо расширения, можно просто отметить его здесь, не нужно вручную подключать соответствующие ресурсы!
Load Examples: открывает страницу для загрузки существующих примеров (содержимое совпадает с нашей страницей примеров).
Links: последняя кнопка предоставляет некоторые связанные ссылки, например, официальный сайт, страницу репозитория GitHub и т.д.

Левая область

Левая область используется для написания кода примера, который может включать HTML, CSS и JavaScript (код CSS и JavaScript должен быть обёрнут тегами <style></style> или <script></script>).

Базовый шаблон:

<!-- Подключение пользовательских css и js файлов -->
<link rel="stylesheet" href="https://example.com/custom.css">
<script src="https://example.com/custom.js"></script>

<!-- Пользовательские стили -->
<style>
</style>

<!-- Не нужно писать теги <html> и <body> -->
<table id="table">
</table>

<script>
  $(function () {
    $('#table').bootstrapTable()
  })
</script>

Примечание: функцию инициализации необходимо писать внутри $(function () {}), чтобы гарантировать, что jQuery и Bootstrap Table завершили загрузку.

Правая область

Правая область используется для просмотра эффекта выполнения примера (сначала нужно нажать кнопку Run для выполнения кода).

Вы также можете нажать кнопку Result (Fullscreen), чтобы переключиться в полноэкранный режим отображения примера.

Рабочий процесс Issue

Каждый Issue должен содержать пример, созданный через онлайн-редактор, для воспроизведения проблемы.

Шаги следующие:

Откройте онлайн-редактор;
Перейдите на страницу Libraries, настройте среду выполнения примера (включая версию, тему и расширения и т.д.);
Напишите код примера (или скопируйте соответствующий код из локального проекта);
Проверьте, может ли пример точно воспроизвести вашу проблему;
Нажмите кнопку Save, чтобы сохранить пример, затем скопируйте сгенерированный URL;
При создании Issue приложите ссылку на этот пример.

(Вы также можете использовать кнопку Load Examples для загрузки существующего примера, чтобы заменить шаги 2 и 3 выше.)

Рабочий процесс Pull Request

Рабочий процесс PR (Pull Request) аналогичен Issue.

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

Откройте страницу Libraries;
В опции Bootstrap Table source выберите From GitHub src;
В поле ввода GitHub src branch введите имя ветки, формат имени ветки: <username>:<branch>;
Вы также можете напрямую скопировать эту строку на странице Pull Request.