正如前面所示,<pre>元素一般用于顯示大塊的代碼,并保證原有格式不變。但有時候代碼太多,而且不想讓其占有太大的頁面篇幅,就想控制代碼塊的大小。Bootstrap也考慮到這一點,你只需要在pre標簽上添加類名“.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行補充代碼,讓代碼塊具有滾動條。
正確代碼如下:
<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 可將課程添加到書簽
舉報