Light-Year-Admin-Using-Iframe-v5
/
lyear_utilities_borders.html

<!DOCTYPE html>
<html lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
<meta name="keywords" content="LightYear,LightYearAdmin,光年,后台模板,后台管理系统,光年HTML模板">
<meta name="description" content="Light Year Admin V5是一个基于Bootstrap v5.1.3的后台管理系统的HTML模板。">
<title>边框 - 光年(Light Year Admin V5)后台管理系统模板</title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<link rel="stylesheet" type="text/css" href="css/materialdesignicons.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.min.css">
</head>

<body>
<div class="container-fluid">

  <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-end"></span>
            <span class="border-bottom"></span>
            <span class="border-start"></span>
          </div>
          <pre>&lt;span class="border"&gt;&lt;/span&gt;
&lt;span class="border-top"&gt;&lt;/span&gt;
&lt;span class="border-end"&gt;&lt;/span&gt;
&lt;span class="border-bottom"&gt;&lt;/span&gt;
&lt;span class="border-start"&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-end-0"></span>
            <span class="border-bottom-0"></span>
            <span class="border-start-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-end-0"&gt;&lt;/span&gt;
&lt;span class="border-bottom-0"&gt;&lt;/span&gt;
&lt;span class="border-start-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">
            <span class="border border-1"></span>
            <span class="border border-2"></span>
            <span class="border border-3"></span>
            <span class="border border-4"></span>
            <span class="border border-5"></span>
          </div>
          <pre>&lt;span class="border border-1"&gt;&lt;/span&gt;
&lt;span class="border border-2"&gt;&lt;/span&gt;
&lt;span class="border border-3"&gt;&lt;/span&gt;
&lt;span class="border border-4"&gt;&lt;/span&gt;
&lt;span class="border border-5"&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-end">
            <img src="images/img-placeholder.png" width="75" alt="..." class="rounded-bottom">
            <img src="images/img-placeholder.png" width="75" alt="..." class="rounded-start">
            <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">
          </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;</pre>
          <h6>尺寸</h6>
          <div class="border-example border-example-border-utils">
            <img src="images/img-placeholder.png" width="75" alt="..." class="rounded-0">
            <img src="images/img-placeholder.png" width="75" alt="..." class="rounded-1">
            <img src="images/img-placeholder.png" width="75" alt="..." class="rounded-2">
            <img src="images/img-placeholder.png" width="75" alt="..." class="rounded-3">
          </div>
          <pre>&lt;img src="..." alt="..." class="rounded-0"&gt;
&lt;img src="..." alt="..." class="rounded-1"&gt;
&lt;img src="..." alt="..." class="rounded-2"&gt;
&lt;img src="..." alt="..." class="rounded-3"&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>