Bootstrap development tutorial written for background programmers (06) - code


Copyright Notice

  • The original author of this article: Brother Gu’s younger brother
  • Author blog address: http://blog.csdn.net/lfdfhl

insert image description here

Bootstrap provides several code-related tags to facilitate the display of code.

inline code

<code>Wrap inline-style code snippets with tags.

user input

Use <kbd>the tag to mark user input via the keyboard.

code block

Multiple lines of code can use <pre>the tag. But be careful: in order to display the code correctly, be careful to escape the angle brackets.

variable

Variables are marked with <var>tags.

program output

Labels are used <samp>to mark the output of the program.

code example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>代码</title>
    <!--移动设备优先,即获得更好的响应式支持-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--引入Bootstrap的css文件-->
    <link rel="stylesheet" href="../Bootstrap/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <!--code-->
        <p><code>System.out.println("hello world");</code></p>
        <p><code>&lt;System.out.println("hello world")&gt;</code></p>
        <br>

        <!--kbd-->
        To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
        To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
        <br>

        <!--pre-->
        <p>
            <pre>
                public static void main(String[] args){ <br>
                    System.out.println("hello world"); <br>
                }
            </pre>
            <pre>&lt;p&gt;This is your code...&lt;/p&gt;</pre>
        </p>
        <br>
        <!--var-->
        <var>y</var> = <var>m</var><var>x</var> + <var>b</var>
        <br>

        <!--samp-->
        <samp>This text is meant to be treated as sample output from a computer program.</samp>
        <br>
    </div>
</body>
</html>

insert image description here
insert image description here

Guess you like

Origin blog.csdn.net/lfdfhl/article/details/127504296