¿Cómo mostrar código con Bootstrap?

Para mostrar el código en nuestra página web, bootstrap tiene algunas etiquetas que se pueden usar para mostrar el código.

Método 1: Código en línea usando la etiqueta <code> para mostrar el código en línea. La etiqueta <code> envuelve un fragmento de código en línea. El código en línea debe estar envuelto en <code>
Note <> < >

Sintaxis:

<code>
    <!--inline code goes here-->
</code>

Método 2: bloque de código usando la etiqueta <pre> para mostrar el código como un elemento de bloque independiente. Esta etiqueta también se usa cuando queremos mostrar varias líneas de código. El código multilínea debe estar envuelto en <pre>

Sintaxis:

<pre>
    <!-- code block goes here -->
</pre>

Guía paso a paso para mostrar código con Bootstrap:

Paso 1: Incluya Bootstrap y jQuery CDN en la etiqueta <head> antes que todas las demás hojas de estilo para cargar nuestro CSS.

<enlace rel=”hoja de estilo” href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css”>
<script src=”https://ajax.googleapis.com/ ajax/libs/jquery/3.5.1/jquery.min.js”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/ popper.min.js”></script>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js”></script>

Paso 2: agregue la etiqueta <code> para mostrar el código en línea y la etiqueta <pre> para mostrar el bloque de código.

<code>&lt;html&gt;&lt;/html&gt;</code> are 
wrapped as an inline elements.
      
<pre>
    &lt;head&gt;
        &lt;title&gt;
            GeeksforGeeks Bootstrap Code Example
        &lt;/title&gt;
    &lt;/head&gt;
</pre>

Ejemplo:

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>Bootstrap Code Block Example</title>
  
    <!--Include latest bootstrap, CSS, jQuery CDN-->
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src=
    "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js">
    </script>
</head>
  
<body>
  
    <p>
        <!-- Include <code> tag for inline code -->
        <code><html></html></code> is 
        wrapped as an inline element.
    </p>
  
  
    <p>
        To display code as standalone block 
        element we use <pre> tag as:
  
        <!-- Include <pre> tag for multiple 
            lines of code -->
        <pre>
            <head>
                <title>
                    GeeksforGeeks Bootstrap Code Example
                </title>
            </head>
        </pre>
    </p>
</body>
  
</html>

Producción:

Publicación traducida automáticamente

Artículo escrito por vrushaket y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

HTML

Deja una respuesta Cancelar la respuesta