Bootstrap5测试模板
由于官方自带的模板文件根本不能测试出系统是否正常运行，所以我写了个简易的测试模板，你在开发的时候可以直接复制来用，避免出错，本模板是演示用的，直接提取css/bootstrap.min.css和js/bootstrap.bundle.min.js两个文件放在演示案例所在目录的Bootstrap5文件夹中。
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="keywords" content=""> <meta name="description" content=""> <link href="bootstrap5/bootstrap.min.css" rel="stylesheet"> <title>Hello, world!</title> </head> <body> <h1>Bootstrap5开发模板</h1> <div class="text-center text-success fs-1">看到我居中，颜色绿色表示起作用了！</div> <script src="bootstrap5/bootstrap.bundle.min.js" ></script> </body> </html>
下面是一个导航条演示，别看代码那么多，其实全部是从手册上一次直接复制进来的，没有手写任何代码。
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="keywords" content=""> <meta name="description" content=""> <link href="bootstrap5/bootstrap.min.css" rel="stylesheet"> <title>导航条演示</title> </head> <body> <nav class="navbar navbar-expand-lg navbar-dark bg-primary"> <div> <a href="#">Navbar</a> <button type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav me-auto mb-2 mb-lg-0"> <li> <a class="nav-link active" aria-current="page" href="#">Home</a> </li> <li> <a href="#">Link</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown </a> <ul aria-labelledby="navbarDropdown"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><hr></li> <li><a href="#">Something else here</a></li> </ul> </li> <li> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> </li> </ul> <form> <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success" type="submit">Search</button> </form> </div> </div> </nav> <script src="bootstrap5/bootstrap.bundle.min.js" ></script> </body> </html>
自己动手做一下，如果你显示的页面和我图片的不一样，那么很有可能是你放置的路径存在问题，请仔细核对一遍，尤其是注意相对路径和绝对路径，以及目录单词的拼法，很可能会因为一个字母的差别或者是多了一个空格导致路径错误。