bootstrap info-content 限制高度_Bootstrap嵌入代码

最新推荐文章于 2023-03-09 13:54:08 发布

仿佛轻云兮如敝月

最新推荐文章于 2023-03-09 13:54:08 发布

阅读量250

点赞数

文章标签： bootstrap info-content 限制高度

本文链接：https://blog.csdn.net/weixin_27427619/article/details/113627741

版权

基于Bootstrap显示行内嵌入的内联代码和多行代码段的文档和示例。

用<code>包裹内联代码片断，勿忘转义HTML尖括号。
使用<pre>标签可以包裹代码块，同样HTML的尖托号需要进行义，你还可以使用.pre-scrollableCSS样式，实现垂直滚动的效果，它默认提供350px高度限制、Y轴垂直滚动效果。

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
		integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	<title>代码</title>
</head>

<body>
	<p>我要在这段文本里写一个<code>&lt;section&gt;</code>的html标签</p>
	<pre class="pre-scrollable">
		<code>
			&lt;h1&gt;这是一个标题&lt;/h1&gt;

			&lt;p&gt;这是一段文字&lt;/p&gt;
			&lt;p&gt;这些代码放在code里，再放到pre标签里，给pre标签来上一个pre-scrollable的class，就会显示成一个340px高的框，超过后就会出现滚动条&lt;/p&gt;
		</code>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
	</pre>
</body>

</html>

Var变量

推荐使用<var>标签包裹标示变量。

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
		integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	<title>代码</title>
</head>

<body>
	<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
</body>

</html>

用户输入（键盘动作提示）

使用<kbd>标签，标明这是一个键盘输入操作。

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
		integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	<title>代码</title>
</head>

<body>
	<p>想要保存的话，请按下<kbd>ctrl</kbd>+<kbd>s</kbd></p>
</body>

</html>