Bootstrap响应式框架表格表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap Responsive Table Form</title>
<!-- 引入Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<form>
<div class="form-group">
<label for="name">Name:</label>
<input type="text" class="form-control" id="name" placeholder="Enter name">
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<table class="table table-bordered table-responsive">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<!-- 动态数据行 -->
</tbody>
</table>
</div>
<!-- 引入Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>这个代码实例展示了如何创建一个基本的Bootstrap响应式框架，其中包括一个用于数据输入的表单和一个用于展示数据的响应式表格。表单中有两个输入字段（Name 和 Email），以及一个提交按钮。表格包括三列（Name, Email, 和 Action），以及一个用于插入动态数据的 tbody 区域。这个例子简洁明了，并且使用了Bootstrap的CSS和JS库来增强响应式布局和用户界面的现代感。
评论已关闭