提示插件是用户将鼠标指针移到元素上时出现的小型弹出框: 使用该title
属性来指定应在工具提示内显示的文本 tooltip()
指定可以弹出小黑框框的元素
注意:默认情况下,工具提示将出现在元素的顶部。
举个栗子:
<div class ="container" >
<a href ="#" data-toggle ="tooltip" title ="Hooray!" > Hover over mea >
div >
<script >
$(document).ready(function () {
$('[data-toggle="tooltip"]' ).tooltip();
});
script >
当你鼠标有移动到该超链接位置时,就会在连接上方弹出一个黑色小框框显示 Hooray!
提示框位置: data-placement
属性可以在元素的顶部,底部,左侧或右侧设置工具提示的位置
< a href= "#" data -toggle = "tooltip" data -placement = "top" title= "Hooray!" > Hover< /a>
< a href= "#" data -toggle = "tooltip" data -placement = "bottom" title= "Hooray!" > Hover< /a>
< a href= "#" data -toggle = "tooltip" data -placement = "left" title= "Hooray!" > Hover< /a>
< a href= "#" data -toggle = "tooltip" data -placement = "right" title= "Hooray!" > Hover< /a>
“auto”的data-placement属性
,这会让浏览器决定工具提示的位置。
Popover插件:
Popover插件与工具提示类似; 它是一个弹出框,当用户点击
一个元素时出现。区别在于popover可以包含更多内容。 再次单击元素时,弹出窗口会关闭,单击其他地方无效
Popovers必须用jQuery初始化:选择指定的元素并调用popover()
方法。 源码:
<div class ="container" >
<a href ="#" data-toggle ="popover" title ="Popover Header" data-content ="Some content inside the popover" > Toggle popovera >
div >
<script >
$(document).ready(function () {
$('[data-toggle="popover"]' ).popover();
});
script >
title
表示标题 data-content
表示内容
效果图:
定位弹出:
默认情况下,弹出窗口将显示在元素的右侧 data-placement
属性来设置元素顶部,底部,左侧或右侧的弹出位置
< a href= "#" title= "Header" data -toggle = "popover" data -placement = "top" data -content = "Content" > Click< /a>
< a href= "#" title= "Header" data -toggle = "popover" data -placement = "bottom" data -content = "Content" > Click< /a>
< a href= "#" title= "Header" data -toggle = "popover" data -placement = "left" data -content = "Content" > Click< /a>
< a href= "#" title= "Header" data -toggle = "popover" data -placement = "right" data -content = "Content" > Click< /a>
注意:还可以使用值为“auto”的data-placement属性
,这将允许浏览器确定弹出窗口的位置。
data-trigger="focus"
默认情况下,当您再次单击元素时,弹出窗口会关闭。 但是,您可以使用data-trigger="focus"
在单元外部单击时关闭弹出窗口
举例:
<div class ="container" >
<a href ="#" data-toggle ="popover" title ="Popover Header" data-trigger ="focus" data-content ="Some content inside the popover" > Toggle popovera >
div >
<script >
$(document).ready(function () {
$('[data-toggle="popover"]' ).popover();
});
script >
data-trigger=“hover”
在将鼠标指针移到元素上时显示弹出窗口 离开时 退出弹出窗口 举例:
<div class ="container" >
<a href ="#" title ="Header" data-toggle ="popover" data-trigger ="hover" data-content ="Some content" > Hover over mea >
div >
<script >
$(document).ready(function () {
$('[data-toggle="popover"]' ).popover();
});
script >
具体参考:https://www.quanzhanketang.com/bootstrap/bootstrap_scrollspy.html
即自动更新导航插件,会根据滚动条的位置自动更新对应的导航目标。其基本的实现是随着您的滚动,基于滚动条的位置向导航栏添加 .active class。
向您想要监听的元素(通常是 body)添加 data-spy=”scroll”。然后添加带有 Bootstrap .nav 组件的父元素的 ID 或 class 的属性 data-target。为了它能正常工作,您必须确保页面主体中有匹配您所要监听链接的 ID 的元素存在。 模板:
"scroll" data-target=".navbar-example" >
...
...
举例:
<body >
<nav id ="navbar-example" class ="navbar navbar-default navbar-static" role ="navigation" >
<div class ="container-fluid" >
<div class ="navbar-header" >
<button class ="navbar-toggle" type ="button" data-toggle ="collapse"
data-target =".bs-js-navbar-scrollspy" >
<span class ="sr-only" > 11111111span >
<span class ="icon-bar" > span >
<span class ="icon-bar" > span >
<span class ="icon-bar" > span >
button >
<a class ="navbar-brand" href ="#" > 2222222222a >
div >
<div class ="collapse navbar-collapse bs-js-navbar-scrollspy" >
<ul class ="nav navbar-nav" >
<li > <a href ="#ios" > iOSa >li >
<li > <a href ="#svn" > SVNa >li >
<li class ="dropdown" >
<a href ="#" id ="navbarDrop1" class ="dropdown-toggle"
data-toggle ="dropdown" > Java
<b class ="caret" > b >
a >
<ul class ="dropdown-menu" role ="menu"
aria-labelledby ="navbarDrop1" >
<li > <a href ="#jmeter" tabindex ="-1" > jmetera >li >
<li > <a href ="#ejb" tabindex ="-1" > ejba >li >
<li class ="divider" > li >
<li > <a href ="#spring" tabindex ="-1" > springa >li >
ul >
li >
ul >
div >
div >
nav >
<div data-spy ="scroll" data-target ="#navbar-example" data-offset ="0"
style ="height:200px;overflow:auto; position: relative;" >
<h4 id ="ios" > iOSh4 >
<p > aaaaaa
p >
<h4 id ="svn" > SVNh4 >
<p > bbbbbbbbbbbb
p >
<h4 id ="jmeter" > jMeterh4 >
<p > ccccccccccccccc
p >
<h4 id ="ejb" > EJBh4 >
<p > ddddddddddddddd
p >
<h4 id ="spring" > Springh4 >
<p > eeeeeee
p >
<p > ffffffff
p >
div >
body >
添加data -spy = "scroll" 到应该用作可滚动区域的< body> 元素(通常这是元素)。
然后添加该data -target 属性的id或导航栏的类名称(. navbar)的值。这是为了确保导航栏与可滚动区域连接。
请注意,可滚动元素必须与导航栏列表项(< div id= "section1" > 匹配< a href= "#section1" > )内的链接的ID 相匹配。
可选data -offset 属性指定在计算滚动位置时从顶部偏移的像素数。当你感觉到在跳转到可滚动元素时,导航栏内的链接过早或过早地改变活动状态时,这很有用。默认值是10 像素。
效果图:
Affix插件:(简单理解)
具体的:https://www.quanzhanketang.com/bootstrap/bootstrap_affix.html 允许将元素粘贴(锁定)到页面上的某个区域。这通常与导航菜单或社交图标按钮一起使用,以便在页面上下滚动时使其“粘”在特定区域。
显示了如何创建一个水平粘贴的导航菜单:
如图 下拉网页 导航栏还存在
< nav class= "navbar navbar-inverse" data -spy = "affix" data -offset -top = "197" >
源码:
<html >
<head >
<title > Bootstrap Exampletitle >
<meta charset ="utf-8" >
<meta name ="viewport" content ="width=device-width, initial-scale=1" >
<link rel ="stylesheet" href ="http://maxcdn.bootstrapcdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" >
<script src ="https://ajax.googleapis.bootcss.com/ajax/libs/jquery/1.12.0/jquery.min.js" > script >
<script src ="http://maxcdn.bootstrapcdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js" > script >
<style >
.affix {
top : 0 ;
width : 100 % ;
}
.affix + .container-fluid {
padding-top : 70 px ;
}
style >
head >
<body >
<nav class ="navbar navbar-inverse" data-spy ="affix" data-offset-top ="197" >
<ul class ="nav navbar-nav" >
<li class ="active" > <a href ="#" > Basic Topnava >li >
<li > <a href ="#" > Page 1a >li >
<li > <a href ="#" > Page 2a >li >
<li > <a href ="#" > Page 3a >li >
ul >
nav >
<div class ="container-fluid" style ="height:1000px" >
<h1 > Some text to enable scrollingh1 >
<h1 > Some text to enable scrollingh1 >
<h1 > Some text to enable scrollingh1 >
<h1 > Some text to enable scrollingh1 >
<h1 > Some text to enable scrollingh1 >
<h1 > Some text to enable scrollingh1 >
<h1 > Some text to enable scrollingh1 >
<h1 > Some text to enable scrollingh1 >
<h1 > Some text to enable scrollingh1 >
<h1 > Some text to enable scrollingh1 >
<h1 > Some text to enable scrollingh1 >
div >
body >
html >
显示如何创建垂直粘贴的导航菜单: 源码:
<html lang ="en" >
<head >
<title > Bootstrap Exampletitle >
<meta charset ="utf-8" >
<meta name ="viewport" content ="width=device-width, initial-scale=1" >
<link rel ="stylesheet" href ="http://maxcdn.bootstrapcdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" >
<script src ="https://ajax.googleapis.bootcss.com/ajax/libs/jquery/1.12.0/jquery.min.js" > script >
<script src ="http://maxcdn.bootstrapcdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js" > script >
<style >
.affix {
top : 20 px ;
}
style >
head >
<body >
<div class ="container" >
<div class ="row" >
<nav class ="col-sm-3" >
<ul class ="nav nav-pills nav-stacked" data-spy ="affix" data-offset-top ="205" >
<li class ="active" > <a href ="#section1" > Section 1a >li >
<li > <a href ="#section2" > Section 2a >li >
<li > <a href ="#section3" > Section 3a >li >
ul >
nav >
<div class ="col-sm-9" >
<h1 > Some text to enable scrollingh1 >
<h1 > Some text to enable scrollingh1 >
<h1 > Some text to enable scrollingh1 >
<h1 > Some text to enable scrollingh1 >
<h1 > Some text to enable scrollingh1 >
<h1 > Some text to enable scrollingh1 >
<h1 > Some text to enable scrollingh1 >
<h1 > Some text to enable scrollingh1 >
<h1 > Some text to enable scrollingh1 >
<h1 > Some text to enable scrollingh1 >
<h1 > Some text to enable scrollingh1 >
<h1 > Some text to enable scrollingh1 >
<h1 > Some text to enable scrollingh1 >
<h1 > Some text to enable scrollingh1 >
div >
div >
div >
body >
html >
示例解释
添加data-spy="affix" 到你想添加的元素。
或者,添加该data-offset-top|bottom属性以计算滚动的位置。
怎么运行的
词缀插件切换三者类:.affix ,.affix -top,和 .affix -bottom。每个班级代表一个特定的州。您必须添加CSS属性来处理实际职位,除了position:fixed 在.affix 课程中。
该插件添加.affix -top或.affix -bottom类以指示该元素位于其最上方或最下方的位置。此时不需要使用CSS定位。
通过粘贴元素滚动会触发实际粘贴 - 这是插件用类(集合)代替.affix -top或.affix -bottom类的地方 。此时,您必须添加CSS 或属性以在页面中放置加贴的元素。.affixposition :fixedtopbottom
如果定义了底部偏移量,则滚动它将替换.affix 该类.affix -bottom。由于偏移是可选的,因此设置偏移需要您设置适当的CSS。在这种情况下,position:absolute必要时添加。
在上面的第一个示例中,.affix 当我们从顶部滚动197 个像素时,Affix插件将类(position:fixed)添加到元素。如果你打开这个例子,你也会看到我们top为这个.affix 类添加了一个值为0 的CSS 属性。这是为了确保导航栏始终保持在页面的顶部,当我们从顶部滚动197 像素时。