效果图:

代码:

<!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. make文件中静态连接库在command里面的位置

    linux软件第一次调用动态连接库的时候要延迟几秒,怀疑在突然掉库的时候动态库加载耗费了时间,所以造成延时,遂改为静态库方式,原来的makefile文件是 testmac:         cp $( ...

  2. mysql将一个库中表的某几个字段插入到另一个库中的表

    insert into dbname1.tablename1(filed1,filed2,filed3) select filed1,filed2,filed3from dbname2.tablena ...

  3. DataGrid 使用模型列后实现点击列名称排序

    DataGrid 使用模型列后实现点击列名称排序 代码如下: <DataGridTemplateColumn Header="型 号" SortMemberPath=&quo ...

  4. Android-Eclipse汉化

    首先下载好汉化包 解压后得到eclipse文件夹 然后在eclipse根目录下创建language文件夹 将eclipse文件夹放入 在eclipse根目录下创建links文件夹 然后在里面添加这个文 ...

  5. python面对对象编程------3:写集合类的三种方法

    写一个集合类的三种方法:wrap,extend,invent 一:包装一个集合类 class Deck: def __init__( self ): self._cards = [card6(r+1, ...

  6. C# ZXing.Net生成二维码、识别二维码、生成带Logo的二维码(二)

    1.使用ZXint.Net生成带logo的二维码 /// <summary> /// 生成带Logo的二维码 /// </summary> /// <param name ...

  7. bash:ifconfig command not found for contos7.0

    CentOS7刚发布,我忍不住把DELL T410从CentOS6升级到CentOS7.好不容易等安装结束后,立即配置网络,然后在yum源上安装环境.可是执行ifconfig的时候系统提示让我傻了眼: ...

  8. oracle存储过程写法。

    create or replace procedure testwzm(v_gdjdm in varchar2) isv_id varchar2(10);v_xlname varchar2(100); ...

  9. 关于.net 对excel操作的方法

    asp.net打印文件用的最多的一般2种,word和excel,今天在这里整洁一下关于打印excel的几种方式及优缺点 第一种:直接打印html代码,然后将输出类型伪装成excel文件(excel是可 ...

  10. [转]C++强制类型转换

    dynamic_cast:   通常在基类和派生类之间转换时使用,run-time   castconst_cast:   主要针对const和volatile的转换. static_cast:    ...