Light-Year-Admin-Using-Iframe-v4
/
lyear_utilities_display.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">

          <h6>Dislay属性</h6>
          <p>显示适用于从 <code>xs</code> 到 <code>xl</code> 的所有 <code>breakpoints</code>的实用程序类，其中没有<code>breakpoints</code>缩写。 这是因为这些类是从 <code>min-width: 0;</code> 并且因此不受媒体查询的限制。 然而，其余的断点包含断点缩写。</p>
          <p>因此，这些类使用以下格式来命名：</p>
          <ul>
            <li><code>.d-{value}</code> 用于小屏幕适配（即手机适配）</li>
            <li><code>.d-{breakpoint}-{value}</code> 用于 <code>sm</code>、<code>md</code>、<code>lg</code>、<code>xl</code>等多设备适配。</li>
          </ul>
          <p>display常用属性：</p>
	      <ul>
	        <li><code>none</code></li>
	        <li><code>inline</code></li>
	        <li><code>inline-block</code></li>
	        <li><code>block</code></li>
	        <li><code>table</code></li>
	        <li><code>table-cell</code></li>
	        <li><code>table-row</code></li>
	        <li><code>flex</code></li>
	        <li><code>inline-flex</code></li>
	      </ul>
          <p>媒体查询效果屏幕宽度与给定的断点或更大。 例如 <code>.d-lg-none</code> 设置 <code>display：none;</code> 在 <code>lg</code> 和 <code>xl</code> 屏幕上。</p>
          <div class="border-example">
            <div class="d-inline p-2 bg-primary text-white">d-inline</div>
            <div class="d-inline p-2 bg-dark text-white">d-inline</div>
          </div>
          <pre>&lt;div class="d-inline p-2 bg-primary text-white"&gt;d-inline&lt;/div&gt;
&lt;div class="d-inline p-2 bg-dark text-white"&gt;d-inline&lt;/div&gt;</pre>
          <div class="border-example">
            <span class="d-block p-2 bg-primary text-white">d-block</span>
            <span class="d-block p-2 bg-dark text-white">d-block</span>
          </div>
          <pre>&lt;span class="d-block p-2 bg-primary text-white"&gt;d-block&lt;/span&gt;
&lt;span class="d-block p-2 bg-dark text-white"&gt;d-block&lt;/span&gt;</pre>
          <p>为了加快移动友好的开发，请使用响应显示类按设备显示和隐藏元素。避免为同一个站点创建完全不同的版本，而是为每个屏幕大小相应地隐藏元素。</p>
          <p>若要隐藏元素，只需使用 <code>.d-none</code> 类或 <code>.d-{sm、md、lg、xl}-none</code> 类中的一个类即可进行任何响应屏幕变化。</p>
          <p>若要仅在给定的屏幕大小间隔上显示元素，可以将一个 <code>.d-*-none</code> 类与一个 <code>.d-*-*</code> 类组合在一起，例如 <code>.d-none.d-md-block.d-xl-none</code> 将隐藏除中型和大型设备外的所有屏幕大小的元素。</p>
          <table class="table table-bordered table-striped">
            <thead>
              <tr>
                <th>屏幕规格</th>
                <th>引用样式</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>所有屏幕下隐藏</td>
                <td><code class="highlighter-rouge">.d-none</code></td>
              </tr>
              <tr>
                <td>只在xs屏幕上隐藏（即仅在手机屏幕上隐藏-其它规格屏幕正常显示-译者注）</td>
                <td><code class="highlighter-rouge">.d-none .d-sm-block</code></td>
              </tr>
              <tr>
                <td>只在sm屏幕上隐藏（其它屏幕规格均显示）</td>
                <td><code class="highlighter-rouge">.d-sm-none .d-md-block</code></td>
              </tr>
              <tr>
                <td>只在md屏幕时隐藏（其它屏幕规格均显示）</td>
                <td><code class="highlighter-rouge">.d-md-none .d-lg-block</code></td>
              </tr>
              <tr>
                <td>只在lg屏幕时隐藏（其它屏幕规格均显示）</td>
                <td><code class="highlighter-rouge">.d-lg-none .d-xl-block</code></td>
              </tr>
              <tr>
                <td>只在xl屏幕时隐藏（其它屏幕规格均显示）</td>
                <td><code class="highlighter-rouge">.d-xl-none</code></td>
              </tr>
              <tr>
                <td>全部可见</td>
                <td><code class="highlighter-rouge">.d-block</code></td>
              </tr>
              <tr>
                <td>仅在xs屏幕时可见</td>
                <td><code class="highlighter-rouge">.d-block .d-sm-none</code></td>
              </tr>
              <tr>
                <td>仅在sm屏幕时可见</td>
                <td><code class="highlighter-rouge">.d-none .d-sm-block .d-md-none</code></td>
              </tr>
              <tr>
                <td>仅在md屏幕时可见</td>
                <td><code class="highlighter-rouge">.d-none .d-md-block .d-lg-none</code></td>
              </tr>
              <tr>
                <td>仅在lg屏幕时可见</td>
                <td><code class="highlighter-rouge">.d-none .d-lg-block .d-xl-none</code></td>
              </tr>
              <tr>
                <td>仅在xl屏幕时可见</td>
                <td><code class="highlighter-rouge">.d-none .d-xl-block</code></td>
              </tr>
            </tbody>
          </table>
          <p>下面两个div空间在不同的屏幕下显示是不同的，请注意观察：</p>
          <div class="border-example">
            <div class="d-lg-none">大于lg屏幕尺寸时隐藏</div>
            <div class="d-none d-lg-block">小于lg屏幕时隐藏</div>
          </div>
          <pre>&lt;div class="d-lg-none"&gt;大于lg屏幕尺寸时隐藏&lt;/div&gt;
&lt;div class="d-none d-lg-block"&gt;小于lg屏幕时隐藏&lt;/div&gt;</pre>
          <h6>面向打印的显示属性控制处理</h6>
          <p>在处理打印样式时，通过 <code>display</code> 通用样式来改变相应值处理呈现效果。</p>
          <ul>
            <li><code>.d-print-none</code></li>
            <li><code>.d-print-inline</code></li>
            <li><code>.d-print-inline-block</code></li>
            <li><code>.d-print-block</code></li>
            <li><code>.d-print-table</code></li>
            <li><code>.d-print-table-row</code></li>
            <li><code>.d-print-table-cell</code></li>
            <li><code>.d-print-flex</code></li>
            <li><code>.d-print-inline-flex</code></li>
          </ul>
          <p>屏幕与打印显示可以并列设置，下面有三段代码，请注意观察它们在不同屏幕大小的显示。</p>
          <div class="border-example">
<div class="d-print-none">仅屏幕显示 (不可打印)</div>
<div class="d-none d-print-block">P仅支持打印显示(不可在屏幕上显示)</div>
<div class="d-none d-lg-block d-print-block">显示在中等屏幕（不支持大屏幕显示）, 支持打印输出</div>
          </div>
          <pre>&lt;div class="d-print-none"&gt;仅屏幕显示 (不可打印)&lt;/div&gt;
&lt;div class="d-none d-print-block"&gt;P仅支持打印显示(不可在屏幕上显示)&lt;/div&gt;
&lt;div class="d-none d-lg-block d-print-block"&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>