前往小程序,Get更优阅读体验!
立即前往
发布
社区首页 >专栏 >【Bootstrap】004-全局样式:代码

【Bootstrap】004-全局样式:代码

作者头像
訾博ZiBo
发布2025-01-06 15:46:52
发布2025-01-06 15:46:52
620
举报
文章被收录于专栏:全栈开发工程师

一、内联代码

1、说明

通过 <code> 标签包裹内联样式的代码片段;

2、演示

代码演示:
代码语言:javascript
复制
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
		<title></title>
		<!-- 引入bootstrap -->
		<link rel="stylesheet" href="../css/bootstrap.min.css" />
	</head>
	<body>
		For example, <code>&lt;section&gt;</code> should be wrapped as inline.
	</body>
</html>
运行结果:

二、用户输入

1、说明

通过 <kbd> 标签标记用户通过键盘输入的内容;

2、演示

代码演示:
代码语言:javascript
复制
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
		<title></title>
		<!-- 引入bootstrap -->
		<link rel="stylesheet" href="../css/bootstrap.min.css" />
	</head>
	<body>
		To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
		To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
	</body>
</html>
运行结果:

三、代码块

1、说明

多行代码可以使用 <pre> 标签。为了正确的展示代码,注意将尖括号做转义处理;

还可以使用 .pre-scrollable 类,其作用是设置 max-height 为 350px ,并在垂直方向展示滚动条;

2、演示

代码演示:
代码语言:javascript
复制
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
		<title></title>
		<!-- 引入bootstrap -->
		<link rel="stylesheet" href="../css/bootstrap.min.css" />
	</head>
	<body>
		<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>
	</body>
</html>
运行结果:

四、变量

1、说明

通过 <var> 标签标记变量;

2、演示

代码演示:
代码语言:javascript
复制
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
		<title></title>
		<!-- 引入bootstrap -->
		<link rel="stylesheet" href="../css/bootstrap.min.css" />
	</head>
	<body>
		<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
	</body>
</html>
运行结果:

五、程序输出

1、说明

通过 <samp> 标签来标记程序输出的内容;

2、演示

代码演示:
代码语言:javascript
复制
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
		<title></title>
		<!-- 引入bootstrap -->
		<link rel="stylesheet" href="../css/bootstrap.min.css" />
	</head>
	<body>
		<samp>This text is meant to be treated as sample output from a computer program.</samp>
	</body>
</html>
运行结果:
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2025-01-06,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、内联代码
    • 1、说明
      • 2、演示
        • 代码演示:
        • 运行结果:
    • 二、用户输入
      • 1、说明
        • 2、演示
          • 代码演示:
          • 运行结果:
      • 三、代码块
        • 1、说明
          • 2、演示
            • 代码演示:
            • 运行结果:
        • 四、变量
          • 1、说明
            • 2、演示
              • 代码演示:
              • 运行结果:
          • 五、程序输出
            • 1、说明
              • 2、演示
                • 代码演示:
                • 运行结果:
            领券
            问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档