卡片 · card-code 代码展示
卡片家族
索引
base
cpanel
crumb
full
page
border
radius
api
artic
namecode
imgs
tips
total
default
box
checkbox
form
form-item
form-inpselect
table
pager
multipled
menubar
mode
menus
tabmenu
code
json
template
tab
slide
paginate
tree
toggle
marquee
timeaxis
waterfall
popup
nav
chatbox
drag
choose
progress
roll
代码展示卡
card-code：head 浅灰底 + 主色标题，body 深色代码区（黑字/替换底色）；标注 code-html / code-js 后由引擎自动初始化，把内容转成带标题的代码框并做 HTML 实体还原。
实时示例
<div class="card card-form">
<div class="card-head">示例</div>
</div>
写法与注意
<div class="card card-code code-html">
<div class="card card-form">...</div>
</div>
| code-html | 标题渲染为「html code」，内容视为 HTML 实体文本 |
| code-js | 标题渲染为「javascript code」 |
| .card-head | 浅灰底（#f6f6f6）+ 主色粗体标题，hover 微动效 |
| .card-body | 代码正文区，word-break + 行高 1.2 |
注意： 展示代码必须把
</>/& 转义为实体，否则会被浏览器直接解析执行；本页全部示例统一用此写法。
KuoqiUI v2.00 · 离线静态文档 · 界面基于 KuoqiUI ·
返回首页