bootstrap学习笔记-导航和导航条

导航

• .nav 类作为基类（都要有）
• 标签页：.nav-tabs
• 胶囊式标签页：.nav-pills ；可以选择竖着的菜单：.nav-stacked
• 两端对齐（按钮）自适应：.nav-justified ，在大于 768px 的屏幕上 ，通过 .nav-justified 类可以很容易的让标签页或胶囊式标签呈现出同等宽度。在小屏幕上，导航链接呈现堆叠样式。(小于768 变成竖着的了)
• 如果要让线也自适应（对于按钮的长度，不是对于父类）：.nav-tabs.justified
• 注意胶囊式标签的时候，如果有.nav-tabs.justified那么也会出现线的。
• 内容类：ul:tab-content li:tab-pane
• 要按钮切换，在按钮上还要加上属性data-toggle=”tab”
• 而内容要对应切换的话，要把href 对应id （注意加#号）
  例如：

<ul class="nav nav-tabs">    <li class="active"><a href="#a" data-toggle="tab">1</a></li>    <li><a href="#b" data-toggle="tab">2</a></li>    <li><a href="#c" data-toggle="tab">3</a></li></ul><ul class="tab-content">    <li id="a" class="tab-pane active">111111111</li>    <li id="b" class="tab-pane">2222222</li>    <li id="c" class="tab-pane">33333333</li></ul>

• 内容切换时淡入淡出效果（加在li上）：fade 注意默认的那个要加in （这和加active一样）

带下拉菜单的标签页

<ul class="nav nav-tabs">    <li class="active"><a>1</a></li>    <li><a href="#">2</a></li>    <li><a>3</a></li>    <li class="dropdown">        <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Separated link</a>        <ul class="dropdown-menu">            <li><a href="#">1</a></li>            <li><a href="#">2</a></li>            <li><a href="#">3</a></li>            <li><a href="#">4</a></li>            <li><a href="#">5</a></li>        </ul>    </li></ul>

实际上就是在其中的一个li里面加一个下拉菜单ul，并且按钮上增加dropdown-toggle类 以及自定义方法 data-toggle=”dropdown”

• 如果下拉菜单内容结合进去的话，那么和上面的类似，只要href和id对应，并且给a增加对应切换的属性data-toggle=”tab”就可以了例如：

<div class="div1">    <ul class="nav nav-tabs" id="tables">        <li class="active">            <a href="#a" data-toggle="tab">1</a>        </li>        <li>            <a href="#b" data-toggle="tab">2</a>        </li>        <li>            <a href="#c" data-toggle="tab">3</a>        </li>        <li class="dropdown">            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Separated link            <span class="caret"></span>            </a>            <ul class="dropdown-menu">                <li><a href="#e" data-toggle="tab">1</a></li>                <li><a href="#f" data-toggle="tab">2</a></li>                       </ul>        </li>    </ul>    <ul class="tab-content">    <li id="a"class="tab-pane active fade in">111111111</li>    <li id="b" class="tab-pane fade ">2222222</li>    <li id="c" class="tab-pane fade">33333333</li>    <li id="e" class="tab-pane fade ">dsdad</li>    <li id="f" class="tab-pane fade">aaaaaa</li>    </ul></div>

特别要注意的是：这里如果之前的不是dropdown 而是dropup，则效果会出错…暂时没有找出原因（*）

鼠标移入移出

bootstrap是没有这个效果的，因为bootstrap主要是为了移动端服务的，所以只有点击
所以必须要用js 去写方法

