您的位置：首页 > Web前端 > BootStrap

Bootstrap（四）

2017-07-16 11:28 176 查看

$('.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>

选项卡中带下拉菜单是切换选项卡中的内容：（给每个导航中a标签中加入一个锚点链接，同时需要加上data-toggle=“tab”，带有下拉的导航不添加锚点链接，也不需要加data-toggle="tab"，选项卡中的id名不能重复，同时要给每个内容加上class=”tab-pane“，fade是控制选项卡出现的效果）

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

带logo的兼容写法：需要给a标签套上一个div，同时给div加上class="navbar-header"类，就可以兼容手机和pc了，如果给a标签嵌套一个div，手机端的logo会显示不出来

<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="搜索">

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： bootstrap 响应式

相关文章推荐

新的分享

章节导航