<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>bootstrap基础学习【导航条、分页导航】（五）</title> <link rel="stylesheet" href="css/bootstrap.min.css" /> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> </head> <body style="padding-left: 20px;"> <h3><strong>1.导航条基础、二级菜单、状态、带表单（搜索功能）</strong></h3> 使用方法：<br /> 在制作一个基础导航条时，主要分以下几步：<br /> 第一步：首先在制作导航的列表(ul class=”nav”)基础上添加类名“navbar-nav”<br /> 第二步：在列表外部添加一个容器（div），并且使用类名“navbar”和“navbar-default”<br /> <!--基本导航条--> <div class="navbar navbar-default" role="navigation"> <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> 菜单前面都会有一个标题（文字字号比其它文字稍大一些），通过“navbar-header”和“navbar-brand”来实现<br /> 此功能主要起一个提醒功能，当然改良一下可以当作是logo<br /> 导航条状态及二级菜单<br /> “navbar-left”让表单左浮动，“navbar-right”表单右浮动、只有当浏览器视窗宽度大于768px生效。 <div class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <a href="##" class="navbar-brand">文字logo</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> <form action="##" class="navbar-form navbar-left" rol="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="请输入关键词" /> </div> <button type="submit" class="btn btn-default">搜索</button> </form> </div> <h3><strong>2.导航条中的按钮、文本和链接</strong></h3> 1、导航条中的按钮navbar-btn<br /> 2、导航条中的文本navbar-text<br /> 3、导航条中的普通链接navbar-link<br /> 但这三种样式在框架中使用时受到一定的限制，需要和navbar-brand、navbar-nav配合起来使用。<br /> 而且对数量也有一定的限制，一般情况在使用一到两个不会有问题，超过两个就会有问题。<br /> 可将ul换成div标签 解决问题 <div class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <a href="##" class="navbar-brand">标题</a> </div> <div class="nav navbar-nav"> <a href="##" class="navbar-text">Navbar Text</a> <a href="##" class="navbar-text">Navbar Text</a> <a href="##" class="navbar-text">Navbar Text</a> </div> </div> <h3><strong>3.固定导航条</strong></h3> ☑ .navbar-fixed-top：导航条固定在浏览器窗口顶部<br /> ☑ .navbar-fixed-bottom：导航条固定在浏览器窗口底部<br /> 使用方法很简单，只需要在制作导航条最外部容器navbar上追加对应的类名即可<br /> body {<br /> padding-top: 70px;/*有顶部固定导航条时设置*/<br /> padding-bottom: 70px;/*有底部固定导航条时设置*/<br /> }<br /> <style> body { padding-top: 70px;/*有顶部固定导航条时设置*/ padding-bottom: 70px;/*有底部固定导航条时设置*/ } </style> <div class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="navbar-header"> <a href="##" class="navbar-brand">logo</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="navbar navbar-default navbar-fixed-bottom" role="navigation"> <div class="navbar-header"> <a href="##" class="navbar-brand">logo</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> <strong>或者将固定导航条放到页面内容前面并给 内容div设置padding值</strong><br /> div class="navbar navbar-default navbar-fixed-top" role="navigation"><br /> …<br /> /div><br /> div class="navbar navbar-default navbar-fixed-bottom" role="navigation"><br /> …<br /> /div><br /> div class="content">我是内容/div><br /> <h3><strong>4.响应式导航条</strong></h3> <!-- 使用方法： 1、保证在窄屏时需要折叠的内容必须包裹在带一个div内，并且为这个div加入collapse、navbar-collapse两个类名。最后为这个div添加一个class类名或者id名。 2、保证在窄屏时要显示的图标样式（固定写法）： <button class="navbar-toggle" type="button" data-toggle="collapse"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> 3、并为button添加data-target=".类名/#id名"，究竞是类名还是id名呢？由需要折叠的div来决定。如： 需要折叠的div代码段： <div class="collapse navbar-collapse" id="example"> <ul class="nav navbar-nav"> … </ul> </div> 窄屏时显示的图标代码段： <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#example"> ... </button> 也可以这么写，需要折叠的div代码段： <div class="collapse navbar-collapse example" > <ul class="nav navbar-nav"> … </ul> </div> 窄屏时要显示的图标： <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".example"> ... </button> --> <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">标题</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> <h3><strong>5.反色导航条</strong></h3> <div class="navbar navbar-inverse" role="navigation"> <div class="navbar-header"> <a href="##" class="navbar-brand">标题</a> </div> <ul class="nav navbar-nav"> <li class="active"><a href="">首页</a></li> <li><a href="">教程</a></li> <li><a href="">关于我们</a></li> </ul> </div> <h3><strong>6.分页导航（带页码的分页导航）</strong></h3> <ul class="pagination pagination-lg"> <li><a href="#">«第一页</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="#">最后一页»</a></li> </ul> <ul class="pagination pagination"> <li><a href="#">«第一页</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="#">最后一页»</a></li> </ul> <ul class="pagination pagination-sm"> <li><a href="#">«第一页</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="#">最后一页»</a></li> </ul> <h3><strong>7.分页导航（翻页分页导航）</strong></h3> 状态样式设置：<br /> 在li标签上添加了disabled类名的时候，分页按钮处于禁用状态，<br /> 但同样不能禁止其点击功能。可以通过js来处理，或将a标签换成span标签。<br /> <ul class="pager"> <li><a href="#">«上一页</a></li> <li><a href="#">下一页»</a></li> </ul> <!--左右对齐--> <ul class="pager"> <li class="previous"><a href="#">«上一页</a></li> <li class="next"><a href="#">下一页»</a></li> </ul> <!--禁止状态--> <ul class="pager"> <li class="disabled"><span>«上一页</span></li> <li><a href="#">下一页»</a></li> </ul> <h3><strong>8.标签</strong></h3> 有的时候标签内没有内容的时候，可以借助CSS3的:empty伪元素将其隐藏：<br /> .label:empty {<br /> display: none;<br /> }<br /> <span class="label label-default">默认标签</span> <span class="label label-primary">主要标签</span> <span class="label label-success">成功标签</span> <span class="label label-info">信息标签</span> <span class="label label-warning">警告标签</span> <span class="label label-danger">错误标签</span> <h3><strong>9.徽章</strong></h3> <a href="#">Inbox <span class="badge">42</span></a> <!--navbar-default导航条勋章--> <div class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <a href="##" class="navbar-brand">导航标题</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="##">成功案例<span class="badge">23</span></a></li> <li><a href="##">关于我们</a></li> </ul> </div> <!--nav-pills导航条勋章--> <ul class="nav nav-pills"> <li class="active"><a href="#">Home <span class="badge">42</span></a></li> <li><a href="#">Profile</a></li> <li><a href="#">Messages <span class="badge">3</span></a></li> </ul> <br /> <ul class="nav nav-pills nav-stacked" style="max- 260px;"> <li class="active"> <a href="#"> <span class="badge pull-right">42</span> Home </a> </li> <li><a href="#">Profile</a></li> <li> <a href="#"> <span class="badge pull-right">3</span> Messages </a> </li> </ul> <br /> <!--按钮勋章--> <button class="btn btn-primary" type="button"> Messages <span class="badge">4</span> </button> </body> </html>