热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

基于Bootstrap实现下图所示效果的页面,一个白底的带有两个菜单项、一个下拉菜单和一个登录表单的基本导航条

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>

效果图:

借鉴于慕课网

此文学习于慕课网,仅供自己学习记录,如有不对请纠正。


推荐阅读
author-avatar
加QQ873759613
这个家伙很懒,什么也没留下!
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有