阅读(4.9k) 书签赞(1) 我要纠错

Bootstrap <pre>标签

2018-03-18 17:25 更新

对于多行代码时使用<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>

以上内容是否对您有帮助：

← Bootstrap 弹出框

Bootstrap 进度条 →

写笔记

我要补充

Bootstrap <pre>标签

Scrollable Pre

推荐文章

推荐教程

推荐课程