基于Bootstrap实现下图所示效果的页面，一个白底的带有两个菜单项、一个下拉菜单和一个登录表单的基本导航条
作者：加QQ873759613 | 来源：互联网 | 2023-10-09 19:36
1<!DOCTYPEhtml>2<html>3<head>4<metacharsetutf-8
1 DOCTYPE html>
2 <html lang="zh-cn">
3 <head>
4 <meta charset="utf-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content=">
7 <title>导航条title>
8 <link rel="stylesheet" href=" //netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
9
10 head>
11
12 <body>
13 <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
14 <div class="container">
15 <div class="navbar-header">
16 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu">
17 <span class="sr-only">span>
18 <span class="icon-bar">span>
19 <span class="icon-bar">span>
20 <span class="icon-bar">span>
21 button>
22 <a href="" class="navbar-brand">某管理系统a>
23 div>
24
25 <div class="collapse navbar-collapse" id="menu">
26 <ul class="nav navbar-nav">
27 <li class="active"><a href="#">首页a>li>
28 <li class="dropdown">
29 <a href="#" data-toggle="dropdown" role="button">
30 功能
31 <span class="caret">span>
32 a>
33 <ul class="dropdown-menu">
34 <li class="dropdown-header">业务功能li>
35 <li><a href="#">信息建立a>li>
36 <li><a href="#">信息查询a>li>
37 <li><a href="#">信息管理a>li>
38 <li role="separetor" class="divider">li>
39 <li class="dropdown-header">系统功能li>
40 <li><a href="#">设置a>li>
41 ul>
42 li>
43 <li><a href="#">帮助a>li>
44 ul>
45 <form class="navbar-form navbar-right">
46 <div class="form-group">
47 <input type="text" class="form-control" placeholder="username">
48 <input type="text" class="form-control" placeholder="password">
49 <button type="button" class="btn btn-default">登录button>
50 div>
51 form>
52 div>
53 div>
54 nav>
55
56
57 <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js">script>
58 <script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js">script>
59 body>
60 html>
效果图：
此文学习于慕课网，仅供自己学习记录，如有不对请纠正。
京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有