44 - Tipografía : Código y bloques de código
Veamos ahora otros elementos HTML que Bootstrap 5 redefine el estilo por defecto para mostrar trozos de código fuente.
<code>
Cuando queremos enfatizar un trozo de código de programación en una línea empleamos el elemento <code>:
<!doctype html>
<html>
<head>
<title>Prueba de Bootstrap 5</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
</head>
<body>
<div class="container">
<p>Ejemplo del elemento HTML code</p>
<p>Nuestro primera línea en Basic puede haber sido <code>10 print "Hola Mundo"</code></p>
</div>
</body>
</html>
En el navegador tenemos la siguiente representación:
<pre>
Para definir bloques de código utilizamos el elemento HTML pre, Bootstrap define un estilo particular:
<!doctype html>
<html>
<head>
<title>Prueba de Bootstrap 5</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
</head>
<body>
<div class="container">
<p>Ejemplo del elemento HTML pre</p>
<pre>
10 print "hola mundo"
20 goto 10
</pre>
</div>
</body>
</html>
En el navegador tenemos la siguiente representación:
