Bootstrap <pre>标签

对于多行代码时使用<pre>标签。确保在代码中避开所有尖括号以正确呈现。

<!DOCTYPE HTML>
<html> 
<head> 
<link href="//www.w3cschool.cn/style/bootstrap.min.css" rel="stylesheet">
</head>
<body style="margin:20px;">

<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>
        
</body>
</html>

Scrollable Pre

你可以选择添加 .pre-scrollable类，它将设置最大高度为350像素的y轴滚动条。

<!DOCTYPE HTML>
<html> 
<head> 
<link href="//www.w3cschool.cn/style/bootstrap.min.css" rel="stylesheet">
</head>
<body style="margin:20px;">

<pre class="pre-scrollable">
&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;Sample text here...&lt;/p&gt;
</pre>
        
</body>
</html>

w3cschool 编程狮，随时随地学编程

Bootstrap <pre>标签

Scrollable Pre

Bootstrap 介绍

Bootstrap 网格

Bootstrap 按钮

Bootstrap 表单

Bootstrap 控件