bootstrap的一些基本应用

最新推荐文章于 2024-11-08 14:35:14 发布

iteye_8567

最新推荐文章于 2024-11-08 14:35:14 发布

阅读量149

点赞数

分类专栏： Js基础 bootstrap3.js 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/iteye_8567/article/details/82603241

版权

Js基础同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

bootstrap3.js

2 篇文章 0 订阅

订阅专栏

项目上要用这个东西，搞些来还真是有些麻烦，最主要对CSS不熟。

1.bootstrap modal

这个用起来还是比较方便的，比openWindow什么。。。

<html lang="en">
<head>
<meta charset="utf-8">
<title>IN</title>
<link href="js/bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
	<div id="example" class="modal fade" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<a class="close" data-dismiss="modal">×</a>
					<h3>This is a Modal Heading</h3>
				</div>
				<div class="modal-body">
					<h4>Text in a modal</h4>
					<p>You can add some text here.</p>
				</div>
				<div class="modal-footer">
					<a href="#" class="btn btn-success">Call to action</a> <a href="#"
						class="btn" data-dismiss="modal">Close</a>
				</div>
			</div>
		</div>
	</div>

	<p>
		<a data-toggle="modal" href="#example"
			class="btn btn-primary btn-large">Launch demo modal</a>
	</p>
	<script src="js/jquery/jquery-1.11.1.min.js"></script>
	<script src="js/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

可以将选项通过data属性或JavaScript传递。对于data属性，需要将选项名称放到data-之后，例如data-backdrop=""。

2.bootstrap tooltip/popover这两个还是差不多的

都需要初始化。

先来初始化

一个个的来也行，一起来也行。我注释掉的是一个一个来的

<script type="text/javascript">
	$(function() {
		$('.container').tooltip({
			selector : "[data-toggle=tooltip]",
			container : "body"
		})

		$('.container').popover({
			selector : "[data-toggle=popover]",
			container : "body"
		})
		//     $("#a2").popover();
		//     $("#a1").popover();
		//     $('#a3').tooltip();
	})
</script>

来整个的吧

<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap Modals Example</title>
<meta name="description" content="Creating Modal Window with Bootstrap">
<link href="js/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery/jquery-1.11.1.min.js"></script>
<script src="js/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript">
	$(function() {
		$('.container').tooltip({
			selector : "[data-toggle=tooltip]",
			container : "body"
		})

		$('.container').popover({
			selector : "[data-toggle=popover]",
			container : "body"
		})
		//     $("#a2").popover();
		//     $("#a1").popover();
		//     $('#a3').tooltip();
	})
</script>
</head>
<body>
	<div class="container">
		<input id="a1" type="button" class="btn btn-lg btn-danger"
			data-toggle="popover" title="Popover title"
			data-content="And here's some amazing content. It's very engaging. Right?"
			value="123" />
		<button id="a2" type="button" class="btn btn-default"
			data-title="test" data-container="body" data-toggle="popover"
			data-placement="right"
			data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
			Popover on right</button>
		<div class="btn-group">
			<button type="button" id="a3" class="btn btn-default" data-toggle="tooltip"
				data-placement="left" title="Tooltip on left">Tooltip on
				left</button>
		</div>

	</div>
</body>
</html>