Fetch the repository succeeded.
Fork this repository
Loading
Sync repository?
This action will force synchronization from 笔下光年/Light Year Admin Using Iframe v4, which will overwrite any changes that you have made since you forked the repository, and can not be recovered!!!
Synchronous operation will process in the background and will refresh the page when finishing processing. Please be patient.
Clone/Download
Prompt
To download the code, please copy the following command and execute it in the terminal
To ensure that your submitted code identity is correctly recognized by Gitee, please execute the following command.
When using the SSH protocol for the first time to clone or push code, follow the prompts below to complete the SSH configuration.
1
Generate RSA keys.
2
Obtain the content of the RSA public key and configure it in SSH Public Keys
To use SVN on Gitee, please visit the usage guide
When using the HTTPS protocol, the command line will prompt for account and password verification as follows. For security reasons, Gitee recommends configure and use personal access tokens instead of login passwords for cloning, pushing, and other operations.
Username for 'https://gitee.com': userName
Password for 'https://userName@gitee.com':
#
Private Token
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162
<!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><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></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><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></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><div class="d-lg-none">大于lg屏幕尺寸时隐藏</div>
<div class="d-none d-lg-block">小于lg屏幕时隐藏</div></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><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></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>
Report
Please fill in the reason for the report carefully. Provide as detailed a description as possible.
Please select a report type
误判申诉
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化