1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
|
<
html
>
<
head
>
<
link
rel
=
"stylesheet"
href
=
"http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css"
>
<!-- 可选的Bootstrap主题文件(一般不用引入) -->
<
link
rel
=
"stylesheet"
href
=
"http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap-theme.min.css"
>
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<
script
src
=
"http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"
></
script
>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<
script
src
=
"http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"
></
script
>
</
head
>
<
body
class
=
"index-html"
>
<
a
href
=
"#"
data-toggle
=
"tooltip"
title
=
"Some tooltip text!"
>Hover over me</
a
>
<!-- Generated markup by the plugin -->
<
div
class
=
"tooltip top"
role
=
"tooltip"
>
<
div
class
=
"tooltip-arrow"
></
div
>
<
div
class
=
"tooltip-inner"
>
Some tooltip text!
</
div
>
</
div
>
<
button
type
=
"button"
class
=
"btn btn-default"
data-toggle
=
"tooltip"
data-placement
=
"left"
title
=
"Tooltip on left"
>
Tooltip on left
</
button
>
<
button
type
=
"button"
class
=
"btn btn-default"
data-toggle
=
"tooltip"
data-placement
=
"top"
title
=
"Tooltip on top"
>Tooltip
on top
</
button
>
<
button
type
=
"button"
class
=
"btn btn-default"
data-toggle
=
"tooltip"
data-placement
=
"bottom"
title
=
"Tooltip on bottom"
>
Tooltip on bottom
</
button
>
<
button
type
=
"button"
class
=
"btn btn-default"
data-toggle
=
"tooltip"
data-placement
=
"right"
title
=
"Tooltip on right"
>
Tooltip on right
</
button
>
<
button
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?"
>Click to toggle popover
</
button
>
<!-- Button trigger modal -->
<
button
type
=
"button"
class
=
"btn btn-primary btn-lg"
data-toggle
=
"modal"
data-target
=
"#myModal"
>
Launch demo modal
</
button
>
<!-- Modal -->
<
div
class
=
"modal fade"
id
=
"myModal"
tabindex
=
"-1"
role
=
"dialog"
aria-labelledby
=
"myModalLabel"
aria-hidden
=
"true"
>
<
div
class
=
"modal-dialog"
>
<
div
class
=
"modal-content"
>
<
div
class
=
"modal-header"
>
<
button
type
=
"button"
class
=
"close"
data-dismiss
=
"modal"
><
span
aria-hidden
=
"true"
>×</
span
><
span
class
=
"sr-only"
>Close</
span
></
button
>
<
h4
class
=
"modal-title"
id
=
"myModalLabel"
>Modal title</
h4
>
</
div
>
<
div
class
=
"modal-body"
>
...
</
div
>
<
div
class
=
"modal-footer"
>
<
button
type
=
"button"
class
=
"btn btn-default"
data-dismiss
=
"modal"
>Close</
button
>
<
button
type
=
"button"
class
=
"btn btn-primary"
>Save changes</
button
>
</
div
>
</
div
>
</
div
>
</
div
>
</
body
>
<
script
type
=
"text/javascript"
>
$(function () {
$("[data-toggle='tooltip']").tooltip();
$("[data-toggle='popover']").popover();
});
</
script
>
</
html
>
|
本文转自 hgditren 51CTO博客,原文链接:http://blog.51cto.com/phpme/1851146,如需转载请自行联系原作者