写给后台程序员看的Bootstrap开发教程(06)——代码


版权声明

  • 本文原创作者:谷哥的小弟
  • 作者博客地址:http://blog.csdn.net/lfdfhl

在这里插入图片描述

Bootstrap提供了几个与代码相关的标签便于代码的显示。

内联代码

通过 <code> 标签包裹内联样式的代码片段。

用户输入

通过 <kbd> 标签标记用户通过键盘输入的内容。

代码块

多行代码可以使用 <pre> 标签。但是要注意:为了正确的展示代码,注意将尖括号做转义处理。

变量

通过 <var> 标签标记变量。

程序输出

通过 <samp> 标签来标记程序输出的内容。

代码案例

<!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>

在这里插入图片描述
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/lfdfhl/article/details/127504296
今日推荐