DokuWiki nos permite crear a partir de cero una Wiki, pero a todos se nos hacen los dientes largos cuando visitamos sitios de internet y vemos lo chulos que están… o por lo menos nos lo parece. Es posible mejorar el aspecto de nuestra Wiki escogiendo primero una plantilla y luego añadiéndole plugins.

Y digo primero la plantilla porque esta va a determinar los plugins que podemos usar con ella. Si, ya sé que es injusto, que todos los plugins deberían funcionar con cualquier plantilla, pero es lo que hay. No vamos a llamarle prisas ni dejadez por parte de los desarrolladores, simplemente las han hecho así. A quien le pique la curiosidad siempre los puede revisar y modificar.

Y aquí ya entramos en el campo de lo personal.

• Primero te pasas un fin de semana entero escogiendo la plantilla que más te convence, no sólo para ser visualizada en el ordenador sino también en dispositivos móviles. Esto nunca se consigue al cien por cien. En mi caso, la plantilla escogida presenta ciertos defectos en dispositivos móviles cuando hacemos un zoom. No se puede tener todo.
• Luego te pasas la semana entera siguiente envidiando la apariencia de otras wikis y preguntándote qué plugins usan para tener ese aspecto. Bueno, una semana o dos. Ese tiempo también lo aprovechas para ir creando contenido e intentando comprender la jerarquía de carpetas (namespaces) y derechos de usuario.
• Llega la hora de la verdad y te acondicionas para pasar otro fin de semana probando plugins. Previamente es obligado hacer una copia de seguridad de todo el directorio de tu DokuWiki, no vaya a ser. Pues si, menos mal que tenía esa copia de seguridad porque determinados plugins me hicieron desaparecer botones e incluso opciones importantes de la wiki hasta dejarla inservible. Pero ahí entra la magia de la sencillez de DokuWiki. Recuerda lo más importante: Tanto el directorio raíz de tu Wiki como el resto de contenido debe tener unos permisos muy específicos: Propietario el usuario http y grupo http.

Y un día la encuentras (o lo encuentras). Estaba ahí, siempre estuvo, sólo había que mirar bien o mejor dicho buscar. La madre de todos los plugin. En mi caso el plugin bootswrapper. Y a ello vamos. Cojo su página y me hago una copia descarada, para eso está la GPL, antes de que desaparezca o la rapten. Eso sí: Traducido. Osea, otro fin de semana.

Otro sitio imprescindible a visitar.

Índice

• Componentes de texto: Lead, Text, Labels, Image, Jumbotron, Page heading, Grids, List Group.
• Componentes gráficos: Badges, Progress Bar, Wells, Navs, Panels, Alerts, Tooltips, Thumbnails, Buttons, Affix, Collapse, Accordion, Carousel, Callouts.

Aunque podemos seguir escribiendo el formato como siempre en nuestra DokuWiki, una vez instalado este plugin aparecen unas etiquetas con significado propio que transformarán la apariencia de nuestro texto con nuevas posibilidades.

Este código:

<lead>Cuando queremos escribir algo para que no se pase por alto, mostrándolo con letra de mayor tamaño.</lead>

Muestra:

Esta etiqueta tiene dos versiones: En minúsculas y en mayúsculas.

  La versión en minúsculas <text> crea un elemento en línea (<span>).
  La versión en mayúsculas <TEXT> crea un elemento de bloque (<div>).

Veamos ejemplos.

Alineamiento. Este código:

<TEXT align="left">Texto alineado a la izquierda.</TEXT>
<TEXT align="center">Texto alineado al centro.</TEXT>
<TEXT align="right">Texto alineado a la derecha.</TEXT>
<TEXT align="justify">Este texto aparece justificado, tanto a izquierda como a derecha. Para comprobarlo he escrito un párrafo largo con muchas palabras para que llegue al extremo derecho de la página.</TEXT>
<TEXT align="nowrap">Texto con lineas sin partir (no wrap).</TEXT>

Muestra:

Transformación. Este código:

  * <text transform="lowercase">Párrafo TODO en minúsculas.</text>
  * <text transform="uppercase">Párrafo con todas las letras en mayúscula.</text>
  * <text transform="capitalize">Párrafo con todas las palabras con su primera letra en mayúsculas.</text>

Muestra:

• Párrafo TODO en minúsculas.
• Párrafo con todas las letras en mayúscula.
• Párrafo con todas las palabras con su primera letra en mayúsculas.

Colores de contexto. Este código:

  * <text type="muted">muted</text>
  * <text type="primary">primary</text>
  * <text type="success">success</text>
  * <text type="info">info</text>
  * <text type="warning">warning</text>
  * <text type="danger">danger</text>

Muestra:

• muted
• primary
• success
• info
• warning
• danger

Fondos de contexto. Este código:

  * <text background="primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</text>
  * <text background="success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</text>
  * <text background="info">Maecenas sed diam eget risus varius blandit sit amet non magna.</text>
  * <text background="warning">Etiam porta sem malesuada magna mollis euismod.</text>
  * <text background="danger">Donec ullamcorper nulla non metus auctor fringilla.</text>

Muestra:

• Nullam id dolor id nibh ultricies vehicula ut id elit.
• Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
• Maecenas sed diam eget risus varius blandit sit amet non magna.
• Etiam porta sem malesuada magna mollis euismod.
• Donec ullamcorper nulla non metus auctor fringilla.

Esta etiqueta tiene dos versiones: En minúsculas y en mayúsculas.

  La versión en minúsculas <label> crea un elemento en línea (<span>).
  La versión en mayúsculas <LABEL> crea un elemento de bloque (<div>).

El código:

  * <label type="default">default</label>
  * <label type="primary">primary</label>
  * <label type="success">success</label>
  * <label type="info">info</label>
  * <label type="warning">warning</label>
  * <label type="danger">danger</label>

Muestra:

• default
• primary
• success
• info
• warning
• danger

Marco cuadrado. El código:

<image shape="rounded">
{{:wiki:dokuwiki-128.png?nolink&100|}}
</image>

Muestra la imagen en un recorte cuadrado del tamaño del lado indicado:

Marco redondo. El código:

<image shape="circle">
{{:wiki:dokuwiki-128.png?nolink&100|}}
</image>

Muestra la imagen en un recorte redondo del tamaño del diámetro indicado:

Marco thumbnail. El código:

<image shape="thumbnail">
{{:wiki:dokuwiki-128.png?nolink&100|}}
</image>

Muestra un marco alrededor de la imagen:

El código:

<jumbotron>
====== Hola Mundo ======

Este componente de estilo jumbotron pretende llamar una enorme atención al contenido o información ofrecida.
</jumbotron>

Muestra:

El código:

<page-header>
===== Título =====
</page-header>

Esta es otra forma de mostrar el título de una página, donde le hemos añadido con estilos una linea horizontal inferior.

Muestra:

Esta es otra forma de mostrar el título de una página, donde le hemos añadido con estilos una linea horizontal inferior.

Nota. En lugar de grid podemos usar row.

El código:

<grid>
<col sm="6">.col-sm-6</col>
<col sm="6">.col-sm-6</col>
</grid>

Muestra:

El código:

<grid>
<col xs="12" sm="6" lg="8">.col-xs-12 .col-sm-6 .col-lg-8</col>
<col xs="6" lg="4">.col-xs-6 .col-lg-4</col>
</grid>

Muestra:

Ejemplo básico

El código:

<list-group>
  * Cras justo odio
  * Dapibus ac facilisis in
  * Morbi leo risus
  * Porta ac consectetur ac
  * Vestibulum at eros
</list-group>

Muestra:

Badges (Insignias)

El código:

<list-group>
  * Cras justo odio <badge>14</badge>
  * Dapibus ac facilisis in <badge>2</badge>
  * Morbi leo risus <badge>1</badge>
</list-group>

Muestra:

Linked items (Artículos vinculados)

El código:

<list-group>
  * [[wiki:hola|Bienvenid@ a tu nueva DokuWiki]]
  * [[wiki:sintaxis|Sintaxis de formato]]
  * [[wiki:enlaces|Enlaces DokuWiki]]
</list-group>

Muestra:

Contenido personalizado

El código:

<list-group>
  * [[wiki:hola|Bienvenid@ a tu nueva DokuWiki]] \\ Pequeña introducción a lo que es una Wiki
  * [[wiki:sintaxis|Sintaxis de formato]] \\ Cómo escribir código e información en la wiki
  * [[wiki:enlaces|Enlaces DokuWiki]] \\ Descargas, información y mucho más
