Revert "框架调整"

fengxiang

2018-07-11 12b04f145bae740e1971036b1e2dfc1bc224d17b

 src/app/routes/style/typography/typography.component.html

New file
@@ -0,0 +1,130 @@
<div class="content__title">
  <h1>
    Typography
  </h1>
</div>
<div nz-row [nzGutter]="16">
  <div nz-col [nzMd]="8">
    <nz-card nzTitle="Headings">
      <h1 class="h1">
        class="h1"
        <small>Sub-heading</small>
      </h1>
      <h2 class="h2">
        class="h2"
        <small>Sub-heading</small>
      </h2>
      <h3 class="h3">
        class="h3"
        <small>Sub-heading</small>
      </h3>
      <h4 class="h4">
        class="h4"
        <small>Sub-heading</small>
      </h4>
      <h5 class="h5">
        class="h5"
        <small>Sub-heading</small>
      </h5>
      <h6 class="h6">
        class="h6"
        <small>Sub-heading</small>
      </h6>
    </nz-card>
  </div>
  <div nz-col [nzMd]="8">
    <nz-card nzTitle="Paragraphs">
      <p>
        <small>This is an example of small, fine print text.</small>
      </p>
      <p class="mt-sm">
        <strong>This is an example of strong, bold text.</strong>
      </p>
      <p class="mt-sm">
        <em>This is an example of emphasized, italic text.</em>
      </p>
      <h4 class="mt-sm">Alignment & Sizing Helpers</h4>
      <p class="mt-sm text-left text-sm">class="text-left text-sm"</p>
      <p class="mt-sm text-center text-md">class="text-center text-md"</p>
      <p class="text-right text-lg">class="text-right text-lg"</p>
    </nz-card>
  </div>
  <div nz-col [nzMd]="8">
    <nz-card nzTitle="Text Colors">
      <p *ngFor="let color of c.names" class="pb-0 text-{{color}}">class="text-{{color}} bg-{{color}}"</p>
    </nz-card>
  </div>
</div>
<div nz-row [nzGutter]="16">
  <div nz-col [nzMd]="8">
    <nz-card nzTitle="Formatting">
      <h4>text-nowrap</h4>
      <p class="pt-sm text-nowrap">[class="text-nowrap"].Ad eiusmod eu velit veniam laborum voluptate duis aliqua esse eiusmod.</p>
      <h4 class="pt-sm">text-truncate</h4>
      <p class="pt-sm text-truncate">[class="text-truncate"].Officia nulla velit minim mollit laborum et irure ullamco nisi dolore qui. Sint aute aliqua
        tempor commodo officia sunt non do id laborum mollit ex ea cupidatat. Amet ad non fugiat magna. Ut cupidatat labore
        pariatur esse reprehenderit esse sint in proident elit minim sunt enim sit. Enim sint deserunt exercitation duis.
        Aliquip cillum irure do incididunt do eu eiusmod excepteur culpa ex consectetur nulla duis sit. Ex officia excepteur
        officia ea ea cupidatat veniam officia officia est.</p>
      <h4 class="pt-sm">Transformation</h4>
      <p class="pt-sm text-lowercase">class="text-lowercase"</p>
      <p class="pt-sm text-uppercase">class="text-uppercase"</p>
      <p class="pt-sm text-capitalize">class="text-capitalize"</p>
      <p class="pt-sm text-deleted">class="text-deleted"</p>
    </nz-card>
  </div>
  <div nz-col [nzMd]="8">
    <nz-card nzTitle="Border">
      <div class="p-sm m-sm text-center width-sm d-inline-block border border-primary">class="border border-primary"</div>
      <div class="p-sm m-sm text-center width-sm d-inline-block border-top-1 border-success rounded-circle">class="border-top-1 border-success rounded-circle"</div>
      <div class="p-sm m-sm text-center width-sm d-inline-block border-bottom-1 border-error">class="border-bottom-1 border-error"</div>
      <div class="p-sm m-sm text-center width-md d-inline-block border-right-1 border-warning">class="border-right-1 border-warning"</div>
    </nz-card>
  </div>
  <div nz-col [nzMd]="8">
    <nz-card nzTitle="Padding & Margin">
      <strong>清除间距</strong>
      <p>
        <code>[<类型>p|m][<方向>t|r|b|l|x|y]?0</code>
      </p>
      <p>eg: p0, pt0, mb0, mt0</p>
      <strong>间距</strong>
      <p>
        <code>[<类型>p|m][<方向>t|r|b|l|x|y]?-[<尺寸>sm|md|lg]</code>
      </p>
      <p>eg: p-sm, pb-sm, mt-md, mr-md</p>
    </nz-card>
  </div>
</div>
<div nz-row [nzGutter]="16">
  <div nz-col [nzMd]="8">
    <nz-card nzTitle="Display">
      <p class="display-1">class="display-1"</p>
      <p class="display-2">class="display-2"</p>
      <p class="display-3">class="display-3"</p>
    </nz-card>
  </div>
  <div nz-col [nzMd]="8">
    <nz-card nzTitle="Code">
      <p>This is an example of an inline code element within body copy. Wrap inline code within a
        <code>...</code>tag.</p>
      <pre class="mt-sm"><code>This is an example of preformatted text.</code></pre>
    </nz-card>
  </div>
  <div nz-col [nzMd]="8">
    <nz-card nzTitle="Lists">
      <h4>list styled</h4>
      <ol class="mt-sm list-styled">
        <li>List Item</li>
        <li>List Item</li>
        <li>List Item</li>
      </ol>
      <h4 class="mt-sm">Unstyled List</h4>
      <ul class="mt-sm list-unstyled">
        <li>List Item</li>
        <li>List Item</li>
        <li>List Item</li>
      </ul>
    </nz-card>
  </div>
</div>