效果图：

代码：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

<script src="bootstrap-3.3.6-dist/js/jquery-1.11.2.min.js"></script>

<link href="bootstrap-3.3.6-dist/css/bootstrap.css" rel="stylesheet">

<script src="bootstrap-3.3.6-dist/js/bootstrap.js"></script>

<style>

body

{

    padding-top: 70px;

}

</style>

</head>

<body>

//添加navbar-fixed-top可以让导航条一直固定在顶部，不会因为滚动条改变而改变，navbar-inverse让导航条黑底展示
<nav class="navbar navbar-default navbar-fixed-top navbar-inverse" role="navigation">
　　<div class="container">　　//container让导航条居中container-fluid让导航条自适应
　　
　　　　<div class="navbar-header">
　　　　　　//粉色字体代表响应式布局：当浏览器宽度小于某个值时导航栏折叠变成三道杠

            <button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" type="button">

                <span class="sr-only">看看这是什么</span>

                <span class="icon-bar"></span>

                <span class="icon-bar"></span>

                <span class="icon-bar"></span>

            </button>

       //绿色代表导航栏左侧logo或者图标    
　　　　 　　<a class="navbar-brand" href="www.baidu.com">浏览器博物馆</a>

        </div>
　　　　//棕色包裹项目是导航条内容，为了响应式布局，点击三道杠弹出导航栏

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

           
　　　　　　　　//紫色代表导航栏中的项目
　　　　　　 <ul class="nav navbar-nav">

                <li><a href="www.baidu.com">综述</a></li>

                <li>//蓝色为下拉菜单

                    <a class="dropdown-toggle" data-toggle="dropdown" href="www.baidu.com">简述<span class="caret"></span></a>

                    <ul class="dropdown-menu" role="menu">

                        <li><a href="#">谷歌浏览器</a></li>

                        <li><a href="#">IE浏览器</a></li>

                        <li><a href="#">360浏览器</a></li>

                        <li><a href="#">谷歌火狐浏览器</a></li>

                    </ul>
　　　　　　　　　　</li>

                <li><a href="www.baidu.com">特点</a></li>

                <li><a href="www.baidu.com">关于</a></li>

            </ul>

        </div>

    </div>

</nav>

<p>dsaf3ewqrfdsaf </p>

<p>dsafdhtetf saf </p>

<p>dsafdsaf saf </p>

<p>dsafdsaf saf </p>

<p>dsafdsaf saf </p>

<p>dsafdsaf saf </p>

<p>dsafdsaf saf </p>

<p>dsafdsaf saf </p>

<p>dsafdsaf saf </p>

<p>dsafdsaf saf </p>

<p>dsafdsaf saf </p>

<p>dsafdsaf saf </p>

<p>dsafdsaf saf </p>

<p>dsafdsaf saf </p>

<p>dsafdsaf saf </p>

<p>dsafdsaf saf </p>

<p>dsafdsaf saf </p>

<p>dsafdsaf saf </p>

<p>dsafdsaf saf </p>

<p>dsafdsaf saf </p>

<p>dsafdsaf saf </p>

<p>dsafdsaf saf </p>

<p>dsafdsaf saf </p>

<p>dsafdsaf saf </p>

<p>dsafdsaf saf </p>

<p>dsafdsaf saf </p>

<p>dsafdsaf saf </p>

<p>dsafdsaf saf </p>

<p>dsafdsaf saf </p>

<p>dsafdsaf saf </p>

<p>dsafdsaf saf </p>

<p>dsafdsaf saf </p>

<p>dsafdsaf saf </p>

<p>dsafdsaf saf </p>

<p>dsafdsaf saf </p>

<p>dsafdsaf saf </p>

<p>dsafdsaf saf </p>

<p>dsafdsaf saf </p>

<p>dsafdsaf saf </p>

<p>dsafdsaf saf </p>

<p>dsafdsaf saf </p>

<p>dsafdsaf saf </p>

<p>dsafdsaf saf </p>

</body>

</html>

bootstrap完整导航栏的更多相关文章

  1. [置顶] bootstrap自定义样式-bootstrap侧边导航栏的实现

    前言 bootstrap自带的响应式导航栏是向下滑动的,有时满足不了个性化的需求,需要做一个类似于android drawerLayout 侧滑的菜单,这就是我要实现的bootstrap自定义侧滑菜单 ...

  2. Bootstrap，导航栏点击效果修复（补）

    前言: 昨天晚上休息,忘记发博客了.对于学习这件是,还是需要坚持的.想想自建一个Jekyll博客模版还是很兴奋的,话不多说,看正文吧! 关于开发:  先看个Demo吧,点这里.你会发现,点击是没有效果 ...

  3. Bootstrap之导航栏（2015年-05年-20日）

    <nav class="navbar navbar-default" style="border-color: transparent;">< ...

  4. BootStrap 实现导航栏nav透明，nav子元素文字不透明

    在给nav 的属性赋值 opacity:0.0透明度时会导致nav内子元素会继承opacity属性.此时再对子元素赋值opacity:1.0 时会导致 子元素实际opacity值为0.0*1.0=0. ...

  5. Bootstrap 侧边栏 导航栏

    http://blog.csdn.net/shangmingchao/article/details/49763351 实测效果图:

  6. Bootstrap<基础十七>导航栏

    导航栏是一个很好的功能,是 Bootstrap 网站的一个突出特点.导航栏在您的应用或网站中作为导航页头的响应式基础组件.导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开. ...

  7. BootStrap导航栏的使用

    默认的导航栏 创建一个默认的导航栏的步骤如下: 向 <nav> 标签添加 class .navbar..navbar-default. 向上面的元素添加 role="naviga ...

  8. bootstrap导航栏.nav与.navbar区别

    刚刚看了bootstrap的导航栏,发现有点弄混了,现在来整理一下: 一.简单的ul,li组成的导航: <ul class="nav nav-pills justify-content ...

  9. 自定义bootstrap样式-9行样式自定义漂亮大气bootstrap导航栏

    有人说前端发展太快,框架太多,各有所需,各有所长.看看这幅图,估计都知道这些框架,但是大部分公司中实际要用到的也就那么几个. 发展再快,框架再多.还是得回到原点,不就是Html+Css+JavaScr ...

随机推荐

  1. SharedPreferences的工具类，使用起来方便、快捷

    SharedPreferences的工具类,使用起来方便.快捷:上代码:import android.content.Context;import android.content.SharedPref ...

  2. python 整型--《Python 3程序开发指南》笔记

    参考:<Python 3程序开发指南> 整数转换函数: bin(i) 返回整数i的二进制表示(字符串) hex(i) 返回i的十六进制表示(字符串) int(x) 将x转换为整数,失败产生 ...

  3. 【Asp.Net】后台生成控件并绑定事件

    在Asp.Net的Web页面处理流程中,有时候我们会碰到需要动态生成的控件,并为之绑定相应的事件. 接下来我们来动态的生成一个控件 //在用户代码初始化阶段添加控件 protected void Pa ...

  4. MyKTV项目，走起！

    MyKTV项目,走起! 第一部分:这个项目对于新手来说有一点难度,但是当你理清类之间的关系和怎样去实现功能后就会感觉轻松很多. 话不多说,先上类图: 接着是数据库表间关系: 本项目要实现以下功能: 明 ...

  5. html行内元素 和 块状元素 总结

    块状元素 address - 地址blockquote - 块引用center - 举中对齐块dir - 目录列表div - 常用块级容易,也是CSS layout的主要标签dl - 定义列表fiel ...

  6. 安装 SQL Server2008 安装程序规则支持提示“重新启动计算机”失败

    HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\Session Manager 删除 PendingFileRenameOperations这个 ...

  7. Windows8 正式版最简单的去除桌面水印方法

    方法一: 优点:无需替换文件,无需任何工具,对系统没有副作用缺点:更换主题或者壁纸之后水印再现方法:按住 “win键+P” 进入 “第二屏幕 ”选择 “扩展”再按住 “win键+P” 进入 “第二屏幕 ...

  8. 【转】深入理解Java内存模型（七）——总结

    处理器内存模型 顺序一致性内存模型是一个理论参考模型,JMM和处理器内存模型在设计时通常会把顺序一致性内存模型作为参照.JMM和处理器内存模型在设计时会对顺序一致性模型做一些放松,因为如果完全按照顺序 ...

  9. js子窗口修改父窗口内容

    在框架中,我用 JavaScript 获取 JSON 数据,组织成 HTML 代码,最后将其填充至上层文档的一个元素中.按照一般的写法,我们需要用到类似如下的语句: 1.window.parent.d ...

  10. C++中基类对象的引用

    代码: #include <iostream> #include <cstdio> using namespace std; class A{ public: void pri ...