Bootstrap -- 下拉菜单、输入框组、导航菜单

最新推荐文章于 2025-06-20 15:24:56 发布

转载最新推荐文章于 2025-06-20 15:24:56 发布 · 597 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/ChengWenHao/p/BootstrapPart6.html

文章标签：

#javascript #ViewUI

本文详细介绍Bootstrap框架中下拉菜单、输入框组、导航菜单的实现方法与样式展示，包括基本HTML结构、所需CSS与JS文件引用，适用于前端开发者快速上手。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Bootstrap -- 下拉菜单、输入框组、导航菜单

1. 下拉菜单

可以使用带有各种大小按钮的下拉菜单：.btn-lg、.btn-sm 或 .btn-xs。

实现下拉菜单：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test bootstrap</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>        
    <div class="dropdown">
        <button type="button" class="btn dropdown-toggle" id="dropdownMenu" data-toggle="dropdown">
        编程语言<span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
            <li role="presentation">
                <a role="menuitem" tabindex="-1" href="#">Java</a>
            </li>
            <li role="presentation">
                <a role="menuitem" tabindex="-1" href="#">C#</a>
            </li>
            <li role="presentation">
                <a role="menuitem" tabindex="-1" href="#">Python</a>
            </li>
        </ul>
    </div>
</body>
</html>

View Code

下拉菜单效果：

2. 输入框组: 使用输入框组，您可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮。

使用输入框组：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test bootstrap</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>        
    <div class="input-group">
        <span class="input-group-addon">www.</span>
        <input type="text" class="form-control" placeholder="域名">
        <span class="input-group-addon">.com</span>
    </div>
</body>
</html>

View Code

输入框组样式：

3. 导航菜单

实现导航菜单：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test bootstrap</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>        
    <p>导航菜单</p>
    <ul class="nav nav-tabs">
      <li class="active"><a href="#">主页</a></li>
      <li><a href="#">C#</a></li>
      <li><a href="#">Asp.Net</a></li>
      <li><a href="#">VB.Net</a></li>
      <li><a href="#">Java</a></li>
      <li><a href="#">PHP</a></li>
    </ul>
</body>
</html>

View Code

导航菜单样式：

4. 带有下拉菜单的导航菜单

实现带有下拉菜单的导航菜单：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test bootstrap</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>        
    <p>导航菜单</p>
    <ul class="nav nav-tabs">
      <li class="active"><a href="#">主页</a></li>
      <li><a href="#">C#</a></li>
      <li><a href="#">Asp.Net</a></li>
      <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">
            .Net<span class="caret"></span>
          </a>
          <ul class="dropdown-menu">
            <li><a href="#">EF</a></li>
            <li><a href="#">Linq</a></li>
            <li><a href="#">MVC</a></li>
          </ul>
      </li>
      <li><a href="#">VB.Net</a></li>
      <li><a href="#">Java</a></li>
      <li><a href="#">PHP</a></li>
    </ul>
</body>
</html>