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;
}
WordRepo接口中定义了getFirst()
方法