正如前面所示,<pre>元素一般用于顯示大塊的代碼,并保證原有格式不變。但有時候代碼太多,而且不想讓其占有太大的頁面篇幅,就想控制代碼塊的大小。Bootstrap也考慮到這一點,你只需要在pre標(biāo)簽上添加類名“.pre-scrollable”,就可以控制代碼塊區(qū)域最大高度為340px,一旦超出這個高度,就會在Y軸出現(xiàn)滾動條。
/*源碼請查看bootstrap.css第731行~第734行*/
.pre-scrollable {
max-height: 340px;
overflow-y: scroll;
}
友情提示:如果您了解LESS或Sass這樣的CSS預(yù)定定義處理器,你完全可以通過code.less或者_code.scss文件修改樣式,然后重新編譯,你就可以得到屬于自己的代碼樣式風(fēng)格。
我也來試試:完成下面任務(wù)
在右側(cè)代碼編輯器的第12行補(bǔ)充代碼,讓代碼塊具有滾動條。
正確代碼如下:
<pre class="pre-scrollable">
<ol>
<li>....</li>
<li>....</li>
<li>....</li>
<li>....</li>
<li>....</li>
<li>....</li>
<li>....</li>
<li>....</li>
<li>....</li>
<li>....</li>
<li>....</li>
<li>....</li>
<li>....</li>
<li>....</li>
</ol>
</pre>
請驗證,完成請求
由于請求次數(shù)過多,請先驗證,完成再次請求
打開微信掃碼自動綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報