온라인 에디터

온라인 에디터 설명.

이 페이지에서

이 페이지에서 온라인 에디터를 사용하는 방법을 설명합니다.

온라인 에디터는 모든 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 페이지에서 해당 문자열을 직접 복사할 수도 있습니다.