Artículos
Bootstrap

Mostrar código fuente en Bootstrap

10/Ago/2015

Bootstrap nos permite mostrar código fuente dentro de una página web de una forma sencilla. Para poder mostrar código fuente en Bootstrap simplemente tendremos que apoyarnos en el elemento pre.

Lo utilizaremos de la siguiente manera:

Código Fuente</pre>

Aunque el uso es sencillo cuando vayamos a mostrar código fuente en Bootstrap tenemos que tener especial atención si escribimos código fuente que sea HTML. Ya que se mostrará la visualización de los elementos, en vez del texto de los elementos en sí. Para evitar esto deberemos de cambiar los símbolos mayor y menos por las entidades HTML &gt; y &lt; respectivamente.

Así podríamos volcar código fuente HTML de la siguiente forma:

<pre>
  &lt;html&gt;
  &lt;body&gt;
  &lt;h1&gt;Hola Mundo&lt;/h1&gt;
  &lt;/body&gt;
  &lt;/html&gt;
</pre>

Con el lenguaje HTML es recomendable que utilicemos los caracteres especiales como entidades. Aunque puede darse que también tengamos que hacerlo con otros lenguajes que utilicen caracteres especiales.

Además a la hora de mostrar código fuente en Bootstrap, si este es muy grande, podemos acotar su visualización y mostrarlo en una ventana más pequeña mediante un scroll. Para poder conseguirlo deberemos de utilizar la clase "pre-scrollable".

Así codificaremos de la siguiente manera:

Código Fuente</pre>

Por ejemplo podríamos escribir el siguiente código:

import java.applet.Applet;
import java.awt.event.*;
import java.awt.Label;

public class DobleClick extends Applet {

	private static final long serialVersionUID = 1L;
	private Label label1 = null;
	
	public DobleClick() {
		super();
	}

	public void init() {
		label1 = new Label();
		label1.setText("Haz doble click o triple click sobre el applet");
		this.setSize(300, 200);
		this.add(label1, null);
		
		// Añadimos el manejador
		ManejoClicks mC = new ManejoClicks();
	    this.addMouseListener(mC);

	}
	
	class ManejoClicks extends MouseAdapter {
	       public void mouseClicked(MouseEvent evt) {
	         if (evt.getClickCount() == 3) {
	           showStatus ("Se ha producido un triple click");
	         } else if (evt.getClickCount()==2) {
	           showStatus ("Se ha producido un doble click");
	         }
	       }
	}

}</pre>

Veréis que aunque es un código muy grande, la visualización quedará reducida en nuestra web. Y así habremos conseguido mostrar código fuente con Bootstrap.

Código Fuente

Descárgate el código fuente de Mostrar código fuente en Bootstrap
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star

Vídeos sobre Bootstrap

Disfruta también de nuestros artículos sobre Bootstrap en formato vídeo. Aprovecha y suscribete a nuestro canal.

Test Bootstrap

¿Te atreves a probar tus habilidades y conocimiento en Bootstrap con nuestro test?

Test Bootstrap
Suscribir
Notificar de
guest
2 Comentarios
Recientes
Anteriores Más votados
Opiniones integradas
Ver todos los comentarios