-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathui_typography.html
490 lines (452 loc) · 23.9 KB
/
ui_typography.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>排版 - bootstrap中文后台管理系统模板</title>
<link rel="icon" href="favicon.ico" type="image/ico">
<meta name="author" content="yinqi">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/materialdesignicons.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body data-logobg="color_8" data-sidebarbg="color_8">
<div class="lyear-layout-web">
<div class="lyear-layout-container">
<!--左侧导航-->
<aside class="lyear-layout-sidebar">
<!-- logo -->
<div id="logo" class="sidebar-header">
<a href="index.html"><img src="images/logo-sidebar.png" title="LightYear" alt="LightYear" /></a>
</div>
<div class="lyear-layout-sidebar-scroll">
<nav class="sidebar-main">
<ul class="nav nav-drawer">
<li class="nav-item"> <a href="index.html"><i class="mdi mdi-home"></i> 后台首页</a> </li>
<li class="nav-item nav-item-has-subnav active open">
<a href="javascript:void(0)"><i class="mdi mdi-palette"></i> UI 元素</a>
<ul class="nav nav-subnav">
<li> <a href="ui_buttons.html">按钮</a> </li>
<li> <a href="ui_cards.html">卡片</a> </li>
<li> <a href="ui_grid.html">格栅</a> </li>
<li> <a href="ui_icons.html">图标</a> </li>
<li> <a href="ui_tables.html">表格</a> </li>
<li> <a href="ui_modals.html">模态框</a> </li>
<li> <a href="ui_tooltips_popover.html">提示 / 弹出框</a> </li>
<li> <a href="ui_alerts.html">警告框</a> </li>
<li> <a href="ui_pagination.html">分页</a> </li>
<li> <a href="ui_progress.html">进度条</a> </li>
<li> <a href="ui_tabs.html">标签页</a> </li>
<li class="active"> <a href="ui_typography.html">排版</a> </li>
<li> <a href="ui_step.html">步骤</a> </li>
<li> <a href="ui_other.html">其他</a> </li>
</ul>
</li>
<li class="nav-item nav-item-has-subnav">
<a href="javascript:void(0)"><i class="mdi mdi-format-align-justify"></i> 表单</a>
<ul class="nav nav-subnav">
<li> <a href="forms_elements.html">基本元素</a> </li>
<li> <a href="forms_radio.html">单选框</a> </li>
<li> <a href="forms_checkbox.html">复选框</a> </li>
<li> <a href="forms_switch.html">开关</a> </li>
</ul>
</li>
<li class="nav-item nav-item-has-subnav">
<a href="javascript:void(0)"><i class="mdi mdi-file-outline"></i> 示例页面</a>
<ul class="nav nav-subnav">
<li> <a href="pages_doc.html">文档列表</a> </li>
<li> <a href="pages_gallery.html">图库列表</a> </li>
<li> <a href="pages_config.html">网站配置</a> </li>
<li> <a href="pages_rabc.html">设置权限</a> </li>
<li> <a href="pages_add_doc.html">新增文档</a> </li>
<li> <a href="pages_guide.html">表单向导</a> </li>
<li> <a href="pages_login.html">登录页面</a> </li>
<li> <a href="pages_error.html">错误页面</a> </li>
</ul>
</li>
<li class="nav-item nav-item-has-subnav">
<a href="javascript:void(0)"><i class="mdi mdi-language-javascript"></i> JS 插件</a>
<ul class="nav nav-subnav">
<li> <a href="js_datepicker.html">日期选取器</a> </li>
<li> <a href="js_sliders.html">滑块</a> </li>
<li> <a href="js_colorpicker.html">选色器</a> </li>
<li> <a href="js_chartjs.html">Chart.js</a> </li>
<li> <a href="js_jconfirm.html">对话框</a> </li>
<li> <a href="js_tags_input.html">标签插件</a> </li>
<li> <a href="js_notify.html">通知消息</a> </li>
</ul>
</li>
</ul>
</nav>
<div class="sidebar-footer">
<p class="copyright">Copyright © 2019. All rights <a href="http://www.bootstrapmb.com/">reserved</a>. </p>
</div>
</div>
</aside>
<!--End 左侧导航-->
<!--头部信息-->
<header class="lyear-layout-header">
<nav class="navbar navbar-default">
<div class="topbar">
<div class="topbar-left">
<div class="lyear-aside-toggler">
<span class="lyear-toggler-bar"></span>
<span class="lyear-toggler-bar"></span>
<span class="lyear-toggler-bar"></span>
</div>
<span class="navbar-page-title"> UI元素 - 排版 </span>
</div>
<ul class="topbar-right">
<li class="dropdown dropdown-profile">
<a href="javascript:void(0)" data-toggle="dropdown">
<img class="img-avatar img-avatar-48 m-r-10" src="images/users/avatar.jpg" alt="管理员" />
<span>管理员 <span class="caret"></span></span>
</a>
<ul class="dropdown-menu dropdown-menu-right">
<li> <a href="pages_profile.html"><i class="mdi mdi-account"></i> 个人信息</a> </li>
<li> <a href="pages_edit_pwd.html"><i class="mdi mdi-lock-outline"></i> 修改密码</a> </li>
<li> <a href="javascript:void(0)"><i class="mdi mdi-delete"></i> 清空缓存</a></li>
<li class="divider"></li>
<li> <a href="pages_login.html"><i class="mdi mdi-logout-variant"></i> 退出登录</a> </li>
</ul>
</li>
<!--切换主题配色-->
<li class="dropdown dropdown-skin">
<span data-toggle="dropdown" class="icon-palette"><i class="mdi mdi-palette"></i></span>
<ul class="dropdown-menu dropdown-menu-right" data-stopPropagation="true">
<li class="drop-title"><p>主题</p></li>
<li class="drop-skin-li clearfix">
<span class="inverse">
<input type="radio" name="site_theme" value="default" id="site_theme_1" checked>
<label for="site_theme_1"></label>
</span>
<span>
<input type="radio" name="site_theme" value="dark" id="site_theme_2">
<label for="site_theme_2"></label>
</span>
<span>
<input type="radio" name="site_theme" value="translucent" id="site_theme_3">
<label for="site_theme_3"></label>
</span>
</li>
<li class="drop-title"><p>LOGO</p></li>
<li class="drop-skin-li clearfix">
<span class="inverse">
<input type="radio" name="logo_bg" value="default" id="logo_bg_1" checked>
<label for="logo_bg_1"></label>
</span>
<span>
<input type="radio" name="logo_bg" value="color_2" id="logo_bg_2">
<label for="logo_bg_2"></label>
</span>
<span>
<input type="radio" name="logo_bg" value="color_3" id="logo_bg_3">
<label for="logo_bg_3"></label>
</span>
<span>
<input type="radio" name="logo_bg" value="color_4" id="logo_bg_4">
<label for="logo_bg_4"></label>
</span>
<span>
<input type="radio" name="logo_bg" value="color_5" id="logo_bg_5">
<label for="logo_bg_5"></label>
</span>
<span>
<input type="radio" name="logo_bg" value="color_6" id="logo_bg_6">
<label for="logo_bg_6"></label>
</span>
<span>
<input type="radio" name="logo_bg" value="color_7" id="logo_bg_7">
<label for="logo_bg_7"></label>
</span>
<span>
<input type="radio" name="logo_bg" value="color_8" id="logo_bg_8">
<label for="logo_bg_8"></label>
</span>
</li>
<li class="drop-title"><p>头部</p></li>
<li class="drop-skin-li clearfix">
<span class="inverse">
<input type="radio" name="header_bg" value="default" id="header_bg_1" checked>
<label for="header_bg_1"></label>
</span>
<span>
<input type="radio" name="header_bg" value="color_2" id="header_bg_2">
<label for="header_bg_2"></label>
</span>
<span>
<input type="radio" name="header_bg" value="color_3" id="header_bg_3">
<label for="header_bg_3"></label>
</span>
<span>
<input type="radio" name="header_bg" value="color_4" id="header_bg_4">
<label for="header_bg_4"></label>
</span>
<span>
<input type="radio" name="header_bg" value="color_5" id="header_bg_5">
<label for="header_bg_5"></label>
</span>
<span>
<input type="radio" name="header_bg" value="color_6" id="header_bg_6">
<label for="header_bg_6"></label>
</span>
<span>
<input type="radio" name="header_bg" value="color_7" id="header_bg_7">
<label for="header_bg_7"></label>
</span>
<span>
<input type="radio" name="header_bg" value="color_8" id="header_bg_8">
<label for="header_bg_8"></label>
</span>
</li>
<li class="drop-title"><p>侧边栏</p></li>
<li class="drop-skin-li clearfix">
<span class="inverse">
<input type="radio" name="sidebar_bg" value="default" id="sidebar_bg_1" checked>
<label for="sidebar_bg_1"></label>
</span>
<span>
<input type="radio" name="sidebar_bg" value="color_2" id="sidebar_bg_2">
<label for="sidebar_bg_2"></label>
</span>
<span>
<input type="radio" name="sidebar_bg" value="color_3" id="sidebar_bg_3">
<label for="sidebar_bg_3"></label>
</span>
<span>
<input type="radio" name="sidebar_bg" value="color_4" id="sidebar_bg_4">
<label for="sidebar_bg_4"></label>
</span>
<span>
<input type="radio" name="sidebar_bg" value="color_5" id="sidebar_bg_5">
<label for="sidebar_bg_5"></label>
</span>
<span>
<input type="radio" name="sidebar_bg" value="color_6" id="sidebar_bg_6">
<label for="sidebar_bg_6"></label>
</span>
<span>
<input type="radio" name="sidebar_bg" value="color_7" id="sidebar_bg_7">
<label for="sidebar_bg_7"></label>
</span>
<span>
<input type="radio" name="sidebar_bg" value="color_8" id="sidebar_bg_8">
<label for="sidebar_bg_8"></label>
</span>
</li>
</ul>
</li>
<!--切换主题配色-->
</ul>
</div>
</nav>
</header>
<!--End 头部信息-->
<!--页面主要内容-->
<main class="lyear-layout-content">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-header"><h4>标题标签</h4></div>
<div class="card-body">
<h1>h1. 第一回 北汉主屏逐忠臣 呼延赞激烈报仇</h1>
<h2>h2. 第二回 李建忠力救义士 呼延赞梦神教武</h2>
<h3>h3. 第三回 金头娘征场斗艺 高怀德大战潞州</h3>
<h4>h4. 第四回 讲和议杨业回兵 迎銮驾豪杰施能</h4>
<h5>h5. 第五回 宋太祖遗嘱后事 潘仁美计逐英雄</h5>
<h6>h6. 第六回 潘仁美奉诏宣召 呼延赞单骑救驾</h6>
<div class="divider text-uppercase">Small 文本</div>
<p>在标题内还可以包含 <code><small></code> 标签或赋予 <code>.small</code> 类的元素，可以用来标记副标题。</p>
<div class="bg-lightest p-10">
<h3>h3. 第三回 金头娘征场斗艺 高怀德大战潞州 <small>高怀德</small></h3>
<h4>h4. 第四回 讲和议杨业回兵 迎銮驾豪杰施能 <small>杨业</small></h4>
<h5>h5. 第五回 宋太祖遗嘱后事 潘仁美计逐英雄 <small>潘仁美</small></h5>
</div>
</div>
</div>
</div>
</div>
<!-- .row -->
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-header"><h4>文本样式</h4></div>
<div class="card-body">
<h5>段落</h5>
<div class="row">
<div class="col-md-4"> <code><p class="lead"></code>
<p class="lead">笑江湖浪迹十年游，空负少年头。对铜驼巷陌，吟情渺渺，心事悠悠！酒冷诗残梦断，南国正清秋。把剑凄然望，无处招归舟。</p>
</div>
<div class="col-md-4">
<code><p></code>
<p>明旧天涯路远，问谁留楚佩，弄影中洲？数英雄儿女，俯仰古今愁。难消受灯昏罗帐，昙花一现恨难休！飘零惯，金戈铁马，拼葬荒丘！</p>
</div>
<div class="col-md-4">
<code><p class="small"></code>
<p class="small">南国清秋，一轮皓月，将近中天。度时分，已是万籁俱寂，只杭州总兵的府第里，还是笑语喧喧，喜气洋洋。</p>
</div>
</div>
<hr>
<h5>内嵌文本元素</h5>
<dl class="row">
<dt class="col-3 col-md-2"><code><mark></code></dt>
<dd class="col-9 col-md-10">您可以使用 mark 标签 to <mark>highlight</mark>text.</dd>
<dt class="col-3 col-md-2"><code><del></code></dt>
<dd class="col-9 col-md-10"><del>这行文本将被视为已删除文本。</del></dd>
<dt class="col-3 col-md-2"><code><s></code></dt>
<dd class="col-9 col-md-10"><s>这一行文字的意思是不再准确。</s></dd>
<dt class="col-3 col-md-2"><code><ins></code></dt>
<dd class="col-9 col-md-10"><ins>这一行文本将被视为对文档的补充。</ins></dd>
<dt class="col-3 col-md-2"><code><u></code></dt>
<dd class="col-9 col-md-10"><u>这行文本将呈现为带下划线。</u></dd>
<dt class="col-3 col-md-2"><code><small></code></dt>
<dd class="col-9 col-md-10"><small>这一行文字应被视为小一号字体。</small></dd>
<dt class="col-3 col-md-2"><code><strong></code></dt>
<dd class="col-9 col-md-10"><strong>此行呈现为粗体文本。</strong></dd>
<dt class="col-3 col-md-2"><code><em></code></dt>
<dd class="col-9 col-md-10"><em>此行呈现为斜体文本。</em></dd>
</dl>
<hr>
<h5>文本对齐</h5>
<p class="text-left">荒山隐士迎佳客 美酒甜言惑少年</p>
<p class="text-center">崎岖世路湛嗟叹 怅悯情怀可奈何</p>
<p class="text-right">疑梦疑真谨异丐 半忧半喜救佳人</p>
<p class="text-justify">神功难测惊高弟 祸患潜埋闯喜筵</p>
<p class="text-nowrap">重来踪迹从何觅 出处恩仇忍细论</p>
<hr>
<div class="row">
<div class="col-md-6">
<h5>大小写</h5>
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>
</div>
<div class="col-md-6">
<h5>缩略语</h5>
<p>An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.</p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr> is the best thing since sliced bread.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- .row -->
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-header"><h4>列表样式</h4></div>
<div class="card-body">
<div class="row">
<div class="col-sm-4 col-xs-12">
<p><code><ul></code></p>
<ul>
<li>豪士惊心谈恶斗 荒山动魄遇穷儒</li>
<li>锦帐低垂人已杳 琼浆难得客归来</li>
<li>明珠尽散滋疑虑 红粉何尝是祸胎</li>
<li>谁施妙手空空技 哪识芳心惘惘情</li>
</ul>
</div>
<div class="col-sm-4 col-xs-12">
<p><code><ol></code></p>
<ol>
<li>豪士惊心谈恶斗 荒山动魄遇穷儒</li>
<li>锦帐低垂人已杳 琼浆难得客归来</li>
<li>明珠尽散滋疑虑 红粉何尝是祸胎</li>
<li>谁施妙手空空技 哪识芳心惘惘情</li>
</ol>
</div>
<div class="col-sm-4 col-xs-12">
<p><code><ul class="list-unstyled"></code></p>
<ul class="list-unstyled">
<li>豪士惊心谈恶斗 荒山动魄遇穷儒</li>
<li>锦帐低垂人已杳 琼浆难得客归来</li>
<li>明珠尽散滋疑虑 红粉何尝是祸胎</li>
<li>谁施妙手空空技 哪识芳心惘惘情</li>
</ul>
</div>
<div class="col-lg-12">
<hr>
<p><code><ul class="list-inline"></code></p>
<ul class="list-inline">
<li class="list-inline-item">异宝轻抛真侠士</li>
<li class="list-inline-item">荒林谈笑救佳人</li>
<li class="list-inline-item">中伏何堪作楚囚</li>
</ul>
</div>
</div>
<!-- .row -->
</div>
</div>
</div>
</div>
<!-- .row -->
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-header"><h4>描述</h4></div>
<div class="card-body">
<dl class="row">
<dt class="col-sm-3">《侠骨丹心》</dt>
<dd class="col-sm-9">道尽“独行长剑一杯酒，孤客高楼万里情；侠骨柔情现正义，青天碧海映丹心。</dd>
<dt class="col-sm-3">《云海玉弓缘》</dt>
<dd class="col-sm-9">
<p>主要讲述了清朝中期，江湖浪子金世遗的传奇经历和与厉胜男、谷之华之间的爱恨情仇故事。</p>
<p>是梁氏武侠天山系列最出名的两部小说之一，主要是厉胜男向魔头孟神通复仇并借此成为另一个“女魔头”的故事。</p>
</dd>
<dt class="col-sm-3">《冰河洗剑录》</dt>
<dd class="col-sm-9">该小说讲述了江南与邹绛霞的孩子江海天的感情和江湖故事。</dd>
<dt class="col-sm-3 text-truncate">《白发魔女传》</dt>
<dd class="col-sm-9">叙述的是明万历四十三年凉秋，云贵总督卓仲廉卸任归故乡陕北，途经川陕边境时被劫富济贫的绿林女大盗“玉罗刹”练霓裳劫去大部分财产。</dd>
<dt class="col-sm-3">《萍踪侠影录》</dt>
<dd class="col-sm-9">
<dl class="row">
<dt class="col-sm-4">以明代土木堡之变为背景</dt>
<dd class="col-sm-8">交织成一个豪侠浪漫美好绝伦的传奇。</dd>
</dl>
</dd>
</dl>
</div>
</div>
</div>
</div>
<!-- .row -->
<div class="row">
<div class="col-md-6">
<div class="card">
<div class="card-header"><h4>引用</h4></div>
<div class="card-body">
<blockquote class="blockquote">
<p>这是一个美妙的夜晚，全身只有一种感觉，每个毛孔都浸润着喜悦。作为大自然的一部分，我在其中任意来去。</p>
<footer>亨利·大卫·梭罗 <cite title="《瓦尔登湖》">《瓦尔登湖》</cite></footer>
</blockquote>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card">
<div class="card-header"><h4>地址</h4></div>
<div class="card-body">
<address>
<strong>Twitter公司</strong><br>
市场街1355#，900号<br>
旧金山，CA 94103<br>
<abbr title="电话">Tel:</abbr> (123) 456-7890
</address>
</div>
</div>
</div>
</div>
<!-- .row -->
</div>
</main>
<!--End 页面主要内容-->
</div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/perfect-scrollbar.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>