除了制作选项卡和下拉菜单，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. 正则表达式RegExp对象

    3.1 正则表达式对象的创建方式 字面量的方式   var patt = /匹配规则/修饰符;     / --> 边界的意思 new关键字     var patt = new RegExp( ...

  2. vue - 过滤器filter的基本使用

    1.全局过滤器 输出: 过滤器可以多次来调用 输出: 2.私有过滤器 <!DOCTYPE html> <html lang="en"> <head&g ...

  3. 用URLGather来管理和保存你的页面

    下载链接:http://url-gather.software.informer.com/download/#downloading 安装的过程简单,这里不一一叙述. 安装成功后,找到软件安装的路径, ...

  4. 【知识强化】第七章 输入/输出系统 7.3 I/O接口

    下面我们进入第七章的第三节,I/O接口. I/O接口呢就是解决了外设和主机之间的一个连接的问题.那么我们这一节就要来看一下I/O接口它有哪些功能,以及它是怎么组成的,还有就是我们主机如何来定位到那样一 ...

  5. RSA加密原理与秘钥、公钥生成

    RSA加密(非对称加密) RSA公开密钥密码体制.所谓的公开密钥密码体制就是使用不同的加密密钥与解密密钥,是一种“由已知加密密钥推导出解密密钥在计算上是不可行的”密码体制.(不可逆向运算的加密方法) ...

  6. Oracle 索引数据字典、基于函数的索引

    user_indexes 字典视图包含了索引名和唯一性, user_ind_columns视图包含了索引名.表名.以及列名 dba_indexes dba_ind_columns 同理 select ...

  7. Petrozavodsk Winter-2018. AtCoder Contest. Problem I. ADD, DIV, MAX 吉司机线段树

    题意:给你一个序列,需要支持以下操作:1:区间内的所有数加上某个值.2:区间内的所有数除以某个数(向下取整).3:询问某个区间内的最大值. 思路(从未见过的套路):维护区间最大值和区间最小值,执行2操 ...

  8. CSS3属性之 target伪类实现Tab切换效果

    CSS3 :target伪类用来改变页面中锚链接URL所指向的ID样式 代码示例: <!DOCTYPE html> <html lang="en"> < ...

  9. Ubuntu Server下MySql数据库备份脚本代码

    明: 我这里要把MySql数据库存放目录/var/lib/mysql下面的pw85数据库备份到/home/mysql_data里面,并且保存为mysqldata_bak_2012_04_11.tar. ...

  10. robot framework 自动化框架环境搭建

    win10 64位系统 1.安装python2.7.15 在官网https://www.python.org/downloads/下载对应版本 在同一台电脑上同时安装Python2和Python3参考 ...