除了制作选项卡和下拉菜单，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. 【推荐系统】知乎live入门3.召回

    参考链接 [推荐系统]知乎live入门 目录 1. 概述 2. 画像过滤 3. 协同过滤 4. 内容过滤 5. 模型过滤 6. 其他过滤 7. 总结 ========================= ...

  2. javascript中的对象字面量为啥这么酷

    原文链接 : Why object literals in JavaScript are cool 原文作者 : Dmitri Pavlutin 译者 : neal1991 个人主页:http://n ...

  3. 利用tesseract-ocr进行验证码识别

    因为爬虫项目需要模拟登陆,可是有一个网站的登录需要输入验证码.其实这种登录有2种解决方案,一种是利用cookie,一种是识别图片.前者需要人工登录一次,而且有时效限制,故不太现实.后者可以,但是难点是 ...

  4. element 弹框关闭报错

    <template> <el-container style="padding: 00px 20px 0px 20px"> <el-dialog ti ...

  5. idea 创建java web项目ssm-gradle

    环境准备:jdk1.8+tomcat8+idea+gradle 1.创建项目SSM 使用gradle创建项目,按照提示如下   image.png 输入项目名称,组名   image.png   im ...

  6. wepy的第一个demo

    一.在node中安装相应的模块文件,查看文档 二.案例 json部分 { "usingComponents": { "van-button": ".. ...

  7. dirname 显示文件或目录路径

    1. 命令功能 dirname 去除文件名中非目录部分,仅显示与目录有关部分.dirname读取指定路径名保留最后一个/及其后面部分的字符,删除其他部分,并把结果到标准输出.如果最后一个/后无字符,d ...

  8. ps:点阵格式图像

    我们所看到的图像,究竟是如何构成的呢?这就需要涉及到图像类型的概念. 电脑中的图像类型分为两大类,一类称为点阵图,一类称为矢量图. 点阵图顾名思义就是由点构成的,如同用马赛克去拼贴图案一样,每个马赛克 ...

  9. mybaties数据源配置类型（POOLED、JNDI、UNPOOLED）

    dataSource的类型可以配置成其内置类型之一,如UNPOOLED.POOLED.JNDI. 如果将类型设置成UNPOOLED,mybaties会为每一个数据库操作创建一个新的连接,并关闭它.该方 ...

  10. configerparser模块

    '''[mysqld]charater-server-set='utf8'default-engine='innodb'skip-grant-table=Trueport=3306 [client]u ...