Bootstrap <pre>標簽

2018-03-18 17:25 更新

對于多行代碼時使用<pre>標簽。確保在代碼中避開所有尖括號以正確呈現(xiàn)。

<!DOCTYPE HTML>
<html> 
<head> 
<link href="//www.o2fo.com/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.o2fo.com/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>

以上內容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號