除了制作选项卡和下拉菜单，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. JavaScript基础2——下拉列表左右选择

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. 命令行运行python -m http.server报错

    最近在学习网站搭建,借助python搭建服务器时,在网站目录启动python服务时报错,如下: UnicodeDecodeError: 'utf-8' codec can't decode byte ...

  3. Uedit32_17.00 修改某一语言背景色-修改后续名后语法着色及某语言的大括号{}对齐

    修改UE的背景色:高级-配置-编辑器显示-其它-设置颜色 新增扩展名语法着色:如以tpl为后缀的html代码格式着色高级-配置-编辑器显示-语法着色-语言选言[选中要着色的语言html]-打开-在'F ...

  4. MySQL系列理论知识

    内容: 1.视图 2.触发器 3.事务 4.存储过程 5.内置函数 6.流程控制 7.索引与慢查询优化 —————————————————————————————— 1.视图: 1.视图是什么: 视图 ...

  5. linux清理 clientmqueue 垃圾文件防止 inode 被占满

    #find /var/spool/clientmqueue/ -type -f |xargs rm -f

  6. idea hibernate console 执行hql报错

    报错信息 hql> select a from GDXMZD a[2019-08-29 13:45:01] org.hibernate.service.spi.ServiceException: ...

  7. Linux学习-MySQL的高可用性集群Galera Cluste

    一.Galera Cluste简介 1.Galera Cluster 集成了Galera插件的MySQL集群,是一种新型的,数据不共享的,高度冗余的高可用方案,目前Galera Cluster有两个版 ...

  8. NIO拷贝

  9. 如何查看本机上安装的.NET Framework版本

    在开始菜单选择"运行", 或者快捷键 “windows键+R” 在命令窗口输入regedit.exe,打开注册表 在注册表中定位到如下节点 HKEY_LOCAL_MACHINE\S ...

  10. maven构建docker镜像异常

    由于没有配置ip+2375端口,导致每次跑的时候,都是连接本地的,一直会报错 [ERROR] Failed to execute goal com.spotify:docker-maven-plugi ...