bootstrap代码标签风格

作者: 天天发呆 | 来源:发表于2016-08-24 23:07 被阅读117次

bootstrap代码标签风格
Bootstrap学习文档（二）
2020-06-26
一种简单的且美观表单上传文件的方式
Bootstrap CSS
代码/表格/表单
第五谈：代码与图文
PSR
HTML Guide
Bootstrap 4风格的select2下拉框

1、使用<code></code>表现单行内联代码
2、使用<pre></pre>表现多行代码
3、使用<kbd></kbd>表现用户输入代码

在使用代码时，用户可以根据具体的需求来使用不同的类型：
1、<code> 一般是针对于单个单词或单个句子的代码
2、<pre>: 一般是针对于多行代码（也就是成块的代码）
3、<kbd>: 一般是表示用户要通过键盘输入的内容

示例如下

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>代码</title>
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>

<body>
    code风格：
    <div>Bootstrap的代码风格有三种：<code><code></code>、<code><pre></code>和<code><kbd></code></div>
    pre风格：
    <div>
        <pre>
        <ul>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        </ul>
        </pre>
    </div>
    kbd风格：
    <div>请输入<kbd>ctrl+c</kbd>来复制代码，然后使用<kbd>ctrl+v</kbd>来粘贴代码</div>

</body>
</html>

如图

屏幕快照 2016-08-24 23.05.53.png

大块代码滚动条效果

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

下面是<code>.pre-scrollable</code>实现

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

示例代码

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>代码</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>

<body>
高度超出340px，就会在Y轴出现滚动条
<!--下面是代码任务部分-->
<pre>
<ol class="pre-scrollable">
    <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>
</body>
</html>

效果如下

屏幕快照 2016-08-24 23.13.27.png