Ver en GitHub

Bootstrap Table Editor Online

Explicación del Editor Online.

En esta página

Esta página explica cómo usar nuestro Editor Online.

¡El Editor Online debe usarse para cada issue y pull request!

Bootstrap Table Editor en Vivo

Cómo iniciar sesión

El inicio de sesión es bastante sencillo, simplemente presiona el botón Iniciar sesión con GitHub en la esquina superior derecha e inicia sesión a través de GitHub.

Funcionalidad básica y estructura de la página

Nuestro editor online fue diseñado para crear ejemplos/demos fáciles para bootstrap-table.

La página está estructurada de la siguiente manera:

Barra de navegación superior

Tenemos 5 botones:

  • Run (Ejecutar): El botón Run muestra la versión actual de tu ejemplo.
  • Save (Guardar): El botón Save guarda tu ejemplo. Después de presionar guardar, la URL cambiará, por ejemplo: https://live.bootstrap-table.com/code/<username>/<ID>.
  • Libraries (Bibliotecas): Este botón abrirá una página de configuración. En esta página puedes configurar el entorno del ejemplo:
    • Bootstrap Table source (Fuente de Bootstrap Table): Esta opción define qué fuente de versión (CDN o desde GitHub como fuente) debe usarse. Si eliges From GitHub src (Desde GitHub src) puedes establecer una rama que se usará para el ejemplo. Para Issues, normalmente siempre usas From Released CDN (Desde CDN lanzado).
    • Release CDN version (Versión CDN lanzada): Aquí puedes elegir la versión de bootstrap-table para crear un ejemplo para versiones más antiguas de bootstrap-table.
    • Theme (Tema): Aquí puedes elegir entre nuestros temas admitidos, por ejemplo, para mostrar un problema con un tema determinado.
    • Extensions (Extensiones): Si explicas cómo usar una extensión, puedes seleccionarla fácilmente aquí. ¡Esto significa que no necesitas incluirla tú mismo en el ejemplo!
  • Load Examples (Cargar ejemplos): Esta opción abre una página, aquí puedes cargar ejemplos existentes (es un “espejo” de nuestra página de ejemplos).
  • Links (Enlaces): El último botón simplemente contiene algunos enlaces, por ejemplo, a nuestro sitio web, página de GitHub, etc.

Lado izquierdo

Puedes escribir tus ejemplos. Incluyendo HTML, CSS y JavaScript (¡CSS y JavaScript necesitan una etiqueta <style></style> y/o <script></script>!)

La plantilla básica es:

<!-- Includes custom css and js files -->
<link rel="stylesheet" href="https://example.com/custom.css">
<script src="https://example.com/custom.js"></script>

<!-- Define custom style -->
<style>
</style>

<!-- No need to write <html> and <body> tags -->
<table id="table">
</table>

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

Nota: Necesitas poner la función de inicialización en $(function () {}) para asegurar que jquery y bootstrap-table se hayan cargado.

Lado derecho

Puedes ver tu ejemplo ejecutándose (después de presionar el botón Run).

También puedes hacer clic en Result (Fullscreen) (Resultado [Pantalla completa]) para alternar la pantalla completa del ejemplo ejecutándose.

Flujo de trabajo para Issues

Cada issue debe contener un ejemplo (creado en el Editor Online) del problema.

  1. Abre el editor online.
  2. Ve a la página Libraries y configura el entorno del ejemplo.
  • Versión
  • Tema
  • Extensiones
  1. Escribe tu ejemplo (o cópialo desde tu proyecto local).
  2. Comprueba si puedes reproducir tu issue en el ejemplo.
  3. Guarda el ejemplo (presiona el botón Save) y copia la URL.
  4. Abre un issue con la URL del ejemplo.

(Quizás también puedas usar nuestro botón Load Examples para cargar un ejemplo existente, en lugar de los puntos 2 y 3).

Flujo de trabajo para Pull requests

El flujo de trabajo para PR es bastante similar al flujo de trabajo para Issues.

La única diferencia es que tienes que elegir tu rama (el editor usará tu código para crear el ejemplo). Para eso, tienes que abrir la página Libraries, seleccionar From GitHub src en la opción Bootstrap Table source y escribir el nombre de tu rama en el input GitHub src branch. La sintaxis para el nombre de la rama es <username>:<branch>. También puedes copiar esa cadena desde la página de pull request.