2-15 代码(一)
本节编程练习不计算学习进度,请电脑登录imooc.com操作

代码(一)

本节内容相对来说比较简单,一般在个人博客上使用的较为频繁,用于显示代码的风格。在Bootstrap主要提供了三种代码风格
1、使用<code></code>来显示单行内联代码
2、使用<pre></pre>来显示多行块代码
3、使用<kbd></kbd>来显示用户输入代码

预编译版本的Bootstrap将代码的样式单独提取出来:
1、LESS版本,请查阅code.less文件
2、Sass版本,请查阅_code.scss文件
编译出来的CSS代码请查阅bootstrap.css文件第688行~第730行,由于代码太长,此处不一一列举。

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

虽然不同的类型风格不一样,但其使用方法是类似的。
code风格:

<div>Bootstrap的代码风格有三种:
  <code>&lt;code&gt;</code>
  <code>&lt;pre&gt;</code>
  <code>&lt;kbd&gt;</code>
</div>

pre风格:

<div>
<pre>
&lt;ul&gt;
&lt;li&gt;...&lt;/li&gt;
&lt;li&gt;...&lt;/li&gt;
&lt;li&gt;...&lt;/li&gt;
&lt;/ul&gt;
</pre>
</div>

kbd风格:

<div>请输入<kbd>ctrl+c</kbd>来复制代码,然后使用<kbd>ctrl+v</kbd>来粘贴代码</div>

不管使用哪种代码风格,在代码中碰到小于号(<)要使用硬编码&lt;”来替代,大于号(>)使用“&gt;”来替代。而且对于<pre>代码块风格,标签前面留多少个空格,在显示效果中就会留多少个空格。建议在编写HTML标签时,就控制好,例如查看右侧代码编辑器上的15-19行。

 

任务

我也来试试:完成下面任务

在右侧代码编辑器第28行输入正确代码,实现下图效果:

 

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>代码</title>
  6. <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
  7. </head>
  8.  
  9. <body>
  10. code风格:
  11. <div>Bootstrap的代码风格有三种:<code>&lt;code&gt;</code><code>&lt;pre&gt;</code><code>&lt;kbd&gt;</code></div>
  12. pre风格:
  13. <div>
  14. <pre>
  15. &lt;ul&gt;
  16. &lt;li&gt;...&lt;/li&gt;
  17. &lt;li&gt;...&lt;/li&gt;
  18. &lt;li&gt;...&lt;/li&gt;
  19. &lt;/ul&gt;
  20. </pre>
  21. </div>
  22. kbd风格:
  23. <div>请输入<kbd>ctrl+c</kbd>来复制代码,然后使用<kbd>ctrl+v</kbd>来粘贴代码</div>
  24.  
  25.  
  26. <!--下面是代码任务部分-->
  27.  
  28. <p>请使用ctrl+x复制代码,然后使用ctrl+shift+v将复制的代码粘贴到需要的地方。</p>
  29.  
  30. </body>
  31. </html>
下一节