bootstrap导航条相关知识

在导航条(navbar)中有一个背景色、而且导航条可以是纯链接（类似导航），也可以是表单，还有就是表单和导航一起结合等多种形式。

为导航条添加标题、二级菜单及状态

<div class="navbar navbar-default" role="navigation">

  　<div class="navbar-header">

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

  　</div>

    <ul class="nav navbar-nav">

         <li class="active"><a href="##">网站首页</a></li>

        <li class="dropdown">

          <a href="##" data-toggle="dropdown" class="dropdown-toggle">系列教程<span class="caret"></span></a>

          <ul class="dropdown-menu">

            <li><a href="##">CSS3</a></li>

            <li><a href="##">JavaScript</a></li>

            <li class="disabled"><a href="##">PHP</a></li>

          </ul>

       </li>

       <li><a href="##">名师介绍</a></li>

       <li><a href="##">成功案例</a></li>

       <li><a href="##">关于我们</a></li>

    </ul>

</div>

带表单的导航条

<div class="navbar navbar-default" role="navigation">

  　<div class="navbar-header">

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

  　</div>

    <ul class="nav navbar-nav">

       <li class="active"><a href="##">网站首页</a></li>

      <li><a href="##">名师介绍</a></li>

      <li><a href="##">成功案例</a></li>

      <li class="dropdown">

       <a href="##" data-toggle="dropdown" class="dropdown-toggle">关于我们<span class="caret"></span></a>

       <ul class="dropdown-menu">

            <li><a href="##">公司简介</a></li>

            <li><a href="##">企业文化</a></li>

            <li class="disabled"><a href="##">组织结构</a></li>

            <li><a href="##">客服服务</a></li>

       </ul>

      </li>

     </ul>

     <form action="##" class="navbar-form navbar-right" role="search">

           <div class="form-group">

              <input type="text" class="form-control" placeholder="请输入关键词" />

           </div>

        <button type="submit" class="btn btn-default">搜索</button>

     </form>

</div>

固定导航条

<div class="navbar navbar-default navbar-fixed-top" role="navigation">

  　<div class="navbar-header">

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

  　</div>

     <ul class="nav navbar-nav">

         <li class="active"><a href="##">网站首页</a></li>

        <li><a href="##">系列教程</a></li>

        <li><a href="##">名师介绍</a></li>

        <li><a href="##">成功案例</a></li>

        <li><a href="##">关于我们</a></li>

     </ul>

</div>

<div class="content">我是内容</div>

<div class="navbar navbar-default navbar-fixed-bottom" role="navigation">

  　<div class="navbar-header">

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

  　</div>

     <ul class="nav navbar-nav">

         <li class="active"><a href="##">网站首页</a></li>

        <li><a href="##">系列教程</a></li>

        <li><a href="##">名师介绍</a></li>

        <li><a href="##">成功案例</a></li>

        <li><a href="##">关于我们</a></li>

     </ul>

</div>

<p>网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容。</p>

<p>网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容。</p>

<p>网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容。</p>

<p>网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容。</p>

<p>网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容。</p>

<p>网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容。</p>

<p>网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容。</p>

<p>网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容。</p>

<p>网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容。</p>

<p>网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容。</p>

<p>网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容。</p>

<p>网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容。</p>

<p>网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容。</p>

<p>网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容。</p>

<p>网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容。</p>

<p>网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容。</p>

<p>网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容。</p>

<p>网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容。</p>

<p>网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容。</p>

<p>网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容。</p>

<p>网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容。</p>

<p>网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容。</p>

<p>网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容。</p>

<p>网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容。</p>

<p>网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容。</p>

<p>网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容。</p>

<p>网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容。</p>

<p>网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容。</p>

<p>网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容。</p>

<p>网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容。</p>

<p>网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容。</p>

<p>网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容。</p>

<p>网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容。</p>

<p>网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容。</p>

<p>网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容。</p>

<p>网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容。</p>

<p>网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容。</p>

<p>网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容。</p>

<p>网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容。</p>

<p>网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容。</p>

<p>网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容。</p>

<p>网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容。</p>
<p>网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容。</p>

☑ .navbar-fixed-top：导航条固定在浏览器窗口顶部

☑ .navbar-fixed-bottom：导航条固定在浏览器窗口底部

存在bug及解决方法:

页面主内容顶部和底部都被固定导航条给遮住

1.body {

  padding-top: 70px;/*有顶部固定导航条时设置*/

  padding-bottom: 70px;/*有底部固定导航条时设置*/

}
因为固定导航条默认高度是50px，我们一般设置padding-top和padding-bottom的值为70px，当然有的时候还是需要具体情况具体分析。
2.把固定导航条都放在页面内容前面

<div class="navbar navbar-default navbar-fixed-top" role="navigation">

　…

</div>

<div class="navbar navbar-default navbar-fixed-bottom" role="navigation">

　…

</div>

<div class="content">我是内容</div>

在文件中添加下列样式代码：

.navbar-fixed-top ~ .content {

   padding-top: 70px;

}

.navbar-fixed-bottom ~ .content {

  padding-bottom: 70px;

}

响应式导航条

<div class="navbar navbar-default" role="navigation">

  <div class="navbar-header">

     　<!-- .navbar-toggle样式用于toggle收缩的内容，即nav-collapse collapse样式所在元素 -->

       <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse">

         <span class="sr-only">Toggle Navigation</span>

         <span class="icon-bar"></span>

         <span class="icon-bar"></span>

         <span class="icon-bar"></span>

       </button>

       <!-- 确保无论是宽屏还是窄屏，navbar-brand都显示 -->

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

  </div>

  <!-- 屏幕宽度小于768px时，div.navbar-responsive-collapse容器里的内容都会隐藏，显示icon-bar图标，当点击icon-bar图标时，再展开。屏幕大于768px时，默认显示。 -->

  <div class="collapse navbar-collapse navbar-responsive-collapse">

        <ul class="nav navbar-nav">

              <li class="active"><a href="##">网站首页</a></li>

              <li><a href="##">系列教程</a></li>

              <li><a href="##">名师介绍</a></li>

              <li><a href="##">成功案例</a></li>

              <li><a href="##">关于我们</a></li>

         </ul>

  </div>

</div>

反色导航条

将navbar-deafult类名换成navbar-inverse。其变化只是导航条的背景色和文本做了修改。

带页码的分页导航

1、通过“pagination-lg”让分页导航变大；

2、通过“pagination-sm”让分页导航变小。

<ul class="pagination pagination-lg">

  <li><a href="#">&laquo;第一页</a></li>

  <li><a href="#">11</a></li>

  <li><a href="#">12</a></li>

  <li class="active"><a href="#">13</a></li>

  <li><a href="#">14</a></li>

  <li><a href="#">15</a></li>

  <li class="disabled"><a href="#">最后一页&raquo;</a></li>

</ul>

<ul class="pagination pagination-sm">

  <li><a href="#">&laquo;第一页</a></li>

  <li><a href="#">11</a></li>

  <li><a href="#">12</a></li>

  <li class="active"><a href="#">13</a></li>

  <li><a href="#">14</a></li>

  <li><a href="#">15</a></li>

  <li class="disabled"><a href="#">最后一页&raquo;</a></li>

</ul>

翻页分页导航

<ul class="pager">

  <li><a href="#">&laquo;上一页</a></li>

  <li><a href="#">下一页&raquo;</a></li>

</ul>



对齐样式设置：

<ul class="pager">

   <li class="previous"><a href="#">&laquo;上一页</a></li>

   <li class="next"><a href="#">下一页&raquo;</a></li>

</ul>

状态样式设置：

<ul class="pager">

  <li class="disabled"><span>&laquo;上一页</span></li>

  <li><a href="#">下一页&raquo;</a></li>

</ul>

标签

<h3>Example heading <span class="label label-default">New</span></h3>

徽章

<ul class="nav nav-tabs">

  <li class="active"><a href="#">商品介绍</a></li>

  <li><a href="#">规格参数</a></li>

  <li><a href="#">商品评价 <span class="badge">25</span></a></li>

  <li><a href="#">售后保证</a></li>

</ul>

bootstrap导航条相关知识的更多相关文章

bootstrap课程8 bootstrap导航条在不同设备上的显示效果如何
bootstrap课程8 bootstrap导航条在不同设备上的显示效果如何(多去看参考手册) 一.总结一句话总结:在手机端或者平板端或者显示不够的话就缩起来了.(多去看参考手册) 二.bootst ...
bootstrap导航条在手机上默认展开二级目录,必须用setTimeout才能实现
bootstrap导航条在手机上默认展开二级目录,必须用setTimeout才能实现 $(document).ready(function() { $('.dropdown').hover(funct ...
Bootstrap学习笔记（5）--实现Bootstrap导航条可点击和鼠标悬停显示下拉菜单
实现Bootstrap导航条可点击和鼠标悬停显示下拉菜单微笑的鱼 2014-01-03 Bootstrap 5,281 次围观 11条评论使用Bootstrap导航条组件时,如果你的导航条带有下拉 ...
Bootstrap 导航条理解
以下理论内容copy自Bootstrap中文网 (一个不错的bootstrap学习网站) 导航条默认样式的导航条导航条是在您的应用或网站中作为导航页头的响应式基础组件.它们在移动设备上可以折叠(并 ...
浅谈Bootstrap——导航条起步
不多说,直接上代码. <div class="navbar navbar-default"> <div class="container"&g ...
bootstrap导航条+模态对话框+分页样式
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
Bootstrap——导航条（navbar）
导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多. 导航条(navbar)中有一个背景色.而且导航条可以是纯链接(类似导航).表单以及表单和导航一起结合等多种形式. 在制作一个基 ...
bootstrap导航条组件
一.导航条模板(官方文档) <nav class="navbar navbar-default"> <div class="container-flui ...
bootstrap导航条等样例持续更新》。。
1.导航条  <nav class="navbar navbar-static-top navbar-inverse"> <d ...

随机推荐

数据结构和算法之单向链表二：获取倒数第K个节点
我们在做算法的时候或多或少都会遇到这样的问题,那就是我们需要获取某一个数据集的倒数或者正数第几个数据.那么今天我们来看一下这个问题,怎么去获取倒数第K个节点.我们拿到这个问题的时候自然而然会想到我们让 ...
SVN命令解析以及问题解决(update...)
SVN常用指令 1.Repo-browser(浏览版本库) 通过“浏览版本库”可以直接查看服务器上指定目录下的所有目录结构(需要有相关权限),包括特定版本的作者,提交时间等,并且在浏览版本库里面链接了 ...
PyCharm下载与安装
进入PyCharm官网 1.点击下载Community 2.选择下载路径,点击“下载” 3.双击安装包,进行安装 4. 5.选择安装路径 6.根据实际情况选择32或64位 7. 8. 9.安装完成
day9-IO心得
Gevent协程 Select\Poll\Epoll异步IO与事件驱动 Python连接Mysql数据库操作 RabbitMQ队列 Redis\Memcached缓存 Paramiko SSH Tws ...
概述XML
xml概述--->干什么的存储一对多的数据作为配置文件存储数据 xml组成---->怎么用元素的分类包含标签体的标签(有开始标签和结束标签) 例如: <student> ...
Linux HDD information (SATA/SCSI/SAS/SSD)
举例一: [reistlin@reistlin.com ~]$ cat /proc/scsi/scsi | grep Model Vendor: ATA Model: OCZ-VERTEX2 3.5 ...
FTP服务器（SOCKET）返回异常 500 Command not understood
出现着这样的问题,一般是NLST中的参数包含特殊字符,如"\n",所以在发送SOCKET命令时,一定要检查命令参数的合法性.
「小程序JAVA实战」小程序视图之细说列表渲染（14）
转自:https://idig8.com/2018/08/09/xiaochengxu-chuji-14/ 列表的渲染,不管是任何语言都有列表这个概念.源码:https://github.com/li ...
YUV图像合成原理<转>
YUV图像合成原理引言:在视频监控中最常用的就是图像拼接和字符叠加,25FPS的视频流,如果每隔40MS就从各个通道中取一幅图像来合成,则可以看到一个实时的合成视频.合成的过程也就是原始图像的拼接. ...
【转】运输层TCP协议详细介绍
TCP是TCP/IP协议族中非常复杂的一个协议.它具有以下特点: 1:面向连接的运输层协议.在使用TCP协议之前,首先需要建立TCP连接.传送数据完毕后,必须释放已经建立的TCP连接. 2:一条TCP ...