工作中boostrap常用实例-主要功能总结

最新推荐文章于 2022-08-24 21:38:12 发布

weixin_37460170

最新推荐文章于 2022-08-24 21:38:12 发布

阅读量484

点赞数

分类专栏： ‘行万里路’---工作中整理的实例

本文链接：https://blog.csdn.net/weixin_37460170/article/details/78203069

版权

‘行万里路’---工作中整理的实例专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1、Bootstrap 滚动监听（Scrollspy）插件

滚动监听（Scrollspy）插件，即自动更新导航插件，会根据滚动条的位置自动更新对应的导航目标。其基本的实现是随着滚动，基于滚动条的位置向导航栏添加 .active class。

向顶部导航添加滚动监听行为：通过 data 属性：监听的元素（通常是 body）添加 data-spy="scroll"，然后添加带有 Bootstrap .nav 组件的父元素的 ID 或 class 的属性 data-target

通过 JavaScript：您可以通过 JavaScript 调用滚动监听，选取要监听的元素，然后调用 .scrollspy() 函数：

$('body').scrollspy({ target: '.navbar-example' })

实例显示图

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 滚动监听（Scrollspy）插件</title>
	<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<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">切换导航</span>
				<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 bs-js-navbar-scrollspy">
			<ul class="nav navbar-nav">
				<li><a href="#ios">iOS</a></li>
				<li><a href="#svn">SVN</a></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">jmeter</a></li>
						<li><a href="#ejb" tabindex="-1">ejb</a></li>
						<li class="divider"></li>
						<li><a href="#spring" tabindex="-1">spring</a></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">iOS</h4>
	<p>iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple 
		TV。iOS 派生自 OS X，它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上，iOS 是苹果的移动版本。
	</p>
	<h4 id="svn">SVN</h4>
	<p>Apache Subversion，通常缩写为 SVN，是一款开源的版本控制系统软件。Subversion 由 CollabNet 公司在 2000 年创建。但是现在它已经发展为 Apache Software Foundation 的一个项目，因此拥有丰富的开发人员和用户社区。
	</p>
	<h4 id="jmeter">jMeter</h4>
	<p>jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序，用于负载和性能测试。
	</p>
	<h4 id="ejb">EJB</h4>
	<p>Enterprise Java Beans（EJB）是一个创建高度可扩展性和强大企业级应用程序的开发架构，部署在兼容应用程序服务器（比如 JBOSS、Web Logic 等）的 J2EE 上。
	</p>
	<h4 id="spring">Spring</h4>
	<p>Spring 框架是一个开源的 Java 平台，为快速开发功能强大的 Java 应用程序提供了完备的基础设施支持。
	</p>
	<p>Spring 框架最初是由 Rod Johnson 编写的，在 2003 年 6 月首次发布于 Apache 2.0 许可证下。
	</p>
</div>

</body>
</html>

2、Bootstrap 标签页（Tab）插件（如果想要单独引用该插件的功能，那么需要引用 tab.js）

用法：通过 data 属性：需要添加 data-toggle="tab" 或 data-toggle="pill" 到锚文本链接中。

添加 nav 和 nav-tabs 类到 ul 中，将会应用 Bootstrap 标签样式，添加 nav 和 nav-pills 类到 ul 中，将会应用 Bootstrap 胶囊式样式。

<ul class="nav nav-tabs">
    <li><a href="#identifier" data-toggle="tab">Home</a></li>
    ...
</ul>

通过 JavaScript：可以使用 Javscript 来启用标签页，如下所示：

$('#myTab a').click(function (e) {
  e.preventDefault()
  $(this).tab('show')
})

淡入淡出效果

如果需要为标签页设置淡入淡出效果，请添加 .fade 到每个 .tab-pane 后面。第一个标签页必须添加.in 类，以便淡入显示初始内容，如下面实例所示：

<div class="tab-content">
    <div class="tab-pane fade in active" id="home">...</div>
    <div class="tab-pane fade" id="svn">...</div>
    <div class="tab-pane fade" id="ios">...</div>
    <div class="tab-pane fade" id="java">...</div>
</div>

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 标签页（Tab）插件</title>
	<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<ul id="myTab" class="nav nav-tabs">
	<li class="active">
		<a href="#home" data-toggle="tab">
			 名称
		</a>
	</li>
	<li><a href="#ios" data-toggle="tab">HTML</a></li>
	<li class="dropdown">
		<a href="#" id="myTabDrop1" class="dropdown-toggle" 
		   data-toggle="dropdown">JavaScript 
			<b class="caret"></b>
		</a>
		<ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
			<li><a href="#jmeter" tabindex="-1" data-toggle="tab">DOM</a></li>
			<li><a href="#ejb" tabindex="-1" data-toggle="tab">ECMAscript</a></li>
		</ul>
	</li>
