除了制作选项卡和下拉菜单，bootstrap还能编写出美观的网站导航栏

一、仿知乎导航栏

<body>
　<nav class="navbar navbar-default navbar-fixed-top">    <!--  navbar-default 指导航栏的默认样式   navbar-fixed-top 指导航栏在顶部固定定位 -->

    <div class=container>               <!--  将contianer放在 nav标签内可以保证导航栏在 左右方向上覆盖住整个窗口 -->

      <div class="navbar-header">

        <a href="#" class="navbar-brand"><img src="img/zhihulogo.png" /></a>       <!-- logo应该放在类名为 navbar-header  的div元素里 -->

      </div>

      <form class="navbar-form navbar-left">       <!--  navbar-left 指元素向左浮动 -->

        <div class="input-group">

          <input type="text" class="form-control" style="320px" placeholder="search your xxx"/>

          <span class="input-group-addon"><a href="#"><span class="glyphicon glyphicon-search"></span></a></span>

        </div>

      </form>

      <ul class="nav navbar-nav navbar-left">

        <li><a href="#">首页</a></li>

        <li><a href="#">话题</a></li>

        <li><a href="#">发现</a></li>

      </ul>

      <ul class="nav navbar-nav navbar-right">

        <li><a href="#"><span class="glyphicon glyphicon-user"></span>注册知乎</a></li>

        <li><a href="#">登录</a></li>

      </ul>

      <button class="btn btn-primary navbar-btn navbar-right">提问</button>

    </div>

  </nav>

</body>
<style>

body{margin-top: 50px;}
.myBtnStyle .dropdown-menu span{
margin:5px;
}
.myBtnStyle .dropdown-menu {
animation: 0.5s linear fadeIn;
}
@keyframes fadeIn {
0%{opacity:0;transform: translateY(-20);}
100%{opacity: 1;transform: translateY(0);}
}
tab-content {
border:1px solid #999; border-top: none;border-radius: 0 0 5px 5px;
}
.container {
width: 960px
}
.navbar-default{
background: linear-gradient(to bottom,#086ed5, #055db5) !important;
}
.navbar-header{
margin-top: -3px;
}
.navbar-nav a {
color:snow !important;
}

</style>

样式如图所示

二、响应式导航

　　方便移动端，在窗口缩小的时候，可以将导航栏中的内容隐藏，点击导航栏中按钮后展开

<body>

   <nav class="navbar navbar-inverse navbar-fixed-top">

    <div class="container">

      <div class="navbar-header">

        <button class="navbar-toggle" data-toggle="collapse" data-target="#myCollapse">                    //窗口缩小后显示的按钮也放在navbar-header中，和logo元素 navbar-brand 类同级；

          <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>　　　　//用三个icon-bar做出的按钮，三道杠，每个span各代表一条杠

        </button>

        <a href="#" class="navbar-brand">logo</a>

      </div>

      <div class="collapse navbar-collapse" id="myCollapse">              //将需要隐藏的内容放入collapse，设置一个id，和上面的data-target关联

        <ul class="nav navbar-nav">

          <li><a href="#a">第一个</a></li>

          <li><a href="#b">第二个</a></li>

          <li class="dropdown">

            <a href="#" class="dropdown-toggle" data-toggle="dropdown">第三个 <span class="caret"></span></a>

            <ul class="dropdown-menu">

              <li><a href="#c">child1</a></li>

              <li><a href="#d">child2</a></li>

            </ul>

          </li>

        </ul>

      </div>

    </div>

 </nav>

</body>

如图：

三、滚动监听导航

　　对于比较长的网页，可以做出导航栏内元素和网页内容位置相对应的效果

<style>

  body{padding-top: 50px;}            //因为导航栏固定定位，所以给内容一个paddingTop让导航栏不挡住网页内容

  body{position: relative;height: 2000px;} //body需要相对定位

  .pos{margin-bottom: 500px;padding-top: 50px;} //填充内容  无实际意义

</style>

</head>

<body data-spy="scroll" data-target="#myNavbar" data-offset="200">    //用data-spy="scroll" 来设置滚动监听， data-offset是用来调整元素对应的相应位置，对该数值尝试做出调整就可以体会到其作用

  <nav id="myNavbar" class="navbar navbar-default navbar-fixed-top">

    <div class="container">

      <div class="navbar-header">

        <a href="#" class="navbar-brand">logo</a>

      </div>

      <div id="myCollapse" class="navbar-collapse">             //此处复制了上面部分的代码，collapse这里可以忽略  - -！

        <ul class="nav navbar-nav">

          <li><a href="#a">first</a></li>                       //href 和 需要对应的位置的元素id 要对应

          <li><a href="#b">second</a></li>

          <li><a href="#c">third</a></li>

        </ul>

      </div>

    </div>

  </nav>

  <div id="a" class="pos">aaaa</div>

  <div id="b" class="pos">bbbb</div>

  <div id="c" class="pos">cccc</div>

</body>

使用bootstrap制作网站导航的更多相关文章

  1. 学习使用 CSS3 制作网站面包屑导航效果

    作为最重要的导航展示形式之一,面包屑导航能够让用户更清楚的知道他们所在页面的层次结构,让他们可以方便的导航到上一层页面.在本教程中,您将学习如何使用 CSS3 技术创建自己的面包屑导航效果. 效果演示 ...

  2. Ruby Rails学习中：网站导航，Bootstrap和自定义的CSS，局部视图

    添加一些结构 一.网站导航 1.添加一些结构后的网站布局文件 打开文件:app/views/layouts/application.html.erb 简单介绍一下,添加的代码: 我们从上往下看一下这段 ...

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

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

  4. Fixed Responsive Nav – 响应式的单页网站导航插件

    Fixed Responsive Nav 是一个响应式的,固定的,触摸友好的单页网站导航插件,响应式导航,流畅的动画滚动.该项目采用渐进增强构建,支持工作在 IE6 及以上版本的浏览器. 你可以给导航 ...

  5. 最值得收藏的Bootstrap资源网站

    如果你正在寻找Bootstrap图标,那今天的推荐对你而言绝对非常重要!在这篇内容中,我们把这套框架上的免费字体图 标做了个整合(当然,以后还会不断的更新).正如你所知,图标字体在一个web网页设计拥 ...

  6. 25+免费的Bootstrap HTML5网站模板

    在前端框架中,Bootstrap可以说是非常有名的高级网站设计框架.网上也有很多使用Bootstrap程序创建的免费模板.这些模板设计成响应式模式,因此你可以使用它们来为所有的设备平台和浏览器创建网站 ...

  7. 第二百三十八节，Bootstrap输入框和导航组件

    Bootstrap输入框和导航组件 学习要点: 1.输入框组件 2.导航组件 3.导航条组件 本节课我们主要学习一下Bootstrap的两个个组件功能:输入框组件和导航导航条组件. 一．输入框组件 文 ...

  8. CSS3学习-用CSS制作立体导航栏

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. Bootstrap手机网站开发案例

    Bootstrap手机网站开发案例 一.总结 一句话总结:Bootstrap手机网站开发注意事项(3点):a.引入viewpoint声明,b.通过屏幕宽动态控制元素显隐 c.图片添加自适应 1.Boo ...

随机推荐

  1. Python单例模式的设计与实现【完美版】

    目录 1. 按 2. 本文地址 3. 通过继承单例父类来实现 4. 使用装饰器实现 4.1. 懒汉式 4.2. 饿汉式 4.2.1. 未加锁版 4.2.2. 加锁版 1. 按 众所周知,对象是解决继承 ...

  2. SOAP、WSDL、 UDDI之间的关系

    SOAP(Simple Object Access Protocol) 简单对象访问协议: WSDL(Web Services Description Language) Web服务描述语言: UDD ...

  3. 程序员要注意！现在是RSS复兴的时候了

    一般来说,现代网络不乏恐怖,从无所不在的网络黑客到所有信息平台,再到各大平台的评论系统.不幸的是,我们建立的这个互联网并没有什么灵丹妙药.但任何人都厌倦了黑箱算法,控制你在网上看到的东西,一直存在但始 ...

  4. jmeter性能工具 之 传参 （三）

    jmeter 主要有三种方式:键值对传参,json格式传参,外部传参 1.键值对传参 可以参考上篇登陆,使用的传参方式是键值对传参  2.json 格式传参 用json 格式传参不要忘了加http 头 ...

  5. MySQL数据库5事务、视图、触发器、函数、数据库的备份

    目录 一.事务(important) 1.1什么是事务? 1.2解决办法 1.2.1事务的语法 1.2.2使用事务解决转账问题代码演示 1.2.3rollback 1.3事务的特性(important ...

  6. NODE升级到V12.X.X

    Node.js 是一个基于Chrome JavaScript运行时的平台,可轻松构建快速,可扩展的网络应用程序.最新版本 node.js yum存储库 由其官方网站维护.使用本教程添加yum存储库,并 ...

  7. poj 3468 : A Simple Problem with Integers 【线段树 区间修改】

    题目链接 题目是对一个数组,支持两种操作 操作C:对下标从a到b的每个元素,值增加c: 操作Q:对求下标从a到b的元素值之和. #include<cstdio> #include<c ...

  8. hdu 6045: Is Derek lying? (2017 多校第二场 1001）【找规律】

    题目链接 可以暴力找一下规律 比如,假设N=7,两人有5题相同,2题不同,枚举X=0->15时,Y的"Not lying"的取值范围从而找出规律 #include<bi ...

  9. 第五周作业—N42-虚怀若谷

    一.查找/etc目录下大于1M且类型为普通文件的所有文件 [root@centos7 ~]# find /etc -type f -size +1M -exec ls -lh {} \; -r--r- ...

  10. HTTP通信安全和Web攻击技术

    一.HTTPS,确保Web安全 在HTTP协议中可能存在信息窃听或身份伪装等安全问题,HTTP的不足: 通信使用明文(不加密),内容可能会被窃听  不验证通信方的身份,因此有可能遭遇伪装 无法证明报文 ...