Bootstrap搜索框示例

原创已于 2025-06-27 14:11:54 修改 · 366 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #html #css

于 2025-05-24 16:06:03 首次发布

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap搜索框示例</title>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

</head>
<body>
<div class="container mt-5">
<div class="row justify-content-center">
<div class="col-md-6">
<h2 class="text-center mb-4">搜索框示例</h2>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="输入搜索内容" aria-label="Search">
<button class="btn btn-outline-success" type="submit">搜索</button>
</form>

</div>
</div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>