</ul>
<div id="myTabContent" class="tab-content">
	<div class="tab-pane fade in active" id="home">
		<p>此处是内容区</p>
	</div>
	<div class="tab-pane fade" id="ios">
		<p>iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple 
			TV。iOS 派生自 OS X，它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上，iOS 是苹果的移动版本。</p>
	</div>
	<div class="tab-pane fade" id="jmeter">
		<p>此处是内容区</p>
	</div>
	<div class="tab-pane fade" id="ejb">
		<p>此处是内容区
		</p>
	</div>
</div>

</body>
</html>

3、Bootstrap 分页

代码如下

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 分页的大小</title>
	<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<ul class="pagination pagination-lg">
	<li><a href="#">«</a></li>
	<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>
	<li><a href="#">»</a></li>
</ul><br>
<ul class="pagination">
	<li><a href="#">«</a></li>
	<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>
	<li><a href="#">»</a></li>
</ul><br>
<ul class="pagination pagination-sm">
	<li><a href="#">«</a></li>
	<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>
	<li><a href="#">»</a></li>
</ul>

</body>
</html>

4、Bootstrap 折叠（Collapse）插件（如果想要单独引用该插件的功能，那么您需要引用 collapse.js）

折叠（Collapse）插件可以很容易地让页面区域折叠起来。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 折叠面板</title>
	<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="panel-group" id="accordion">
	<div class="panel panel-default">
		<div class="panel-heading">
			<h4 class="panel-title">
				<a data-toggle="collapse" data-parent="#accordion" 
				   href="#collapseOne">
					点击展开，再次点击折叠。第 1 部分
				</a>
			</h4>
		</div>
		<div id="collapseOne" class="panel-collapse collapse in">
			<div class="panel-body">
				demo
			</div>
		</div>
	</div>
	<div class="panel panel-default">
		<div class="panel-heading">
			<h4 class="panel-title">
				<a data-toggle="collapse" data-parent="#accordion" 
				   href="#collapseTwo">
					点击展开，再次点击折叠。第 2 部分
				</a>
			</h4>
		</div>
		<div id="collapseTwo" class="panel-collapse collapse">
			<div class="panel-body">
				demo
			</div>
		</div>
	</div>
	<div class="panel panel-default">
		<div class="panel-heading">
			<h4 class="panel-title">
				<a data-toggle="collapse" data-parent="#accordion" 
				   href="#collapseThree">
					点击展开，再次点击进行折叠。第 3 部分
				</a>
			</h4>
		</div>
		<div id="collapseThree" class="panel-collapse collapse">
			<div class="panel-body">
				demo
			</div>
		</div>
	</div>
</div>

</body>
</html>

5、Bootstrap 轮播（Carousel）插件（如果想要单独引用该插件的功能，那么您需要引用 carousel.js）

用法
    通过 data 属性：使用 data 属性可以很容易控制轮播（Carousel）的位置。
    属性 data-slide 接受关键字 prev 或 next，用来改变幻灯片相对于当前位置的位置。
    使用 data-slide-to 来向轮播传递一个原始滑动索引，data-slide-to="2" 将把滑块移动到一个特定的索引，索引从 0 开始计数。
    data-ride="carousel" 属性用于标记轮播在页面加载时就开始动画播放。
    通过 JavaScript：轮播（Carousel）可通过 JavaScript 手动调用，如下所示：

$('.carousel').carousel()

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 轮播（Carousel）插件的标题</title>
	<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div id="myCarousel" class="carousel slide">
	<!-- 轮播（Carousel）指标 -->
	<ol class="carousel-indicators">
		<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
		<li data-target="#myCarousel" data-slide-to="1"></li>
		<li data-target="#myCarousel" data-slide-to="2"></li>
	</ol>   
	<!-- 轮播（Carousel）项目 -->
	<div class="carousel-inner">
		<div class="item active">
			<img src="/wp-content/uploads/2014/07/slide1.png" alt="First slide">
			<div class="carousel-caption">标题 1</div>
		</div>
		<div class="item">
			<img src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide">
			<div class="carousel-caption">标题 2</div>
		</div>
		<div class="item">
			<img src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide">
			<div class="carousel-caption">标题 3</div>
		</div>
	</div>
	<!-- 轮播（Carousel）导航 -->
	<a class="carousel-control left" href="#myCarousel" 
	   data-slide="prev">‹</a>
	<a class="carousel-control right" href="#myCarousel" 
	   data-slide="next">›</a>
</div> 

</body>
</html>