HTML 在Twitter-Bootstrap中带有表单的下拉菜单

在本文中，我们将介绍如何在HTML中使用Twitter Bootstrap框架创建一个带有表单的下拉菜单。Twitter Bootstrap是一个常用的前端框架，它提供了丰富的CSS和JavaScript组件，使得网页的设计和开发更加简便和高效。

阅读更多：HTML 教程

创建一个基本的下拉菜单

首先，我们需要在HTML中引入Twitter Bootstrap的样式和脚本文件。可以通过以下代码实现：

<!DOCTYPE html>
<html>
<head>
  <title>Dropdown with Form</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
  <!-- 在这里添加下拉菜单的代码 -->
</body>
</html>

接下来，我们可以在<body>标签中添加下拉菜单的代码。下面是一个简单的示例：

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">选择一个选项
  <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li><a href="#">选项1</a></li>
    <li><a href="#">选项2</a></li>
    <li><a href="#">选项3</a></li>
  </ul>
</div>

在上述代码中，我们创建了一个包含三个选项的下拉菜单。点击按钮可以展开菜单选项。

在下拉菜单中添加表单

要在下拉菜单中添加表单，我们可以在<ul>标签中添加一个<li>标签作为表单的容器。以下是一个示例：

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">选择一个选项
  <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li>
      <form>
        <input type="text" placeholder="名称">
        <button type="submit" class="btn btn-default">提交</button>
      </form>
    </li>
    <li><a href="#">选项1</a></li>
    <li><a href="#">选项2</a></li>
    <li><a href="#">选项3</a></li>
  </ul>
</div>

在上述代码中，我们在第一个<li>标签内添加了一个简单的表单。表单包含一个输入框和一个提交按钮。你可以根据实际需求添加更多的表单元素和样式。

自定义下拉菜单的样式

使用Twitter Bootstrap，我们可以很容易地自定义下拉菜单的样式。例如，我们可以改变按钮的颜色和大小、菜单选项的背景色等。以下是一个示例：

<div class="dropdown">
  <button class="btn btn-danger dropdown-toggle" type="button" data-toggle="dropdown">选择一个选项
  <span class="caret"></span></button>
  <ul class="dropdown-menu" style="background-color: #f5f5f5;">
    <li>
      <form>
        <input type="text" class="form-control" placeholder="名称">
        <button type="submit" class="btn btn-success">提交</button>
      </form>
    </li>
    <li><a href="#">选项1</a></li>
    <li><a href="#">选项2</a></li>
    <li><a href="#">选项3</a></li>
  </ul>
</div>

在上述代码中，我们改变了按钮的样式为红色，并给菜单选项的背景色添加了自定义样式。