$("#tables a").on("mouseover",function(){    $(this).tab('show');//选项卡中就这个方法show});

如果移动端的话，就做一个判断就可以了，例如：

if(window.navigator.userAgent.toLowerCase().indexOf('mobile')==-1){    ...}

导航条

基础类

• .navbar类作为基类,并且使用<nav>标签，如果使用div，需要加上role=”navigation”这样能够让使用辅助设备的用户明确知道这是一个导航区域。
• 默认的样式.nav-default
• 菜单（导航） .nav .navbar-nav组合

一般导航栏可以这么写：外面一个<nav>自适应，里面包含一个container固定，例如：

<nav class="navbar navbar-default">    <div class="container">        <ul class="nav navbar-nav">        <li><a href="#">one</a></li>        <li><a href="#">two</a></li>        <li><a href="#">three</a></li>        </ul>    </div></nav>

• 固定的导航条.navbar-fixed-top 或者.navbar-fixed-botom
  注意这里固定导航条的话可能会遮盖下面的内容，解决办法是：给body加一个margin-top值。
  顺带一提，固定是使用了fixed属性值，它是相对于浏览器窗口进行定位的，而absolute是相对于有设定定位属性（非默认）的父级。
• 如果要加logo，可以用一个nav-header z嵌套一个navbar-brand例如：

<nav class="navbar navbar-inverse navbar-fixed-top">    <div class="container">        <div class="navbar-header">            <a class="navbar-brand">logo</a>        <!-- 这是一个logo注意要用navbar-header嵌套-->        </div>         <ul class="nav navbar-nav">            <li><a href="#">one</a></li>            <li><a href="#">two</a></li>            <li><a href="#">three</a></li>        </ul>    </div></nav>

• 如果要让导航靠右，可以用navbar-right,默认是navbar-left，复杂一点的，就一个导航靠左，一个导航靠右

<ul class="nav navbar-nav">    <li><a href="#">one</a></li>    <li><a href="#">two</a></li>    <li><a href="#">three</a></li></ul><ul class="nav navbar-nav navbar-right">    <li><a href="#">登录</a></li>    <li><a href="#">注册</a></li></ul>

• 如果导航条中有button按钮，要注意加上.navbar-btn类这样就可以使它在导航条中居中

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

• 而如果有链接，那么加上.navbar-link 类，使它的颜色接近导航条
• 而如果是普通的文字什么的，要让它居中，则需要加上.navbar-text类，并且有可能需要加上.navbar-left，使之浮动。（如果用的是<p>这种块级元素）
• 如果是输入框，则加上navbar-form,和narbar-left。例如：

<form class="navbar-form navbar-left">    <input type="text" class="form-control">    <input type="submit" value="搜索"></form>

• 带下拉菜单的导航条：

<ul class="nav navbar-nav">    <li><a href="#">one</a></li>    <li><a href="#">two</a></li>    <li class="dropdown">        <a href="#" class="dropdown-toggle" data-toggle="dropdown">three<span class="caret"></span></a>        <ul class="dropdown-menu">            <li><a href="#">22</a></li>            <li><a href="#">22</a></li>            <li><a href="#">22</a></li>            <li><a href="#">22</a></li>            <li><a href="#">22</a></li>        </ul>    </li></ul>

响应式导航条

但是呢 这样效果在移动上不是很好，所以要修改一下。类似于官网那样，在移动端上多一个按钮，一点击导航就出现。加上.navbar-toggle类

<button class="navbar-toggle">    <span class="icon-bar"></span>    <span class="icon-bar"></span>    <span class="icon-bar"></span></button>

然后要做到折叠效果的话，就给要折叠隐藏的部分加上collapse 和navbar-collapse类，然后给button按钮加上data-toggle=”collapse”属性以及data-target=”#id”。例如：

<nav class="navbar navbar-default navbar-fixed-top">    <div class="container">        <div class="navbar-header">        <button class="navbar-toggle" data-toggle="collapse" data-target="#collapse">            <span class="icon-bar"></span>            <span class="icon-bar"></span>            <span class="icon-bar"></span>        </button>        <a class="navbar-brand">logo</a>        <!-- 这是一个logo注意要用navbar-header嵌套-->        </div>         <div class="collapse navbar-collapse" id="collapse">            <ul class="nav navbar-nav">                <li><a href="#">one</a></li>                <li><a href="#">two</a></li>            </ul>        </div>    </div></nav>

滚动监听

• 首先滚动监听加在body上，加上data-spy=”scroll”和data-target=”#id”(监听的标签id，这里就是导航条的id)；并且要给body相对定位，这样才能内容相对于它进行操作（这是监听整个页面，如果只想监听一部分页面，也可以相对的属性加载别的标签上）
• 给要监听滚动的内容分别加上id，然后导航条的a的href对应每个id
• 这样做的话，要注意一个问题，滚动到页面哪里的时候 导航相对应的发生变化 ， 如果要改变位置 ，可以用data-offset 属性来实现。注意这是滚动到那里导航变化，而不是点击导航，跳转到页面那里，
  点击导航跳转的话，默认是内容到达最顶端的时候（这里说的内容是指<=border），是在最顶端的时候，要修改，可以给除导航条外的内容加一个padding-top值。