05 导航条 分页导航

//导航条基础

<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>
<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 class="dropdown">
      　　  <a href="##" data-toggle="dropdown" class="dropdown-toggle">系列教程<span class="caret"></span></a>
       　　 <ul class="dropdown-menu"> //li标签里面嵌套一个ul
         　　   <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>
<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>

显示效果如下：

//基础导航条

<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>
<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>

显示效果如下：

//为导航栏添加标题 二级菜单及状态

<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="##">成功案例</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">慕课网</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>
<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>

显示效果如下：

//带表单的导航条

<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 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>
<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>

显示效果如下：

//导航条中的按钮 文本 和链接

<div class="navbar navbar-default" role="navigation">
  　<div class="navbar-header">
  　    <a href="##" class="navbar-brand">慕课网</a>
  　</div>
     <ul class="nav navbar-nav">
         <li><a href="##" class="navbar-text">Navbar Text</a></li>  //包在ul  li标签内的显示为文本
         <li><a href="##" class="navbar-text">Navbar Text</a></li>
         <li><a href="##" class="navbar-text">Navbar Text</a></li>
     </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>  //不包在ul li 里面 显示为超链接
         <a href="##" class="navbar-text">Navbar Text</a>
         <a href="##" class="navbar-text">Navbar Text</a>
     </div>
</div>
<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>

显示效果如下：

//固定导航条

<div class="navbar navbar-default navbar-fixed-top" 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="##">成功案例</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">慕课网</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>
<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>

显示效果如下：

//响应式导航条

<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>

<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>

效果显示如下：

屏幕宽的时候：

屏幕窄的时候：

//反色导航条

<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>
<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>

显示效果如下：

//分页导航（带页码的分页导航）

<ul class="pagination pagination-lg"> //偏大的分页导航
  <li><a href="#">&laquo;第一页</a></li> //左箭头小图标
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li class="active"><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li class="disabled"><a href="#">最后一页&raquo;</a></li>
</ul>
 
<ul class="pagination pagination"> //正常的分页导航
  <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>  
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

显示结果如下：

//分页导航（翻页分页导航）

<!--居中-->

<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>  
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

显示结果如下：

//徽章（小提示）

<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" style="color:red;">New</span></a></li> //在成功案例上提示一个New
        <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-width: 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>

显示效果如下：

时间： 2024-10-09 23:34:29

05 导航条 分页导航的相关文章

纯CSS实现下拉菜单及下拉容器等（纯CSS实现导航条及导航下拉容器）

原文:纯CSS实现下拉菜单及下拉容器等(纯CSS实现导航条及导航下拉容器) 虽然网上类似甚至相同的案例有很多,但是我还是写下,以记下笔记,也可供大家参考 希望大家可以指导批评~~ 首先我们以列表ul li 来开始我们菜单也可以说导航条的制作: 在页面中我们首先构建以下XHTML结构: <body> <ul id="navWrapper"> <li> <a href="#">Menu A</a> <ul

导航条——flash导航条

1.概述 在一些个性网站中,网站导航的首选就是flash导航条,flash导航条可以给浏览者带来更好的视觉效果,是网站个性的主要体现之一. 2.技术要点 主要应用Flash动作脚本中的Button类的release()方法实现.Release()方法在按下并释放鼠标左键时触发. 语法如下: on(release) { //此处插入语句 } 3.具体实现 (1)在Macromedia Flash Professional 8中,新建一个Flash文档,在菜单中单击“插入”→“新建元件”命令,在弹出

导航条——展开式导航条

1.概述 对于一个企业网站来说,“联系我们”超链接是必不可少的.为了更加引人注意,可以将其制作成具有展开式动画效果的导航条.运行本实例,读者可以看到页面右侧的“联系我们”导航条是慢慢展开的,并且每次刷新页面时,都会以同样的动画效果展开. 2.技术要点 本例主要通过自定义JavaScript函数ourmove()控制Image对象的height属性值实现的.为了实现动画效果,在JavaScript函数中还需要应用setTimeout()方法延迟执行改变图片高度的操作. 3.具体实现 (1)在网页中

织梦文章页分页导航条 分页代码副标题调用

后台  系统--> 系统基本参数---> 性能选项 (是/否)开启分页标题,开启会影响HTML生成速度(cfg_arcsptitle): 如果开启了这个函数,将启用分页标题,我们在发布普通文章的时候会在编辑器看到添加“#p#副标题#e#”这个代码,开启后分页标题的功能才可以使用,不过需要在模板中加入{dede:pagetitle style='select'/}标签 然后将 “#p#副标题#e#” 副标题修改成 你文章页面分页的标题即可. 标签详解: pagetitle:表示获取DedeCms

Bootstrap之导航条，分页导航

导航条基础 导航条(navbar)和上一节介绍的导航(nav),就相差一个字,多了一个“条”字.其实在Bootstrap框架中他们还是明显的区别.在导航条(navbar)中有一个背景色.而且导航条可以是纯链接(类似导航),也可以是表单,还有就是表单和导航一起结合等多种形式.   基础导航条 使用方法: 在制作一个基础导航条时,主要分以下几步: 第一步:首先在制作导航的列表(<ul class=”nav”>)基础上添加类名“navbar-nav” 第二步:在列表外部添加一个容器(div),并且使

神奇的Bootstrap 导航条 全面实战篇

转载请注明出处:http://blog.csdn.net/smartbetter/article/details/52056377 导航条(navbar)在Bootstrap中是一个独立组件,导航条(navbar)和导航(nav)在Bootstrap中是有明显的区别的.在导航条(navbar)中有一个背景色.而且导航条可以是纯链接.表单.表单和导航一起结合等多种形式. 1.实战一-带二级菜单和表单的导航条 <!DOCTYPE HTML> <html> <head> &l

Bootstrap导航条

前面的话 导航条(navbar)和导航(nav),就相差一个字,多了一个“条”字.其实在Bootstrap框架中他们还是明显的区别.在导航条(navbar)中有一个背景色.而且导航条可以是纯链接(类似导航),也可以是表单,还有就是表单和导航一起结合等多种形式.本文将详细介绍Bootstrap导航条 基础导航条 在Bootstrap框架中,导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多. 导航条是在应用或网站中作为导航页头的响应式基础组件.它们在移动设备上可以折叠(并且可开

Bootstarp学习（十一）导航条

导航条基础 导航条(navbar)和上一节介绍的导航(nav),就相差一个字,多了一个"条"字.其实在Bootstrap框架中他们还是明显的区别.在导航条(navbar)中有一个背景色.而且导航条可以是纯链接(类似导航),也可以是表单,还有就是表单和导航一起结合等多种形式.在这一节中将一起探讨Bootstrap框架中导航条的使用. 导航条和导航一样,在Bootstrap框架中是一个独立组件,所以你也可以根据自己的需求使用不同的版本: LESS版本:对应的源文件navbar.less S

Bootstarp学习（十二）分页导航

分页导航(带页码的分页导航) 分页导航几乎在哪个网站都可见.好的分页导航能给用户带来更好的用户体验.在Bootstrap框架中提供了两种分页导航: ?   带页码的分页导航 ?   带翻页的分页导航 带页码的分页导航 带页码的分页导航,可能是最常见的一种分页导航,特别是在列表页内容超多的时候,会给用户提供分页的导航方式.在Bootstrap框架为开发者提供不同的版本: ?   LESS版本:对应的源文件pagination.less ?   Sass版本:对应的源文件_pagination.sc