<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>Bootstrap5 学习</title>
    <base href="/" />
    <link rel="icon" type="image/png" href="favicon.png" />
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"  />
    <link rel="stylesheet" href="css/app.css" />
    <style>
        .container .card {
           width:300px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="card mt-3">
            <div class="card-header bg-secondary-subtle">
                通用菜单
            </div>
            <div class="card-body">
                <a target="_blank" href="pages/Utilities/background.html">背景颜色</a>
            </div>
        </div>
        <div class="card mt-3">
            <div class="card-header bg-secondary-subtle">
                页面布局
            </div>
            <div class="card-body">
                <a target="_blank" href="pages/layouts/layout_1.html">布局页</a>
            </div>
        </div>
        <div class="card mt-3">
            <div class="card-header bg-secondary-subtle">
                辅助菜单
            </div>
            <div class="card-body">
                <div><a target="_blank" href="pages/Helpers/清除浮动.html">清除浮动</a></div>
                <div><a target="_blank" href="pages/Helpers/颜色与背景.html">颜色与背景</a></div>
                <div><a target="_blank" href="pages/Helpers/多彩连接.html">多彩连接</a></div>
                <div><a target="_blank" href="pages/Helpers/快速定位.html">快速定位</a></div>
                <div><a target="_blank" href="pages/Helpers/宽高比.html">宽高比</a></div>
            </div>
        </div>
    </div>
    <script src="jquery/jquery-3.6.4.min.js"></script>
    <script src="bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="js/app.js"></script>
</body>

</html>