Poniéndolo bonito

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 la plantilla Bootstrap3 Template. Y a ello vamos. Giuseppe Di Terlizzi, 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.

Componentes de texto

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.

Lead

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:

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

Text

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:

Texto alineado a la izquierda. Texto alineado al centro. Texto alineado a la derecha. 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. Texto con lineas sin partir (no wrap).

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.

Atributos

Atributo	Valores permitidos	Descripción
type	muted, primary, success, info, warning, danger	Color contextual del texto
background	primary, success, info, warning, danger	Fondo contextual del texto
align	left, right, center, justify, nowrap	Alineación del texto
transform	lowercase, uppercase, capitalize	Transformación del texto
size	medium, xx-small, x-small, small, large, x-large, xx-large, smaller, larger, length (%, em, px, etc.)	Tamaño del texto

Labels

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

Atributos

Atributo	Valor por defecto	Valores permitidos	Descripción
type	info	default, primary, success, info, warning, danger	Type of label
icon	optional	Font icon class (eg. Glyphicon or Font-Awesome)

Image

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:

Atributos

Atributo	Valores permitidos	[Descripción]
shape	rounded, circle, thumbnail	[Image shape]

Jumbotron

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:

Hola Mundo

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

Page heading

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:

Título

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

Grids

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:

.col-sm-6.col-sm-6
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:

.col-xs-12 .col-sm-6 .col-lg-8.col-xs-6 .col-lg-4

Atributos

Atributo	[Descripción]
xs	[Column size (1 ~ 12)]
sm	[Column size (1 ~ 12)]
lg	[Column size (1 ~ 12)]
md	[Column size (1 ~ 12)]

List Group

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:

Cras justo odio

Dapibus ac facilisis in

Morbi leo risus

Porta ac consectetur ac

Vestibulum at eros

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:

Cras justo odio 14

Dapibus ac facilisis in 2

Morbi leo risus 1

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:

Bienvenid@ a tu nueva DokuWiki

Sintaxis de formato

Enlaces DokuWiki

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:

Bienvenid@ a tu nueva DokuWiki
Pequeña introducción a lo que es una Wiki

Sintaxis de formato
Cómo escribir código e información en la wiki

Enlaces DokuWiki
Descargas, información y mucho más

Icons Plugin

El código:

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

Muestra:

Publicaciones

Lista de iconos Fontawesome

https://glyphicons.bootstrapcheatsheets.com/

Más información

Componentes gráficos

Badges

Insignias. El código:

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

Muestra:

Inbox 42

Messages 4

Progress Bar

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:

Atributos

Atributo	Valor por defecto	Valores permitidos	[Descripción]
type	info	success, info, warning, danger	[Tipo de barra de progreso]
animate	optional	true	[Anima la barra]
striped	optional	true	[Añade efecto de rayas a la barra]
showvalue	optional	true	[Visualiza el porcentaje del progreso de la barra]

Wells

Por defecto. El código:

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

Muestra:

Mira, ¡estoy en una caja!

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

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

Muestra:

Mira, ¡estoy en una caja pequeña!

Tamaño grande. El código:

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

Muestra:

Mira, ¡estoy en una caja grande!

Atributos

Atributo	Valor por defecto	Valores permitidos	[Descripción]
size	optional	sm, lg	[Tamaño de la caja]

Navs

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:

Inicio

Zona de pruebas

Tutoriales

DokuWiki

Linux

Máquinas virtuales

Club de Cocina

El Rincón de Manolo

El Puchero de Guillermo

Recetas de Dorinda

Dietas

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:

Inicio

Zona de pruebas

Tutoriales

DokuWiki

Linux

Máquinas virtuales

Club de Cocina

El Rincón de Manolo

El Puchero de Guillermo

Recetas de Dorinda

Dietas

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:

Inicio

Zona de pruebas

Tutoriales

DokuWiki

Linux

Máquinas virtuales

Club de Cocina

El Rincón de Manolo

El Puchero de Guillermo

Recetas de Dorinda

Dietas

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:

Inicio

Zona de pruebas

Tutoriales

DokuWiki

Linux

Máquinas virtuales

Club de Cocina

El Rincón de Manolo

El Puchero de Guillermo

Recetas de Dorinda

Dietas

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:

Inicio

Zona de pruebas

Tutoriales

DokuWiki

Linux

Máquinas virtuales

Club de Cocina

El Rincón de Manolo

El Puchero de Guillermo

Recetas de Dorinda

Dietas

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:

Quienes somos

Contacto

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.

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.

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.

Atributos

Atributo	Valor por defecto	Valores permitidos	[Descripción]
type	pills	tabs, pills	[Type of nav]
stacked	optional	true	[Stacked nav items]
justified	optional	true	[Justify nav items]
fade	optional	true	[Enable fade effect on tabs]

Panels

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:

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.

Atributos

Atributo	Valor por defecto	Valores permitidos	[Descripción]
type	default	default, primary, success, info, warning, danger	[Type of panel]
title	optional	[Title of panel]
subtitle	optional	[Subtitle of panel]
icon	optional	[Font icon class (eg. Glyphicon or Font-Awesome)]
nobody	optional	[Don't add a panel body. Useful to add other particular tags (or tables) inside a panels]

Alerts

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:

Bien hecho! Leíste con éxito este mensaje de alerta importante. Aviso! Esta alerta necesita de su atención, pero no es muy importante. Advertencia! Compruebe los datos del sistema, no parecen estar bien. Peligro! Error inminente si no corrige su configuración.

Tooltips

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…

Thumbnails

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.

Buttons

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

Atributos

Atributo	Valor por defecto	Valores permitidos	[Descripción]
type	default	default, primary, success, info, warning, danger, link	[Type of button]
icon	optional	[Font icon class (eg. Glyphicon or Font-Awesome)]
size	optional	lg, sm, xs	[Grande, pequeño, mini]
collapse	optional	[Target element selector to collapse (see Collapse)]

Collapse

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

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? Los testigos afirman haber visto a la parte primera contratante en el bar del barco, junto con la rubia contratante de la primera parte.

Atributos

Atributo	Valor por defecto	Valores permitidos	[Descripción]
id	[Etiqueta identificadora del elemento colapsado]
collapsed	false	true, false	[Activa/Desactiva el estado colapsado]

Accordion

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:

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.

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.

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.

Carousel

Uso básico. El código:

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

Muestra:

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:

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.

Atributos

Atributo	Tipo	Valor por defecto	[Descripción]
interval	number	5000	[The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.]
pause	string	hover	[Pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave.]
wrap	boolean	true	[Whether the carousel should cycle continuously or have hard stops.]
keyboard	boolean	true	[Whether the carousel should react to keyboard events.]

Callouts

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:

¿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.

Otro ejemplo:

Nota importante

Debemos declarar primero las variables a utilizar en el programa.

Atributos

Atributo	Valor por defecto	Valores permitidos	[Descripción]
type	default	default, primary, success, info, warning, danger	[Type of callout]