代码（二），玩转Bootstrap（基础）教程-慕课网

代码（二）

正如前面所示，<pre>元素一般用于显示大块的代码，并保证原有格式不变。但有时候代码太多，而且不想让其占有太大的页面篇幅，就想控制代码块的大小。Bootstrap也考虑到这一点，你只需要在pre标签上添加类名“.pre-scrollable”，就可以控制代码块区域最大高度为340px，一旦超出这个高度，就会在Y轴出现滚动条。
/*源码请查看bootstrap.css第731行~第734行*/

.pre-scrollable {
max-height: 340px;
overflow-y: scroll;
}

友情提示：如果您了解LESS或Sass这样的CSS预定定义处理器，你完全可以通过code.less或者_code.scss文件修改样式，然后重新编译，你就可以得到属于自己的代码样式风格。

任务

我也来试试：完成下面任务

在右侧代码编辑器的第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>

问答
评论
笔记
代码

全部精华我要发布

可以滑动，但是没滚动条啊

+ 我来回答回答最高可+2积分

3 回答 1516 浏览

2020-12-17

Less和Sass这两个怎么使用

已采纳回答 / 慕运维8076518

在你的项目中引入LESS很简单：下载less.js;创建一个文件来放你的样式，比如style.less;添加以下代码到你的HTML的<head>中:<link rel="stylesheet/less" type="text/css" href="styles.less"><script src="less.js" type="text/javascript"></script>关于变量在LESS和Sass中的唯一区别就是，LESS用@，...

3 回答 1225 浏览

2022-07-06

为什么这节里的pre标签内的ul和li标签使用了<> 上一节红字写了，不管哪种代码风格，在其中都要将<>转为对应的硬编码&XX；格式的，为什么这节里没有转呢

已采纳回答 / leov

pre就是为了尽量保证你写的代码格局跟显示出来的一样

3 回答 1140 浏览

2017-06-05

为什么<pre>中的<li>垂直间距这么大？

最新回答 / 不知不觉后知后觉嗯

这是bootstrap给<li>设置的样式，有margin，就那么大了

3 回答 1125 浏览

2017-02-20

pre标签里的行高

最赞回答 / 幻影af

而且对于<pre>代码块风格，标签前面留多少个空格，在显示效果中就会留多少个空格

6 回答 5161 浏览

2019-04-03

max-height和height有什么区别啊？

已采纳回答 / 胖小高

max-height就是最大的高度。height就是把高度固定了。。。比如你一个东西不想超出的时候一定高度，但是可以小于的话，就是最大高度。。。比如一个高度固定的话，就用固定高度咯

1 回答 3259 浏览

2016-08-23

为什么这节里的pre标签内的ul和li标签使用了<>

最赞回答 / dlnrszk

如果不转为硬编码浏览器会自动将他们当作标签正常解析。而<code><pre><kbd>里的内容是不想要被解析，要完整呈现的。而这一节里只是为了呈现overflow以后的滚动条效果，所以没有转码。

1 回答 981 浏览

2016-08-23

<pre>内的“<>”不是要用硬编码代替的吗？

已采纳回答 / Perona

不用，<pre> 标签的主要作用:预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。预格式化，就是保留文字在源代码中的格式，页面中显示的和源代码中的效果完全一致。浏览器再显示其中的内容时，会完全按照其真正的文本格式来显示，例如，原封不动地保留文档中的空白、缩进、字号，行距、字体等。

2 回答 1310 浏览

2016-12-25

关于bootstrap众多标签的问题

最赞回答 / hentai王

我可以复制粘贴给你，但是那样没有意思了，我是新手目前看来，bootstrap让网页在电脑上和手机上都能酷炫显示出来又简单易上手的框架，但是吸引我去学的不是这个，而是我华科大学同学花了半个月学完bootstrap+一些其他进阶的东西再做了个网页（类似于手机APP的那种UI）去找实习然后光实习7000一个月。个人拙见，如果你要做大师，这个自然一定要掌握，如果不做大手子，学好这个也能在几年内混口饭吃。纯属胡扯，如果说错了当我啥也没说。

3 回答 1380 浏览

2022-08-08