bootstrap中导航和表单的实现

最新推荐文章于 2021-06-28 05:10:18 发布

转载最新推荐文章于 2021-06-28 05:10:18 发布 · 336 阅读

文章标签：

#bootstrap

bootstrap 专栏收录该内容

3 篇文章

订阅专栏

本文展示了一个使用Bootstrap框架创建的导航栏及搜索表单示例。该示例包括多个输入字段如学号、姓名等，并通过Bootstrap和jQuery实现前端布局与交互。此代码适用于快速搭建具备基本搜索功能的网页应用。

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

<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE-edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Bootstrap的输入框代码</title>
    <link href="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap-theme.min.css" rel="external nofollow" rel="external nofollow"
        rel="stylesheet">
    <link href="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="external nofollow" rel="external nofollow"
        rel="stylesheet">
    <script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.3.1/js/npm.js"></script>
</head>
<body>
    <nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
            <!-- 导航图标 -->
            <div class="navbar-header">
                <a class="navbar-brand" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow">
                    <img alt="Brand" src="C:\Users\zrc\Pictures\images\head.jpg">
                </a>
            </div>
            <form class="navbar-form navbar-left" role="search">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="学号">
                </div>
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="姓名">
                </div>
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="年龄">
                </div>
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="性别">
                </div>
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="年级">
                </div>
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="班级">
                </div>
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="专业">
                </div>
                <button type="submit" class="btn btn-default">增加</button>
            </form>
        </div>
    </nav>
</body>
</html>