基于Bootstrap实现下拉菜单项和表单导航条(两个菜单项，一个下拉菜单和登录表单导航条)
作者：老_蜗牛 发布时间：2024-04-16 08:49:09
标签：bootstrap,下拉菜单,表单,导航条
效果图如下所示：
实现代码如下：
<!DOCTYPE html>
<html lang="zh-cn">
<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>导航条</title>
<link rel="stylesheet" href=" //netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="" class="navbar-brand">某管理系统</a>
</div>
<div class="collapase navbar-collapse" id="menu">
<ul class="nav navbar-nav">
<li class="active"><a href="#">首页</a></li>
<li class="dropdown">
<a href="#" data-toggle="dropdown" role="button">
功能
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li class="dropdown-header">业务功能</li>
<li><a href="#">信息建立</a></li>
<li><a href="#">信息查询</a></li>
<li><a href="#">信息管理</a></li>
<li role="separetor" class="divider"></li>
<li class="dropdown-header">系统功能</li>
<li><a href="#">设置</a></li>
</ul>
</li>
<li><a href="#">帮助</a></li>
</ul>
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" class="form-control" placeholder="username">
<input type="text" class="form-control" placeholder="password">
<button type="button" class="btn btn-default">登录</button>
</div>
</form>
</div>
</div>
</nav>
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>
以上所述是小编给大家介绍的基于Bootstrap实现下拉菜单项和表单导航条(两个菜单项，一个下拉菜单和登录表单导航条)网站的支持！
来源：http://www.cnblogs.com/old-snail/archive/2016/07/22/5694839.html
0
投稿猜你喜欢
- 目录一、v-bind关键源码分析1、v-bind化的属性统一存储在哪里：attrsMap与attrsList2、解析HTML，解析出属性集合
本文实例讲述了Python实现获取照片拍摄日期并重命名的方法。分享给大家供大家参考，具体如下：python获取照片的拍摄日期并重命名。不支持- 索引是排好序的数据结构！可以用在 where 条件查找的字段，和order by 排序的字
- 一、简介是一个 python 内置包，不需要额外安装即可使用urllib 是 Python 标准库中用于网络请求的库，内置四个模块，分别是u
- 赋值：其实就是对象的引用（相当于取别名）。浅拷贝(copy)：拷贝父对象，不会拷贝对象内部的子对象，会引用子对象。深拷贝(deepcopy)
- FastApi快速构建一个web项目已经使用FastApi很久了。这个一个非常优秀的框架。和flask一样能够快速构建一个web服务。开发效
- 我为一大型网站做了一个论坛，也顺利通过了测试。由于是第一次做这方面的数据库，我不知道比其它网站上数据库差距有多大，是不是够优化。能推荐或介绍
- 最近用golang写了一个处理文件的脚本，由于其中涉及到了文件读写，开始使用golang中的 io 包，后来发现golang 中提供了一个b
- 近几年来，nosql大行其道，json更是火的一塌糊涂，作为数据库的元老，mysql在5.7版本中添加了对json数据的支持。这片博客主要介
- 使用profile来分析慢sqlmysql 的 sql 性能分析器主要用途是显示 sql 执行的整个过程中各项资源的使用情况。分析器可以更好
- function commafy() { var num = document.getElementById("NumA"
- 首先就是进程、线程、协程讲解老三样。进程: 本质上是一个独立执行的程序，进程是操作系统进行资源分配和调度的基本概念，操作系统进行资
- 本文实例讲述了JavaScript观察者模式原理与用法。分享给大家供大家参考，具体如下：观察者模式观察者模式又叫发布订阅模式（Publish
- 使用机器学习训练数据时，如果数据量较大可能我们不能够一次性将数据加载进内存，这时我们需要将数据进行预处理，分批次加载进内存。下面是代码作用是
- 三通道数组转成彩色图片 img=np.array(img1)img=img.reshape(3,img1.shap
- 任务描述本关任务：利用 PyEcharts 绘制一个基本的漏斗图。相关知识为了完成本关任务，你需要掌握：1. Python 的基本语法2.
- 目前为止，我们一直没有对函数声明和函数表达式加以区别。而实际上，解析器在向执行环境中加载数据时，对函数声明和函数表达式并非一视同仁。解析器会
- 字符串的IndexOf()方法搜索在该字符串上是否出现了作为参数传递的字符串,如果找到字符串,则返回字符的起始位置 (0表示第一个字符,1表
- 本文实例讲述了Python 实现的微信爬虫。分享给大家供大家参考，具体如下：单线程版：import urllib.requestimport
- 本文实例讲述了Python3实现获取图片文字里中文的方法。分享给大家供大家参考，具体如下：一、运行环境(1) win10(2) pychar
