Bootstrap
海宁
核心文件
<!-- 新 Bootstrap5 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css">
<!-- 最新的 Bootstrap5 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
导航栏操作
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap5 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="javascript:void(0)">Logo</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mynavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mynavbar">
<ul class="navbar-nav me-auto">
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)">Link</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="text" placeholder="Search">
<button class="btn btn-primary" type="button">Search</button>
</form>
</div>
</div>
</nav>
<div class="container-fluid mt-3">
<h3>导航栏的表单</h3>
<p>你也可以在导航栏中添加表单。</p>
</div>
</body>
</html>
图书管理系统（初版）
一、模态框（登录注册）
<div class="modal" id="myModal">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<!-- 模态框头部 -->
<div class="modal-header">
<h4 class="modal-title">登陆界面</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<!-- 模态框内容 -->
<div class="modal-body container">
<form action="" class="needs-validation" novalidate>
<div class="form-group">
<label for="uname">Username:</label>
<input type="text" class="form-control" id="uname" placeholder="Enter username" name="uname"
required>
<div class="valid-feedback">验证成功！</div>
<div class="invalid-feedback">请输入用户名！</div>
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password"
name="pswd" required>
<div class="valid-feedback">验证成功！</div>
<div class="invalid-feedback">请输入密码！</div>
</div>
<div class="form-group form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="remember" required> 同意协议
<div class="valid-feedback">验证成功！</div>
<div class="invalid-feedback">同意协议才能登录。</div>
</label>
</div>
<button type="submit" class="btn btn-primary" onclick="findPeople()">确认登录</button>
</form>
</div>
<!-- 模态框底部 -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-bs-dismiss="modal">关闭</button>
</div>
</div>
</div>
</div>
二、按钮菜单
<div class=" container mt-4 dropdown dropdown-menu-end btn-group d-grid gap">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">功能</button>
<ul class="dropdown-menu text-center">
<li class="dropdown-item">
<button type="button" class="btn btn-primary btn-block btn-link text-light" onclick="addBook()">添加图书
</button>
</li>
<li class="dropdown-item">
<button type="button" class="btn btn-primary btn-block btn-link text-light" onclick="deleteBook()">删除图书
</button>
</li>
<li class="dropdown-item">
<button type="button" class="btn btn-primary btn-block btn-link text-light" onclick="showBook()">查看图书
</button>
</li>
<li class="dropdown-item">
<button type="button" class="btn btn-primary btn-block btn-link text-light"onclick="addCar()">加购物车</button>
</li>
</ul>
</div>
三、table表格遍历操作
var data = [];
for (var i = 0, rows = mytable.rows.length; i < rows; i++) {
for (var j = 0, cells = mytable.rows[i].cells.length; j < cells; j++) {
if (!data[i]) {
data[i] = new Array();
}
data[i][j] = mytable.rows[i].cells[j].innerHTML;
}
}
类似资料：