lyear_ui_typography.html 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239
  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
  6. <title>排版 - 光年(Light Year Admin)后台管理系统模板</title>
  7. <link rel="icon" href="favicon.ico" type="image/ico">
  8. <meta name="keywords" content="LightYear,光年,后台模板,后台管理系统,光年HTML模板">
  9. <meta name="description" content="LightYear是一个基于Bootstrap v3.3.7的后台管理系统的HTML模板。">
  10. <meta name="author" content="yinqi">
  11. <link href="css/bootstrap.min.css" rel="stylesheet">
  12. <link href="css/materialdesignicons.min.css" rel="stylesheet">
  13. <link href="css/style.min.css" rel="stylesheet">
  14. </head>
  15. <body>
  16. <div class="container-fluid p-t-15">
  17. <div class="row">
  18. <div class="col-lg-12">
  19. <div class="card">
  20. <div class="card-header"><h4>标题标签</h4></div>
  21. <div class="card-body">
  22. <h1>h1. 第一回 北汉主屏逐忠臣 呼延赞激烈报仇</h1>
  23. <h2>h2. 第二回 李建忠力救义士 呼延赞梦神教武</h2>
  24. <h3>h3. 第三回 金头娘征场斗艺 高怀德大战潞州</h3>
  25. <h4>h4. 第四回 讲和议杨业回兵 迎銮驾豪杰施能</h4>
  26. <h5>h5. 第五回 宋太祖遗嘱后事 潘仁美计逐英雄</h5>
  27. <h6>h6. 第六回 潘仁美奉诏宣召 呼延赞单骑救驾</h6>
  28. <div class="divider text-uppercase">Small 文本</div>
  29. <p>在标题内还可以包含 <code>&lt;small&gt;</code> 标签或赋予 <code>.small</code> 类的元素,可以用来标记副标题。</p>
  30. <div class="bg-lightest p-10">
  31. <h3>h3. 第三回 金头娘征场斗艺 高怀德大战潞州 <small>高怀德</small></h3>
  32. <h4>h4. 第四回 讲和议杨业回兵 迎銮驾豪杰施能 <small>杨业</small></h4>
  33. <h5>h5. 第五回 宋太祖遗嘱后事 潘仁美计逐英雄 <small>潘仁美</small></h5>
  34. </div>
  35. </div>
  36. </div>
  37. </div>
  38. </div>
  39. <!-- .row -->
  40. <div class="row">
  41. <div class="col-lg-12">
  42. <div class="card">
  43. <div class="card-header"><h4>文本样式</h4></div>
  44. <div class="card-body">
  45. <h5>段落</h5>
  46. <div class="row">
  47. <div class="col-md-4"> <code>&lt;p class="lead"&gt;</code>
  48. <p class="lead">笑江湖浪迹十年游,空负少年头。对铜驼巷陌,吟情渺渺,心事悠悠!酒冷诗残梦断,南国正清秋。把剑凄然望,无处招归舟。</p>
  49. </div>
  50. <div class="col-md-4">
  51. <code>&lt;p&gt;</code>
  52. <p>明旧天涯路远,问谁留楚佩,弄影中洲?数英雄儿女,俯仰古今愁。难消受灯昏罗帐,昙花一现恨难休!飘零惯,金戈铁马,拼葬荒丘!</p>
  53. </div>
  54. <div class="col-md-4">
  55. <code>&lt;p class="small"&gt;</code>
  56. <p class="small">南国清秋,一轮皓月,将近中天。度时分,已是万籁俱寂,只杭州总兵的府第里,还是笑语喧喧,喜气洋洋。</p>
  57. </div>
  58. </div>
  59. <hr>
  60. <h5>内嵌文本元素</h5>
  61. <dl class="row">
  62. <dt class="col-3 col-md-2"><code>&lt;mark&gt;</code></dt>
  63. <dd class="col-9 col-md-10">您可以使用 mark 标签 to <mark>highlight</mark>text.</dd>
  64. <dt class="col-3 col-md-2"><code>&lt;del&gt;</code></dt>
  65. <dd class="col-9 col-md-10"><del>这行文本将被视为已删除文本。</del></dd>
  66. <dt class="col-3 col-md-2"><code>&lt;s&gt;</code></dt>
  67. <dd class="col-9 col-md-10"><s>这一行文字的意思是不再准确。</s></dd>
  68. <dt class="col-3 col-md-2"><code>&lt;ins&gt;</code></dt>
  69. <dd class="col-9 col-md-10"><ins>这一行文本将被视为对文档的补充。</ins></dd>
  70. <dt class="col-3 col-md-2"><code>&lt;u&gt;</code></dt>
  71. <dd class="col-9 col-md-10"><u>这行文本将呈现为带下划线。</u></dd>
  72. <dt class="col-3 col-md-2"><code>&lt;small&gt;</code></dt>
  73. <dd class="col-9 col-md-10"><small>这一行文字应被视为小一号字体。</small></dd>
  74. <dt class="col-3 col-md-2"><code>&lt;strong&gt;</code></dt>
  75. <dd class="col-9 col-md-10"><strong>此行呈现为粗体文本。</strong></dd>
  76. <dt class="col-3 col-md-2"><code>&lt;em&gt;</code></dt>
  77. <dd class="col-9 col-md-10"><em>此行呈现为斜体文本。</em></dd>
  78. </dl>
  79. <hr>
  80. <h5>文本对齐</h5>
  81. <p class="text-left">荒山隐士迎佳客 美酒甜言惑少年</p>
  82. <p class="text-center">崎岖世路湛嗟叹 怅悯情怀可奈何</p>
  83. <p class="text-right">疑梦疑真谨异丐 半忧半喜救佳人</p>
  84. <p class="text-justify">神功难测惊高弟 祸患潜埋闯喜筵</p>
  85. <p class="text-nowrap">重来踪迹从何觅 出处恩仇忍细论</p>
  86. <hr>
  87. <div class="row">
  88. <div class="col-md-6">
  89. <h5>大小写</h5>
  90. <p class="text-lowercase">Lowercased text.</p>
  91. <p class="text-uppercase">Uppercased text.</p>
  92. <p class="text-capitalize">Capitalized text.</p>
  93. </div>
  94. <div class="col-md-6">
  95. <h5>缩略语</h5>
  96. <p>An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.</p>
  97. <p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr> is the best thing since sliced bread.</p>
  98. </div>
  99. </div>
  100. </div>
  101. </div>
  102. </div>
  103. </div>
  104. <!-- .row -->
  105. <div class="row">
  106. <div class="col-lg-12">
  107. <div class="card">
  108. <div class="card-header"><h4>列表样式</h4></div>
  109. <div class="card-body">
  110. <div class="row">
  111. <div class="col-sm-4 col-xs-12">
  112. <p><code>&lt;ul&gt;</code></p>
  113. <ul>
  114. <li>豪士惊心谈恶斗 荒山动魄遇穷儒</li>
  115. <li>锦帐低垂人已杳 琼浆难得客归来</li>
  116. <li>明珠尽散滋疑虑 红粉何尝是祸胎</li>
  117. <li>谁施妙手空空技 哪识芳心惘惘情</li>
  118. </ul>
  119. </div>
  120. <div class="col-sm-4 col-xs-12">
  121. <p><code>&lt;ol&gt;</code></p>
  122. <ol>
  123. <li>豪士惊心谈恶斗 荒山动魄遇穷儒</li>
  124. <li>锦帐低垂人已杳 琼浆难得客归来</li>
  125. <li>明珠尽散滋疑虑 红粉何尝是祸胎</li>
  126. <li>谁施妙手空空技 哪识芳心惘惘情</li>
  127. </ol>
  128. </div>
  129. <div class="col-sm-4 col-xs-12">
  130. <p><code>&lt;ul class="list-unstyled"&gt;</code></p>
  131. <ul class="list-unstyled">
  132. <li>豪士惊心谈恶斗 荒山动魄遇穷儒</li>
  133. <li>锦帐低垂人已杳 琼浆难得客归来</li>
  134. <li>明珠尽散滋疑虑 红粉何尝是祸胎</li>
  135. <li>谁施妙手空空技 哪识芳心惘惘情</li>
  136. </ul>
  137. </div>
  138. <div class="col-lg-12">
  139. <hr>
  140. <p><code>&lt;ul class="list-inline"&gt;</code></p>
  141. <ul class="list-inline">
  142. <li class="list-inline-item">异宝轻抛真侠士</li>
  143. <li class="list-inline-item">荒林谈笑救佳人</li>
  144. <li class="list-inline-item">中伏何堪作楚囚</li>
  145. </ul>
  146. </div>
  147. </div>
  148. <!-- .row -->
  149. </div>
  150. </div>
  151. </div>
  152. </div>
  153. <!-- .row -->
  154. <div class="row">
  155. <div class="col-lg-12">
  156. <div class="card">
  157. <div class="card-header"><h4>描述</h4></div>
  158. <div class="card-body">
  159. <dl class="row">
  160. <dt class="col-sm-3">《侠骨丹心》</dt>
  161. <dd class="col-sm-9">道尽“独行长剑一杯酒,孤客高楼万里情;侠骨柔情现正义,青天碧海映丹心。</dd>
  162. <dt class="col-sm-3">《云海玉弓缘》</dt>
  163. <dd class="col-sm-9">
  164. <p>主要讲述了清朝中期,江湖浪子金世遗的传奇经历和与厉胜男、谷之华之间的爱恨情仇故事。</p>
  165. <p>是梁氏武侠天山系列最出名的两部小说之一,主要是厉胜男向魔头孟神通复仇并借此成为另一个“女魔头”的故事。</p>
  166. </dd>
  167. <dt class="col-sm-3">《冰河洗剑录》</dt>
  168. <dd class="col-sm-9">该小说讲述了江南与邹绛霞的孩子江海天的感情和江湖故事。</dd>
  169. <dt class="col-sm-3 text-truncate">《白发魔女传》</dt>
  170. <dd class="col-sm-9">叙述的是明万历四十三年凉秋,云贵总督卓仲廉卸任归故乡陕北,途经川陕边境时被劫富济贫的绿林女大盗“玉罗刹”练霓裳劫去大部分财产。</dd>
  171. <dt class="col-sm-3">《萍踪侠影录》</dt>
  172. <dd class="col-sm-9">
  173. <dl class="row">
  174. <dt class="col-sm-4">以明代土木堡之变为背景</dt>
  175. <dd class="col-sm-8">交织成一个豪侠浪漫美好绝伦的传奇。</dd>
  176. </dl>
  177. </dd>
  178. </dl>
  179. </div>
  180. </div>
  181. </div>
  182. </div>
  183. <!-- .row -->
  184. <div class="row">
  185. <div class="col-md-6">
  186. <div class="card">
  187. <div class="card-header"><h4>引用</h4></div>
  188. <div class="card-body">
  189. <blockquote class="blockquote">
  190. <p>这是一个美妙的夜晚,全身只有一种感觉,每个毛孔都浸润着喜悦。作为大自然的一部分,我在其中任意来去。</p>
  191. <footer>亨利·大卫·梭罗 <cite title="《瓦尔登湖》">《瓦尔登湖》</cite></footer>
  192. </blockquote>
  193. </div>
  194. </div>
  195. </div>
  196. <div class="col-md-6">
  197. <div class="card">
  198. <div class="card-header"><h4>地址</h4></div>
  199. <div class="card-body">
  200. <address>
  201. <strong>Twitter公司</strong><br>
  202. 市场街1355#,900号<br>
  203. 旧金山,CA 94103<br>
  204. <abbr title="电话">Tel:</abbr> (123) 456-7890
  205. </address>
  206. </div>
  207. </div>
  208. </div>
  209. </div>
  210. <!-- .row -->
  211. </div>
  212. <script type="text/javascript" src="js/jquery.min.js"></script>
  213. <script type="text/javascript" src="js/bootstrap.min.js"></script>
  214. <script type="text/javascript" src="js/main.min.js"></script>
  215. </body>
  216. </html>