master

分支 (3)

管理

管理

master

style

feature/非圆角青绿配色

Light-Year-Admin-Using-Iframe-v4
/
lyear_utilities_borders.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>使用边框实用程序添加或删除元素的边框。从所有边框中选择，或者一次选择一个。</p>
          <h6>增加的</h6>
          <div class="border-example border-example-border-utils">
            <span class="border"></span>
            <span class="border-top"></span>
            <span class="border-right"></span>
            <span class="border-bottom"></span>
            <span class="border-left"></span>
          </div>
          <pre>&lt;span class="border"&gt;&lt;/span&gt;
&lt;span class="border-top"&gt;&lt;/span&gt;
&lt;span class="border-right"&gt;&lt;/span&gt;
&lt;span class="border-bottom"&gt;&lt;/span&gt;
&lt;span class="border-left"&gt;&lt;/span&gt;</pre>
          <h6>删减的</h6>
          <div class="border-example border-example-border-utils border-example-border-utils-0">
<span class="border-0"></span>
<span class="border-top-0"></span>
<span class="border-right-0"></span>
<span class="border-bottom-0"></span>
<span class="border-left-0"></span>
          </div>
          <pre>&lt;span class="border-0"&gt;&lt;/span&gt;
&lt;span class="border-top-0"&gt;&lt;/span&gt;
&lt;span class="border-right-0"&gt;&lt;/span&gt;
&lt;span class="border-bottom-0"&gt;&lt;/span&gt;
&lt;span class="border-left-0"&gt;&lt;/span&gt;</pre>
          <h6>边框颜色</h6>
          <p>使用基于主题颜色构建的实用程序更改边框颜色。</p>
          <div class="border-example border-example-border-utils">
            <span class="border border-primary"></span>
            <span class="border border-secondary"></span>
            <span class="border border-success"></span>
            <span class="border border-danger"></span>
            <span class="border border-warning"></span>
            <span class="border border-info"></span>
            <span class="border border-light"></span>
            <span class="border border-dark"></span>
            <span class="border border-white"></span>
          </div>
          <pre>&lt;span class="border border-primary"&gt;&lt;/span&gt;
&lt;span class="border border-secondary"&gt;&lt;/span&gt;
&lt;span class="border border-success"&gt;&lt;/span&gt;
&lt;span class="border border-danger"&gt;&lt;/span&gt;
&lt;span class="border border-warning"&gt;&lt;/span&gt;
&lt;span class="border border-info"&gt;&lt;/span&gt;
&lt;span class="border border-light"&gt;&lt;/span&gt;
&lt;span class="border border-dark"&gt;&lt;/span&gt;
&lt;span class="border border-white"&gt;&lt;/span&gt;</pre>
          <h6>圆角边框</h6>
          <div class="border-example border-example-border-utils">
            <img src="images/img-placeholder.png" width="75" alt="..." class="rounded">
            <img src="images/img-placeholder.png" width="75" alt="..." class="rounded-top">
            <img src="images/img-placeholder.png" width="75" alt="..." class="rounded-right">
            <img src="images/img-placeholder.png" width="75" alt="..." class="rounded-bottom">
            <img src="images/img-placeholder.png" width="75" alt="..." class="rounded-left">
            <img src="images/img-placeholder.png" width="75" alt="..." class="rounded-circle">
            <img src="images/img-placeholder.png" width="150" height="75" alt="..." class="rounded-pill">
            <img src="images/img-placeholder.png" width="75" alt="..." class="rounded-0">
          </div>
          <pre>&lt;img src="..." alt="..." class="rounded"&gt;
&lt;img src="..." alt="..." class="rounded-top"&gt;
&lt;img src="..." alt="..." class="rounded-right"&gt;
&lt;img src="..." alt="..." class="rounded-bottom"&gt;
&lt;img src="..." alt="..." class="rounded-left"&gt;
&lt;img src="..." alt="..." class="rounded-circle"&gt;
&lt;img src="..." alt="..." class="rounded-pill"&gt;
&lt;img src="..." alt="..." class="rounded-0"&gt;</pre>
          <h6>尺寸</h6>
          <p>使用 <code>.rounded-lg</code> 或 <code>.rounded-lg</code> 表示较大或较小的边界半径。</p>
          <div class="border-example border-example-border-utils">
<img src="images/img-placeholder.png" width="75" alt="..." class="rounded-sm">
<img src="images/img-placeholder.png" width="75" alt="..." class="rounded-lg">
          </div>
          <pre>&lt;img src="..." alt="..." class="rounded-sm"&gt;
&lt;img src="..." alt="..." class="rounded-lg"&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>