除了制作选项卡和下拉菜单，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. 一个完整的HTTP请求过程详细

    整个流程1.域名解析 —> 2.与服务器建立连接 —> 3.发起HTTP请求 —>4. 服务器响应HTTP请求,浏览器得到html代码 —> 5.浏览器解析html代码,并请求 ...

  2. h5与app交互

    现在移动端 web 应用,很多时候都需要与原生 app 进行交互.沟通(运行在 webview中),比如微信的 jssdk,通过 window.wx 对象调用一些原生 app 的功能.所以,这次就来捋 ...

  3. C# List<object> 按特定字段排序

    using System; using System.Collections; using System.Collections.Generic; using System.Linq; using S ...

  4. Firewalld--01 防火墙安全、基本指令、区域配置

    目录 Firewalld防火墙安全.基本指令.区域配置 1. 防火墙安全基本概述 2. 防火墙使用区域管理 3. 防火墙基本指令参数 4.防火墙区域配置策略 Firewalld防火墙安全.基本指令.区 ...

  5. linux使用v 2ray

    一.安装配置服务端程序 是时候使用 了,因为相对安全,使用方法很简单,使用root权限执行以下命令即可 $ sudo -i 一顿安装后如图 输入 命令可以查看链接,然后在客户端使用这个链接就能配置好了 ...

  6. UNIX网络编程总结三

    套接口结构 IPv4套接口地址结构: 1 2 3 4 5 6 7 struct sockaddr_in{/*16字节*/ uint8_t sin_len;  /*结构体长度,8位*/ sa_famil ...

  7. [IM002] [Microsoft][ODBC 驱动程序管理器] 未发现数据源名称并且未指定默认驱动程序

    Problems meet in the project: [IM002] [Microsoft][ODBC 驱动程序管理器] 未发现数据源名称并且未指定默认驱动程序((IM002) [Microso ...

  8. Linux wc -l 统计行数问题

    统计文件行数   通过wc -l 来实现. [root@xguang_02 xguang]# wc -l tt.dat     798 tt.dat    而通过nl\ cat -n 查看时发现为79 ...

  9. 对Asycn/Await的研究

    1.async 函数就是 Generator 函数的语法糖. 例如: var fs = require('fs'); var readFile = function (fileName){ retur ...

  10. namedtuple的简单使用

    """ factory function for creating tuple subclasses with named fields namedtuple 是tupl ...