Bootstrap（八）

最新推荐文章于 2022-12-08 22:58:56 发布

mwwb

最新推荐文章于 2022-12-08 22:58:56 发布

阅读量169

点赞数

分类专栏： bootstrap学习文章标签： bootstrap

本文链接：https://blog.csdn.net/qq_43278421/article/details/106537966

版权

bootstrap学习专栏收录该内容

11 篇文章 0 订阅

订阅专栏

今天继续学习bootstrap的滚动监听

功能实现的主要代码如下：

<body>
		<div>
			<nav id="navbar-example" class="navbar navbar-default navbar-static">
			<div class="container-fluid">
				<div class="navbar-header">
					<button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#bs-example-js-navbar-scrollspy">
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
					<a class="navbar-brand" href="#">滚动监听</a> 
				</div>
				<div class="collapse navbar-collapse"  id="bs-example-js-navbar-scrollspy">
					<ul class="nav navbar-nav">
						<li><a href="#header">@顶部</a></li>
						<li><a href="#mid">@主题</a></li>
						<li class="dropdown">
							<a href="#" id="navbarDrop" data-toggle="dropdown">
								下拉菜单<span class="caret"></span>
							</a>
							<ul class="dropdown-menu">
								<li><a href="#setting" tabindex="-1">设置</a></li>
								<li><a href="#bbs" tabindex="-1">讨论</a></li>
								<li class="divider"></li>
								<li><a href="#about" tabindex="-1">关于</a></li>
							</ul>
						</li>
					</ul>
				</div>
			</div>
			</nav>
			<div data-spy="scroll" data-target="#navbar-example" class="scrollspy-example">
				<h4 id="header">@顶部</h4>
				<p>滚动监听-顶部</p>
				<p>滚动监听-顶部</p>
				<p>滚动监听-顶部</p>
				<h4 id="mid">@主体</h4>
				<p>滚动监听-主体</p>
				<p>滚动监听-主体</p>
				<p>滚动监听-主体</p>
				<h4 id="setting">设置</h4>
				<p>滚动监听-设置</p>
				<p>滚动监听-设置</p>
				<p>滚动监听-设置</p>
				<h4 id="bbs">讨论</h4>
				<p>滚动监听-讨论</p>
				<p>滚动监听-讨论</p>
				<p>滚动监听-讨论</p>
				<h4 id="about">关于</h4>
				<p>滚动监听-关于</p>
				<p>滚动监听-关于</p>
				<p>滚动监听-关于</p>
			</div>
		</div>
	</body>

效果图如下：
在这里插入图片描述
主要效果就是你点击上面的栏目，他会自动跳转到目标行
好的，现在让我来一步步分析一下代码
首先是第一部分nav元素中的内容
它添加了“navbar”，“navbar-default”和“navbar-static”的类，然后是含有“container-fluid”，“navbar-header”的标签。接着是一个导航栏组的按钮，这个用过很多次了，操作是添加：navbar-toggle collapsed 两个类，为data-toggle属性赋值，利用id为data-target绑定后面的ul，li内容，再用a标签写导航栏名。后面一半部分是使用id补充完导航栏需要的其他具体内容，到目前为止的操作，之前的导航栏似乎还差不多。
第二部分就是监听功能的重点了
定义了一个div，为其添加类“scrollspy-exmple”,同样通过data-target使用id绑定前面的菜单部分，还需要添加一个赋值data-spy=“scroll”
最后再用id和href把导航栏的每一个按钮和内容绑定，监听滚动就实现了

一共用id配data-target套了两层

bootstrap可切换式标签页
在框架中实现可切换标签页是靠添加“.nav-tabs”
在这里插入图片描述
点击菜单时内容会自动转换相应内容
代码如下：

	<body>
		<div>
			<ul id="navTab" class="nav nav-tabs">
				<li class="active">
					<a href="#home" id="home-tab" data-toggle="tab">新闻</a>
				</li>
				<li class="dropdown">
					<a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown">下拉菜单
					<span class="caret"></span></a>
					<ul class="dropdown-menu" id="myTabDrop1-contents">
						<li><a href="#dropdown1" id="dropdown1-tab" data-toggle="tab">@设置</a></li>
						<li><a href="#dropdown2" id="dropdown2-tab" data-toggle="tab">@定制</a></li>
						<li class="divider"></li>
						<li><a href="#dropdown3" id="dropdown3-tab" data-toggle="tab">@关于</a></li>
					</ul>
				</li>
			</ul>
			<div class="tab-content">
				<div class="tab-pane fade in active" id="home">
					<p>主页标签页</p>
					<p>主页标签页</p>
					<p>主页标签页</p>
				</div>
				<div class="tab-pane fade" id="news">
					<p>新闻标签页</p>
					<p>新闻标签页</p>
					<p>新闻标签页</p>
				</div>
				<div class="tab-pane fade" id="dropdown1">
					<p>定制标签页</p>
					<p>定制标签页</p>
					<p>定制标签页</p>
				</div>
				<div class="tab-pane fade" id="dropdown2">
					<p>设置标签页</p>
					<p>设置标签页</p>
					<p>设置标签页</p>
				</div>
				<div class="tab-pane fade" id="dropdown3">
					<p>关于</p>
					<p>关于</p>
					<p>关于</p>
				</div>
			</div>
		</div>
	</body>

现在来分析一下代码的组成
还是分两部分看吧，第一部分是ul元素，第二部分是div
在第一部分中，最外层的ul标签添加类“nav”和“nav-tabs”，赋值id为navTab
ul里面的内容就是普通的导航栏，在这里我用的导航栏是一个单元配一个下拉3层的形式
里面的每一栏只要之一href和后面的id对应还有添加一个data-toggle=“tab”

再来看第二部分，
最外层的div是添加了一个“tab-content”的类
然后里面每一个内容块都是添加了“tab-pane”和“fade”类，如果是默认选中的标签的话还需要额外添加一个active类，然后就是id和之前的herf一一对应绑定

bootstrap提示框
框架中的提示框包括工具提示框，警告框，弹出框三种

工具提示框
工具提示框又分上侧、下侧、左侧、右测、动态、静态的

这部分书上的代码内容又不太行了，果断打开菜鸟！

<h4>工具提示（Tooltip）插件 - 锚</h4>
	这是一个 <a href="#" class="tooltip-test" data-toggle="tooltip" title="默认的 Tooltip">默认的 Tooltip</a>.
	这是一个 <a href="#" data-toggle="tooltip" data-placement="left" title="左侧的 Tooltip">左侧的 Tooltip</a>.
	这是一个 <a href="#" data-toggle="tooltip" data-placement="top" title="顶部的 Tooltip">顶部的 Tooltip</a>.
	这是一个 <a href="#" data-toggle="tooltip" data-placement="bottom" title="底部的 Tooltip">底部的 Tooltip</a>.
	这是一个 <a href="#" data-toggle="tooltip" data-placement="right" title="右侧的 Tooltip">右侧的 Tooltip</a>
	<br>

这个是静态的
静态的格式就是在a标签中加上data-toggle属性为tooltip，然后根据需要填写data-placement属性，title属性是本体文字

<h4>工具提示（Tooltip）插件 - 按钮</h4>
	<button type="button" class="btn btn-default" data-toggle="tooltip"  title="默认的 Tooltip"> 默认的 Tooltip</button>
	<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="左侧的 Tooltip">左侧的 Tooltip
	</button>
	<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="顶部的 Tooltip">顶部的 Tooltip
	</button>
	<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="底部的 Tooltip">底部的 Tooltip
	</button>
	<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="右侧的 Tooltip">右侧的 Tooltip</button>

上面的是动态的
动态的按钮和面前的差不多，把a标签换成了button，多了一个添加类“btn btn-default”就ok了

要想成功运行以上代码，还需要添加一串js代码

<script>
    	$(function () { 
    		$("[data-toggle='tooltip']").tooltip(); 
    	});
    </script>

这串语句的意思是选中含有该属性值得标签元素，执行tooltip（），这个函数具体内容是预设的，我没看过源码我也不知道，反正就这么写就对了

mwwb

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap（八）

今天继续学习bootstrap的滚动监听功能实现的主要代码如下：<body> <div> <nav id="navbar-example" class="navbar navbar-default navbar-static"> <div class="container-fluid"> <div class="navbar-header"> <button class="navbar-toggle co
复制链接

扫一扫

专栏目录