章节
问答
课签
笔记
评论
占位
占位

代码(一)

本节内容相对来说比较简单,一般在个人博客上使用的较为频繁,用于显示代码的风格。在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行输入正确代码,实现下图效果:

 

?不会了怎么办

参考代码:

<p>请使用<kbd>ctrl+x</kbd>复制代码,然后使用<kbd>ctrl+shift+v</kbd>将复制的代码粘贴到需要的地方。</p>

 

 

||
1
2
<!DOCTYPE HTML>
<html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
提交
重置代码
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

收藏课程后,能更快找到我哦~

使用 Ctrl+D 可将课程添加到书签

邀请您关注公众号
关注后,及时获悉本课程动态

举报

0/150
提交
取消
全部 精华 我要发布

已采纳回答 / killboner
在 HTML 中,某些字符是预留的。 低版本的IE上不能使用小于号(<)和大于号(>),这是因为浏览器会误认为它们是标签。 如果希望正确地显示预留字符,我们必须在 HTML 源代码中使用字符实体如需显示小于号,我们最好这样写:&lt; 或 &#60; 

已采纳回答 / 慕函数4643640
<pre style="height: 100px;width: 300px"></pre>

最赞回答 / qq_热_0
给用户的感觉很好

最新回答 / 白银之手_
这个网页要是用手机设备打开,应该就能看出效果

+ 我来回答 回答最高可+2积分

已采纳回答 / qq_意_1
他这个系统就有点问题,或者你把代码给我,我帮你看看

最赞回答 / qq_不要放弃_0
非标签一部分的符号以编码表示,表单内包含以下符号也必须用编码表示< 以 &lt; 表示> 以 &gt; 表示& 以 &amp; 表示程式中的连结 & 也要改用 &amp;错误 <a href="foo.cgi?chapter=1&ion=2">正确 <a href="foo.cgi?chapter=1&amp;ion=2">

最新回答 / 慕UI5360626
博客上线?,租一个服务器linux系统的 搭建apache+php+mysql 俗称lamp,下载wordpress,解压缩到网站目录一般文件夹www中。在自己电脑上登陆网站后台,设置账号密码,搞好之后,就是设置主题。可以自己写一个主题。上传上去,前提你得懂一点php与前端交互的东西。

最新回答 / a丫头a
我觉得,其实就是外形不同,tab是整体为白色,底部有线,活跃按钮显示在框里。pills是活跃按钮底色变为蓝色,其他为白色。面包屑导航活跃按钮为灰色,其他为蓝色,按钮间以/分割

最新回答 / qq_梦里_0
直接写在反馈意见里面。还要上图

最新回答 / MrChOW
不同的标签,都不同的显示效果<pre></pre> ,<kbd></kbd>,<code></code>,
全部 我要发布
最热 最新
只看我的

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

账号登录 验证码登录

遇到问题
忘记密码

代码语言