</list-group>

Muestra:

Icons Plugin

El código:

<list-group>
  * {{fa>book?fw}} [[:doc:inicio|Publicaciones]]
</list-group>

Muestra:

• Lista de iconos Fontawesome
• https://glyphicons.bootstrapcheatsheets.com/
• Más información

Insignias. El código:

  * Inbox <badge>42</badge>
  * Messages <badge>4</badge>

Muestra:

• Inbox 42
• Messages 4

Barras de progreso. El código:

<progress>
<bar value="60"></bar>
</progress>

Muestra:

Con etiqueta. El código:

<progress>
<bar value="60" showvalue="true"></bar>
</progress>

Muestra:

Alternativas contextuales. El código:

<progress>
<bar value="40" type="success"></bar>
</progress>

<progress>
<bar value="20" type="info"></bar>
</progress>

<progress>
<bar value="60" type="warning"></bar>
</progress>

<progress>
<bar value="80" type="danger"></bar>
</progress>

Muestra:

A rayas. El código:

<progress>
<bar value="40" type="success" striped="true"></bar>
</progress>

<progress>
<bar value="20" type="info" striped="true"></bar>
</progress>

<progress>
<bar value="60" type="warning" striped="true"></bar>
</progress>

<progress>
<bar value="80" type="danger" striped="true"></bar>
</progress>

Muestra:

Animada. El código:

<progress>
<bar value="45" type="info" striped="true" animate="true"></bar>
</progress>

Muestra:

Apiladas. El código:

<progress>
<bar value="35" type="success" striped="true"></bar>
<bar value="20" type="warning" striped="true"></bar>
<bar value="10" type="danger" striped="true"></bar>
</progress>

Muestra:

Por defecto. El código:

<well>Mira, ¡estoy en una caja!</well>

Muestra:

Tamaño pequeño. El código:

<well size="sm">Mira, ¡estoy en una caja pequeña!</well>

Muestra:

Tamaño grande. El código:

<well size="lg">Mira, ¡estoy en una caja grande!</well>

Muestra:

tabs - Pestañas con menú desplegable. El código:

<nav type="tabs">
  * [[:inicio|Inicio]]
  * [[pruebas:playground|Zona de pruebas]]
  * Tutoriales
    * [[edu:tutoriales:dokuwiki:00_indice|DokuWiki]]
    * [[edu:tutoriales:linux:00_indice|Linux]]
    * [[edu:tutoriales:maquinas_virtuales:00_indice|Máquinas virtuales]]
  * Club de Cocina
    * [[club:cocina:manolo:00_indice|El Rincón de Manolo]]
    * [[club:cocina:guillermo:00_indice|El Puchero de Guillermo]]
    * [[club:cocina:dorinda:00_indice|Recetas de Dorinda]]
    * [[club:cocina:dietas:00_indice|Dietas]]
</nav>

Muestra:

Nota. Sólo admite un nivel de submenú.

Nota. En lugar de nav type=“tabs” puedes usar tabs.

pills - Píldoras con menú desplegable. El código:

<nav type="pills">
  * [[:inicio|Inicio]]
  * [[pruebas:playground|Zona de pruebas]]
  * Tutoriales
    * [[edu:tutoriales:dokuwiki:00_indice|DokuWiki]]
    * [[edu:tutoriales:linux:00_indice|Linux]]
    * [[edu:tutoriales:maquinas_virtuales:00_indice|Máquinas virtuales]]
  * Club de Cocina
    * [[club:cocina:manolo:00_indice|El Rincón de Manolo]]
    * [[club:cocina:guillermo:00_indice|El Puchero de Guillermo]]
    * [[club:cocina:dorinda:00_indice|Recetas de Dorinda]]
    * [[club:cocina:dietas:00_indice|Dietas]]
</nav>

Muestra:

Nota. Muy semejante al anterior pero los menús desplegados están envueltas en cajas redondeadas sueltas del menú principal.

Nota. En lugar de nav type=“pills” puedes usar pills.

pills - Apiladas. El código:

<nav type="pills" stacked="true">
  * [[:inicio|Inicio]]
  * [[pruebas:playground|Zona de pruebas]]
  * Tutoriales
    * [[edu:tutoriales:dokuwiki:00_indice|DokuWiki]]
    * [[edu:tutoriales:linux:00_indice|Linux]]
    * [[edu:tutoriales:maquinas_virtuales:00_indice|Máquinas virtuales]]
  * Club de Cocina
    * [[club:cocina:manolo:00_indice|El Rincón de Manolo]]
    * [[club:cocina:guillermo:00_indice|El Puchero de Guillermo]]
    * [[club:cocina:dorinda:00_indice|Recetas de Dorinda]]
    * [[club:cocina:dietas:00_indice|Dietas]]
</nav>

Muestra:

pills - Justificadas. El código:

<nav type="pills" justified="true">
  * [[:inicio|Inicio]]
  * [[pruebas:playground|Zona de pruebas]]
  * Tutoriales
    * [[edu:tutoriales:dokuwiki:00_indice|DokuWiki]]
    * [[edu:tutoriales:linux:00_indice|Linux]]
    * [[edu:tutoriales:maquinas_virtuales:00_indice|Máquinas virtuales]]
  * Club de Cocina
    * [[club:cocina:manolo:00_indice|El Rincón de Manolo]]
    * [[club:cocina:guillermo:00_indice|El Puchero de Guillermo]]
    * [[club:cocina:dorinda:00_indice|Recetas de Dorinda]]
    * [[club:cocina:dietas:00_indice|Dietas]]
</nav>

Muestra:

tabs - Justificadas. El código:

<nav type="tabs" justified="true">
  * [[:inicio|Inicio]]
  * [[pruebas:playground|Zona de pruebas]]
  * Tutoriales
    * [[edu:tutoriales:dokuwiki:00_indice|DokuWiki]]
    * [[edu:tutoriales:linux:00_indice|Linux]]
    * [[edu:tutoriales:maquinas_virtuales:00_indice|Máquinas virtuales]]
  * Club de Cocina
    * [[club:cocina:manolo:00_indice|El Rincón de Manolo]]
    * [[club:cocina:guillermo:00_indice|El Puchero de Guillermo]]
    * [[club:cocina:dorinda:00_indice|Recetas de Dorinda]]
    * [[club:cocina:dietas:00_indice|Dietas]]
</nav>

Muestra:

Panel de pestañas. El código:

<tabs>
  * [[#tab-quien|Quienes somos]]
  * [[#tab-contact|Contacto]]

<pane id="tab-quien">
=== Quienes somos ===
Somos una empresa seria, con larga tradición en timar a nuestros clientes. De momento el fisco aún no nos ha pillado en ningún renuncio, lo cual redunda en nuestra fiabilidad a la hora de cometer, perdón, acometer nuestros loables objetivos.
</pane>

<pane id="tab-contact">
=== Contacto ===
Por razones obvias no poseemos domicilio fiscal. No es cuestión de dar facilidades. Ni tampoco tenemos teléfono ni correo electrónico. Pónganse en contacto con nosotros a través del tradicional método del boca a boca. Nosotros le encontraremos.
</pane>

</tabs>

Muestra:

El panel de pestañas y el plugin Include. Utilizar el plugin include con el indicador o flag inline para evitar comportamientos inesperados:

<pane id="tab-bar">
{{page>:wiki:syntax#Tables&inline}}
</pane>

De la documentación del plugin:include: No cerrar o abrir secciones que incluyan una página. Este indicador o flag debería usarse dentro de otros elementos de sintaxis como listas o tables o dentro de la sintaxis de otro plugin.

Nota para TOC. Se sugiere añadir  ~~NOTOC~~ porque el TOC se muestra entre la barra de pestañas y el contenido.

El código:

<panel type="info" title="Características principales" subtitle="Ergonomía" icon="glyphicon glyphicon-edit">
Este aparato posee una cuidada ergonomía, haciéndolo atractivo para situarlo en cualquier lugar de la oficina. A su vez, el nivel de ruido es imperceptible, pudiendo usarse incluso en bibliotecas o en ambientes de trabajo muy silenciosos.
</panel>

Muestra:

El código:

<alert type="success" icon="glyphicon glyphicon-ok" dismiss="true">
** Bien hecho! ** Leíste con éxito este mensaje de alerta importante.
</alert>

<alert type="info" icon="glyphicon glyphicon-info-sign" dismiss="true">
**Aviso!** Esta alerta necesita de su atención, pero no es muy importante.
</alert>

<alert type="warning" icon="glyphicon glyphicon-wrench" dismiss="true">
**Advertencia!** Compruebe los datos del sistema, no parecen estar bien.
</alert>

<alert type="danger" icon="glyphicon glyphicon-minus-sign" dismiss="true">
**Peligro!** Error inminente si no corrige su configuración.
</alert>

Muestra:

El código:

<tooltip title="Esto se lee al acercar el ratón">Acércate</tooltip>, le dijo sin pudor...

Muestra:

Acércate, le dijo sin pudor…

Uso básico. El código:

<grid>

<col xs="6" md="3">
<thumbnail>
{{ wiki:dokuwiki-128.png }}
</thumbnail>
</col>

<col xs="6" md="3">
<thumbnail>
{{ wiki:dokuwiki-128.png }}
</thumbnail>
</col>

<col xs="6" md="3">
<thumbnail>
{{ wiki:dokuwiki-128.png }}
</thumbnail>
</col>

<col xs="6" md="3">
<thumbnail>
{{ wiki:dokuwiki-128.png }}
</thumbnail>
</col>

</grid>

Muestra:

Contenido personalizado. El código:

<grid>
<col xs="6" md="3">
<thumbnail>
{{ wiki:dokuwiki-128.png }}
<caption>
=== DokuWiki ====

//DokuWiki is a simple to use and highly versatile Open Source wiki software that doesn't require a database. It is loved by users for its clean and readable syntax. The ease of maintenance, backup and integration makes it an administrator's favorite. Built in access controls and authentication connectors make DokuWiki especially useful in the enterprise context and the large number of plugins contributed by its vibrant community allow for a broad range of use cases beyond a traditional wiki.//
</caption>
</thumbnail>
</col>

<col xs="6" md="3">
<thumbnail>
{{ wiki:dokuwiki-128.png }}
<caption>
=== DokuWiki ====

//DokuWiki is a simple to use and highly versatile Open Source wiki software that doesn't require a database. It is loved by users for its clean and readable syntax. The ease of maintenance, backup and integration makes it an administrator's favorite. Built in access controls and authentication connectors make DokuWiki especially useful in the enterprise context and the large number of plugins contributed by its vibrant community allow for a broad range of use cases beyond a traditional wiki.//
</caption>
</thumbnail>
</col>

<col xs="6" md="3">
<thumbnail>
{{ wiki:dokuwiki-128.png }}
<caption>
=== DokuWiki ====

//DokuWiki is a simple to use and highly versatile Open Source wiki software that doesn't require a database. It is loved by users for its clean and readable syntax. The ease of maintenance, backup and integration makes it an administrator's favorite. Built in access controls and authentication connectors make DokuWiki especially useful in the enterprise context and the large number of plugins contributed by its vibrant community allow for a broad range of use cases beyond a traditional wiki.//
</caption>
</thumbnail>
</col>

<col xs="6" md="3">
<thumbnail>
{{ wiki:dokuwiki-128.png }}
<caption>
=== DokuWiki ====

//DokuWiki is a simple to use and highly versatile Open Source wiki software that doesn't require a database. It is loved by users for its clean and readable syntax. The ease of maintenance, backup and integration makes it an administrator's favorite. Built in access controls and authentication connectors make DokuWiki especially useful in the enterprise context and the large number of plugins contributed by its vibrant community allow for a broad range of use cases beyond a traditional wiki.//
</caption>
</thumbnail>
</col>

</grid>

Muestra:

DokuWiki

DokuWiki is a simple to use and highly versatile Open Source wiki software that doesn't require a database. It is loved by users for its clean and readable syntax. The ease of maintenance, backup and integration makes it an administrator's favorite. Built in access controls and authentication connectors make DokuWiki especially useful in the enterprise context and the large number of plugins contributed by its vibrant community allow for a broad range of use cases beyond a traditional wiki.

DokuWiki

DokuWiki is a simple to use and highly versatile Open Source wiki software that doesn't require a database. It is loved by users for its clean and readable syntax. The ease of maintenance, backup and integration makes it an administrator's favorite. Built in access controls and authentication connectors make DokuWiki especially useful in the enterprise context and the large number of plugins contributed by its vibrant community allow for a broad range of use cases beyond a traditional wiki.

DokuWiki

DokuWiki is a simple to use and highly versatile Open Source wiki software that doesn't require a database. It is loved by users for its clean and readable syntax. The ease of maintenance, backup and integration makes it an administrator's favorite. Built in access controls and authentication connectors make DokuWiki especially useful in the enterprise context and the large number of plugins contributed by its vibrant community allow for a broad range of use cases beyond a traditional wiki.

DokuWiki

DokuWiki is a simple to use and highly versatile Open Source wiki software that doesn't require a database. It is loved by users for its clean and readable syntax. The ease of maintenance, backup and integration makes it an administrator's favorite. Built in access controls and authentication connectors make DokuWiki especially useful in the enterprise context and the large number of plugins contributed by its vibrant community allow for a broad range of use cases beyond a traditional wiki.

Más información.

Uso básico. El código:

<button>Por defecto</button>
<button type="primary">Primary</button>
<button type="success">Success</button>
<button type="info">Info</button>
<button type="warning">Warning</button>
<button type="danger">Danger</button>
<button type="link">Link</button>

Muestra:

Por defecto Primary Success Info Warning Danger Link

Enlace en el botón. El código:

<button type="success" icon="glyphicon glyphicon-edit">[[:inicio|Inicio]]</button>
<button type="success" size="sm" icon="glyphicon glyphicon-edit">[[:inicio|Inicio]]</button>

Muestra:

Inicio Inicio

Tamaños. El código:

<button type="primary" size="lg">Botón grande</button>
<button type="default" size="lg">Botón grande</button>

<button type="primary">Botón por defecto</button>
<button type="default">Botón por defecto</button>

<button type="primary" size="sm">Botón pequeño</button>
<button type="default" size="sm">Botón pequeño</button>

<button type="primary" size="xs">Botón mini</button>
<button type="default" size="xs">Botón mini</button>

Muestra:

Botón grande Botón grande

Botón por defecto Botón por defecto

Botón pequeño Botón pequeño

Botón mini Botón mini

El código:

<button collapse="registro" type="warning" size="sm">Condiciones</button>
<button collapse="firma" type="success" size="sm">Testigos</button>

<collapse id="registro" collapsed="true">
Las condiciones del contrato difieren de las reales en que la parte contratante de la primera parte contrata con la segunda parte contratante de la primera parte la parte contratante de la segunda parte. Y alguien se pregunta ¿Donde están los testigos?
</collapse>

<collapse id="firma" collapsed="true">
Los testigos afirman haber visto a la parte primera contratante en el bar del barco, junto con la rubia contratante de la primera parte.
</collapse>

Muestra:

Condiciones Testigos

El código:

<accordion>

<panel title="Collapsible Group Item #1" type="success">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</panel>

<panel title="Collapsible Group Item #2" type="info">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</panel>

<panel title="Collapsible Group Item #3" type="warning">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</panel>

</accordion>

Muestra:

Uso básico. El código:

<carousel>
{{:wiki:plato1.jpg?nolink|}}
{{:wiki:plato2.jpg?nolink|}}
{{:wiki:plato3.jpg?nolink|}}
</carousel>

Muestra:

Previous Next

Uso alternativo. El código:

<carousel>
<slide>{{:wiki:plato1.jpg?nolink|}}</slide>
<slide>{{:wiki:plato2.jpg?nolink|}}</slide>
<slide>{{:wiki:plato3.jpg?nolink|}}</slide>
</carousel>

Muestra:

Previous Next

Caption. EL código:

<carousel>
<slide>
{{:wiki:plato1.jpg?nolink|}}
<caption>
=== First slide label ===
Nulla vitae elit libero, a pharetra augue mollis interdum.
</caption>
</slide>
[...]
</carousel>

Muestra:

First slide label

Nulla vitae elit libero, a pharetra augue mollis interdum.

Previous Next

Uso básico. El código:

<callout type="info">
=== ¿Cuál es el componente de llamada? ===
La documentación Bootstrap tiene formas realmente agradables para llamar la atención sobre la información importante, pero por alguna razón estas llamadas no están incluidos en la distribución actual de Bootstrap.

Este plugin incluye la llamada de atención original a partir de la documentación Bootstrap, con varios valores para su parámetro ''type'' (default, success, primary, info, warning, danger) de http://cpratt.co/twitter-bootstrap-callout-css-styles.
</callout>

Muestra:

Otro ejemplo: