master

分支 (1)

管理

管理

master

Light-Year-Admin-Using-Iframe-v5
/
lyear_content_typography.html

<!DOCTYPE html>
<html lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
<meta name="keywords" content="LightYear,LightYearAdmin,光年,后台模板,后台管理系统,光年HTML模板">
<meta name="description" content="Light Year Admin V5是一个基于Bootstrap v5.1.3的后台管理系统的HTML模板。">
<title>排版 - 光年(Light Year Admin V5)后台管理系统模板</title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<link rel="stylesheet" type="text/css" href="css/materialdesignicons.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.min.css">
</head>

<body>
<div class="container-fluid">

  <div class="row">

    <div class="col-lg-12">
      <div class="card">
        <header class="card-header"><div class="card-title">排版</div></header>
        <div class="card-body">

          <p>Bootstrap 排版的文档和示例，包括全局设置、标题、正文、列表等。</p>
          <h5>标题</h5>
          <p>所有 HTML 标题，从 <code>&lt;h1&gt;</code> 到 <code>&lt;h6&gt;</code>，都可用。</p>
          <table class="table table-bordered">
            <thead>
              <tr>
                <th>标签</th>
                <th>效果</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>
                  <code>&lt;h1&gt;&lt;/h1&gt;</code>
                </td>
                <td><span class="h1">h1. 第一回 北汉主屏逐忠臣　呼延赞激烈报仇</span></td>
              </tr>
              <tr>
                <td>
                  <code>&lt;h2&gt;&lt;/h2&gt;</code>
                </td>
                <td><span class="h2">h1. 第一回 北汉主屏逐忠臣　呼延赞激烈报仇</span></td>
              </tr>
              <tr>
                <td>
                  <code>&lt;h3&gt;&lt;/h3&gt;</code>
                </td>
                <td><span class="h3">h3. 第三回 金头娘征场斗艺　高怀德大战潞州</span></td>
              </tr>
              <tr>
                <td>
                  <code>&lt;h4&gt;&lt;/h4&gt;</code>
                </td>
                <td><span class="h4">h4. 第四回 讲和议杨业回兵　迎銮驾豪杰施能</span></td>
              </tr>
              <tr>
                <td>
                  <code>&lt;h5&gt;&lt;/h5&gt;</code>
                </td>
                <td><span class="h5">h5. 第五回 宋太祖遗嘱后事　潘仁美计逐英雄</span></td>
              </tr>
              <tr>
                <td>
                  <code>&lt;h6&gt;&lt;/h6&gt;</code>
                </td>
                <td><span class="h6">h6. 第六回 潘仁美奉诏宣召　呼延赞单骑救驾</span></td>
              </tr>
            </tbody>
          </table>
          <p><code>.h1</code> 到 <code>.h6</code> 类也可用，当您想要匹配标题的字体样式但不能使用关联的 HTML 元素时。</p>
          <div class="border-example">
            <p class="h1">h1. 第一回 北汉主屏逐忠臣　呼延赞激烈报仇</p>
            <p class="h2">h2. 第二回 李建忠力救义士　呼延赞梦神教武</p>
            <p class="h3">h3. 第三回 金头娘征场斗艺　高怀德大战潞州</p>
            <p class="h4">h4. 第四回 讲和议杨业回兵　迎銮驾豪杰施能</p>
            <p class="h5">h5. 第五回 宋太祖遗嘱后事　潘仁美计逐英雄</p>
            <p class="h6">h6. 第六回 潘仁美奉诏宣召　呼延赞单骑救驾</p>
          </div>
          <pre>&lt;p class="h1"&gt;h1. 第一回 北汉主屏逐忠臣　呼延赞激烈报仇&lt;/p&gt;
&lt;p class="h2"&gt;h2. 第二回 李建忠力救义士　呼延赞梦神教武&lt;/p&gt;
&lt;p class="h3"&gt;h3. 第三回 金头娘征场斗艺　高怀德大战潞州&lt;/p&gt;
&lt;p class="h4"&gt;h4. 第四回 讲和议杨业回兵　迎銮驾豪杰施能&lt;/p&gt;
&lt;p class="h5"&gt;h5. 第五回 宋太祖遗嘱后事　潘仁美计逐英雄&lt;/p&gt;
&lt;p class="h6"&gt;h6. 第六回 潘仁美奉诏宣召　呼延赞单骑救驾&lt;/p&gt;</pre>

          <h6>自定义标题</h6>
          <p>使用包含的实用程序类从 Bootstrap 3 重新创建小的二级标题文本。</p>
          <div class="border-example">
            <h3>
              花式显示标题 <small class="text-muted">With faded secondary text</small>
            </h3>
          </div>
          <pre>&lt;h3&gt;
  花式显示标题 &lt;small class="text-muted"&gt;带有褪色的次要文本&lt;/small&gt;
&lt;/h3&gt;</pre>

          <h5>显示属性标题</h5>
          <p>传统的标题元素旨在最适合您的页面内容。 当您需要突出标题时，请考虑使用显示标题——一种更大、更自以为是的标题样式。</p>
          <div class="border-example">
            <h1 class="display-1">艾虎三更追女寇</h1>
            <h1 class="display-2">包公开封府内丢相印</h1>
            <h1 class="display-3">青石梁上杀猛兽</h1>
            <h1 class="display-4">因酒醉睡熟丢利刃</h1>
            <h1 class="display-5">见爹爹细说京都事</h1>
            <h1 class="display-6">亚侠女在家中比武</h1>
          </div>
          <pre>&lt;h1 class="display-1"&gt;艾虎三更追女寇&lt;/h1&gt;
&lt;h1 class="display-2"&gt;包公开封府内丢相印&lt;/h1&gt;
&lt;h1 class="display-3"&gt;青石梁上杀猛兽&lt;/h1&gt;
&lt;h1 class="display-4"&gt;因酒醉睡熟丢利刃&lt;/h1&gt;
&lt;h1 class="display-5"&gt;见爹爹细说京都事&lt;/h1&gt;
&lt;h1 class="display-6"&gt;亚侠女在家中比武&lt;/h1&gt;</pre>

          <h5>突出的</h5>
          <p>通过添加 <code>.lead</code> 使段落脱颖而出。</p>
          <div class="border-example">
            <p class="lead">
              二五方成耦，中宫有骊姬。势看俱集菀，鹤禁顿生危。
            </p>
          </div>
          <pre>&lt;p class="lead"&gt;
  二五方成耦，中宫有骊姬。势看俱集菀，鹤禁顿生危。
&lt;/p&gt;</pre>

          <h5>内联文本元素</h5>
          <div class="border-example">
            <p>您可以使用 mark 标签 <mark>高亮</mark> 文本.</p>
            <p><del>这行文本将被视为已删除文本。</del></p>
            <p><s>这行文字将被视为不再准确。</s></p>
            <p><ins>这行文字将被视为文档的补充。</ins></p>
            <p><u>这行文本将呈现为带下划线的文本。</u></p>
            <p><small>这一行文字应被视为小一号字体。</small></p>
            <p><strong>这一行呈现为粗体文本。</strong></p>
            <p><em>这一行呈现为斜体文本。</em></p>
          </div>
          <pre>&lt;p&gt;您可以使用 mark 标签 &lt;mark&gt;高亮&lt;/mark&gt; 文本.&lt;/p&gt;
