master

分支 (3)

管理

管理

master

style

feature/非圆角青绿配色

Light-Year-Admin-Using-Iframe-v4
/
lyear_utilities_other.html

<!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>其他通用类 - 光年(Light Year Admin V4)后台管理系统模板</title>
<link rel="icon" href="favicon.ico" type="image/ico">
<meta name="keywords" content="LightYear,LightYearAdmin,光年,后台模板,后台管理系统,光年HTML模板">
<meta name="description" content="Light Year Admin V4是一个后台管理系统的HTML模板，基于Bootstrap v4.4.1。">
<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.min.css" rel="stylesheet">
</head>

<body>
<div class="container-fluid p-t-15">

  <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>通过向父元素添加 <code>.clearfix</code>，可以轻松清除浮动。</p>
          <pre>&lt;div class="clearfix"&gt;...&lt;/div&gt;</pre>
          <pre>// Mixin itself
@mixin clearfix() {
  &::after {
    display: block;
    content: "";
    clear: both;
  }
}

// Usage as a mixin
.element {
  @include clearfix;
}</pre>
          <p>下面的示例演示如何使用 <code>.clearfix</code>。如果没有 <code>.clearfix</code>，div将不会跨越按钮，这将导致布局损坏。</p>
          <div class="border-example">
            <div class="bg-info clearfix">
              <button type="button" class="btn btn-secondary float-left">示例按钮向左浮动</button>
              <button type="button" class="btn btn-secondary float-right">示例按钮向右浮动</button>
            </div>
          </div>
          <pre>&lt;div class="bg-info clearfix"&gt;
  &lt;button type="button" class="btn btn-secondary float-left"&gt;示例按钮向左浮动&lt;/button&gt;
  &lt;button type="button" class="btn btn-secondary float-right"&gt;示例按钮向右浮动&lt;/button&gt;
&lt;/div&gt;</pre>

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

    <div class="col-lg-12">
      <div class="card">
        <header class="card-header"><div class="card-title">关闭图标</div></header>
        <div class="card-body">

          <p>可使用 <code>aria-label</code> 标签，为屏幕阅读器用户添加文字定义（为阅读障碍者提供访问支持）。</p>
          <div class="border-example">
            <button type="button" class="close" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <pre>&lt;button type="button" class="close" aria-label="Close"&gt;
  &lt;span aria-hidden="true"&gt;&times;&lt;/span&gt;
&lt;/button&gt;</pre>

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

    <div class="col-lg-12">
      <div class="card">
        <header class="card-header"><div class="card-title">嵌入</div></header>
        <div class="card-body">

          <p>将这些规则应用到 <code>&lt;iframe&gt;</code>、<code>&lt;embed&gt;</code>、 <code>&lt;video&gt;</code>、 <code>&lt;object&gt;</code> 上，当需要配合其它属性（如响应式）时，也可以加入 <code>.embed-responsive-item</code> 定义。</p>
          <div class="callout callout-info">你不需要将 <code>frameborder="0"</code> 加入到你的 <code>&lt;iframe&gt;</code> 中，因为我们已经为您覆盖处理了这个属性。</div>
          <p class="mt-3">你可以将任何代码嵌入到 <code>&lt;iframe&gt;</code> 中，并使用 <code>.embed-responsive</code> 实现同比例收缩，至于 <code>.embed-responsive-item</code> 不是严格要求的-虽然我们鼓励使用它。</p>
          <pre>&lt;div class="embed-responsive embed-responsive-16by9"&gt;
  &lt;iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen&gt;&lt;/iframe&gt;
&lt;/div&gt;</pre>
          <h6>长宽比例处理</h6>
          <pre>&lt;!-- 21:9 aspect ratio --&gt;
&lt;div class="embed-responsive embed-responsive-21by9"&gt;
  &lt;iframe class="embed-responsive-item" src="..."&gt;&lt;/iframe&gt;
&lt;/div&gt;

&lt;!-- 16:9 aspect ratio --&gt;
&lt;div class="embed-responsive embed-responsive-16by9"&gt;
  &lt;iframe class="embed-responsive-item" src="..."&gt;&lt;/iframe&gt;
&lt;/div&gt;

&lt;!-- 4:3 aspect ratio --&gt;
&lt;div class="embed-responsive embed-responsive-4by3"&gt;
  &lt;iframe class="embed-responsive-item" src="..."&gt;&lt;/iframe&gt;
&lt;/div&gt;

&lt;!-- 1:1 aspect ratio --&gt;
&lt;div class="embed-responsive embed-responsive-1by1"&gt;
  &lt;iframe class="embed-responsive-item" src="..."&gt;&lt;/iframe&gt;
&lt;/div&gt;</pre>

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

    <div class="col-lg-12">
      <div class="card">
        <header class="card-header"><div class="card-title">溢出</div></header>
        <div class="card-body">

          <p>默认情况下，为两个值提供了溢出功能，但它们没有响应式的。</p>
          <div class="border-example d-md-flex">
            <div class="overflow-auto p-3 mb-3 mb-md-0 mr-md-3 bg-light" style="max-width: 260px; max-height: 100px;">
              这是对具有设置宽度和高度维度的元素使用 <code>.overflow-auto</code> 的示例。按设计，此内容将垂直滚动。
            </div>
            <div class="overflow-hidden p-3 bg-light" style="max-width: 260px; max-height: 100px;">
              这是在具有设置宽度和高度维度的元素上使用 <code>.overflow-hidden</code> 的示例。
            </div>
          </div>
          <pre>&lt;div class="overflow-auto"&gt;...&lt;/div&gt;
&lt;div class="overflow-hidden"&gt;...&lt;/div&gt;</pre>

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

    <div class="col-lg-12">
      <div class="card">
        <header class="card-header"><div class="card-title">定位</div></header>
        <div class="card-body">

          <p>使用 <code>.position-*</code> 样式，可以实现快速定位-虽然它们不包含响应式支持。</p>
          <pre>&lt;div class="position-static"&gt;...&lt;/div&gt;
&lt;div class="position-relative"&gt;...&lt;/div&gt;
&lt;div class="position-absolute"&gt;...&lt;/div&gt;
&lt;div class="position-fixed"&gt;...&lt;/div&gt;
&lt;div class="position-sticky"&gt;...&lt;/div&gt;</pre>
          <p>固定在top顶部</p>
          <pre>&lt;div class="fixed-top"&gt;...&lt;/div&gt;</pre>
          <p>固定在bottom底部</p>
          <pre>&lt;div class="fixed-bottom"&gt;...&lt;/div&gt;</pre>
          <p>贴齐于top顶部</p>
          <pre>&lt;div class="sticky-top"&gt;...&lt;/div&gt;</pre>

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

    <div class="col-lg-12">
      <div class="card">
        <header class="card-header"><div class="card-title">读屏器</div></header>
        <div class="card-body">

          <p>使用屏幕阅读器通用样式定义，隐藏屏幕阅读器不支持的设备元素。</p>
          <pre>&lt;a class="sr-only sr-only-focusable" href="#content"&gt;跳到主要内容&lt;/a&gt;</pre>

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

    <div class="col-lg-12">
      <div class="card">
        <header class="card-header"><div class="card-title">图像替换</div></header>
        <div class="card-body">

          <p>使用 <code>.text-hide</code> 样式可以保持标签的亲和性及SEO优化需求，引入后，需要使用 <code>background-image</code> 属性来提供视觉展示，而不是文字内容（文字内容随即隐藏）。</p>
          <div class="border-example">
            <h1 class="text-hide" style="background-image: url('images/logo-ico.png'); width: 68px; height: 68px;">光年后台模板</h1>
          </div>
          <pre>&lt;h1 class="text-hide" style="background-image: url('images/logo-ico.png'); width: 68px; height: 68px;"&gt;光年后台模板&lt;/h1&gt;</pre>

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

    <div class="col-lg-12">
      <div class="card">
        <header class="card-header"><div class="card-title">阴影</div></header>
        <div class="card-body">

          <div class="border-example">
            <div class="shadow-none p-3 mb-5 bg-light rounded">No shadow</div>
            <div class="shadow-sm p-3 mb-5 bg-white rounded">Small shadow</div>
            <div class="shadow p-3 mb-5 bg-white rounded">Regular shadow</div>
            <div class="shadow-lg p-3 mb-5 bg-white rounded">Larger shadow</div>
          </div>
          <pre>&lt;div class="shadow-none p-3 mb-5 bg-light rounded"&gt;No shadow&lt;/div&gt;
&lt;div class="shadow-sm p-3 mb-5 bg-white rounded"&gt;Small shadow&lt;/div&gt;
&lt;div class="shadow p-3 mb-5 bg-white rounded"&gt;Regular shadow&lt;/div&gt;
&lt;div class="shadow-lg p-3 mb-5 bg-white rounded"&gt;Larger shadow&lt;/div&gt;</pre>

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

    <div class="col-lg-12">
      <div class="card">
        <header class="card-header"><div class="card-title">垂直对齐</div></header>
        <div class="card-body">

          <p>使用 <code>vertical-alignment</code> 通用样式改变元素的对齐，注意：垂直对齐仅影响 内联inline、 内联块inline-block、 内联表inline-table、 表格单元格table cell元素。</p>
          <p>可选属性有 <code>.align-baseline</code>、 <code>.align-top</code>、 <code>.align-middle</code>、<code>.align-bottom</code>、 <code>.align-text-bottom</code>、 <code>.align-text-top</code> 。</p>
          <div class="border-example">
            <span class="align-baseline">baseline基准</span>
            <span class="align-top">top顶部</span>
            <span class="align-middle">middle垂直居中</span>
            <span class="align-bottom">bottom底部</span>
            <span class="align-text-top">text-top文本顶部</span>
            <span class="align-text-bottom">text-bottom文本底部</span>
          </div>
          <pre>&lt;span class="align-baseline"&gt;baseline基准&lt;/span&gt;
&lt;span class="align-top"&gt;top顶部&lt;/span&gt;
&lt;span class="align-middle"&gt;middle垂直居中&lt;/span&gt;
&lt;span class="align-bottom"&gt;bottom底部&lt;/span&gt;
&lt;span class="align-text-top"&gt;text-top文本顶部&lt;/span&gt;
&lt;span class="align-text-bottom"&gt;text-bottom文本底部&lt;/span&gt;</pre>
          <p>在表格单元格中：</p>
          <div class="border-example">
            <table style="height: 100px;">
              <tbody>
                <tr>
                  <td class="align-baseline">baseline</td>
                  <td class="align-top">top</td>
                  <td class="align-middle">middle</td>
                  <td class="align-bottom">bottom</td>
                  <td class="align-text-top">text-top</td>
                  <td class="align-text-bottom">text-bottom</td>
                </tr>
              </tbody>
            </table>
          </div>
          <pre>&lt;table style="height: 100px;"&gt;
  &lt;tbody&gt;
    &lt;tr&gt;
      &lt;td class="align-baseline"&gt;baseline&lt;/td&gt;
      &lt;td class="align-top"&gt;top&lt;/td&gt;
      &lt;td class="align-middle"&gt;middle&lt;/td&gt;
      &lt;td class="align-bottom"&gt;bottom&lt;/td&gt;
      &lt;td class="align-text-top"&gt;text-top&lt;/td&gt;
      &lt;td class="align-text-bottom"&gt;text-bottom&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;</pre>

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

    <div class="col-lg-12">
      <div class="card">
        <header class="card-header"><div class="card-title">显示或隐藏</div></header>
        <div class="card-body">

          <p>使用通用样式的 <code>visibility</code> 设置元素的可见性，这不会改变元素的 display 值，也不会影响布局，<code>.invisible</code> 元素仍占用页面空间，内容将隐藏但仍然保留在屏幕阅读器中。</p>
          <p>根据需要选用 <code>.visible</code> 或 <code>.invisible</code> 两个样式类。</p>
          <pre>&lt;div class="visible"&gt;...&lt;/div&gt;
&lt;div class="invisible"&gt;...&lt;/div&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>