<!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="#">&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">

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

        <h3><strong>7.分页导航（翻页分页导航）</strong></h3>

        状态样式设置：<br />

        在li标签上添加了disabled类名的时候，分页按钮处于禁用状态，<br />

        但同样不能禁止其点击功能。可以通过js来处理，或将a标签换成span标签。<br />

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

    </body>

</html>

bootstrap基础学习【导航条、分页导航】（五）的更多相关文章

  1. Bootstrap学习-导航条-分页导航

    1.导航条基础 导航条(navbar)和上一节介绍的导航(nav),就相差一个字,多了一个“条”字.其实在Bootstrap框架中他们还是明显的区别.在导航条(navbar)中有一个背景色.而且导航条 ...

  2. bootstrap基础学习【菜单、按钮、导航】（四）

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

  3. Bootstrap <基础十八>面包屑导航（Breadcrumbs）

    面包屑导航(Breadcrumbs)是一种基于网站层次信息的显示方式.以博客为例,面包屑导航可以显示发布日期.类别或标签.它们表示当前页面在导航层次结构内的位置. Bootstrap 中的面包屑导航( ...

  4. Bootstrap如何实现导航条？导航条实例详解

    本文主要和大家分享Bootstrap实现导航实例详解,在建设一个网站的时候,不同的页面有很多元素是一样的,比如导航条.侧边栏等,我们可以使用模板的继承,避免重复编写html代码.现在我们打算实现一个在 ...

  5. Bootstrap基础学习 ---- 系列文章

    [Bootstrap基础学习]05 Bootstrap学习总结 [Bootstrap基础学习]04 Bootstrap的HTML和CSS编码规范 [Bootstrap基础学习]03 Bootstrap ...

  6. bootstrap基础学习【网格系统】（三）

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

  7. bootstrap基础学习【表单含按钮】（二）

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

  8. bootstrap基础学习【排版】（一）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  9. HTML&CSS基础学习笔记1.11—导航栏

    上文我们介绍到的<a>标签,由于<a>标签可以用来跳转,所以我们可以拿<a>标签来生成网页的导航栏. 其实在实际运用中,<a>标签就经常会被用来生成导航 ...

随机推荐

  1. 学到了林海峰,武沛齐讲的Day25-完

    @property @classmethod @staticmethod 类的继承

  2. 坑爹的IE8

    1.不能用trim(),要用$.trim()    var aa = $("#id").val().trim()  这样素不行的,要变成这样Jquery的方式 var aa = $ ...

  3. RabbitMQ的5种模式

    队列截图,去rabbitMq.com去找学习文档 =========================================================================== ...

  4. wangEditor编辑器从word粘贴公式

    图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流的base64码目前限chrome浏览器使用首先以um-editor的二进制流保存为例:打开umeditor.js,找到UM ...

  5. exam8.3

    rank25凉凉好吧......T1:...        一开始完全**        手玩给的那张图(不放图,我太饿把图吃了)        发现对于任一个节点,减去上一个比他小的斐波那契数就是父 ...

  6. getchar 和EOF

    本文章基于:http://www.cnblogs.com/QLinux/articles/2465329.html,稍作了修改. 大师级经典的著作,要字斟句酌的去读,去理解.以前在看K&R的T ...

  7. ID生成算法(一)——雪花算法

    JavaScript生成有序GUID或者UUID,这时就想到了雪花算法. 原理介绍: snowFlake算法最终生成ID的结果为一个64bit大小的整数,结构如下图: 解释: 1bit.二进制中最高位 ...

  8. python math.asin

    import mathmath.asin(x) x : -1 到 1 之间的数值.如果 x 是大于 1,会产生一个错误. #!/usr/bin/pythonimport math print &quo ...

  9. 【解决方案】SpringCloud项目优雅发版、部署

    背景 SpringCloud分布式项目,部署在多个节点上.一般的发版方式是,使用Kill -15 pid,逐一地关闭.部署.重启. 但中间涉及到一个问题,当执行kill命令时,服务虽然关闭,但Eure ...

  10. spring bean 的作用域之间有什么区别

    spring bean 的作用域之间有什么区别? spring容器中的bean可以分为五个范围.所有范围的名称都是说明的, 1.singleton:这种bean范围是默认的,这种范围确保不管接受到多个 ...