$('.dropdown').on('show.bs.dropdown',function(){
alert(1); //菜单显示前弹出1
})
$('.dropdown').on('shown.bs.dropdown',function(){
alert(2); //菜单显示后弹出2
})
$('.dropdown').on('hidde.bs.dropdown',function(){
alert(3); //菜单隐藏前弹出3
})
$('.dropdown').on('hidden.bs.dropdown',function(){
alert(4); //菜单隐藏后弹出4
})用JavaScript的方法来让菜单显示
data-toggle="dropdown"；点击屏幕的任何位置可以收起
data-target=".dropdown" ；所有带有.dropdown的元素，让所有带有.dropdown的元素一起收起或者隐藏，整体是同步的
标签页（头部）：
nav-tabs：选项卡样式
nav-justified：端点与父级的对其，意思就是说父级的宽被导航平分为几份（当屏幕的大小小于768px时，nav会垂直排列，每个nav的宽都是768px）
nav-tabs-justified：底边线自适应的长度
nav-pills：胶囊式导航 可以与nav-stacked一起用，用完之后nav会垂直排列，nav-tabs不能与nav-stacked一起用，会有问题
标签页（内容）：
tab-content：选项卡的内容部分
fade：淡入淡出的效果
选项卡点击时案例：
<ul class="nav nav-tabs">
<li class="active"><a href="#a" data-toggle="tab">one</a></li>
<li><a href="#b" data-toggle="tab">two</a></li>
<li><a href="#c" data-toggle="tab">three</a></li>
</ul>
<ul class="tab-content">
<li id="a" class="tab-pane fade in active">12331222</li>
<li id="b" class="tab-pane fade">aaaaaaaaaa</li>
<li id="c" class="tab-pane fade">cccc2</li>
</ul> <body>
<div class="container">
<!-- <ul class="nav nav-tabs">
<li class="active"><a href="#a" data-toggle="tab">one</a></li>
<li><a href="#b" data-toggle="tab">two</a></li>
<li><a href="#c" data-toggle="tab">three</a></li>
</ul>
<ul class="tab-content">
<li id="a" class="tab-pane fade in active">12331222</li>
<li id="b" class="tab-pane fade">aaaaaaaaaa</li>
<li id="c" class="tab-pane fade">cccc2</li>
</ul> -->
<br><br>
<ul class="nav nav-tabs" id="myTabs">
<li class="active"><a href="#a" data-toggle="tab">one</a></li>
<li><a href="#b" data-toggle="tab">two</a></li>
<li><a href="#c" data-toggle="tab">three</a></li>
</ul>
<ul class="tab-content">
<li id="a" class="tab-pane fade in active">12331222</li>
<li id="b" class="tab-pane fade">aaaaaaaaaa</li>
<li id="c" class="tab-pane fade">cccc2</li>
</ul>
</div>
<script src="js/jquery-3.1.1.js"></script> //引入的文件
<script src="js/bootstrap.js"></script> //引入的文件
<script>
$('#myTabs a').mouseover(function(){
$(this).tab('show');
})
</script>
</body> <ul class="nav nav-tabs" id="myTabs">
<li class="active"><a href="#a" data-toggle="tab">one</a></li>
<li><a href="#b" data-toggle="tab">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="#c" data-toggle="tab">1</a></li>
<li><a href="#d" data-toggle="tab">2</a></li>
<li><a href="#e" data-toggle="tab">3</a></li>
</ul>
</li>
</ul>
<ul class="tab-content">
<li id="a" class="tab-pane fade in active">12331222</li>
<li id="b" class="tab-pane fade">aaaaaaaaaa</li>
<li id="c" class="tab-pane fade">cccc2</li>
<li id="d" class="tab-pane fade">dddd2</li>
<li id="e" class="tab-pane fade">eeee2</li>
</ul>navbar：导航条
navbar-default：常用的色调
nav navbar-nav：导航条
navbar-inverse：（相反的色调）色调比较深，两边是圆角的导航
navbar-static-top：两边为直接，不是圆角
navbar-fixed-top：固定的导航条，固定在页面的可视区域的头部
navbar-fixed-bottom：固定的导航条，固定在页面的可视区域的底部
固定的导航条存在遮盖内容的问题，所以可以可body加padding-top / bottom 值，这个值要大于等于固定导航条的高
导航条的通常写法（把容器写在navbar里面，使导航条形成一种自适应的方式container和container-fluid用法一样）：
<nav class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li class="active"><a href="#">one</a></li>
<li><a href="#">two</a></li>
<li><a href="#">three</a></li>
</ul>
</div>
</nav>
<div class="container-fluid">
<div class="navbar-header">
<a href="#" class="navbar-brand">LOGO</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">one</a></li>
<li><a href="#">two</a></li>
<li><a href="#">three</a></li>
</ul>
</div>navbar-left：向左浮动
navbar-right：向右浮动
navbar-btn：导航中的按钮 <button class="btn btn-default navbar-btn"></btn>
navbar-link：导航中的链接 <a href="#" class="navbar-link></a>
navbar-text：文字居中 <p class="navbar-text">123122321222</p>
navbar-form：导航中的表单 <form class="navbar-form>
<input type="text" class="form-control" placeholder="请输入内容">
<input typt="submit" class="btn btn-primary" value="搜索">
</from>
navbar-toggle：导航条的隐藏，小屏幕时，导航条隐藏
collapse：折叠
响应式导航条的写法：
<nav class="navbar navbar-default navbar-static-top navbar-inverse">
<div class="container-fluid">
<button class="navbar-toggle" data-toggle="collapse" data-target="#c"> //data-toggle="#写的是对应div的id名"；
<span class="icon-bar"></span> //屏幕小的时候，显示三条横线，代表菜单（固定写法）
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-header">
<a href="#" class="navbar-brand">LOGO</a>
</div>
<div class="collapse navbar-collapse" id="c">
<ul class="nav navbar-nav">
<li class="active"><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="#"></a>123</li>
<li><a href="#"></a>124</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
滚动监听：就是并非打开一个新的页面，而是跳转本页面的相应位置
data-spy：监听方式（交互方式）
data-target：监听目标
data-offset：位置
滚动监听的案例：（body一定要相对定位，data-sspy="scroll" data-target="#id名称" data-offset="距离顶端的位置"）
<body style="height:3000px; position:relative;" data-spy="scroll" data-target="#myNavbar" data-offset="200">
<nav class="navbar navbar-default navbar-fixed-top navbar-inverse" id="myNavbar">
<div class="container-fluid">
<div class="navbar-header">
<a href="#" class="navbar-brand">LOGO</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#a">one</a></li>
<li><a href="#b">two</a></li>
<li><a href="#c">three</a></li>
</ul>
</div>
</div>
</nav>
<div class="pos" id="a">one</div>
<div class="pos" id="b">two</div>
<div class="pos" id="c">three</div>
5456
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
