正文

学会Bootstrap：轻松创建美观且实用的表单二级菜单教程

/0 浏览量
0405

在网页设计中，表单是用户与网站交互的重要方式。而Bootstrap作为一个流行的前端框架，提供了丰富的组件和工具来帮助我们快速构建美观且实用的网页。其中，Bootstrap的表单二级菜单功能，可以让我们在有限的页面上提供更多的交互选项，让用户体验更加丰富。下面，我们就来一起学习如何使用Bootstrap创建一个美观且实用的表单二级菜单。

一、准备工作

在开始之前，请确保你的项目中已经引入了Bootstrap。以下是Bootstrap的基本引入代码：

<!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>
  <!-- 引入Bootstrap CSS -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>

<!-- 页面内容 -->

<!-- 引入Bootstrap JS -->
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>

二、创建表单二级菜单

  1. HTML结构：首先，我们需要创建一个基本的表单结构，并为其添加一个id，以便我们在CSS和JavaScript中引用。
<form id="myForm">
  <div class="form-group">
    <label for="inputEmail">邮箱</label>
    <input type="email" class="form-control" id="inputEmail" placeholder="请输入邮箱">
  </div>
  <div class="form-group">
    <label for="inputPassword">密码</label>
    <input type="password" class="form-control" id="inputPassword" placeholder="请输入密码">
  </div>
  <div class="form-group">
    <label for="inputGender">性别</label>
    <select class="form-control" id="inputGender">
      <option value="male">男</option>
      <option value="female">女</option>
    </select>
  </div>
  <div class="form-group">
    <label for="inputLanguage">语言</label>
    <select class="form-control" id="inputLanguage">
      <option value="zh">中文</option>
      <option value="en">英文</option>
    </select>
  </div>
  <button type="submit" class="btn btn-primary">提交</button>
</div>
</form>
  1. CSS样式：Bootstrap提供了丰富的表单样式，我们可以直接使用。但为了使二级菜单更加美观，我们需要添加一些自定义样式。
/* 自定义样式 */
#myForm .form-group {
  margin-bottom: 15px;
}

#myForm .form-group label {
  font-weight: bold;
}

#myForm .form-group .form-control {
  border-radius: 5px;
}

#myForm .form-group .dropdown-menu {
  border-radius: 5px;
}
  1. JavaScript脚本：接下来，我们需要编写一个JavaScript函数，用于在点击性别或语言下拉菜单时显示二级菜单。
document.addEventListener('DOMContentLoaded', function () {
  var genderDropdown = document.getElementById('inputGender');
  var languageDropdown = document.getElementById('inputLanguage');

  genderDropdown.addEventListener('click', function (event) {
    event.stopPropagation();
    var dropdownMenu = this.querySelector('.dropdown-menu');
    dropdownMenu.style.display = dropdownMenu.style.display === 'block' ? 'none' : 'block';
  });

  languageDropdown.addEventListener('click', function (event) {
    event.stopPropagation();
    var dropdownMenu = this.querySelector('.dropdown-menu');
    dropdownMenu.style.display = dropdownMenu.style.display === 'block' ? 'none' : 'block';
  });

  document.addEventListener('click', function () {
    var dropdownMenus = document.querySelectorAll('.dropdown-menu');
    dropdownMenus.forEach(function (menu) {
      menu.style.display = 'none';
    });
  });
});
  1. 添加二级菜单：最后，我们需要在性别和语言下拉菜单中添加二级菜单。
<div class="form-group">
  <label for="inputGender">性别</label>
  <select class="form-control" id="inputGender">
    <option value="male">男</option>
    <option value="female">女</option>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">选项1</a>
      <a class="dropdown-item" href="#">选项2</a>
      <a class="dropdown-item" href="#">选项3</a>
    </div>
  </select>
</div>
<div class="form-group">
  <label for="inputLanguage">语言</label>
  <select class="form-control" id="inputLanguage">
    <option value="zh">中文</option>
    <option value="en">英文</option>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">选项1</a>
      <a class="dropdown-item" href="#">选项2</a>
      <a class="dropdown-item" href="#">选项3</a>
    </div>
  </select>
</div>

三、总结

通过以上步骤，我们成功创建了一个美观且实用的表单二级菜单。在实际项目中，你可以根据自己的需求调整样式和功能。希望这篇文章能帮助你更好地掌握Bootstrap表单二级菜单的制作方法。祝你学习愉快！

-- 展开阅读全文 --