&lt;p&gt;&lt;del&gt;这行文本将被视为已删除文本。&lt;/del&gt;&lt;/p&gt;
&lt;p&gt;&lt;s&gt;这行文字将被视为不再准确。&lt;/s&gt;&lt;/p&gt;
&lt;p&gt;&lt;ins&gt;这行文字将被视为文档的补充。&lt;/ins&gt;&lt;/p&gt;
&lt;p&gt;&lt;u&gt;这行文本将呈现为带下划线的文本。&lt;/u&gt;&lt;/p&gt;
&lt;p&gt;&lt;small&gt;这一行文字应被视为小一号字体。&lt;/small&gt;&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;这一行呈现为粗体文本。&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;&lt;em&gt;这一行呈现为斜体文本。&lt;/em&gt;&lt;/p&gt;</pre>

          <p>请注意，这些标签应用于语义目的：</p>
          <ul>
            <li><code>&lt;mark&gt;</code> 表示为参考或符号目的而标记或突出显示的文本。</li>
            <li><code>&lt;small&gt;</code> 代表旁注和小字，如版权和法律文本。</li>
            <li><code>&lt;s&gt;</code> 表示不再相关或不再准确的元素。</li>
            <li><code>&lt;u&gt;</code> 表示内联文本的范围，应该以表明它具有非文本注释的方式呈现。</li>
          </ul>
          <p>如果要设置文本样式，则应改用以下类：</p>
          <ul>
            <li><code>.mark</code> 将应用与 <code>&lt;mark&gt;</code> 相同的样式。</li>
            <li><code>.small</code> 将应用与 <code>&lt;small&gt;</code> 相同的样式。</li>
            <li><code>.text-decoration-underline</code> 将应用与 <code>&lt;u&gt;</code> 相同的样式。</li>
            <li><code>.text-decoration-line-through</code> 将应用与 <code>&lt;s&gt;</code> 相同的样式。</li>
          </ul>
          <p>虽然上面没有显示，但请随意在 HTML5 中使用 <code>&lt;b&gt;</code> 和 <code>&lt;i&gt;</code>。 <code>&lt;b&gt;</code> 旨在突出单词或短语而不传达额外的重要性，而 <code>&lt;i&gt;</code> 主要用于语音、技术术语等。</p>

          <h5>缩写</h5>
          <p>HTML <code>&lt;abbr&gt;</code> 元素的风格化实现，用于缩写和首字母缩略词，以在悬停时显示扩展版本。 缩写具有默认下划线并获得帮助光标，以在悬停时和辅助技术用户提供额外的上下文。</p>
          <p>将 <code>.initialism</code> 添加到略小的字体大小的缩写。</p>
          <div class="border-example">
<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>
          </div>
          <pre>&lt;p&gt;&lt;abbr title="attribute"&gt;attr&lt;/abbr&gt;&lt;/p&gt;
&lt;p&gt;&lt;abbr title="HyperText Markup Language" class="initialism"&gt;HTML&lt;/abbr&gt;&lt;/p&gt;</pre>

          <h5>块引用</h5>
          <p>用于引用文档中其他来源的内容块。 将 <code>&lt;blockquote class="blockquote"&gt;</code> 包裹在任何 HTML 周围作为引号。</p>
          <div class="border-example">
            <blockquote class="blockquote">
              <p>笑春风三尺花，骄白雪一团玉。痴凝秋水为神，瘦认梨云是骨。</p>
            </blockquote>
          </div>
          <pre>&lt;blockquote class="blockquote"&gt;
  &lt;p&gt;笑春风三尺花，骄白雪一团玉。痴凝秋水为神，瘦认梨云是骨。&lt;/p&gt;
&lt;/blockquote&gt;</pre>

          <h6>命名源</h6>
          <p>HTML 规范要求将块引用属性放在 <code>&lt;blockquote&gt;</code> 之外。 提供属性时，将您的 <code>&lt;blockquote&gt;</code> 包装在 <code>&lt;figure&gt;</code> 中，并在 <code>.blockquote-footer</code> 类中使用 <code>&lt;figcaption&gt;</code> 或块级元素（例如 <code>&lt;p&gt;</code>）。 请务必将源作品的名称也包含在 <code>&lt;cite&gt;</code> 中。
          <div class="border-example">
            <figure>
              <blockquote class="blockquote">
                <p>爱上一个地方，就应该背上包去旅游，走得更远。</p>
              </blockquote>
              <figcaption class="blockquote-footer">
                出自商务印书馆的 <cite title="《新华字典》">《新华字典》</cite>
              </figcaption>
            </figure>
          </div>
          <pre>&lt;figure&gt;
  &lt;blockquote class="blockquote"&gt;
    &lt;p&gt;爱上一个地方，就应该背上包去旅游，走得更远。&lt;/p&gt;
  &lt;/blockquote&gt;
  &lt;figcaption class="blockquote-footer"&gt;
    出自商务印书馆的  &lt;cite title="《新华字典》"&gt;《新华字典》&lt;/cite&gt;
  &lt;/figcaption&gt;
&lt;/figure&gt;</pre>

          <h6>对齐</h6>
          <p>根据需要使用文本实用程序来更改块引用的对齐方式。</p>
          <div class="border-example">
            <figure class="text-center">
              <blockquote class="blockquote">
                <p>爱上一个地方，就应该背上包去旅游，走得更远。</p>
              </blockquote>
              <figcaption class="blockquote-footer">
                出自商务印书馆的 <cite title="《新华字典》">《新华字典》</cite>
              </figcaption>
            </figure>
          </div>
          <pre>&lt;figure class="text-center"&gt;
  &lt;blockquote class="blockquote"&gt;
    &lt;p&gt;爱上一个地方，就应该背上包去旅游，走得更远。&lt;/p&gt;
  &lt;/blockquote&gt;
  &lt;figcaption class="blockquote-footer"&gt;
    出自商务印书馆的  &lt;cite title="《新华字典》"&gt;《新华字典》&lt;/cite&gt;
  &lt;/figcaption&gt;
&lt;/figure&gt;</pre>

          <div class="border-example">
            <figure class="text-end">
              <blockquote class="blockquote">
                <p>爱上一个地方，就应该背上包去旅游，走得更远。</p>
              </blockquote>
              <figcaption class="blockquote-footer">
                出自商务印书馆的 <cite title="《新华字典》">《新华字典》</cite>
              </figcaption>
            </figure>
          </div>
          <pre>&lt;figure class="text-end"&gt;
  &lt;blockquote class="blockquote"&gt;
    &lt;p&gt;爱上一个地方，就应该背上包去旅游，走得更远。&lt;/p&gt;
  &lt;/blockquote&gt;
  &lt;figcaption class="blockquote-footer"&gt;
    出自商务印书馆的  &lt;cite title="《新华字典》"&gt;《新华字典》&lt;/cite&gt;
  &lt;/figcaption&gt;
&lt;/figure&gt;</pre>

          <h5>列表</h5>
          <h6>无样式</h6>
          <p>删除列表项的默认列表样式和左边距（仅限直接子项）。 这仅适用于直接子列表项，这意味着您还需要为任何嵌套列表添加类。</p>
          <div class="border-example">
            <ul class="list-unstyled">
              <li>这是一个列表</li>
              <li>它看起来完全没有样式。</li>
              <li>从结构上讲，它仍然是一个列表。</li>
              <li>但是，此样式仅适用于直接子元素。</li>
              <li>嵌套列表：
                <ul>
                  <li>不受这种风格的影响</li>
                  <li>仍会显示圆点</li>
                  <li>并有适当的左边距</li>
                </ul>
              </li>
              <li>在某些情况下，这可能仍然派上用场。</li>
            </ul>
          </div>
          <pre>&lt;ul class="list-unstyled"&gt;
  &lt;li&gt;这是一个列表&lt;/li&gt;
  &lt;li&gt;它看起来完全没有样式。&lt;/li&gt;
  &lt;li&gt;从结构上讲，它仍然是一个列表。&lt;/li&gt;
  &lt;li&gt;但是，此样式仅适用于直接子元素。&lt;/li&gt;
  &lt;li&gt;嵌套列表：
    &lt;ul&gt;
      &lt;li&gt;不受这种风格的影响&lt;/li&gt;
      &lt;li&gt;仍会显示圆点&lt;/li&gt;
      &lt;li&gt;并有适当的左边距&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;在某些情况下，这可能仍然派上用场。&lt;/li&gt;
&lt;/ul&gt;</pre>

          <h6>内联的</h6>
          <p>删除列表的项目符号并使用两个类的组合应用一些浅边距，<code>.list-inline</code> 和 <code>.list-inline-item</code>。</p>
          <div class="border-example">
            <ul class="list-inline">
              <li class="list-inline-item">这是一个列表项。</li>
              <li class="list-inline-item">还有一个。</li>
              <li class="list-inline-item">但它们是内联显示的。</li>
            </ul>
          </div>
          <pre>&lt;ul class="list-inline"&gt;
  &lt;li class="list-inline-item"&gt;这是一个列表项。&lt;/li&gt;
  &lt;li class="list-inline-item"&gt;还有一个。&lt;/li&gt;
  &lt;li class="list-inline-item"&gt;但它们是内联显示的。&lt;/li&gt;
&lt;/ul&gt;</pre>

          <h6>描述列表对齐</h6>
          <p>使用我们网格系统的预定义类（或语义混合）水平对齐术语和描述。 对于更长的术语，您可以选择添加一个 <code>.text-truncate</code> 类来用省略号截断文本。</p>
          <div class="border-example">
            <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>
          <pre>&lt;dl class="row"&gt;
  &lt;dt class="col-sm-3"&gt;《侠骨丹心》&lt;/dt&gt;
  &lt;dd class="col-sm-9"&gt;道尽“独行长剑一杯酒，孤客高楼万里情；侠骨柔情现正义，青天碧海映丹心。&lt;/dd&gt;

  &lt;dt class="col-sm-3"&gt;《云海玉弓缘》&lt;/dt&gt;
  &lt;dd class="col-sm-9"&gt;
    &lt;p&gt;主要讲述了清朝中期，江湖浪子金世遗的传奇经历和与厉胜男、谷之华之间的爱恨情仇故事。&lt;/p&gt;
    &lt;p&gt;是梁氏武侠天山系列最出名的两部小说之一，主要是厉胜男向魔头孟神通复仇并借此成为另一个“女魔头”的故事。&lt;/p&gt;
  &lt;/dd&gt;

  &lt;dt class="col-sm-3"&gt;《冰河洗剑录》&lt;/dt&gt;
  &lt;dd class="col-sm-9"&gt;该小说讲述了江南与邹绛霞的孩子江海天的感情和江湖故事。&lt;/dd&gt;

  &lt;dt class="col-sm-3 text-truncate"&gt;《经乱离后天恩流夜郎，忆旧游，书怀赠江夏韦太守良宰》&lt;/dt&gt;
  &lt;dd class="col-sm-9"&gt;唐代诗人李白创作的一首自传体长诗，是李白集中最长的一首诗。此诗作于李白从流放夜郎途中被赦免后滞留江夏时，诗人回顾了自己的人生历程，开篇叙述了自己谪仙人的来历以及自己的遭遇，又讲述了与朋友结交的过程，表达了自己在政治上的清白主张以及积极入仕的愿望，抒发了自己的政治感慨。其中“清水出芙蓉，天然去雕饰”两句流传甚广，可看成李白诗风的写照。&lt;/dd&gt;

  &lt;dt class="col-sm-3"&gt;《萍踪侠影录》&lt;/dt&gt;
  &lt;dd class="col-sm-9"&gt;
    &lt;dl class="row"&gt;
      &lt;dt class="col-sm-4"&gt;以明代土木堡之变为背景&lt;/dt&gt;
      &lt;dd class="col-sm-8"&gt;交织成一个豪侠浪漫美好绝伦的传奇。&lt;/dd&gt;
    &lt;/dl&gt;
  &lt;/dd&gt;
&lt;/dl&gt;</pre>

        </div>
      </div>
    </div>

  </div>

</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/popper.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/main.min.js"></script>
</body>
</html>