项目上要用这个东西，搞些来还真是有些麻烦，最主要对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>
相关推荐
Bootstrap提供了一些基本的HTML和CSS模板，可以帮助开发者快速搭建Web应用程序。 在Bootstrap中，响应式设计是指Web页面在不同设备和屏幕尺寸下的自适应能力。Bootstrap使用了媒体查询（Media Queries）来实现响应...
包括了CSS样式文件（bootstrap.css或bootstrap.min.css）、JavaScript文件（bootstrap.js或bootstrap.min.js）以及其他一些依赖的文件。在自定义项目时，程序员需要理解这个结构，以确保能正确地引用所需资源。 3. ...
总的来说，这个压缩包提供了一套全面的Bootstrap示例，涵盖了基本到高级的使用技巧，对于初学者来说是极好的学习资源。通过实践这些示例，开发者可以迅速提升使用Bootstrap构建现代网页的能力。
总的来说，"Bootstrap的简单应用"这个教程将帮助你掌握Bootstrap的基本用法，通过实际操作加深理解。通过学习和实践JQMlab10中的例子，你将能够熟练地利用Bootstrap创建出专业且响应式的网页，提高你的web开发技能。...
Bootstrap 提供了三种下载的样式生产环境开发包：包含最基本的已经编译好的 Bootstrap 一如代码，里面包含，CSS 样式，JS 代码，font 字体样式等；Bootstrap 源码：内容较多，包含所有的 Bootstrap 源代码，已经编译...
Bootstrap3 是一个流行的开源前端开发框架，由Twitter开发并维护，用于快速构建美观、响应式、功能丰富...了解和掌握Bootstrap3 的基本原理和组件，将极大地提升前端开发效率，使得设计和开发响应式网站变得更加轻松。
Bootstrap5图标库bootstrap-icons大大简化了前端开发者在项目中添加图标的流程，减少了跨平台兼容性问题，并确保了与Bootstrap5风格的一致性，是构建现代网页应用时不可或缺的工具。同时，由于其开源性质，开发者还...
一个基本的Bootstrap表格由`<table>`标签开启，通过添加`.table`类来应用Bootstrap样式。表格的行（rows）由`<tr>`元素定义，而单元格（cells）则由`<td>`或`<th>`（表头）元素创建。通过使用`.table-striped`、`....
HTML是构建网页的基本语言，Bootstrap提供了一系列的HTML结构标记，如`.container`、`.row`和`.col-*-*`，这些可以帮助开发者快速搭建页面布局。同时，Bootstrap的组件如`.form-control`用于表单输入，`.dropdown`...
其次，模板中包含了Bootstrap的基本组件，如表格、表单控件、按钮等。登录界面通常包含用户名和密码输入框、登录按钮、可能还有记住我选项和忘记密码链接。这些在Bootstrap中都有现成的样式和交互设计，开发者只需...
4. **CSS样式**：BootstrapTable 自带了一些基本的样式，但为了自定义视觉效果，你可能还需要添加一些额外的CSS。例如，用于改变展开/折叠图标，或者调整展开项的背景色等。 5. **事件处理**：`treeview` 功能还...
同时，Bootstrap还提供了一些可选的JavaScript插件，如工具提示、弹出框和滚动spy等，这些可以通过引入额外的JavaScript文件来启用。 在实际项目中，你可以根据需求自定义Bootstrap，例如改变主题颜色、调整字体...
在视频教程中，你将学习如何设置基本的HTML结构，如何利用Bootstrap的类选择器来添加样式，以及如何结合JavaScript插件实现动态效果。通过实例项目，比如创建一个响应式的公司官网或者个人博客，你会了解如何将...
在这个“简单的ios应用页面展示bootstrap模板”中，我们将会探讨如何利用Bootstrap来创建一个iOS应用风格的网页界面。 首先，Bootstrap的核心特性在于其网格系统，它基于12列的布局，可以根据屏幕尺寸自动调整元素...
3. **bootstrap3.0实用组件插件完整版demo.rar**：此文件提供了一些Bootstrap 3.0的实用组件和插件的演示，包括但不限于滚动条、时间线、计时器、图表、轮播图等，有助于开发者了解如何在实际项目中应用这些功能。...
这个中文文档集包含了该版本的所有关键信息，帮助开发者更有效地理解和应用Bootstrap。 首先，我们来看看“全局 CSS 样式”部分。这部分详细介绍了Bootstrap的基本样式规则，包括字体设置、颜色方案、排版、链接...
通过学习这个资料包，你不仅能够了解Bootstrap的基本结构，还能掌握如何在实践中应用它。这将有助于提升你的前端开发技能，使你能够创建美观且响应式的网站，无论是在个人项目还是在专业工作中都能大显身手。记住，...
10. **动画和过渡**：Bootstrap 4.5.2包含了一些基本的动画和过渡效果，如`.fade`和`.show`类，可以轻松添加淡入淡出效果。 通过这个"bootstrap-4.5.2-例子"压缩包，开发者可以查看并学习到上述所有知识点的具体...
这种方法的基本思想是通过有放回抽样（bootstrap sampling）来从原始数据中构建大量的模拟样本（称为“bootstrap样本”），从而用这些样本来近似估计总体的性质。Bootstrap方法特别适用于小样本数据集，因为它不需要...