Bootstrap 3.3.7学习笔记6

最新推荐文章于 2026-01-04 14:23:09 发布

原创最新推荐文章于 2026-01-04 14:23:09 发布 · 488 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

Bootstrap

本文介绍了HTML5中的短语标签及其使用方法，包括斜体和粗体标签、代码显示标签等，并详细解释了如何使用<pre>标签显示代码块及预格式化文本，同时还提供了键盘输入标签<kbd>的样式设置。

Bootstrap 337学习笔记6

Bootstrap 3.3.7学习笔记6

HTML5中的短语标签

短语标签	描述
<em>/<i>，<dfn>	斜体强调, 注意i标签不算短语标签哦！放在这里只是为了体现功能上的一致
<strong>/<b>	粗体强调，注意b标签不算短语标签哦！放在这里只是为了体现功能上的一致
<code>	单行内联代码
<samp>	样本文本,实际bootstrap没给它任何特殊定义
<kbd>	用户输入代码
<var>	定义变量

<pre>标签来显示代码块

pre {
  /*如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容*/
  overflow: auto;
}
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}
pre,
blockquote {
  border: 1px solid #999;
  page-break-inside: avoid;
}
code,
kbd,
pre,
samp {
  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
}
pre
{
  display: block;
  padding: 9.5px;
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.42857143;
  color: #333;
  word-break: break-all;
  word-wrap: break-word;
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  border-radius: 4px;
}

例子：

public static void main(String[] args) {
    System.out.print("Hello Bootstrap3");
}

但是如果代码行数太多了，那我总不能让一个网页上都是代码的部分吧，这样不太合理。所以bootstrap给出了一个class：pre-scrollable

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

其实就是限定代码段高度为340px，超出之后就用滚动条辣！

public static void main(String[] args) {
    System.out.print("Hello Bootstrap3");
}
public static void main(String[] args) {
    System.out.print("Hello Bootstrap3");
}
public static void main(String[] args) {
    System.out.print("Hello Bootstrap3");
}
public static void main(String[] args) {
    System.out.print("Hello Bootstrap3");
}
public static void main(String[] args) {
    System.out.print("Hello Bootstrap3");
}
public static void main(String[] args) {
    System.out.print("Hello Bootstrap3");
}public static void main(String[] args) {
    System.out.print("Hello Bootstrap3");
}

<kbd>表示键盘组合

kbd {
  padding: 2px 4px;
  font-size: 90%;
  color: #fff;
  background-color: #333;
  border-radius: 3px;
  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .25);
          box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .25);
}
kbd kbd {
  padding: 0;
  font-size: 100%;
  font-weight: bold;
  -webkit-box-shadow: none;
          box-shadow: none;
}

ctrl + c is copy;ctrl + cctrl + c nested kbd.

<code>行内代码

code {
  padding: 2px 4px;
  font-size: 90%;
  color: #c7254e;
  background-color: #f9f2f4;
  border-radius: 4px;
}
pre code {
  padding: 0;
  font-size: inherit;
  color: inherit;
  white-space: pre-wrap;
  background-color: transparent;
  border-radius: 0;
}